From ff448cf4ddf3036de2d4e4dd377226be41f24ede Mon Sep 17 00:00:00 2001
From: Nik Graf <nik@nikgraf.com>
Date: Thu, 6 Jun 2024 11:24:59 +0200
Subject: [PATCH] proper cache invalidation

---
 README.md                                          |  4 +---
 apps/app/src/app/list/[listId].tsx                 |  3 +++
 apps/app/src/components/authForm.tsx               |  4 ++++
 apps/app/src/components/createListForm.tsx         | 13 ++++++++++++-
 apps/app/src/components/updateDocumentNameForm.tsx |  9 +++++++++
 5 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 6e546c9..8990639 100644
--- a/README.md
+++ b/README.md
@@ -87,10 +87,8 @@ Users use OPAQUE to authenticate with the server. After Login the server creates
 
 ## Todos
 
-- invalidate documentsQuery properly
-
 - add invitation scheme
-- allow to delete list
+- allow to delete list (needs a tombstone)
 
 - add retry for locker in case write fails (invalid clock)
 - store the list name locally (also with unsynced changes)
diff --git a/apps/app/src/app/list/[listId].tsx b/apps/app/src/app/list/[listId].tsx
index 412d3ee..f1cd75f 100644
--- a/apps/app/src/app/list/[listId].tsx
+++ b/apps/app/src/app/list/[listId].tsx
@@ -119,6 +119,9 @@ const List: React.FC<Props> = () => {
             placeholder="What needs to be done?"
             onChangeText={(value) => setNewTodoText(value)}
             value={newTodoText}
+            autoCapitalize="none"
+            autoCorrect={false}
+            autoComplete="off"
           />
           <Button
             className="add"
diff --git a/apps/app/src/components/authForm.tsx b/apps/app/src/components/authForm.tsx
index b515af3..bb4a9bf 100644
--- a/apps/app/src/components/authForm.tsx
+++ b/apps/app/src/components/authForm.tsx
@@ -26,6 +26,8 @@ export const AuthForm = ({ onSubmit, isPending, children }: Props) => {
           className="border border-slate-300 p-2 rounded"
           placeholder="Username"
           autoComplete="off"
+          autoCorrect={false}
+          autoCapitalize="none"
           value={username}
           onChangeText={(value) => {
             setUsername(value);
@@ -37,6 +39,8 @@ export const AuthForm = ({ onSubmit, isPending, children }: Props) => {
           className="border border-slate-300 p-2 rounded"
           placeholder="Password"
           autoComplete="off"
+          autoCorrect={false}
+          autoCapitalize="none"
           value={password}
           onChangeText={(value) => {
             setPassword(value);
diff --git a/apps/app/src/components/createListForm.tsx b/apps/app/src/components/createListForm.tsx
index e6d6314..66363c9 100644
--- a/apps/app/src/components/createListForm.tsx
+++ b/apps/app/src/components/createListForm.tsx
@@ -1,3 +1,5 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { getQueryKey } from "@trpc/react-query";
 import { router } from "expo-router";
 import { Alert, View } from "react-native";
 import * as sodium from "react-native-libsodium";
@@ -12,6 +14,7 @@ export const CreateListForm: React.FC = () => {
   // const [name, setName] = useState("");
   const createDocumentMutation = trpc.createDocument.useMutation();
   const { addItem } = useLocker();
+  const queryClient = useQueryClient();
 
   return (
     <View className="flex justify-center items-center gap-4 py-4">
@@ -19,6 +22,7 @@ export const CreateListForm: React.FC = () => {
         placeholder="List name"
         className="max-w-48"
         value={name}
+        autoCorrect={false}
         onChangeText={(value) => {
           setName(value);
         }}
@@ -58,7 +62,14 @@ export const CreateListForm: React.FC = () => {
                   pathname: `/list/[documentId]`,
                   params: { documentId: document.id },
                 });
-                // documentsQuery.refetch(); // TODO
+                const documentsQueryKey = getQueryKey(
+                  trpc.documents,
+                  undefined,
+                  "query"
+                );
+                queryClient.invalidateQueries({
+                  queryKey: [documentsQueryKey],
+                });
               },
               onError: () => {
                 Alert.alert("Failed to create the list");
diff --git a/apps/app/src/components/updateDocumentNameForm.tsx b/apps/app/src/components/updateDocumentNameForm.tsx
index 8387d83..926ad2a 100644
--- a/apps/app/src/components/updateDocumentNameForm.tsx
+++ b/apps/app/src/components/updateDocumentNameForm.tsx
@@ -1,3 +1,5 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { getQueryKey } from "@trpc/react-query";
 import { useEffect, useState } from "react";
 import { View } from "react-native";
 import { Input } from "~/components/ui/input";
@@ -15,6 +17,7 @@ export const UpdateDocumentNameForm = ({ documentId, documentKey }: Props) => {
 
   const getDocumentQuery = trpc.getDocument.useQuery(documentId);
   const updateDocumentMutation = trpc.updateDocument.useMutation();
+  const queryClient = useQueryClient();
 
   useEffect(() => {
     if (getDocumentQuery.data) {
@@ -40,6 +43,10 @@ export const UpdateDocumentNameForm = ({ documentId, documentKey }: Props) => {
       nameNonce: nonce,
       nameCommitment: commitment,
     });
+    const documentsQueryKey = getQueryKey(trpc.documents, undefined, "query");
+    queryClient.invalidateQueries({
+      queryKey: [documentsQueryKey],
+    });
   };
 
   return (
@@ -49,6 +56,8 @@ export const UpdateDocumentNameForm = ({ documentId, documentKey }: Props) => {
         className="border border-slate-300 p-2 rounded"
         placeholder="List name"
         autoComplete="off"
+        autoCorrect={false}
+        autoCapitalize="none"
         value={name}
         onChangeText={(value) => {
           setName(value);