feat: retrieve all applicants

Author: archived-m

client/package.json

@@ -35,6 +35,7 @@
     "react-dnd": "^11.0.0",
     "react-dnd-html5-backend": "^11.0.0",
     "react-dom": "^17.0.2",
+    "subscriptions-transport-ws": "^0.9.19",
     "urql": "^2.0.4",
     "zustand": "^3.5.5"
   },

client/src/components/AppWrapper.jsx

@@ -3,7 +3,7 @@ import { useAuth } from '@/hooks';
 const AppWrapper = ({ children }) => {
   const { isLoading } = useAuth();
 
-  if (isLoading) return <p />;
+  // if (isLoading) return <p />;
   return { children };
 };
 

client/src/components/StudentList.jsx

@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
-import { useStudents } from '@/hooks';
+import { useStudents, useStudentList } from '@/hooks';
 import Filters from './Filters';
 import StudentCard from './StudentCard';
 
 import styles from '../assets/styles/dashboard.module.css';
 
 const StudentList = ({ showOnly }) => {
+  const { applicants, isLoading: applicantsLoading } = useStudentList();
   const { students, isLoading } = useStudents();
   const [filtered, setFiltered] = useState([]);
 

client/src/hooks/index.js

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

client/src/hooks/useAuth.js

@@ -16,7 +16,7 @@ const useStore = create((set) => ({
 }));
 
 export default function useAuth() {
-  const [{ data, fetching }] = useQuery({ query: queries.me });
+  const [{ data, fetching }] = useQuery({ query: queries.ME });
 
   const { user, isLoggingIn, setUser, finishLoading, login, isLoading } = useStore();
   const router = useRouter();

client/src/hooks/useStudentList.js

@@ -0,0 +1,8 @@
+import { useQuery } from 'urql';
+import { queries } from 'common';
+
+export default function useStudents() {
+  const [{ data, fetching }] = useQuery({ query: queries.APPLICANT_LIST });
+
+  return { isLoading: fetching, applicants: data ? data.applicants : null };
+}

client/src/pages/index.jsx

@@ -1,11 +1,13 @@
 import { useRequireAuth } from '@/hooks';
 import StudentDetail from '@/components/StudentDetail';
 import SidebarLayout from '@/components/SidebarLayout';
+import { useQuery, useSubscription } from 'urql';
+import { subscriptions, queries } from 'common';
 
 function Index() {
-  const user = useRequireAuth();
+  // const user = useRequireAuth();
 
-  if (!user) return <p />;
+  //  if (!user) return <p />;
   return <StudentDetail />;
 }
 

client/src/pages/login.jsx

@@ -2,15 +2,11 @@ import { useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { useAuth } from '@/hooks';
 import { API_URL } from '@/constants';
-import { useQuery } from 'urql';
-import { queries } from 'common';
 import SocialButton from '../components/SocialButton';
 
 import styles from '../assets/styles/pending.module.css';
 
 export default function Login() {
-  const router = useRouter();
-  const [result] = useQuery({ query: queries.me });
   // const { user } = useAuth();
 
   /*

client/src/urql-client.js

@@ -1,15 +1,37 @@
 import { API_URL } from '@/constants';
 import { cacheExchange } from '@urql/exchange-graphcache';
-import { createClient, ssrExchange, dedupExchange, fetchExchange } from 'urql';
+import {
+  createClient,
+  ssrExchange,
+  dedupExchange,
+  fetchExchange,
+  subscriptionExchange
+} from 'urql';
+import { SubscriptionClient } from 'subscriptions-transport-ws';
 
 // Use a normalized cache
 const cache = cacheExchange({});
 
 const isServerSide = typeof window === 'undefined';
 const ssrCache = ssrExchange({ isClient: !isServerSide });
+
+const subscriptionClient = !isServerSide
+  ? new SubscriptionClient(`ws${API_URL.replace(/^http?/, '')}/graphql`, {
+      reconnect: true
+    })
+  : null;
+
 const client = createClient({
   url: `${API_URL}/graphql`,
-  exchanges: [dedupExchange, cache, fetchExchange, ssrCache]
+  exchanges: [
+    dedupExchange,
+    cache,
+    fetchExchange,
+    ssrCache,
+    subscriptionExchange({
+      forwardSubscription: (operation) => subscriptionClient.request(operation)
+    })
+  ]
 });
 
 export { client, ssrCache };