Merge branch 'TP-12855-todo-list' of github.cmd.navi-tech.in:medici/Address-Verification-App into combined_branch

2022-12-13 18:06:32 +05:30
parent c67d755ab5 c52f6c4917
commit b4e8060b9f
5 changed files with 90 additions and 59 deletions
--- a/src/components/SwipeableContainer/index.tsx
+++ b/src/components/SwipeableContainer/index.tsx
@@ -1,28 +1,37 @@
+import {COLORS} from '../../../RN-UI-LIB/src/styles/colors';
 import React, {useState} from 'react';
 import {
    View,
-    Text,
    StyleSheet,
    Animated,
    Dimensions,
    PanResponder,
+    TouchableOpacity,
 } from 'react-native';
+import BinIcon from '../../../RN-UI-LIB/src/Icons/BinIcon';
+import {Data} from '../screens/allCases/interface';

 const {width} = Dimensions.get('window');
-const gestureDelay = -35;

-const SwipeableContainer = (props: any) => {
+interface ISwipableContainer extends React.PropsWithChildren {
+    onDeletePress: (caseData: Data) => void;
+    data: any;
+}
+
+const SwipeableContainer = (props: ISwipableContainer) => {
+    const {onDeletePress, data, children} = props;
+
    const [position, setPosition] = useState(new Animated.ValueXY());

-    let scrollViewEnabled = true;
+    // let scrollViewEnabled = true;
    const panResponder = PanResponder.create({
        onStartShouldSetPanResponder: (evt, gestureState) => false,
        onMoveShouldSetPanResponder: (evt, gestureState) => true,
        onPanResponderTerminationRequest: (evt, gestureState) => false,
        onPanResponderMove: (evt, gestureState) => {
            if (gestureState.dx < 0) {
-                setScrollViewEnabled(false);
-                let newX = gestureState.dx + gestureDelay;
+                // setScrollViewEnabled(false);
+                let newX = gestureState.dx;
                position.setValue({x: newX, y: 0});
            }
        },
@@ -33,7 +42,7 @@ const SwipeableContainer = (props: any) => {
                    duration: 150,
                    useNativeDriver: false,
                }).start(() => {
-                    setScrollViewEnabled(true);
+                    // setScrollViewEnabled(true);
                });
            } else {
                Animated.timing(position, {
@@ -42,20 +51,21 @@ const SwipeableContainer = (props: any) => {
                    useNativeDriver: false,
                }).start(() => {
                    // props.success(props.text);
-                    setScrollViewEnabled(true);
+                    // setScrollViewEnabled(true);
                });
            }
        },
    });

-    // this.panResponder = panResponder;
-    // this.state = {position};
+    // const setScrollViewEnabled = (enabled: boolean) => {
+    //     if (scrollViewEnabled !== enabled) {
+    //         // props.setScrollEnabled(enabled);
+    //         scrollViewEnabled = enabled;
+    //     }
+    // };

