Merge pull request #19 from medici/unsynced-data-changes

Unsynced data changes

src/screens/allCases/CaseItemAvatar.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import {ICaseItem} from './interface';
+import RoundCheckIcon from '../../icons/RoundCheckIcon';
+import {useAppSelector} from '../../hooks';
+import {CaseDetail} from '../caseDetails/interface';
+import Avatar from '../../../RN-UI-LIB/src/components/Avatar';
+import UnsyncedIcon from '../../../RN-UI-LIB/src/Icons/UnsyncedIcon';
+import {StyleSheet, View} from 'react-native';
+
+interface ICaseItemAvatar {
+    caseSelected: boolean;
+    caseData: ICaseItem;
+}
+
+const CaseItemAvatar: React.FC<ICaseItemAvatar> = ({
+    caseSelected,
+    caseData,
+}) => {
+    const {caseReferenceId} = caseData;
+    const caseDetails: CaseDetail = useAppSelector(
+        state => state.allCases.caseDetails[caseReferenceId],
+    );
+    const {isSynced} = caseDetails;
+    if (caseSelected) {
+        return <RoundCheckIcon />;
+    }
+    return (
+        <View>
+            <Avatar
+                name={caseData.customerInfo.name}
+                dataURI={caseData.customerInfo.imageURL}
+            />
+            {!isSynced ? (
+                <View style={styles.unsyncedIcon}>
+                    <UnsyncedIcon />
+                </View>
+            ) : null}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    unsyncedIcon: {
+        position: 'absolute',
+        left: 14,
+        top: 14,
+    },
+});
+
+export default CaseItemAvatar;

src/screens/allCases/ListItem.tsx

@@ -6,7 +6,6 @@ import {
     TaskTitleUIMapping,
     CaseTypes,
 } 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';
@@ -16,8 +15,8 @@ import {
     setSelectedTodoListMap,
 } from '../../reducer/allCasesSlice';
 import {RootState} from '../../store/store';
-import RoundCheckIcon from '../../icons/RoundCheckIcon';
 import {navigateToScreen} from '../../components/utlis/navigationUtlis';
+import CaseItemAvatar from './CaseItemAvatar';
 
 interface IListItem {
     caseData: ICaseItem;
@@ -67,7 +66,7 @@ const ListItem: React.FC<IListItem> = props => {
 
     const caseSelected =
         !isTodoItem &&
-        (intermediateTodoListMap?.[caseId] || selectedTodoListMap?.[caseId]);
+        !!(intermediateTodoListMap?.[caseId] || selectedTodoListMap?.[caseId]);
 
     const address = caseData.currentTask?.metadata?.address;
     const poneNumber = caseData.currentTask?.metadata?.primaryPhoneNumber;
@@ -101,22 +100,19 @@ const ListItem: React.FC<IListItem> = props => {
                 <TouchableOpacity
                     style={[styles.avatarContainer, styles.alignSelf]}
                     onPress={handleAvatarClick}>
-                    {caseSelected ? (
-                        <RoundCheckIcon />
-                    ) : (
-                        <Avatar
-                            name={caseData.customerInfo.name}
-                            dataURI={caseData.customerInfo.imageURL}
-                        />
-                    )}
+                    <CaseItemAvatar
+                        caseSelected={caseSelected}
+                        caseData={caseData}
+                    />
                 </TouchableOpacity>
                 <View style={[GenericStyles.ml8, styles.fb80]}>
                     <Heading numberOfLines={1} type={'h5'} bold dark>
                         {caseData.customerInfo.name}
                     </Heading>
                     <Text dark ellipsizeMode="tail" numberOfLines={2}>
-                        { caseData.currentTask?.title && TaskTitleUIMapping[caseData.currentTask.title]}:{' '}
-                        <Text>{displayAddress}</Text>
+                        {caseData.currentTask?.title &&
+                            TaskTitleUIMapping[caseData.currentTask.title]}
+                        : <Text>{displayAddress}</Text>
                     </Text>
                     {/* TODO write color coding logic with tag component */}
                     {/* {caseData.caseVerdict !== caseVerdict.NEW && (