Untitled
unknown
plain_text
2 years ago
14 kB
3
Indexable
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