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

Merge pull request #7 from medici/TP-12855-todo-list

Browse Source 
Tp 12855 todo list || Aman C
This commit is contained in:
Aman Chaturvedi
2022-12-09 14:45:58 +05:30
committed by GitHub Enterprise
parent b502491e48 c70e3552c9
commit cabfc83dfa
6 changed files with 167 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/screens/allCases/AllCases.tsx
View File

@@ -1,16 +1,19 @@
import TextInput from '../../../../RN-UI-LIB/src/components/TextInput';
import React from 'react';
import React, {useEffect} from 'react';
import {
ListRenderItemInfo, StyleSheet,
View,
VirtualizedList
} from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import Heading from '../../../../RN-UI-LIB/src/components/Heading';
import Text from '../../../../RN-UI-LIB/src/components/Text';
import { GenericStyles } from '../../../../RN-UI-LIB/src/styles';
import { COLORS } from '../../../../RN-UI-LIB/src/styles/colors';
import data from '../../../data/cases.json';
import { RootState } from '../../../store/store';
import { setCasesListData } from './allCasesSlice';
import { caseStatus, caseVerdict, Data, taskStatus, Type } from './interface';
import ListItem from './ListItem';
import SearchIcon from '../../../../RN-UI-LIB/src/Icons/SearchIcon';
@@ -80,48 +83,22 @@ const Seperator = () => <View style={styles.seperator} />;
const getItem = (item: Array<Data>, index: number) => item[index];
const AllCases = () => {
const todo = data.allCases.filter(data => data.pinnedRank);
const other = data.allCases.filter(data => !data.pinnedRank);
let dataForList: Data[] = [
{type: Type.FILTER, caseId: 12122}as Data
];
if (todo.length) {
dataForList.push({
type: Type.TODO_HEADER,
caseId: 11111221111,
} as Data);
todo.forEach(todo => dataForList.push({
type: Type.TODO,
...todo
}))
}
if(other.length){
if(todo.length){
dataForList.push({
type: Type.CASES_HEADER,
caseId: 111111111,
} as Data);
}
other.forEach(todo => dataForList.push({
type: Type.CASES,
...todo
} as Data))
}
const {compiledList, todoList} = useSelector((state: RootState) => state.allCases);
const dispatch = useDispatch();
useEffect(() => {
dispatch(setCasesListData(data.allCases));
}, [])
return (
<View>
<VirtualizedList
data={compiledList as Array<Data>}
stickyHeaderIndices={[0]}
data={dataForList as Array<Data>}
initialNumToRender={4}
renderItem={row => (
<Item data={row} todoList={todo} />
<Item data={row} todoList={todoList} />
)}
keyExtractor={item => item.caseId}
getItemCount={item => item.length}

52
src/components/screens/allCases/ListItem.tsx
View File

@@ -1,10 +1,20 @@
import {Pressable, StyleSheet, View} from 'react-native';
import React from 'react';
import {caseStatus, caseVerdict, caseVerdictAndColor, Data} from './interface';
import {
caseStatus,
caseVerdict,
caseVerdictAndColor,
Data,
Type,
} from './interface';
import Avatar from '../../../../RN-UI-LIB/src/components/Avatar';
import Text from '../../../../RN-UI-LIB/src/components/Text';
import Heading from '../../../../RN-UI-LIB/src/components/Heading';
import {GenericStyles} from '../../../../RN-UI-LIB/src/styles';
import {useDispatch, useSelector} from 'react-redux';
import {setPinnedRank} from './allCasesSlice';
import {RootState} from '../../../store/store';
import RoundCheckIcon from '../../../icons/RoundCheckIcon';
interface IListItem {
caseData: Data;
@@ -13,18 +23,30 @@ interface IListItem {
const ListItem: React.FC<IListItem> = props => {
const {caseData, compleatedList} = props;
const onClick = () => {
alert(caseData.caseId);
};
const onAvararPress = () => {
alert('clicked on avatar');
};
const {type, caseId} = caseData;
const dispatch = useDispatch();
if (!compleatedList && caseData.caseStatus === caseStatus.CLOSED) {
return null;
}
const {casesListMap} = useSelector((state: RootState) => state.allCases);
const handleAvatarClick = () => {
if (!type) {
dispatch(setPinnedRank(caseId));
}
};
const handleCaseClick = () => {
alert('case clicked')
}
const caseSelected = casesListMap?.[caseId].pinnedRank;
return (
// Todo kunal to add the page switching logic
<Pressable onPress={onClick}>
<Pressable onPress={handleCaseClick}>
<View
style={[
GenericStyles.ph16,
@@ -34,11 +56,15 @@ const ListItem: React.FC<IListItem> = props => {
]}>
<Pressable
style={[styles.avatarContainer, styles.alignSelf]}
onPress={onAvararPress}>
<Avatar
name={caseData.customerInfo.name}
dataURI={caseData.customerInfo.imageUrl}
/>
onPress={handleAvatarClick}>
{caseSelected ? (
<RoundCheckIcon />
) : (
<Avatar
name={caseData.customerInfo.name}
dataURI={caseData.customerInfo.imageUrl}
/>
)}
</Pressable>
<View style={[GenericStyles.ml8, styles.fb80]}>
<Heading numberOfLines={1} type={'h5'} bold dark>

88
src/components/screens/allCases/allCasesSlice.ts Normal file
View File

@@ -0,0 +1,88 @@
import {_map} from '@components/utlis/common';
import {createSlice} from '@reduxjs/toolkit';
import {caseStatus, caseVerdict, Data, taskStatus, Type} from './interface';
type ICasesMap = {[key: string]: Data};
interface IAllCasesSlice {
casesList: Data[];
todoList: Data[];
otherCasesList: Data[];
compiledList: Data[];
casesListMap: ICasesMap | null;
pinnedRankCount: number;
loading: boolean;
}
const initialState: IAllCasesSlice = {
casesList: [],
todoList: [],
otherCasesList: [],
compiledList: [],
casesListMap: null,
pinnedRankCount: 0,
loading: false,
};
const allCasesSlice = createSlice({
name: 'cases',
initialState,
reducers: {
setCasesListData: (state, action) => {
const todoList: Data[] = [];
const otherCasesList: Data[] = [];
const list: ICasesMap = action.payload.reduce(
(acc: ICasesMap, caseItem: Data) => {
acc[caseItem.caseId] = caseItem;
if (caseItem.pinnedRank) {
todoList.push(caseItem);
} else {
otherCasesList.push(caseItem);
}
return acc;
},
{},
);
if (todoList.length) {
todoList.unshift({
type: Type.TODO_HEADER,
caseId: -2,
} as Data);
if (otherCasesList.length) {
otherCasesList.unshift({
type: Type.CASES_HEADER,
caseId: -3,
} as Data);
}
}
state.compiledList = [
{
type: Type.FILTER,
caseId: -1,
} as Data,
...todoList,
...otherCasesList,
];
state.casesListMap = list;
state.casesList = action.payload;
state.otherCasesList = action.payload;
},
setPinnedRank: (state, action) => {
if (!state.casesListMap) {
return;
}
const caseId = action.payload;
const pinnedRank = state.casesListMap[caseId].pinnedRank;
if (pinnedRank) {
delete state.casesListMap[caseId].pinnedRank;
} else {
state.pinnedRankCount++;
state.casesListMap[caseId].pinnedRank = state.pinnedRankCount;
}
},
},
});
export const {setCasesListData, setPinnedRank} = allCasesSlice.actions;
export default allCasesSlice.reducer;

2
src/components/screens/allCases/interface.ts
View File

@@ -68,5 +68,5 @@ export interface Data {
detail: string;
status: taskStatus;
};
pinnedRank: number;
pinnedRank?: number;
}

25
src/icons/RoundCheckIcon.tsx Normal file
View File

@@ -0,0 +1,25 @@
import {IconProps} from '@components/Icons/types';
import * as React from 'react';
import Svg, {Rect, Mask, G, Path} from 'react-native-svg';
const RoundCheckIcon: React.FC<IconProps> = ({size = 32}) => (
<Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} fill="none">
<Rect width={size} height={size} rx={size / 2} fill="#0276FE" />
<Mask
id="mask0_754_16333"
maskUnits="userSpaceOnUse"
x={6}
y={6}
width={20}
height={20}>
<Rect x={6} y={6} width={20} height={20} fill="#D9D9D9" />
</Mask>
<G mask="url(#mask0_754_16333)">
<Path
d="M14.3333 17.3333L19.25 12.4167C19.4028 12.2639 19.5972 12.1875 19.8333 12.1875C20.0694 12.1875 20.2639 12.2639 20.4167 12.4167C20.5694 12.5694 20.6458 12.7639 20.6458 13C20.6458 13.2361 20.5694 13.4306 20.4167 13.5833L14.9167 19.0833C14.75 19.25 14.5556 19.3333 14.3333 19.3333C14.1111 19.3333 13.9167 19.25 13.75 19.0833L11.5833 16.9167C11.4306 16.7639 11.3542 16.5694 11.3542 16.3333C11.3542 16.0972 11.4306 15.9028 11.5833 15.75C11.7361 15.5972 11.9306 15.5208 12.1667 15.5208C12.4028 15.5208 12.5972 15.5972 12.75 15.75L14.3333 17.3333Z"
fill="white"
/>
</G>
</Svg>
);
export default RoundCheckIcon;

4
src/store/store.ts
View File

@@ -15,11 +15,13 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
import caseReducer from '../reducer/caseReducre';
import commonSlice from '../reducer/commonSlice';
import loginSlice from '../components/login/loginSlice';
import allCasesSlice from '../components/screens/allCases/allCasesSlice';
const rootReducer = combineReducers({
case: caseReducer,
common: commonSlice,
loginInfo: loginSlice
loginInfo: loginSlice,
allCases: allCasesSlice
});
const persistConfig = {