varnitgoyal95/address-verification-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

all cases page list view

Browse Source
This commit is contained in:
aman.singh
2022-12-08 01:54:56 +05:30
parent 427f9f7dcf
commit 235aa75a98
5 changed files with 2063 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
ProtectedRouter.tsx
View File

@@ -13,6 +13,7 @@ import userData from './src/data/userData.json';
import {getUniqueId} from 'react-native-device-info';
import {useAppDispatch} from './src/hooks';
import {setAuthData} from './src/reducer/commonSlice';
import AllCases from './src/components/screens/allCases/AllCases';
const Stack = createNativeStackNavigator();
@@ -65,7 +66,7 @@ const ProtectedRouter = () => {
<>
<Stack.Screen
name="Login"
component={LoginScreen}
component={Login}
options={{
header: () => null,
}}

321
src/components/screens/allCases/AllCases.tsx Normal file
View File

@@ -0,0 +1,321 @@
import {
ListRenderItemInfo,
Pressable,
StyleSheet,
View,
VirtualizedList,
} from 'react-native';
import React from 'react';
import data from '../../../data/cases.json';
import Heading from '../../../../RN-UI-LIB/src/components/Heading';
import {GenericStyles} from '../../../../RN-UI-LIB/src/styles';
import Avatar from '../../../../RN-UI-LIB/src/components/Avatar';
import Text from '../../../../RN-UI-LIB/src/components/Text';
import {COLORS} from '../../../../RN-UI-LIB/src/styles/colors';
import {SwipeContainer} from './SwipeContainer';
interface Data {
type?: 'TODO' | 'TODO_HEADER' | 'CASES' | 'CASES_HEADER';
caseId: number;
updatedAt: number;
caseStatus: string;
caseVerdict: string;
displayTag: string;
customerInfo: {
name: string;
imageUrl: string;
};
currentTask: {
title: string;
detail: string;
status: string;
};
pinnedRank: number;
}
interface IItem {
data: ListRenderItemInfo<Data>;
todoList: Array<Data>;
}
const CardItem: React.FC<Data> = props => {
const propData = props;
return (
// Todo kunal to add the page switching logic
<Pressable onPress={() => alert(propData.caseId)}>
<View style={[GenericStyles.ph16, styles.pv12, GenericStyles.row]}>
<View style={[styles.avatarContainer, {alignSelf: 'center'}]}>
<Avatar
name={propData.customerInfo.name}
dataURI={propData.customerInfo.imageUrl}
/>
</View>
<View style={[GenericStyles.ml8, {flexBasis: '80%'}]}>
<Heading type={'h5'} bold dark>
{propData.customerInfo.name}
</Heading>
<Text dark ellipsizeMode="tail" numberOfLines={2}>
{propData.currentTask.title} :{' '}
<Text>
{propData.currentTask.detail ||
'Gokarna is a small temple town located in Uttara Kannada district of Karnataka state in India, It has a population of around 20,000. The main temple and '}{' '}
</Text>
</Text>
<Text small bold style={{color: COLORS.TEXT.GREEN}}>
IN PROGRESS
</Text>
</View>
</View>
</Pressable>
);
};
const Item = (props: IItem) => {
const propData = props.data.item;
const todoList = props.todoList;
let compleatdCount = 0;
todoList.forEach(todo =>
todo.caseStatus === 'compleated' ? compleatdCount++ : compleatdCount,
);
console.log(todoList);
switch (propData.type) {
case 'CASES':
return <CardItem {...propData} />;
case 'TODO':
return (
<SwipeContainer
onSwipeLeft={() => <Text>Left</Text>}
onSwipeRight={() => <Text>Right</Text>}>
<CardItem {...propData} />
</SwipeContainer>
);
case 'CASES_HEADER':
return (
<View style={[GenericStyles.ph16, styles.pv12]}>
<Heading dark bold type={'h5'}>
Other cases
</Heading>
</View>
);
case 'TODO_HEADER':
return (
<View style={[GenericStyles.ph16, styles.pv12]}>
<Heading dark bold type={'h5'}>
Today's to do list
</Heading>
<View
style={[GenericStyles.row, GenericStyles.alignCenter]}>
<Text light small>
{todoList.length} pending
</Text>
<View
style={[
styles.dot,
GenericStyles.ml8,
GenericStyles.mr8,
]}
/>
<Text light small>
{compleatdCount} Compleated
</Text>
</View>
</View>
);
default:
break;
}
};
const Seperator = () => <View style={styles.seperator} />;
const getItem = (item: Array<Data>, index: number) => item[index];
const AllCases = () => {
const dataForTODOList = [
{
caseId: 1,
updatedAt: 1670434722030,
caseStatus: 'TODO',
caseVerdict: 'COMPLEATED',
displayTag: "don't know",
customerInfo: {
name: 'Kunal Sharma',
imageUrl:
'https://d33wubrfki0l68.cloudfront.net/2a3556a09e73a07aacedb2bcfaa39512cd37a3f4/68f50/img/templates/akshay-kumar-scheme-pose.png',
},
currentTask: {
title: 'comms',
detail: '',
status: 'unVerified',
},
pinnedRank: 1,
},
{
caseId: 2,
updatedAt: 1670434722030,
caseStatus: 'TODO',
caseVerdict: 'COMPLEATED',
displayTag: "don't know",
customerInfo: {
name: 'Kunal Sharma',
imageUrl:
'https://d33wubrfki0l68.cloudfront.net/2a3556a09e73a07aacedb2bcfaa39512cd37a3f4/68f50/img/templates/akshay-kumar-scheme-pose.png',
},
currentTask: {
title: 'comms',
detail: '',
status: 'unVerified',
},
pinnedRank: 2,
},
{
caseId: 3,
updatedAt: 1670434722030,
caseStatus: 'TODO',
caseVerdict: 'COMPLEATED',
displayTag: "don't know",
customerInfo: {
name: 'Kunal Sharma',
imageUrl:
'https://d33wubrfki0l68.cloudfront.net/2a3556a09e73a07aacedb2bcfaa39512cd37a3f4/68f50/img/templates/akshay-kumar-scheme-pose.png',
},
currentTask: {
title: 'comms',
detail: '',
status: 'unVerified',
},
pinnedRank: 3,
},
{
caseId: 4,
updatedAt: 1670434722030,
caseStatus: 'TODO',
caseVerdict: 'COMPLEATED',
displayTag: "don't know",
customerInfo: {
name: 'Kunal Sharma',
imageUrl:
'https://d33wubrfki0l68.cloudfront.net/2a3556a09e73a07aacedb2bcfaa39512cd37a3f4/68f50/img/templates/akshay-kumar-scheme-pose.png',
},
currentTask: {
title: 'comms',
detail: '',
status: 'unVerified',
},
pinnedRank: 4,
},
{
caseId: 5,
updatedAt: 1670434722030,
caseStatus: 'TODO',
caseVerdict: 'COMPLEATED',
displayTag: "don't know",
customerInfo: {
name: 'Kunal Sharma',
imageUrl:
'https://d33wubrfki0l68.cloudfront.net/2a3556a09e73a07aacedb2bcfaa39512cd37a3f4/68f50/img/templates/akshay-kumar-scheme-pose.png',
},
currentTask: {
title: 'comms',
detail: '',
status: 'unVerified',
},
pinnedRank: 5,
},
];
let dataForList: Data[] = [];
if (dataForTODOList.length) {
dataForList.push({
type: 'TODO_HEADER',
caseId: 111111111,
updatedAt: 111111111,
caseStatus: 'string',
caseVerdict: 'string',
displayTag: 'string',
customerInfo: {
name: 'string',
imageUrl: 'string',
},
currentTask: {
title: 'string',
detail: 'string',
status: 'string',
},
pinnedRank: 111111111,
});
dataForTODOList.forEach(item => {
dataForList.push({
type: 'TODO',
...item,
});
});
dataForList.push({
type: 'CASES_HEADER',
caseId: 11111111231,
updatedAt: 111111111,
caseStatus: 'string',
caseVerdict: 'string',
displayTag: 'string',
customerInfo: {
name: 'string',
imageUrl: 'string',
},
currentTask: {
title: 'string',
detail: 'string',
status: 'string',
},
pinnedRank: 111111111,
});
}
data.allCases.forEach(item => {
if (!dataForTODOList.some(id => id.caseId === item.caseId)) {
dataForList.push({
type: 'CASES',
...item,
});
}
});
return (
<View>
<VirtualizedList
data={dataForList as Array<Data>}
initialNumToRender={4}
renderItem={row => (
<Item data={row} todoList={dataForTODOList} />
)}
keyExtractor={item => item.caseId}
getItemCount={item => item.length}
getItem={getItem}
ItemSeparatorComponent={<Seperator />}
/>
</View>
);
};
const styles = StyleSheet.create({
seperator: {
backgroundColor: COLORS.BORDER.PRIMARY,
height: 2,
},
pv12: {
paddingVertical: 12,
},
avatarContainer: {
height: 40,
width: 40,
},
dot: {
height: 5,
width: 5,
borderRadius: 2.5,
backgroundColor: COLORS.TEXT.LIGHT,
},
});
export default AllCases;

36
src/components/screens/allCases/SwipeContainer.tsx Normal file
View File

@@ -0,0 +1,36 @@
import React, {FC, ReactNode} from 'react';
import {View, Animated, PanResponder} from 'react-native';
type Props = {
children: ReactNode;
onSwipeRight: () => void;
onSwipeLeft: () => void;
};
const SWIPE_THRESHOLD = 200;
export const SwipeContainer: FC<Props> = ({
children,
onSwipeLeft,
onSwipeRight,
}) => {
const panResponder = PanResponder.create({
onStartShouldSetPanResponder: (_evt, _gestureState) => true,
onPanResponderRelease: (_evt, gestureState) => {
const {dx} = gestureState;
if (dx > SWIPE_THRESHOLD) {
onSwipeRight();
}
if (dx < -SWIPE_THRESHOLD) {
onSwipeLeft();
}
// If needed, could add up and down swipes here with `gestureState.dy`
},
});
return (
<Animated.View {...panResponder.panHandlers}>
<View>{children}</View>
</Animated.View>
);
};

0
src/components/screens/index.ts Normal file
View File

1704
src/data/cases.json Normal file
View File

File diff suppressed because it is too large Load Diff