TP-12855 delete todo list added

2022-12-13 17:24:39 +05:30
parent 8a8e1e980f
commit c52f6c4917
5 changed files with 88 additions and 62 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
@@ -14,12 +14,16 @@ 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 {resetTodoList, setCasesListData, setCasesListMapData, setIntermediateTodoList} from './allCasesSlice';
+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>;
@@ -108,20 +112,20 @@ const AllCases = () => {
    const dispatch = useDispatch();

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

    useEffect(() => {
        dispatch(setCasesListMapData(casesList));
    }, [casesList]);

    const handleTodoProceedClick = () => {
-        dispatch(setIntermediateTodoList());
-    }
+        navigateToScreen('OTP');
+    };

    const handleCancelTodoList = () => {
        dispatch(resetTodoList());
-    }
+    };

    return (
        <View style={GenericStyles.fill}>
@@ -149,9 +153,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
@@ -36,12 +36,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
@@ -3,7 +3,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[];
@@ -11,7 +11,6 @@ interface IAllCasesSlice {
    otherCasesList: Data[];
    compiledList: Data[];
    casesListMap: ICasesMap;
-    intermediateTodoList: Data[];
    intermediateTodoListMap: ICasesMap;
    initialPinnedRankCount: number;
    pinnedRankCount: number;
@@ -26,7 +25,6 @@ const initialState: IAllCasesSlice = {
    otherCasesList: [],
    compiledList: [],
    casesListMap: {},
-    intermediateTodoList: [],
    intermediateTodoListMap: {},
    initialPinnedRankCount: 0,
    pinnedRankCount: 0,
@@ -109,13 +107,7 @@ const allCasesSlice = createSlice({
                state.intermediateTodoListMap[caseId] = selectedCase;
            }
        },
-        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;
@@ -131,11 +123,10 @@ const allCasesSlice = createSlice({
                };
            });
            state.casesList = list;
-            state.intermediateTodoList = [];
            state.intermediateTodoListMap = {};
            state.newlyPinnedCases = 0;
            navigateToScreen('Login');
-        },
+        }
    },
 });

@@ -143,7 +134,6 @@ export const {
    setCasesListData,
    setCasesListMapData,
    setPinnedRank,
-    setIntermediateTodoList,
    setTodoList,
    resetTodoList,
 } = allCasesSlice.actions;
--- 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}
                />