Fixes - Tab count update, highlight new case | Aman C (#42)

* fixes

* fixes

* firestore

* cases list refresh added

* fix

* fix

* fix

* Firestore integration fixes

* fix firestore deleting

* Fixes - tab count, highlight new case, unsynced case detail icon

src/reducer/allCasesSlice.ts

@@ -176,7 +176,7 @@ const allCasesSlice = createSlice({
                     prev[item.caseReferenceId] = {
                         ...item,
                         isSynced: true,
-                        isApiCalled: false
+                        isApiCalled: false,
                     };
                     return prev;
                 }, initialValue);
@@ -259,7 +259,7 @@ const allCasesSlice = createSlice({
                         break;
                     }
                     case FirestoreUpdateTypes.ADDED: {
-                        if(state.caseDetails[id]) {
+                        if (state.caseDetails[id]) {
                             return;
                         }
                         const caseListItem: ICaseItem = {
@@ -271,7 +271,7 @@ const allCasesSlice = createSlice({
                             customerInfo,
                             pinRank: updatedCaseDetail.pinRank || null,
                         };
-                        state.casesList.push(caseListItem);
+                        state.casesList.unshift(caseListItem);
                         const currentTaskAdd = updatedCaseDetail.tasks.find(
                             task =>
                                 task.taskType ===
@@ -281,6 +281,7 @@ const allCasesSlice = createSlice({
                             ...updatedCaseDetail,
                             currentTask: currentTaskAdd,
                             isSynced: true,
+                            isNewlyAdded: true
                         };
                         break;
                     }
@@ -433,7 +434,7 @@ const allCasesSlice = createSlice({
                         task => task.taskType === data.currentTask,
                     ),
                     isSynced: true,
-                    isApiCallMade: false
+                    isApiCallMade: false,
                 };
             } else {
                 state.caseDetails[id].isSynced = false;
@@ -449,10 +450,12 @@ const allCasesSlice = createSlice({
             let filterCount = 0;
             Object.keys(state.selectedFilters).forEach(filterKey => {
                 switch (typeof state.selectedFilters[filterKey]) {
-                    case "object":
-                        filterCount += Object.keys(state.selectedFilters[filterKey]).length;
+                    case 'object':
+                        filterCount += Object.keys(
+                            state.selectedFilters[filterKey],
+                        ).length;
                         break;
-                    case "string":
+                    case 'string':
                         filterCount += 1;
                         break;
                     default:
@@ -474,7 +477,10 @@ const allCasesSlice = createSlice({
             const { caseId } = action.payload;
             state.caseDetails[caseId].isApiCalled = true;
         },
-    },
+        toggleNewlyAddedCase: (state, action) => {
+            state.caseDetails[action.payload].isNewlyAdded = false;
+        }
+     },
 });
 
 export const {
@@ -497,7 +503,8 @@ export const {
     setCasesDetailsData,
     updateCaseDetailsFirestore,
     setOnboarding,
-    updateCaseDetailAfterApiCall
+    updateCaseDetailAfterApiCall,
+    toggleNewlyAddedCase
 } = allCasesSlice.actions;
 
 export default allCasesSlice.reducer;

src/screens/allCases/ListItem.tsx

@@ -1,20 +1,24 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Pressable, StyleSheet, TouchableOpacity, View } from 'react-native';
-import { useDispatch } 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 { navigateToScreen } from '../../components/utlis/navigationUtlis';
-import { useAppSelector } from '../../hooks';
+import { useAppDispatch, useAppSelector } from '../../hooks';
 import {
     setPinnedRank,
-    setSelectedTodoListMap
+    setSelectedTodoListMap,
+    toggleNewlyAddedCase,
 } from '../../reducer/allCasesSlice';
 import CaseItemAvatar from './CaseItemAvatar';
 import {
-    CaseStatuses, CaseStatusUIMapping, CaseTypes, ICaseItem,
-    TaskTitleUIMapping
+    CaseStatuses,
+    CaseStatusUIMapping,
+    CaseTypes,
+    ICaseItem,
+    TaskTitleUIMapping,
 } from './interface';
+import { COLORS } from '../../../RN-UI-LIB/src/styles/colors';
 
 interface IListItem {
     caseData: ICaseItem;
@@ -24,9 +28,9 @@ interface IListItem {
 }
 
 const ListItem: React.FC<IListItem> = props => {
-    const {caseData, compleatedList, isTodoItem} = props;
-    const {type, caseReferenceId: caseId} = caseData;
-    const dispatch = useDispatch();
+    const { caseData, compleatedList, isTodoItem } = props;
+    const { type, caseReferenceId: caseId } = caseData;
+    const dispatch = useAppDispatch();
 
     if (!compleatedList && caseData.caseStatus === CaseStatuses.CLOSED) {
         return null;
@@ -41,7 +45,13 @@ const ListItem: React.FC<IListItem> = props => {
     } = useAppSelector(state => state.allCases);
 
     const detail = caseDetails[caseId];
+    const isNewlyAdded = detail.isNewlyAdded;
 
+    useEffect(() => {
+        if (isNewlyAdded) {
+            setTimeout(() => dispatch(toggleNewlyAddedCase(caseId)), 1000);
+        }
+    }, []);
 
     const handleAvatarClick = () => {
         if (isTodoItem || caseData.caseStatus === CaseStatuses.CLOSED) {
@@ -63,18 +73,17 @@ const ListItem: React.FC<IListItem> = props => {
     };
 
     const handleCaseClick = () => {
-        navigateToScreen('caseDetail', {caseId});
+        navigateToScreen('caseDetail', { caseId });
     };
 
     const caseSelected =
         !isTodoItem &&
         !!(intermediateTodoListMap?.[caseId] || selectedTodoListMap?.[caseId]);
 
-    
-
     const address = detail.currentTask?.metadata?.address;
     const poneNumber = detail.currentTask?.metadata?.primaryPhoneNumber;
-    const taskTitle = detail.currentTask?.taskType || detail?.currentTask?.title;
+    const taskTitle =
+        detail.currentTask?.taskType || detail?.currentTask?.title;
 
     const displayAddress = address
         ? address.lineOne +
@@ -98,9 +107,13 @@ const ListItem: React.FC<IListItem> = props => {
                     GenericStyles.ph16,
                     styles.pv12,
                     GenericStyles.row,
-                    caseSelected
-                        ? GenericStyles.silverBackground
-                        : GenericStyles.whiteBackground,
+                    {
+                        backgroundColor: isNewlyAdded
+                            ? COLORS.BACKGROUND.ORANGE
+                            : caseSelected
+                            ? COLORS.BACKGROUND.SILVER
+                            : COLORS.BACKGROUND.PRIMARY,
+                    },
                 ]}>
                 <TouchableOpacity
                     style={[styles.avatarContainer, styles.alignSelf]}

src/screens/caseDetails/UserDetailsSection.tsx

@@ -13,7 +13,8 @@ import LineLoader from '../../../RN-UI-LIB/src/components/suspense_loader/LineLo
 import SuspenseLoader from '../../../RN-UI-LIB/src/components/suspense_loader/SuspenseLoader';
 import Text from '../../../RN-UI-LIB/src/components/Text';
 import CloseIcon from '../../../RN-UI-LIB/src/Icons/CloseIcon';
-import {GenericStyles, normalizeFontSize} from '../../../RN-UI-LIB/src/styles';
+import UnsyncedIcon from '../../../RN-UI-LIB/src/Icons/UnsyncedIcon';
+import {GenericStyles} from '../../../RN-UI-LIB/src/styles';
 import {COLORS} from '../../../RN-UI-LIB/src/styles/colors';
 import {dateFormat} from '../../../RN-UI-LIB/src/utlis/dates';
 import CalenderIcon from '../../assets/icons/CalenderIcon';
@@ -49,6 +50,8 @@ const UserDetailsSection: React.FC<IUserDetailsSection> = props => {
         setOpenImage(prev => !prev);
     }, []);
 
+    const isSynced = caseDetail.isSynced;
+
     return (
         <View style={[GenericStyles.row, GenericStyles.pb16, styles.container]}>
             <SuspenseLoader
@@ -66,6 +69,11 @@ const UserDetailsSection: React.FC<IUserDetailsSection> = props => {
                         name={customerInfo?.customerName || customerInfo?.name || ''}
                         dataURI={customerInfo?.imageURL}
                     />
+                    {!isSynced ? (
+                        <View style={styles.unsyncedIcon}>
+                            <UnsyncedIcon />
+                        </View>
+                    ) : null}
                 </TouchableOpacity>
             </SuspenseLoader>
             <View style={[styles.infoContainer]}>
@@ -158,6 +166,11 @@ const styles = StyleSheet.create({
     backgroundColor: {
         backgroundColor: COLORS.BACKGROUND.HEADER,
     },
+    unsyncedIcon: {
+        position: 'absolute',
+        left: 45,
+        top: 45,
+    },
 });
 
 export default UserDetailsSection;

src/screens/caseDetails/interface.ts

@@ -145,4 +145,5 @@ export interface CaseDetail {
     currentTask: CurrentTask;
     pinRank?: number | null;
     caseVerdict: CaseStatuses;
+    isNewlyAdded?: boolean;
 }