Merge pull request #3 from upleveled/add-authorization-redirect

Refactor auth logic for `returnTo` params
upleveled · Nov 4, 2024 · a21fec5 · a21fec5
2 parents 0c5c9fa + 240a21e
commit a21fec5
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 38 deletions.
diff --git a/app/(tabs)/guests.tsx b/app/(tabs)/guests.tsx
@@ -40,32 +40,34 @@ export default function Guests() {
     useCallback(() => {
       if (!isStale) return;
 
-      async function getUser() {
-        const response = await fetch('/api/user');
+      async function getUserAndGuests() {
+        const [userResponse, guestsResponse]: [
+          UserResponseBodyGet,
+          GuestsResponseBodyGet,
+        ] = await Promise.all([
+          fetch('/api/user').then((response) => response.json()),
+          fetch('/api/guests').then((response) => response.json()),
+        ]);
 
-        const body: UserResponseBodyGet = await response.json();
+        setIsStale(false);
 
-        if ('error' in body) {
+        if ('error' in userResponse) {
           router.replace('/(auth)/login?returnTo=/(tabs)/guests');
+          return;
         }
-      }
 
-      async function getGuests() {
-        const response = await fetch('/api/guests');
-        const body: GuestsResponseBodyGet = await response.json();
+        if ('error' in guestsResponse) {
+          setGuests([]);
+          return;
+        }
 
-        setGuests(body.guests);
-        setIsStale(false);
+        setGuests(guestsResponse.guests);
       }
 
-      getUser().catch((error) => {
-        console.error(error);
-      });
-
-      getGuests().catch((error) => {
+      getUserAndGuests().catch((error) => {
         console.error(error);
       });
-    }, [router, isStale]),
+    }, [isStale, router]),
   );
 
   if (!fontsLoaded) {

diff --git a/app/(tabs)/profile.tsx b/app/(tabs)/profile.tsx
@@ -1,4 +1,4 @@
-import { router, useFocusEffect } from 'expo-router';
+import { useFocusEffect, useRouter } from 'expo-router';
 import React, { useCallback } from 'react';
 import { Alert, Pressable, StyleSheet, Text, View } from 'react-native';
 import type { LogoutResponseBodyGet } from '../(auth)/api/logout+api';
@@ -33,6 +33,8 @@ const styles = StyleSheet.create({
 });
 
 export default function Profile() {
+  const router = useRouter();
+
   useFocusEffect(
     useCallback(() => {
       async function getUser() {
@@ -41,14 +43,14 @@ export default function Profile() {
         const body: UserResponseBodyGet = await response.json();
 
         if ('error' in body) {
-          Alert.alert('Error', body.error, [{ text: 'OK' }]);
-          return router.push('/(auth)/login');
+          router.replace('/(auth)/login?returnTo=/(tabs)/profile');
+          return;
         }
       }
       getUser().catch((error) => {
         console.error(error);
       });
-    }, []),
+    }, [router]),
   );
 
   return (

diff --git a/app/guests/[guestId].tsx b/app/guests/[guestId].tsx
@@ -1,6 +1,6 @@
 import { Ionicons } from '@expo/vector-icons';
 import { Image } from 'expo-image';
-import { router, useFocusEffect, useLocalSearchParams } from 'expo-router';
+import { useFocusEffect, useLocalSearchParams, useRouter } from 'expo-router';
 import { useCallback, useState } from 'react';
 import {
   Pressable,
@@ -13,6 +13,7 @@ import {
 import placeholder from '../../assets/candidate-default.avif';
 import { colors } from '../../constants/colors';
 import type { GuestResponseBodyGet } from '../api/guests/[guestId]+api';
+import type { UserResponseBodyGet } from '../api/user+api';
 
 const styles = StyleSheet.create({
   container: {
@@ -115,30 +116,40 @@ export default function GuestPage() {
   const [attending, setAttending] = useState(false);
   const [focusedInput, setFocusedInput] = useState<string | undefined>();
 
+  const router = useRouter();
+
   // Dynamic import of images
   // const imageContext = require.context('../../assets', false, /\.(avif)$/);
 
   useFocusEffect(
     useCallback(() => {
-      async function loadGuest() {
+      async function getUserAndLoadGuest() {
         if (typeof guestId !== 'string') {
           return;
         }
+        const [userResponse, guestResponse]: [
+          UserResponseBodyGet,
+          GuestResponseBodyGet,
+        ] = await Promise.all([
+          fetch('/api/user').then((response) => response.json()),
+          fetch(`/api/guests/${guestId}`).then((response) => response.json()),
+        ]);
 
-        const response = await fetch(`/api/guests/${guestId}`);
-        const responseBody: GuestResponseBodyGet = await response.json();
+        if ('error' in userResponse) {
+          router.replace(`/(auth)/login?returnTo=/guests/${guestId}`);
+        }
 
-        if ('guest' in responseBody) {
-          setFirstName(responseBody.guest.firstName);
-          setLastName(responseBody.guest.lastName);
-          setAttending(responseBody.guest.attending);
+        if ('guest' in guestResponse) {
+          setFirstName(guestResponse.guest.firstName);
+          setLastName(guestResponse.guest.lastName);
+          setAttending(guestResponse.guest.attending);
         }
       }
 
-      loadGuest().catch((error) => {
+      getUserAndLoadGuest().catch((error) => {
         console.error(error);
       });
-    }, [guestId]),
+    }, [guestId, router]),
   );
 
   if (typeof guestId !== 'string') {

diff --git a/app/notes/[noteId].tsx b/app/notes/[noteId].tsx
@@ -1,9 +1,15 @@
-import { Link, useFocusEffect, useLocalSearchParams } from 'expo-router';
+import {
+  Link,
+  useFocusEffect,
+  useLocalSearchParams,
+  useRouter,
+} from 'expo-router';
 import { useCallback, useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { colors } from '../../constants/colors';
 import type { Note as NoteType } from '../../migrations/00003-createTableNotes';
 import type { NoteResponseBodyGet } from '../api/notes/[noteId]+api';
+import type { UserResponseBodyGet } from '../api/user+api';
 
 const styles = StyleSheet.create({
   container: {
@@ -36,25 +42,36 @@ export default function Note() {
   const { noteId } = useLocalSearchParams();
   const [note, setNote] = useState<NoteType | null>(null);
 
+  const router = useRouter();
+
   useFocusEffect(
     useCallback(() => {
-      async function loadNote() {
+      async function getUserAndLoadNote() {
         if (typeof noteId !== 'string') {
           return;
         }
 
-        const response = await fetch(`/api/notes/${noteId}`);
-        const responseBody: NoteResponseBodyGet = await response.json();
+        const [userResponse, noteResponse]: [
+          UserResponseBodyGet,
+          NoteResponseBodyGet,
+        ] = await Promise.all([
+          fetch('/api/user').then((response) => response.json()),
+          fetch(`/api/notes/${noteId}`).then((response) => response.json()),
+        ]);
+
+        if ('error' in userResponse) {
+          router.replace(`/(auth)/login?returnTo=/notes/${noteId}`);
+        }
 
-        if ('note' in responseBody) {
-          setNote(responseBody.note);
+        if ('note' in noteResponse) {
+          setNote(noteResponse.note);
         }
       }
 
-      loadNote().catch((error) => {
+      getUserAndLoadNote().catch((error) => {
         console.error(error);
       });
-    }, [noteId]),
+    }, [noteId, router]),
   );
 
   if (typeof noteId !== 'string') {