Toggle is_shelved for Practices

screens/practice/Practice.tsx

@@ -1,7 +1,8 @@
-import React from "react";
-import { Text, View, FlatList } from "react-native";
+import React, { useState, useEffect } from "react";
+import { Text, View, FlatList, Switch } from "react-native";
 
-import { usePractice } from "@/hooks/usePractice";
+import { usePractice } from "./usePractice";
+import { useUpdatePractice } from "./useUpdatePractice";
 import { useReps } from "@/hooks/useReps";
 
 import EditablePracticeTitle from "./EditablePracticeTitle";
@@ -12,6 +13,8 @@ import RecipeListForPractice from "@/screens/recipes/RecipeListForPractice";
 import { AddRecipeToPractice } from "../recipes/AddRecipe";
 import ProgramsListForPractice from "../programs/ProgramsListForPractice";
 
+import { gs } from "@/global-styles";
+
 interface Props {
   practiceId: string;
 }
@@ -23,15 +26,43 @@ export default function PracticeView({ practiceId }: Props) {
     data: practice,
   } = usePractice(practiceId);
 
+  const updatePracticeMutation = useUpdatePractice(Number(practiceId));
+
   const {
     isPending: isPendingReps,
     error: errorReps,
     data: reps,
   } = useReps(practiceId);
 
+  const [isShelved, setIsShelved] = useState(practice?.is_shelved ?? false);
+
+  // TODO: do I really need this useEffect?
+  useEffect(() => {
+    if (practice) {
+      setIsShelved(practice.is_shelved ?? false);
+    }
+  }, [practice]);
+
   if (isPendingPractice || errorPractice) return <Text>Loading...</Text>;
   if (isPendingReps || errorReps) return <Text>Loading...</Text>;
 
+  function handleIsShelvedSwitch(switch_value: boolean) {
+    updatePracticeMutation.mutate(
+      {
+        new_title: practice?.do100reps_title || "",
+        new_is_shelved: switch_value,
+      },
+      {
+        onSuccess: () => {
+          setIsShelved(switch_value);
+        },
+        onError: (error) => {
+          console.error(error);
+        },
+      }
+    );
+  }
+
   return (
     <FlatList
       style={{ padding: 12 }}
@@ -42,6 +73,14 @@ export default function PracticeView({ practiceId }: Props) {
             practice_id={practice.id.toString()}
             practice_title={practice.do100reps_title ?? ""}
           />
+          <Text style={gs.h2}>Shelved</Text>
+          <Switch
+            style={{ margin: 12 }}
+            value={isShelved}
+            onValueChange={(value) => {
+              handleIsShelvedSwitch(value);
+            }}
+          />
           <PracticeProgress completed_reps_count={reps.length} />
           <ProgramsListForPractice practice_id={practice.id} />
           <RecipeListForPractice practice_title={practice.name} />

screens/practice/useUpdatePractice.tsx

@@ -0,0 +1,19 @@
+import { useQueryClient, useMutation } from "@tanstack/react-query";
+import { updatePractice } from "@/supabase/supabase-queries";
+
+export function useUpdatePractice(practice_id: number) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      new_title,
+      new_is_shelved,
+    }: {
+      new_title: string;
+      new_is_shelved: boolean;
+    }) => updatePractice(practice_id, new_title, new_is_shelved),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["practice", practice_id] });
+      queryClient.invalidateQueries({ queryKey: ["practices"] });
+    },
+  });
+}

supabase/supabase-queries.ts

@@ -39,11 +39,15 @@ export async function getSupabasePracticeById(practiceid: string) {
   }
 }
 
-export async function savePracticeTitle(id: string, title: string) {
+// TODO use general updatePractice??
+export async function savePracticeTitle(
+  practice_id: string,
+  new_title: string,
+) {
   await supabase
     .from("Practices")
-    .update({ do100reps_title: title })
-    .eq("id", id);
+    .update({ do100reps_title: new_title })
+    .eq("id", practice_id);
 }
 
 export async function getSupabaseRepsByPracticeId(practiceId: string) {
@@ -340,3 +344,27 @@ export async function updateActivity(
     throw new Error(error.message);
   }
 }
+
+export async function updatePractice(
+  practice_id: number,
+  new_title: string,
+  new_is_shelved: boolean,
+) {
+  if (!new_title) {
+    return;
+  }
+
+  const { data, error } = await supabase
+    .from("Practices")
+    .update({
+      do100reps_title: new_title,
+      is_shelved: new_is_shelved,
+    })
+    .eq("id", practice_id);
+
+  if (error) {
+    throw new Error(error.message);
+  } else {
+    return data;
+  }
+}