main <- next

app/api/notes/[noteId]+api.ts

@@ -1,5 +1,5 @@
 import { parse } from 'cookie';
-import { getNote } from '../../../database/notes';
+import { getNote, selectNoteExists } from '../../../database/notes';
 import { ExpoApiResponse } from '../../../ExpoApiResponse';
 import type { Note } from '../../../migrations/00003-createTableNotes';
 
@@ -30,9 +30,8 @@ export async function GET(
       },
     );
   }
-  const note = await getNote(token, Number(noteId));
 
-  if (!note) {
+  if (!(await selectNoteExists(Number(noteId)))) {
     return ExpoApiResponse.json(
       {
         error: `No note with id ${noteId} found`,
@@ -42,5 +41,18 @@ export async function GET(
       },
     );
   }
+
+  const note = await getNote(token, Number(noteId));
+
+  if (!note) {
+    return ExpoApiResponse.json(
+      {
+        error: `Access denied to note with id ${noteId}`,
+      },
+      {
+        status: 403,
+      },
+    );
+  }
   return ExpoApiResponse.json({ note: note });
 }

app/notes/[noteId].tsx

@@ -34,7 +34,8 @@ const styles = StyleSheet.create({
 
 export default function Note() {
   const { noteId } = useLocalSearchParams();
-  const [note, setNote] = useState<NoteType | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [note, setNote] = useState<NoteType>();
 
   useFocusEffect(
     useCallback(() => {
@@ -46,9 +47,13 @@ export default function Note() {
         const response = await fetch(`/api/notes/${noteId}`);
         const responseBody: NoteResponseBodyGet = await response.json();
 
-        if ('note' in responseBody) {
-          setNote(responseBody.note);
+        if ('error' in responseBody) {
+          setErrorMessage(responseBody.error);
+          return;
         }
+
+        setNote(responseBody.note);
+        setErrorMessage(null);
       }
 
       loadNote().catch((error) => {
@@ -57,17 +62,11 @@ export default function Note() {
     }, [noteId]),
   );
 
-  if (typeof noteId !== 'string') {
-    return null;
-  }
-
-  if (!note) {
+  if (errorMessage || !note) {
     return (
       <View style={styles.container}>
-        <Text style={styles.title}>Access Denied</Text>
-        <Text style={styles.textContent}>
-          You do not have permission to access this note
-        </Text>
+        <Text style={styles.title}>Error loading note {noteId}</Text>
+        <Text style={styles.textContent}>{errorMessage}</Text>
         <Link href="/(tabs)/notes" style={{ color: colors.text }}>
           Back to notes
         </Link>

database/notes.ts

@@ -36,6 +36,22 @@ export async function getNote(
   return note;
 }
 
+export async function selectNoteExists(noteId: Note['id']) {
+  const [record] = await sql<{ exists: boolean }[]>`
+    SELECT
+      EXISTS (
+        SELECT
+          TRUE
+        FROM
+          notes
+        WHERE
+          id = ${noteId}
+      )
+  `;
+
+  return Boolean(record?.exists);
+}
+
 export async function createNote(
   sessionToken: Session['token'],
   title: Note['title'],

package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@expo-google-fonts/poppins": "^0.2.3",
-    "@expo/server": "0.4.4-canary-20240628-1ba8152",
+    "@expo/server": "^0.5.0",
     "@expo/vector-icons": "^14.0.4",
     "@upleveled/ley": "^0.9.2",
     "bcryptjs": "^2.4.3",
@@ -26,11 +26,17 @@
     "expo-linking": "^6.3.1",
     "expo-router": "^3.5.23",
     "expo-status-bar": "~1.12.1",
+    "expo-system-ui": "~4.0.3",
     "postgres": "^3.4.5",
     "react": "18.2.0",
     "react-dom": "^18.3.1",
     "react-native": "0.75.2",
-    "react-native-web": "^0.19.13",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-reanimated": "~3.16.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.1.0",
+    "react-native-web": "~0.19.13",
+    "react-native-webview": "13.12.2",
     "tsx": "^4.19.1",
     "zod": "^3.23.8"
   },