From 9ef60ea9a3d43516f07efb0d30cfdb084c750f9a Mon Sep 17 00:00:00 2001
From: Advayp <69655599+Advayp@users.noreply.github.com>
Date: Thu, 30 Jan 2025 23:20:01 -0800
Subject: [PATCH] Custom auth hook to retrieve current session data (#98)

* Remove unnecessary import

* Fix bug in validating Spotify auth

* Implement and use custom auth hook
---
 frontend/app/main/index.tsx     | 22 +++++++++-------------
 frontend/app/register/index.tsx |  5 +----
 frontend/hooks/useAuth.ts       | 30 ++++++++++++++++++++++++++++++
 frontend/utils/spotify.ts       |  2 +-
 4 files changed, 41 insertions(+), 18 deletions(-)
 create mode 100644 frontend/hooks/useAuth.ts

diff --git a/frontend/app/main/index.tsx b/frontend/app/main/index.tsx
index ca1a25c..b7aa35e 100644
--- a/frontend/app/main/index.tsx
+++ b/frontend/app/main/index.tsx
@@ -1,22 +1,18 @@
-import { getCurrentSession } from '@/services/auth/me';
-import { User } from '@/types';
-import { useEffect, useState } from 'react';
+import { useAuth } from '@/hooks/useAuth';
 import { SafeAreaView, Text } from 'react-native';
 
 const Index = () => {
-  const [user, setUser] = useState<User>();
-
-  useEffect(() => {
-    const call = async () => {
-      const [currentUser, error] = await getCurrentSession();
-      setUser(currentUser!);
-    };
-    call();
-  }, []);
+  const { user, error, isLoading } = useAuth();
 
   return (
     <SafeAreaView>
-      <Text>{user?.username}</Text>
+      {isLoading ? (
+        <Text>Loading</Text>
+      ) : error ? (
+        <Text>{error}</Text>
+      ) : (
+        <Text>{user?.username}</Text>
+      )}
     </SafeAreaView>
   );
 };
diff --git a/frontend/app/register/index.tsx b/frontend/app/register/index.tsx
index 3360e5e..68f8e95 100644
--- a/frontend/app/register/index.tsx
+++ b/frontend/app/register/index.tsx
@@ -7,10 +7,7 @@ import { register } from '@/services/auth/register';
 import { Button } from '@/components/Button';
 import { Spinner } from '@/components/Spinner';
 import { useRouter } from 'expo-router';
-import {
-  getSpotifyCredentials,
-  validateSpotifyCredentials,
-} from '@/utils/spotify';
+import { validateSpotifyCredentials } from '@/utils/spotify';
 
 const Index = () => {
   const [username, setUsername] = useState('');
diff --git a/frontend/hooks/useAuth.ts b/frontend/hooks/useAuth.ts
new file mode 100644
index 0000000..649be97
--- /dev/null
+++ b/frontend/hooks/useAuth.ts
@@ -0,0 +1,30 @@
+import { getCurrentSession } from '@/services/auth/me';
+import { User } from '@/types';
+import { useEffect, useState } from 'react';
+
+export const useAuth = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string>();
+  const [user, setUser] = useState<User>();
+
+  const fetchData = async () => {
+    setIsLoading(true);
+    setError(undefined);
+    const [user, error] = await getCurrentSession();
+
+    if (error) {
+      setError(error.error);
+      setUser(undefined);
+    } else {
+      setUser(user!);
+    }
+
+    setIsLoading(false);
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  return { user, error, isLoading };
+};
diff --git a/frontend/utils/spotify.ts b/frontend/utils/spotify.ts
index d6db911..551f2e7 100644
--- a/frontend/utils/spotify.ts
+++ b/frontend/utils/spotify.ts
@@ -75,5 +75,5 @@ export const validateSpotifyCredentials = async () => {
     return false;
   }
 
-  return accessToken && refreshToken;
+  return !!accessToken && !!refreshToken;
 };