-    const setScrollViewEnabled = (enabled: boolean) => {
-        if (scrollViewEnabled !== enabled) {
-            // props.setScrollEnabled(enabled);
-            scrollViewEnabled = enabled;
-        }
+    const handleDeletePress = () => {
+        onDeletePress(data);
    };

    return (
@@ -63,12 +73,12 @@ const SwipeableContainer = (props: any) => {
            <Animated.View
                style={[position.getLayout()]}
                {...panResponder.panHandlers}>
-                <View style={styles.innerCell}>
-                    {props.children}
-                </View>
-                <View style={styles.absoluteCell}>
-                    <Text style={styles.absoluteCellText}>DELETE</Text>
-                </View>
+                <View style={styles.innerCell}>{children}</View>
+                <TouchableOpacity
+                    style={styles.absoluteCell}
+                    onPress={handleDeletePress}>
+                    <BinIcon />
+                </TouchableOpacity>
            </Animated.View>
        </View>
    );
@@ -76,33 +86,26 @@ const SwipeableContainer = (props: any) => {

 const styles = StyleSheet.create({
    listItem: {
-        height: 80,
        marginRight: -100,
        justifyContent: 'center',
-        backgroundColor: 'red',
-        position: 'relative'
+        backgroundColor: COLORS.BACKGROUND.RED,
+        position: 'relative',
    },
    absoluteCell: {
        position: 'absolute',
-        // top: 0,
-        // bottom: 0,
        right: 0,
        width: 100,
        flexDirection: 'row',
-        // justifyContent: 'flex-end',
        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
    },
    absoluteCellText: {
        margin: 16,
        color: '#FFF',
    },
    innerCell: {
-        // width: width + 100,
-        height: 80,
        marginRight: 100,
-        backgroundColor: 'yellow',
-        // justifyContent: 'center',
-        // alignItems: 'center',
    },
 });

--- a/src/components/screens/allCases/AllCases.tsx
+++ b/src/components/screens/allCases/AllCases.tsx
@@ -19,10 +19,16 @@ import InfoIcon from '../../../../RN-UI-LIB/src/Icons/InfoIcon';
 import {Search} from '../../../../RN-UI-LIB/src/utlis/search';

 import {RootState} from '../../../store/store';
+import {
+    resetTodoList,
+    setCasesListData,
+    setCasesListMapData,
+} from './allCasesSlice';
+import {caseStatus, Data, Type} from './interface';
 import ListItem from './ListItem';
 import SearchIcon from '../../../../RN-UI-LIB/src/Icons/SearchIcon';
 import Button from '../../../../RN-UI-LIB/src/components/Button';
-import { navigateToScreen } from '../../utlis/navigationUtlis';
+import {navigateToScreen} from '../../utlis/navigationUtlis';

 interface IItem {
    data: ListRenderItemInfo<Data>;
@@ -105,8 +111,8 @@ const AllCases = () => {
    const dispatch = useDispatch();

    useEffect(() => {
-        dispatch(setCasesListData(data.allCases))
-    }, [])
+        dispatch(setCasesListData(data.allCases));
+    }, []);

    useEffect(() => {
        dispatch(setCasesListData(data.allCases));
@@ -136,6 +142,9 @@ const AllCases = () => {

        // checking if todo list is present appending todoList header in compiled list

+    const handleTodoProceedClick = () => {
+        navigateToScreen('OTP');
+    };
        if(todoList.length){
            compiledList.push({
                type: Type.TODO_HEADER,
@@ -152,7 +161,7 @@ const AllCases = () => {

        if(otherList.length){
            compiledList.push(...otherList)
-        }
+        };

        return {compiledList, todoList}
    }, [casesList, filterList])
@@ -184,9 +193,13 @@ const AllCases = () => {
                        title={'Cancel'}
                        onPress={handleCancelTodoList}
                    />
-                    <Button style={styles.fb45} title={'Proceed'} onPress={handleTodoProceedClick}/>
+                    <Button
+                        style={styles.fb45}
+                        title={'Proceed'}
+                        onPress={handleTodoProceedClick}
+                    />
                </View>
-            ): null}
+            ) : null}
        </View>
    );
 };
--- a/src/components/screens/allCases/ListItem.tsx
+++ b/src/components/screens/allCases/ListItem.tsx
@@ -37,12 +37,14 @@ const ListItem: React.FC<IListItem> = props => {
    );

    const handleAvatarClick = () => {
-        if (
-            !isTodoItem &&
-            type === Type.CASE &&
-            caseData.caseStatus !== caseStatus.CLOSED
-        ) {
+        if (isTodoItem || caseData.caseStatus === caseStatus.CLOSED) {
+            return;
+        }
+        if (type === Type.CASE) {
            dispatch(setPinnedRank(caseData));
+            return;
+        } else if (type === Type.TODO) {
+            // select todo item
        }
    };

--- a/src/components/screens/allCases/allCasesSlice.ts
+++ b/src/components/screens/allCases/allCasesSlice.ts
@@ -4,7 +4,7 @@ import {createSlice} from '@reduxjs/toolkit';
 import {navigateToScreen} from '../../utlis/navigationUtlis';
 import {caseStatus, Data, Type} from './interface';

-type ICasesMap = {[key: string]: Data};
+export type ICasesMap = {[key: string]: Data};

 interface IAllCasesSlice {
    casesList: Data[];
@@ -12,7 +12,6 @@ interface IAllCasesSlice {
    otherCasesList: Data[];
    compiledList: Data[];
    casesListMap: ICasesMap;
-    intermediateTodoList: Data[];
    intermediateTodoListMap: ICasesMap;
    initialPinnedRankCount: number;
    pinnedRankCount: number;
@@ -28,7 +27,6 @@ const initialState: IAllCasesSlice = {
    otherCasesList: [],
    compiledList: [],
    casesListMap: {},
-    intermediateTodoList: [],
    intermediateTodoListMap: {},
    initialPinnedRankCount: 0,
    pinnedRankCount: 0,
@@ -118,13 +116,7 @@ const allCasesSlice = createSlice({
              
            console.log(Search(action.payload, state.casesList, {key: ['caseVerdict']}))
         },
-        setIntermediateTodoList: state => {
-            const list = Object.values(state.intermediateTodoListMap);
-            state.intermediateTodoList = list;
-            navigateToScreen('OTP');
-        },
        resetTodoList: state => {
-            state.intermediateTodoList = [];
            state.intermediateTodoListMap = {};
            state.newlyPinnedCases = 0;
            state.pinnedRankCount = state.initialPinnedRankCount;
@@ -140,11 +132,10 @@ const allCasesSlice = createSlice({
                };
            });
            state.casesList = list;
-            state.intermediateTodoList = [];
            state.intermediateTodoListMap = {};
            state.newlyPinnedCases = 0;
            navigateToScreen('Login');
-        },
+        }
    },
 });

@@ -152,7 +143,6 @@ export const {
    setCasesListData,
    setCasesListMapData,
    setPinnedRank,
-    setIntermediateTodoList,
    setTodoList,
    resetTodoList,
    filterData
--- a/src/components/screens/todoList/TodoList.tsx
+++ b/src/components/screens/todoList/TodoList.tsx
@@ -17,12 +17,16 @@ import {Data} from '../allCases/interface';
 import ListItem from '../allCases/ListItem';
 import {getItem, Seperator} from '../allCases/AllCases';
 import Button from '../../../../RN-UI-LIB/src/components/Button';
-import {resetTodoList, setTodoList} from '../allCases/allCasesSlice';
+import {
+    resetTodoList,
+    setPinnedRank,
+    setTodoList,
+} from '../allCases/allCasesSlice';
 import {navigateToScreen} from '../../utlis/navigationUtlis';
 import SwipeableContainer from '../../SwipeableContainer';

 const TodoList = () => {
-    const {intermediateTodoList} = useSelector(
+    const {intermediateTodoListMap, todoList} = useSelector(
        (state: RootState) => state.allCases,
    );

@@ -37,6 +41,19 @@ const TodoList = () => {
        navigateToScreen('Login');
    };

+    const handleDeletePress = (caseData: Data) => {
+        dispatch(setPinnedRank(caseData));
+    };
+
+    const intermediateTodoList = useMemo(
+        () => Object.values(intermediateTodoListMap),
+        [intermediateTodoListMap],
+    );
+
+    if (!intermediateTodoList.length) {
+        navigateToScreen('Login');
+    }
+
    return (
        <View style={[GenericStyles.fill, styles.todoListContainer]}>
            <View style={[GenericStyles.p16, styles.header]}>
@@ -58,7 +75,9 @@ const TodoList = () => {
                data={intermediateTodoList as Array<Data>}
                initialNumToRender={4}
                renderItem={(row: ListRenderItemInfo<Data>) => (
-                    <SwipeableContainer>
+                    <SwipeableContainer
+                        data={row.item}
+                        onDeletePress={handleDeletePress}>
                        <ListItem caseData={row.item} isTodoItem />
                    </SwipeableContainer>
                )}
@@ -75,7 +94,11 @@ const TodoList = () => {
                    styles.actionBtns,
                ]}>
                <Button
-                    title={'Create to do list'}
+                    title={
+                        todoList.length > 0
+                            ? "Add to today's list"
+                            : 'Create to do list'
+                    }
                    onPress={handleCreateTodoList}
                    style={GenericStyles.w100}
                />