Notes

import React, {useState, useEffect} from 'react';
import {
SafeAreaView,
Text,
View,
useColorScheme,
Image,
TouchableOpacity,
StatusBar,
FlatList,
PermissionsAndroid,
StyleSheet,
Dimensions,
ActivityIndicator,
} from 'react-native';
import {Appbar} from 'react-native-paper';
import {Fonts} from '../../themes';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Feather from 'react-native-vector-icons/Feather';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import {useSelector} from 'react-redux';
import {useDispatch} from 'react-redux';
import dayjs from 'dayjs';
import CallLogs from 'react-native-call-log';
import customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);
const {width} = Dimensions.get('screen');
const colors = ['#0052d6', '#11998b', '#30821b'];
import {Menu, MenuDivider} from 'react-native-material-menu';
import {
setDateFilterRedux,
} from '../../../redux/refreshSlice';
const Home = ({navigation}) => {
const theme = useColorScheme();
const isDarkTheme = theme === 'dark';
const dispatch = useDispatch();
const [CallsData, setCallsData] = useState(null);
const [isloading, setisloading] = useState(false);
const [dateFilter, setDateFilter] = useState('Today');
const [clicked, setClicked] = useState(false);
const [count, setCount] = useState({});
const [duration, setDuration] = useState({});
const [groupedData, setgroupedData] = useState({});
const [visible, setVisible] = useState(false);
const hideMenu = () => setVisible(false);
const showMenu = () => setVisible(true);
const dropdownDateFilter = [
{value: 'Today'},
{value: 'Yesterday'},
{value: 'Week'},
{value: 'Month'},
{value: 'Year'},
{value: 'All Time'},
];

const handleDateFilter = txt => {
setDateFilter(txt);
dispatch(setDateFilterRedux(txt));
setClicked(!clicked);
setVisible(false);
};
async function fetchData() {
if (Platform.OS == 'android') {
setisloading(true);
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.READ_CALL_LOG,
{
title: 'Contact App needs to allow Call Log Permission',
message: 'Access your call logs',
buttonNeutral: 'Ask Me Later',
buttonNegative: 'Cancel',
buttonPositive: 'OK',
},
);

if (granted === PermissionsAndroid.RESULTS.GRANTED) {
const currentTimeStamp = new Date().getTime();
const todayTimeStampStartOfDay =
Math.floor(new Date().getTime() / (24 * 60 * 60 * 1000)) *
24 *
60 *
60 *
1000;

const timeStampOneDayAgo =
Math.floor(
(new Date().getTime() - 1 * 24 * 60 * 60 * 1000) /
(24 * 60 * 60 * 1000),
) *
24 *
60 *
60 *
1000;

const timeStampOneWeekAgo =
Math.floor(
(new Date().getTime() - 7 * 24 * 60 * 60 * 1000) /
(24 * 60 * 60 * 1000),
) *
24 *
60 *
60 *
1000;

const timeStampOneMonthAgo =
Math.floor(
(new Date().getTime() - 30 * 24 * 60 * 60 * 1000) /
(24 * 60 * 60 * 1000),
) *
24 *
60 *
60 *
1000;
const timeStampOneYearAgo =
Math.floor(
(new Date().getTime() - 365 * 24 * 60 * 60 * 1000) /
(24 * 60 * 60 * 1000),
) *
24 *
60 *
60 *
1000;

let timeStamp;
if (dateFilter === 'Today') {
timeStamp = todayTimeStampStartOfDay;
}
if (dateFilter === 'Yesterday') {
timeStamp = timeStampOneDayAgo;
}
if (dateFilter === 'Week') {
timeStamp = timeStampOneWeekAgo;
}
if (dateFilter === 'Month') {
timeStamp = timeStampOneMonthAgo;
}
if (dateFilter === 'Year') {
timeStamp = timeStampOneYearAgo;
}

const filter = {
minTimestamp: timeStamp,
maxTimestamp:
dateFilter === 'Yesterday'
? todayTimeStampStartOfDay
: currentTimeStamp,
};
CallLogs.load(-1, filter).then(c => setCallsData(c));
} else {
alert('Call Log permission denied');
}
setisloading(false);
} catch (e) {
alert(e);
}
} else {
alert(
'Sorry You cant get call logs in iOS devices because of the security concern,',
);
}
}
useEffect(() => {
fetchData();
}, [dateFilter]);
const DateFilter = useSelector(state => state.refresh.DateFilter);
const handleIncoming = () => {
navigation.navigate('IncomingCallsHome');
};
const handleAllCalls = () => {
navigation.navigate('AllCallsHome');
};
const handleOutgoing = () => {
navigation.navigate('OutGogingHome');
};
const handleMissed = () => {
navigation.navigate('MissedCallsHome');
};
const handleRejected = () => {
navigation.navigate('RejectedCallsHome');
};

