feat(client): add useRequireAuth hook

This can be used to redirect to either the pending or login page if a page requires auth

Author: archived-m

client/src/components/StudentCard.jsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { Badge, Pane, Pill } from 'evergreen-ui';
 import { DragSource } from 'react-dnd';
-import { useSuggestions } from '../services';
+import { useSuggestions } from '@/hooks';
 
 import styles from '../assets/styles/student-card.module.css';
 

client/src/hooks/index.js

@@ -1,3 +1,4 @@
 export { default as useAuth } from './useAuth';
 export { default as useStudents } from './useStudents';
 export { default as useSuggestions } from './useSuggestions';
+export { default as useRequireAuth } from './useRequireAuth';

client/src/hooks/useAuth.js

@@ -29,10 +29,6 @@ export default function useAuth() {
     if (data) setUser(data.me);
   }, [fetching, data]);
 
-  useEffect(() => {
-    if (user && user.isPending) router.push('/pending');
-  }, [user, isLoading]);
-
   const logout = async () => {
     await auth.signOut();
     router.push('/login');

client/src/hooks/useRequireAuth.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import useAuth from './useAuth';
+
+export default function useRequireAuth(userShouldNotBePending = true, redirectUrl = '/login') {
+  const { user } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!user) router.push(redirectUrl);
+    if (userShouldNotBePending && user && user.isPending) router.push('/pending');
+  }, [userShouldNotBePending, user, router]);
+
+  return user;
+}

client/src/pages/index.jsx

@@ -1,7 +1,11 @@
+import { useRequireAuth } from '@/hooks';
 import StudentDetail from '@/components/StudentDetail';
 import SidebarLayout from '@/components/SidebarLayout';
 
 function Index() {
+  const user = useRequireAuth();
+
+  if (!user) return <p />;
   return <StudentDetail />;
 }