Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
14 kB
3
Indexable
Never
import React, { useState } from "react";
import { View, Text, Card } from "react-native-ui-lib";
import { TouchableOpacity } from "react-native-gesture-handler";
import colors from "../../rb-constants/colors";
import { useGetLatestReport } from "../../../hooks/query/report";
import DateFormat from "../../rb-components/DateFormat";
import { Row } from "../../rb-components/Grid";
import TextCard from "./TextCard";
import { nFormatter } from "../../../utils/number_formatter";
import { useReportBack } from "../../../context";

function TrafficSocial() {
  const {
    store: { company },
  } = useReportBack();
  const { data: rapor } = useGetLatestReport();
  const [selectedCompany, setSelectedCompany] = useState({})


  const { data: report } = useGetLatestReport();
  const [isActive, setIsActive] = useState(false);
  const [data, setData] = useState(
    report?.data?.analytics?.sessionsBySocialNetwork
  );
  const [activeButton, setActiveButton] = useState(null);

  const handlePress = (buttonName: any) => {
    setActiveButton(buttonName);
    let title;
    switch (buttonName) {
      case "SOCIAL":
        setData(report?.data?.analytics?.sessionsBySocialNetwork);
        break;
      case "REFERRAL":
        setData(report?.data?.analytics?.revenueBySocialNetwork);
        break;
      case "ORGANIC":
        setData(report?.data?.analytics?.sessionsBySocialNetwork);
        break;
      default:
        setData([]);
        break;
    }
  };
  const isButtonActive = (buttonName: any) => {
    return activeButton === buttonName;
  };
  console.log(data?.[0]?.sessions, "fdsg");
  const a: number = 1;
  return (
    <View flex>
      {a == 1 ? (
        <>
          <View backgroundColor={colors.White} marginT-10 row center>
            <TouchableOpacity
              style={{
                borderWidth: 2,
                borderColor: isButtonActive("SOCIAL")
                  ? colors.Orange
                  : colors.gray,
                backgroundColor: isButtonActive("SOCIAL")
                  ? colors.Orange
                  : colors.White,
                borderRadius: 40,
                width: 100,
                padding: 10,
                marginRight: 10,
              }}
              onPress={() => handlePress("SOCIAL")}
            >
              <View center spread>
                <Text>SOCIAL</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity
              style={{
                borderWidth: 2,
                borderColor: isButtonActive("REFERRAL")
                  ? colors.Orange
                  : colors.gray,
                backgroundColor: isButtonActive("REFERRAL")
                  ? colors.Orange
                  : colors.White,
                borderRadius: 40,
                width: 100,
                padding: 10,
                marginRight: 10,
              }}
              onPress={() => handlePress("REFERRAL")}
            >
              <View center>
                <Text>REFERRAL</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity
              style={{
                borderWidth: 2,
                borderColor: isButtonActive("ORGANIC")
                  ? colors.Orange
                  : colors.gray,
                backgroundColor: isButtonActive("ORGANIC")
                  ? colors.Orange
                  : colors.White,
                borderRadius: 40,
                width: 100,
                padding: 10,
                marginRight: 10,
              }}
              onPress={() => handlePress("ORGANIC")}
            >
              <View center>
                <Text>ORGANIC</Text>
              </View>
            </TouchableOpacity>
          </View>
          <Card
            borderRadius={24}
            containerStyle={{
              borderColor: colors.gray,
              borderWidth: 1,
              height: 110,
              padding: 16,
              margin: 15,
            }}
          >
            <View center>
              <Text orange40 initials>
                {nFormatter(data?.[0]?.sessions ?? 0, 2) ?? "-"}
              </Text>
              <Text gray style={{ fontSize: 20 }}>
                
              </Text>
            </View>
          </Card>
          <View flex center row marginB-10 >
            <Card
              borderRadius={24}
              containerStyle={{
                borderColor: colors.gray,
                borderWidth: 1,
                height: 100,
                width: 150,
                padding: 16,
                margin: 10,
              }}
            >
              <View center>
                <Text orange40 initials>
                  {nFormatter(data?.[4]?.sessions ?? 0, 2) ?? "-"}
                </Text>
                <Text gray style={{ fontSize: 20 }}>
                  Facebook
                </Text>
              </View>
            </Card>
            <Card
              borderRadius={24}
              containerStyle={{
                borderColor: colors.gray,
                borderWidth: 1,
                height: 100,
                width: 150,
                padding: 16,
                margin: 10,
              }}
            >
              <View center>
                <Text orange40 initials>
                  {nFormatter(data?.[12]?.sessions ?? 0, 2) ?? "-"}
                </Text>
                <Text gray style={{ fontSize: 20 }}>
                  Instagram
                </Text>
              </View>
            </Card>
          </View>
          <View row flex center marginB--10>
            <Card
              borderRadius={24}
              containerStyle={{
                borderColor: colors.gray,
                borderWidth: 1,
                height: 100,
                width: 150,
                padding: 16,
                margin: 10
              }}
            >
              <View center>
                <Text orange40 initials>
                  {nFormatter(data?.[6]?.sessions ?? 0, 2) ?? "-"}
                </Text>
                <Text gray style={{ fontSize: 20 }}>
                  Twitter
                </Text>
              </View>
            </Card>

            <Card
              borderRadius={24}
              containerStyle={{
                borderColor: colors.gray,
                borderWidth: 1,
                height: 100,
                width: 150,
                padding: 16,
                margin: 10,
              }}
            >
              <View center>
                <Text orange40 initials>
                  {nFormatter(data?.[10]?.sessions ?? 0, 2) ?? "-"}
                </Text>
                <Text gray style={{ fontSize: 20 }}>
                  Pinterest
                </Text>
              </View>
            </Card>
          </View>
          <View row flex center marginT-10>
            <Card
              borderRadius={24}
              containerStyle={{
                borderColor: colors.gray,
                borderWidth: 1,
                height: 100,
                width: 150,
                padding: 16,
                margin: 10,
              }}
            >
              <View center>
                <Text orange40 initials>
                  {nFormatter(data?.[2]?.sessions ?? 0, 2) ?? "-"}
                </Text>
                <Text gray style={{ fontSize: 20 }}>
                  Linkedin
                </Text>
              </View>
            </Card>
            <Card
              borderRadius={24}

              containerStyle={{
                borderColor: colors.gray,
                borderWidth: 1,
                height: 100,
                width: 150,
                padding: 16,
                margin: 10,
              }}
            >
              <View center>
                <Text orange40 initials>
                  {nFormatter(data?.[8]?.sessions ?? 0, 2) ?? "-"}
                </Text>
                <Text gray style={{ fontSize: 20 }}>
                  Youtube
                </Text>
              </View>
            </Card>
          </View>
          <DateFormat />
        </>
      ) : (
        <>
          {/* <View flex-1 margin-2>
            <View row centerH>
              <View row center backgroundColor={colors.White} marginT-10>
                <TouchableOpacity
                  style={{
                    borderWidth: 2,
                    borderColor: isActive ? colors.Orange : colors.gray,
                    backgroundColor: isActive ? colors.Orange : colors.White,
                    borderRadius: 40,
                    width: 150,
                    padding: 10,
                    marginRight: 10,
                  }}
                  onPress={handlePress}
                >
                  <View center spread>
                    <Text>TRANSACTIONS</Text>
                  </View>
                </TouchableOpacity>
              </View>
              <View row center backgroundColor={colors.White} marginT-10>
                <TouchableOpacity
                  style={{
                    borderWidth: 2,
                    borderColor: isActive ? colors.Orange : colors.gray,
                    backgroundColor: isActive ? colors.Orange : colors.White,
                    borderRadius: 40,
                    width: 100,
                    padding: 10,
                    marginRight: 10,
                  }}
                  onPress={handlePress}
                >
                  <View center>
                    <Text>REVENUE</Text>
                  </View>
                </TouchableOpacity>
              </View>
            </View>
            <Card
              borderRadius={24}
              padding-20
              margin-5
              containerStyle={{
                borderColor: colors.gray,
                borderWidth: 1,
                height: 110,
                padding: 16,
                margin: 10,
              }}
            >
              <View center>
                <Text orange40 initials>
                  {nFormatter(report?.data?.analytics?.basic?.users ?? 0, 2) ??
                    "-"}
                </Text>
                <Text gray style={{ fontSize: 20 }}>
                  Total Social Traffic
                </Text>
              </View>
            </Card>
            <View>
              <Row>
                <Card
                  borderRadius={15}
                  padding-20
                  margin-5
                  containerStyle={{
                    borderColor: colors.gray,
                    borderWidth: 1,
                    height: 100,
                  }}
                >
                  <TextCard
                    description={"Organic Search"}
                    value={
                      nFormatter(
                        report?.data?.analytics?.transactionsBytopChannels?.[0]
                          ?.sessions ?? 0,
                        2
                      ) ?? "-"
                    }
                    change={
                      nFormatter(
                        report?.data?.analytics?.basic?.pageViewChange ?? 0,
                        2
                      ) ?? "-"
                    }
                  />
                </Card>
                <Card
                  borderRadius={15}
                  padding-20
                  margin-5
                  containerStyle={{
                    borderColor: colors.gray,
                    borderWidth: 1,
                    height: 100,
                  }}
                >
                  <TextCard
                    description={"Direct"}
                    value={
                      nFormatter(
                        report?.data?.analytics?.basic?.pageView ?? 0,
                        2
                      ) ?? "-"
                    }
                    change={
                      nFormatter(
                        report?.data?.analytics?.basic?.pageViewChange ?? 0,
                        2
                      ) ?? "-"
                    }
                  />
                </Card>
              </Row>
              <Row>
                <Card
                  borderRadius={15}
                  padding-20
                  margin-5
                  containerStyle={{
                    borderColor: colors.gray,
                    borderWidth: 1,
                    height: 100,
                  }}
                >
                  <TextCard
                    description={"Referral"}
                    value={
                      nFormatter(
                        report?.data?.analytics?.basic?.pageView ?? 0,
                        2
                      ) ?? "-"
                    }
                    change={
                      nFormatter(
                        report?.data?.analytics?.basic?.pageViewChange ?? 0,
                        2
                      ) ?? "-"
                    }
                  />
                </Card>
                <Card
                  borderRadius={15}
                  padding-20
                  margin-5
                  containerStyle={{
                    borderColor: colors.gray,
                    borderWidth: 1,
                    height: 100,
                  }}
                >
                  <TextCard
                    description={"Social"}
                    value={
                      nFormatter(
                        report?.data?.analytics?.basic?.pageView ?? 0,
                        2
                      ) ?? "-"
                    }
                    change={
                      nFormatter(
                        report?.data?.analytics?.basic?.pageViewChange ?? 0,
                        2
                      ) ?? "-"
                    }
                  />
                </Card>
              </Row>
            </View>
          </View>
          <DateFormat /> */}
        </>
      )
      }
    </View >
  );
}
export default TrafficSocial;

butona tıklanıldığında en üstteki cardın içindeki yazı butonun ismi olsun