Untitled
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