proper cache invalidation

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)

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"

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);

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,13 +14,15 @@ 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">
       {/* <Input
         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");

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);