diff --git a/package.json b/package.json index d1a02577..5261bcb1 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@react-navigation/native-stack": "6.9.4", "@reduxjs/toolkit": "1.9.1", "axios": "1.2.1", + "fuzzysort": "2.0.4", "react": "18.1.0", "react-hook-form": "7.40.0", "react-native": "0.70.6", diff --git a/src/components/screens/allCases/AllCases.tsx b/src/components/screens/allCases/AllCases.tsx index 5eed666c..1b50fb76 100644 --- a/src/components/screens/allCases/AllCases.tsx +++ b/src/components/screens/allCases/AllCases.tsx @@ -1,5 +1,5 @@ import TextInput from '../../../../RN-UI-LIB/src/components/TextInput'; -import React, {useEffect} from 'react'; +import React, {useCallback, useEffect, useMemo} from 'react'; import { ListRenderItemInfo, StyleSheet, View, @@ -13,11 +13,12 @@ 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 { filterData, setCasesListData } from './allCasesSlice'; import { caseStatus, caseVerdict, Data, taskStatus, Type } from './interface'; import ListItem from './ListItem'; import SearchIcon from '../../../../RN-UI-LIB/src/Icons/SearchIcon'; import InfoIcon from '../../../../RN-UI-LIB/src/Icons/InfoIcon'; +import {Search} from '../../../../RN-UI-LIB/src/utlis/search'; interface IItem { @@ -29,6 +30,7 @@ const Item: React.FC = (props) => { const propData = props.data.item; const todoList = props.todoList; let completedCount = 0; + const dispatch = useDispatch(); todoList.forEach(todo =>{ if(todo.caseStatus === caseStatus.CLOSED){ completedCount++; @@ -38,7 +40,7 @@ const Item: React.FC = (props) => { case Type.FILTER: return ( - } placeholder='Search by name, address' /> + } onChangeText={(change)=> dispatch(filterData(change))} placeholder='Search by name, address' /> ); case Type.CASES_HEADER: @@ -84,17 +86,67 @@ const getItem = (item: Array, index: number) => item[index]; const AllCases = () => { - const {compiledList, todoList} = useSelector((state: RootState) => state.allCases); + const {casesList, filterList} = useSelector((state: RootState) => state.allCases); const dispatch = useDispatch(); useEffect(() => { dispatch(setCasesListData(data.allCases)); }, []) + useEffect(() => { + dispatch(setCasesListData(data.allCases)); + }, []) + + + const {compiledList, todoList} = useMemo(() => { + const list = filterList.length ? filterList : casesList; + const compiledList: Array = [ + { + type: Type.FILTER, + caseId: -1, + } as Data + ] + const todoList: Array = [] + const otherList: Array = [] + + //extracting data for todo list and other cases + + list.forEach((caseItem) => { + if(caseItem.pinnedRank){ + todoList.push(caseItem); + }else{ + otherList.push(caseItem); + } + }) + + // checking if todo list is present appending todoList header in compiled list + + if(todoList.length){ + compiledList.push({ + type: Type.TODO_HEADER, + caseId: -2, + } as Data) + // after adding data pushing todoList + compiledList.push(...todoList); + // also pushing + compiledList.push({ + type: Type.CASES_HEADER, + caseId: -3, + } as Data) + } + + if(otherList.length){ + compiledList.push(...otherList) + } + + return {compiledList, todoList} + }, [casesList, filterList]) + + return ( } + data={compiledList} stickyHeaderIndices={[0]} initialNumToRender={4} renderItem={row => ( diff --git a/src/components/screens/allCases/allCasesSlice.ts b/src/components/screens/allCases/allCasesSlice.ts index a835ac0b..8bbd8d93 100644 --- a/src/components/screens/allCases/allCasesSlice.ts +++ b/src/components/screens/allCases/allCasesSlice.ts @@ -1,4 +1,5 @@ import {_map} from '@components/utlis/common'; +import { Search } from '../../../../RN-UI-LIB/src/utlis/search'; import {createSlice} from '@reduxjs/toolkit'; import {caseStatus, caseVerdict, Data, taskStatus, Type} from './interface'; @@ -12,6 +13,7 @@ interface IAllCasesSlice { casesListMap: ICasesMap | null; pinnedRankCount: number; loading: boolean; + filterList: Data[]; } const initialState: IAllCasesSlice = { @@ -22,6 +24,7 @@ const initialState: IAllCasesSlice = { casesListMap: null, pinnedRankCount: 0, loading: false, + filterList:[] }; const allCasesSlice = createSlice({ @@ -66,6 +69,7 @@ const allCasesSlice = createSlice({ state.casesListMap = list; state.casesList = action.payload; state.otherCasesList = action.payload; + state.todoList = todoList; }, setPinnedRank: (state, action) => { if (!state.casesListMap) { @@ -80,9 +84,14 @@ const allCasesSlice = createSlice({ state.casesListMap[caseId].pinnedRank = state.pinnedRankCount; } }, + filterData: (state, action) => { + console.log(action.payload, state.casesList); + + console.log(Search(action.payload, state.casesList, {key: ['caseVerdict']})) + }, }, }); -export const {setCasesListData, setPinnedRank} = allCasesSlice.actions; +export const {setCasesListData, setPinnedRank, filterData} = allCasesSlice.actions; export default allCasesSlice.reducer; diff --git a/src/data/cases.json b/src/data/cases.json index b71668a6..14ba5ab4 100644 --- a/src/data/cases.json +++ b/src/data/cases.json @@ -7,7 +7,7 @@ "caseVerdict": "COMPLETED_AND_VERIFIED", "displayTag": "don't know", "customerInfo": { - "name": "Kunal Sharma", + "name": "Ram Sharma", "imageUrl": "https://d33wubrfki0l68.cloudfront.net/2a3556a09e73a07aacedb2bcfaa39512cd37a3f4/68f50/img/templates/akshay-kumar-scheme-pose.png" }, "currentTask": { @@ -24,7 +24,7 @@ "caseVerdict": "IN_PROGRESS", "displayTag": "don't know", "customerInfo": { - "name": "Kunal Sharma", + "name": "Shyam Sharma", "imageUrl": "https://d33wubrfki0l68.cloudfront.net/2a3556a09e73a07aacedb2bcfaa39512cd37a3f4/68f50/img/templates/akshay-kumar-scheme-pose.png" }, "currentTask": { @@ -41,7 +41,7 @@ "caseVerdict": "ASSIGNED", "displayTag": "don't know", "customerInfo": { - "name": "Kunal Sharma", + "name": "Ghanshyam Sharma", "imageUrl": "https://d33wubrfki0l68.cloudfront.net/2a3556a09e73a07aacedb2bcfaa39512cd37a3f4/68f50/img/templates/akshay-kumar-scheme-pose.png" }, "currentTask": { @@ -58,7 +58,7 @@ "caseVerdict": "NEW_ADDRESS_FOUND", "displayTag": "don't know", "customerInfo": { - "name": "Kunal Sharma", + "name": "Herik Sharma", "imageUrl": "https://d33wubrfki0l68.cloudfront.net/2a3556a09e73a07aacedb2bcfaa39512cd37a3f4/68f50/img/templates/akshay-kumar-scheme-pose.png" }, "currentTask": { diff --git a/yarn.lock b/yarn.lock index 94588e37..2e29a16c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3788,6 +3788,11 @@ functions-have-names@^1.2.2: resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834" integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ== +fuzzysort@2.0.4: + version "2.0.4" + resolved "https://registry.yarnpkg.com/fuzzysort/-/fuzzysort-2.0.4.tgz#a21d1ce8947eaf2797dc3b7c28c36db9d1165f84" + integrity sha512-Api1mJL+Ad7W7vnDZnWq5pGaXJjyencT+iKGia2PlHUcSsSzWwIQ3S1isiMpwpavjYtGd2FzhUIhnnhOULZgDw== + gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2: version "1.0.0-beta.2" resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"