diff --git a/src/components/screens/allCases/AllCases.tsx b/src/components/screens/allCases/AllCases.tsx index 3c6fb9d0..5eed666c 100644 --- a/src/components/screens/allCases/AllCases.tsx +++ b/src/components/screens/allCases/AllCases.tsx @@ -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 = () => ; const getItem = (item: Array, 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 ( } stickyHeaderIndices={[0]} - data={dataForList as Array} initialNumToRender={4} renderItem={row => ( - + )} keyExtractor={item => item.caseId} getItemCount={item => item.length} diff --git a/src/components/screens/allCases/ListItem.tsx b/src/components/screens/allCases/ListItem.tsx index b4c768e8..a7ee8b27 100644 --- a/src/components/screens/allCases/ListItem.tsx +++ b/src/components/screens/allCases/ListItem.tsx @@ -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 = 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 - + = props => { ]}> - + onPress={handleAvatarClick}> + {caseSelected ? ( + + ) : ( + + )} diff --git a/src/components/screens/allCases/allCasesSlice.ts b/src/components/screens/allCases/allCasesSlice.ts new file mode 100644 index 00000000..a835ac0b --- /dev/null +++ b/src/components/screens/allCases/allCasesSlice.ts @@ -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; diff --git a/src/components/screens/allCases/interface.ts b/src/components/screens/allCases/interface.ts index 4a6b82b7..299c885c 100644 --- a/src/components/screens/allCases/interface.ts +++ b/src/components/screens/allCases/interface.ts @@ -68,5 +68,5 @@ export interface Data { detail: string; status: taskStatus; }; - pinnedRank: number; + pinnedRank?: number; } diff --git a/src/icons/RoundCheckIcon.tsx b/src/icons/RoundCheckIcon.tsx new file mode 100644 index 00000000..8c7ac5ed --- /dev/null +++ b/src/icons/RoundCheckIcon.tsx @@ -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 = ({size = 32}) => ( + + + + + + + + + +); +export default RoundCheckIcon; diff --git a/src/store/store.ts b/src/store/store.ts index f4be060c..d23ec274 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -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 = {