change recipe shaleved toggle to match program and practice

michalparkola · Sep 25, 2024 · 8152595 · 8152595
1 parent 0079369
commit 8152595
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 36 deletions.
diff --git a/components/EditableTODOSwitch.tsx b/components/EditableTODOSwitch.tsx
diff --git a/screens/recipes/Recipe.tsx b/screens/recipes/Recipe.tsx
@@ -1,11 +1,10 @@
-import React from "react";
-import { View, ScrollView, Text } from "react-native";
+import React, { useState } from "react";
+import { View, ScrollView, Text, Switch } from "react-native";
 import { useQuery } from "@tanstack/react-query";
 import { useUpdateRecipe } from "./useUpdateRecipe";
 import { getNugget } from "@/supabase/supabase-queries";
 import { gs } from "@/global-styles";
 import EditableTextInputWithCancelSave from "@/components/EditableTextInputWithCancelSave";
-import EditableTODOSwitch from "@/components/EditableTODOSwitch";
 
 interface Props {
   nugget_id: string;
@@ -22,7 +21,9 @@ export default function Recipe({ nugget_id }: Props) {
     queryKey: ["nugget", nugget_id],
   });
 
-  const updateNuggetMutation = useUpdateRecipe(Number(nugget_id));
+  const updateRecipeMutation = useUpdateRecipe(Number(nugget_id));
+
+  const [isShelved, setIsShelved] = useState(nugget?.is_todo ?? true);
 
   if (isPending) return <Text>Loading recipe...</Text>;
   if (error)
@@ -31,25 +32,40 @@ export default function Recipe({ nugget_id }: Props) {
         Error getting recipe: {error.name}, {error.message}
       </Text>
     );
+
+  function handleIsShelvedSwitch(switch_value: boolean) {
+    if (!nugget) return;
+
+    updateRecipeMutation.mutate(
+      { ...nugget, is_todo: !nugget.is_todo },
+      {
+        onSuccess: () => {
+          setIsShelved(switch_value);
+        },
+        onError: (error) => {
+          console.error(error);
+        },
+      }
+    );
+  }
+
   return (
     <ScrollView contentContainerStyle={{ margin: 12 }}>
       <Text style={gs.label}>Shelved</Text>
-      <EditableTODOSwitch
-        is_todo={nugget.is_todo}
-        handleToggle={() => {
-          updateNuggetMutation.mutate({ ...nugget, is_todo: !nugget.is_todo });
+      <Switch
+        style={{ margin: 12 }}
+        value={isShelved}
+        onValueChange={(value) => {
+          console.log("Swith: ", value);
+          handleIsShelvedSwitch(value);
         }}
       />
-      <Text style={gs.label}>Created at</Text>
-      <Text style={{ margin: 12 }}>{nugget.created_at}</Text>
-      <Text style={gs.label}>Practice</Text>
-      <Text style={{ margin: 12 }}>{nugget.practice}</Text>
       <Text style={gs.label}>Title</Text>
       <View style={{ padding: 6 }}>
         <EditableTextInputWithCancelSave
           text={nugget.title || ""}
           handleSave={(text: string) =>
-            updateNuggetMutation.mutate({ ...nugget, title: text })
+            updateRecipeMutation.mutate({ ...nugget, title: text })
           }
         />
       </View>
@@ -58,7 +74,7 @@ export default function Recipe({ nugget_id }: Props) {
         <EditableTextInputWithCancelSave
           text={nugget.text || ""}
           handleSave={(text: string) =>
-            updateNuggetMutation.mutate({ ...nugget, text: text })
+            updateRecipeMutation.mutate({ ...nugget, text: text })
           }
         />
       </View>

diff --git a/screens/recipes/useUpdateRecipe.tsx b/screens/recipes/useUpdateRecipe.tsx
@@ -11,6 +11,7 @@ export function useUpdateRecipe(nugget_id: number) {
         queryKey: ["nugget", nugget_id],
       });
       queryClient.invalidateQueries({ queryKey: ["nuggets"] });
+      queryClient.invalidateQueries({ queryKey: ["nugget", nugget_id] });
     },
   });
 }