const groupByAge = data => {
const groups = {};
data.forEach(item => {
const age = item.phoneNumber;
if (!groups[age]) {
groups[age] = [];
}
groups[age].push(item);
});
return groups;
};
const data = [
{
id: '1',
title: 'Total Phone Calls',
icon: isDarkTheme
? require('../../assets/whitecall-log.png')
: require('../../assets/call-log.png'),
count: count?.all,
duration: duration['outDuration'] + duration['inDuration'],
onPress: handleAllCalls,
},
{
id: '2',
title: 'Incoming Calls',
iconComponent: <Feather name="phone-incoming" size={25} color="green" />,
count: count?.incoming,
duration: duration['inDuration'],
onPress: handleIncoming,
},
{
id: '3',
title: 'Outgoing Calls',
iconComponent: <Feather name="phone-outgoing" size={25} color="orange" />,
count: count?.outgoing,
duration: duration['outDuration'],
onPress: handleOutgoing,
},
{
id: '4',
title: 'Missed Calls',
iconComponent: (
<MaterialIcons name="phone-missed" size={25} color="red" />
),
count: count?.missed,
duration: 0, // Optional, if there's no duration for missed calls
onPress: handleMissed,
},
{
id: '5',
title: 'Rejected Calls',
iconComponent: <Feather name="phone-missed" size={30} color="#8B1C1A" />,
count: count?.unknown,
duration: 0,
onPress: handleRejected,
fullWidth: true,
},
];

useEffect(() => {
if (CallsData && CallsData.length > 0) {
setgroupedData(groupByAge(CallsData));
}
}, [CallsData]);

const filterByDate = (value, type) => {
return value.type === type;
};

useEffect(() => {
let outD = 0;
CallsData &&
CallsData?.filter(i => filterByDate(i, 'OUTGOING'))?.forEach(i => {
outD = outD + Number(i.duration);
});
let incD = 0;
CallsData &&
CallsData?.filter(i => filterByDate(i, 'INCOMING'))?.forEach(i => {
incD = incD + Number(i.duration);
});

let a = {
outDuration: outD,
inDuration: incD,
};

let c = {
incoming:
CallsData &&
CallsData?.filter(li => filterByDate(li, 'INCOMING')).length,
outgoing:
CallsData &&
CallsData?.filter(li => filterByDate(li, 'OUTGOING')).length,
missed:
CallsData && CallsData?.filter(li => filterByDate(li, 'MISSED')).length,
unknown:
CallsData &&
CallsData?.filter(li => filterByDate(li, 'UNKNOWN')).length,
all:
CallsData &&
CallsData?.filter(li => filterByDate(li, 'INCOMING')).length +
CallsData?.filter(li => filterByDate(li, 'MISSED')).length +
CallsData?.filter(li => filterByDate(li, 'OUTGOING')).length +
CallsData?.filter(li => filterByDate(li, 'UNKNOWN')).length,
};
setCount(c);

setDuration(a);
}, [CallsData, dateFilter]);

useEffect(() => {
let dateTimeArr = [];
let arr = [];
arr = CallsData && CallsData.map(h => h.dateTime);
arr?.forEach(dt => {
const format = 'DD-MMM-YYYY h:mm:ss A';
const date = dayjs(dt, format);
dateTimeArr.push(date);
});
}, [CallsData, dateFilter]);
useEffect(() => {
setDateFilter(DateFilter);
}, [DateFilter]);
useEffect(() => {
setDateFilter(DateFilter);
}, []);

