91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import {
|
|
ActivityIndicator,
|
|
RefreshControl,
|
|
SafeAreaView,
|
|
ScrollView,
|
|
StyleSheet,
|
|
View,
|
|
} from 'react-native';
|
|
import { GenericStyles } from '../../../RN-UI-LIB/src/styles';
|
|
import { COLORS } from '../../../RN-UI-LIB/src/styles/colors';
|
|
import { getPerformanceMetrics } from '../../action/agentPerformanceAction';
|
|
import { CLICKSTREAM_EVENT_NAMES } from '../../common/Constants';
|
|
import { useAppDispatch, useAppSelector } from '../../hooks';
|
|
import { addClickstreamEvent } from '../../services/clickstreamEventService';
|
|
import DashboardHeader from './DashboardHeader';
|
|
import ExternalAgentDashboard from './ExternalAgentDashboard';
|
|
import InternalAgentDashboard from './InternalAgentDashboard';
|
|
import { getAnomalyDetails } from './AnomalyTracker/utils';
|
|
import { AnomalyType } from './AnomalyTracker/constants';
|
|
|
|
const Dashboard = () => {
|
|
const [refreshing, setRefreshing] = React.useState(false);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const caseDetailsIds = useAppSelector((state) => state.allCases.caseDetails);
|
|
const isExternalAgent = useAppSelector((state) => state.user?.isExternalAgent);
|
|
|
|
const dispatch = useAppDispatch();
|
|
|
|
const fetchAgentPerformanceMetrics = () => {
|
|
setIsLoading(true);
|
|
dispatch(
|
|
getPerformanceMetrics(Object.keys(caseDetailsIds ?? {}), isExternalAgent, setIsLoading)
|
|
);
|
|
// TODO: Uncomment when api is added by backend
|
|
// if (!isExternalAgent) {
|
|
// dispatch(getAnomalyDetails(AnomalyType.OPEN, {}, false));
|
|
// dispatch(getAnomalyDetails(AnomalyType.RESOLVED, {}, false));
|
|
// }
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchAgentPerformanceMetrics();
|
|
addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_PERFORMANCE_DASHBOARD_PAGE_LOAD, {});
|
|
}, []);
|
|
|
|
const onRefresh = React.useCallback(() => {
|
|
setRefreshing(true);
|
|
fetchAgentPerformanceMetrics();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (refreshing && !isLoading) {
|
|
setRefreshing(false);
|
|
}
|
|
}, [isLoading]);
|
|
|
|
if (isLoading && !refreshing)
|
|
return (
|
|
<View style={[GenericStyles.fill, GenericStyles.centerAlignedRow]}>
|
|
<ActivityIndicator size={'large'} color={COLORS.BASE.BLUE} />
|
|
</View>
|
|
);
|
|
|
|
return (
|
|
<SafeAreaView style={[GenericStyles.fill, styles.container]}>
|
|
<View>
|
|
<DashboardHeader />
|
|
<ScrollView
|
|
style={styles.scrollViewContainer}
|
|
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
|
|
>
|
|
{isExternalAgent ? <ExternalAgentDashboard /> : <InternalAgentDashboard />}
|
|
</ScrollView>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
backgroundColor: COLORS.BACKGROUND.GREY_LIGHT,
|
|
position: 'relative',
|
|
},
|
|
scrollViewContainer: {
|
|
marginTop: 90,
|
|
},
|
|
});
|
|
|
|
export default Dashboard;
|