move delete to navigation

ljayz · Apr 25, 2024 · ad8f8be · ad8f8be
1 parent 40c7465
commit ad8f8be
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 12 deletions.
diff --git a/components/details.js b/components/details.js
@@ -16,6 +16,7 @@ import {
   myComparisonAtom,
   myComparisonStorageReaderAtomLoadable,
   myComparisonStorageWriterAtom,
+  myComparisonTriggerDeleteAtom,
   viewIndexComparisonAtom,
 } from '../jotai';
 
@@ -33,6 +34,9 @@ export const Details = () => {
     myComparisonStorageReaderAtomLoadable,
   );
   const setMyComparisonStorage = useSetAtom(myComparisonStorageWriterAtom);
+  const [myComparisonTriggerDelete, setMyComparisonTriggerDelete] = useAtom(
+    myComparisonTriggerDeleteAtom,
+  );
 
   React.useEffect(() => {
     if (myComparisonStorage.state === 'hasData') {
@@ -76,6 +80,11 @@ export const Details = () => {
     }
   };
 
+  if (myComparisonTriggerDelete && product && product?.id) {
+    setMyComparisonTriggerDelete(false);
+    onDeleteButtonPress(product.id);
+  }
+
   // console.log('myComparisonStorage', myComparisonStorage);
   if (!data || !data.data.length) {
     return (
@@ -103,9 +112,7 @@ export const Details = () => {
         <View>
           <Avatar style={styles.photo} source={{uri: product.image}} />
         </View>
-        <Text style={[styles.description, styles.section]} appearance="hint">
-          {product.name}
-        </Text>
+        <Text style={[styles.description, styles.section]}>{product.name}</Text>
         <Layout
           level="1"
           style={[styles.layoutContainer, styles.setting, styles.section]}>
@@ -150,13 +157,13 @@ export const Details = () => {
             onPress={onViewButtonPress}>
             View
           </Button>
-          <Button
+          {/* <Button
             style={styles.actionButton}
             size="giant"
             status="danger"
             onPress={() => onDeleteButtonPress(product.id)}>
             Delete
-          </Button>
+          </Button> */}
         </View>
       </ScrollView>
     </Layout>

diff --git a/components/detailsTopNavigation.js b/components/detailsTopNavigation.js
@@ -5,12 +5,17 @@ import {
   TopNavigation,
   TopNavigationAction,
 } from '@ui-kitten/components';
-import {useAtom, useAtomValue} from 'jotai';
+import {useAtom, useAtomValue, useSetAtom} from 'jotai';
 
-import {comparisonProductsAtom, viewIndexComparisonAtom} from '../jotai';
+import {
+  comparisonProductsAtom,
+  myComparisonTriggerDeleteAtom,
+  viewIndexComparisonAtom,
+} from '../jotai';
 
 const LeftIcon = props => <Icon {...props} name="arrow-back" />;
 const RightIcon = props => <Icon {...props} name="arrow-forward" />;
+const TrashIcon = props => <Icon {...props} name="trash" />;
 
 export const DetailsTopNavigation = () => {
   const [rightTopNavigationDisabled, setRightTopNavigationDisabled] =
@@ -19,12 +24,20 @@ export const DetailsTopNavigation = () => {
   const [viewIndexComparison, setViewIndexComparison] = useAtom(
     viewIndexComparisonAtom,
   );
+  const setMyComparisonTriggerDelete = useSetAtom(
+    myComparisonTriggerDeleteAtom,
+  );
   const onLeftPress = () => {
+    setMyComparisonTriggerDelete(false);
     setViewIndexComparison(viewIndexComparison - 1);
   };
   const onRightPress = () => {
+    setMyComparisonTriggerDelete(false);
     setViewIndexComparison(viewIndexComparison + 1);
   };
+  const onDeletePress = () => {
+    setMyComparisonTriggerDelete(true);
+  };
   const renderLeftAction = () => (
     <TopNavigationAction
       icon={LeftIcon}
@@ -33,11 +46,18 @@ export const DetailsTopNavigation = () => {
     />
   );
   const renderRightAction = () => (
-    <TopNavigationAction
-      icon={RightIcon}
-      onPress={onRightPress}
-      disabled={rightTopNavigationDisabled}
-    />
+    <>
+      {data && Array.isArray(data.data) && data.data.length ? (
+        <TopNavigationAction icon={TrashIcon} onPress={onDeletePress} />
+      ) : (
+        ''
+      )}
+      <TopNavigationAction
+        icon={RightIcon}
+        onPress={onRightPress}
+        disabled={rightTopNavigationDisabled}
+      />
+    </>
   );
   const renderSubtitle = () => {
     if (!data || (Array.isArray(data.data) && !data.data.length)) {

diff --git a/jotai.js b/jotai.js
@@ -93,13 +93,15 @@ const comparisonProductsAtom = atomWithQuery(() => ({
 const comparisonProductsAtomWithRefresh = atomWithRefresh(
   comparisonProductsAtom,
 );
+const myComparisonTriggerDeleteAtom = atom(false);
 
 export {
   comparisonProductsAtom,
   homeProductsAtom,
   homeProductsDefaultAtom,
   loadHomeProductsAtom,
   myComparisonAtom,
+  myComparisonTriggerDeleteAtom,
   myComparisonStorageReaderAtom,
   myComparisonStorageWriterAtom,
   myComparisonStorageReaderAtomLoadable,