const renderItem = ({item}) => (
<View
style={{
marginHorizontal: item.fullWidth ? 15 : 10,
marginTop: 20,
marginBottom: 5,
backgroundColor: isDarkTheme ? 'black' : 'white',
borderRadius: 10,
width: item.fullWidth ? '95%' : '45%',
height: 120,
}}>
<TouchableOpacity onPress={item.onPress}>
<View style={{flexDirection: 'row', marginTop: 10}}>
{item.icon ? (
<Image
style={{
height: 30,
width: 30,
resizeMode: 'contain',
marginLeft: 20,
marginTop: 5,
}}
source={item.icon}
/>
) : (
<Text
style={{
height: 30,
width: 30,
resizeMode: 'contain',
marginLeft: 20,
marginTop: 5,
}}>
{item.iconComponent}
</Text>
)}
<Text
allowFontScaling={false}
numberOfLines={1}
style={{
marginLeft: 10,
color: isDarkTheme ? '#DCDCDC' : '#696969',
fontFamily: Fonts.Montserrat_Medium,
fontSize: 12,
marginTop: 10,
width: '70%',
}}>
{item.title}
</Text>
</View>
{isloading ? (
<ActivityIndicator color="#e80010" size="small" />
) : (
<View>
<Text
allowFontScaling={false}
numberOfLines={1}
style={{
color: isDarkTheme ? '#DCDCDC' : '#696969',
fontFamily: Fonts.Montserrat_Bold,
fontSize: 18,
textAlign: 'center',
marginTop: 5,
}}>
{item.count}
</Text>
</View>
)}
{item.duration !== undefined && (
<View style={{flexDirection: 'row', marginTop: 10, marginBottom: 10}}>
<Ionicons
name="time-outline"
size={20}
style={{marginLeft: 15}}
color="grey"
/>
<Text
allowFontScaling={false}
numberOfLines={1}
style={{
marginLeft: 20,
color: isDarkTheme ? '#DCDCDC' : '#696969',
fontFamily: Fonts.Montserrat_Medium,
fontSize: 12,
marginTop: 3,
}}>
{`${Math.floor(item.duration / 3600)}h : ${
Math.floor(item.duration / 60) % 60
}m : ${item.duration % 60}s`}
</Text>
</View>
)}
</TouchableOpacity>
</View>
);
return (
<SafeAreaView
style={{
backgroundColor: isDarkTheme == true ? '#28282B' : 'whitesmoke',
flex: 1,
}}>
<StatusBar
backgroundColor="#12344d"
barStyle={isDarkTheme == true ? 'light-content' : 'light-content'}
/>

<Appbar.Header style={{backgroundColor: '#12344d'}}>
<View>
<Image
style={{
height: 30,
width: 30,
resizeMode: 'contain',
marginLeft: 15,
}}
source={
isDarkTheme == true
? require('../../assets/IqLogo.png')
: require('../../assets/IqLogo.png')
}
/>
</View>
<Appbar.Content
title="Home"
titleStyle={{
color: 'white',
fontFamily: Fonts.Montserrat_SemiBold,
fontSize: 20,
fontWeight: '700',
textAlign: 'center',
}}
/>
<Appbar.Action
icon="refresh"
color={'white'}
size={20}
onPress={fetchData}
/>
<Appbar.Action
icon="filter"
color={'white'}
size={20}
onPress={showMenu}
/>
</Appbar.Header>
<Text
style={{
marginTop: 15,
marginLeft: 20,
fontSize: 12,
color: isDarkTheme == true ? '#DCDCDC' : '#696969',
fontFamily: Fonts.Montserrat_Medium,
}}>
{dateFilter}
</Text>
<View
style={{
alignItems: 'flex-end',
justifyContent: 'flex-end',
marginRight: 10,
backgroundColor: isDarkTheme == true ? '#28282B' : 'whitesmoke',
}}>
<Menu
visible={visible}
onRequestClose={hideMenu}
style={{
backgroundColor: isDarkTheme == true ? '#28282B' : 'whitesmoke',
marginTop: -50,
width: '40%',
alignItems: 'flex-end',
justifyContent: 'flex-end',
marginHorizontal: 10,
}}>
<View style={{width: '90%'}}>
{/* <View> */}
<FlatList
data={dropdownDateFilter}
scrollEnabled={true}
keyExtractor={(item, index) => item.value.toString()}
renderItem={({item, index}) => {
return (
<TouchableOpacity
style={{
width: '95%',
alignSelf: 'center',
height: 40,
justifyContent: 'center',
backgroundColor:
isDarkTheme == true ? '#28282B' : 'whitesmoke',
}}
onPress={() => {
handleDateFilter(item.value);
}}>
<Text
style={{
fontSize: 14,
color: isDarkTheme == true ? 'white' : 'black',
fontFamily: Fonts.Montserrat_Medium,
marginHorizontal: 10,
marginTop: 'auto',
marginBottom: 'auto',
}}>
{item.value}
</Text>
</TouchableOpacity>
);
}}
/>
</View>
<MenuDivider />
</Menu>
</View>
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={item => item.id}
numColumns={2}
columnWrapperStyle={{justifyContent: 'space-around'}}
contentContainerStyle={{
backgroundColor: isDarkTheme ? '#28282B' : 'whitesmoke',
}}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default Home;