feat: reactive applicant list

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,13 @@
 import React, { useState } from 'react';
-import { useStudents } from '@/hooks';
+import { useStudents, useStudentList, useApplicantSubscription } from '@/hooks';
 import Filters from './Filters';
 import StudentCard from './StudentCard';
 
 import styles from '../assets/styles/dashboard.module.css';
 
 const StudentList = ({ showOnly }) => {
+  useApplicantSubscription();
+  const { applicants, isLoading: applicantsLoading } = useStudentList();
   const { students, isLoading } = useStudents();
   const [filtered, setFiltered] = useState([]);
 

client/src/hooks/index.js

@@ -1,4 +1,6 @@
+export { default as useApplicantSubscription } from './useApplicantSubscription';
 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/useApplicantSubscription.js

@@ -0,0 +1,9 @@
+import { useSubscription } from 'urql';
+import { subscriptions } from 'common';
+
+export default function useApplicantSubscription() {
+  const [{ result, fetching }] = useSubscription({ query: subscriptions.APPLICANTS_CHANGED });
+
+  console.log(result);
+  return null;
+}

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 };

common/src/graphql/queries/applicantList.ts

@@ -0,0 +1,15 @@
+import gql from 'graphql-tag';
+
+export default gql`
+  query ApplicantList {
+    applicants {
+      id
+      isAlumni
+      firstname
+      lastname
+      suggestions {
+        id
+      }
+    }
+  }
+`;

common/src/graphql/queries/index.ts

@@ -1 +1,2 @@
-export { default as me } from './me';
+export { default as ME } from './me';
+export { default as APPLICANT_LIST } from './applicantList';

common/src/graphql/subscriptions/applicantsChanged.ts

@@ -0,0 +1,18 @@
+import gql from 'graphql-tag';
+
+export default gql`
+  subscription ApplicantsSub {
+    applicantsChanged {
+      id
+      suggestions {
+        id
+      }
+      projects {
+        id
+      }
+      firstname
+      lastname
+      isAlumni
+    }
+  }
+`;

common/src/graphql/subscriptions/index.ts

@@ -0,0 +1 @@
+export { default as APPLICANTS_CHANGED } from './applicantsChanged';

common/src/index.ts

@@ -6,3 +6,4 @@ export * from './types/Project';
 export * from './types/Profile';
 export * from './types/Skill';
 export * as queries from './graphql/queries';
+export * as subscriptions from './graphql/subscriptions';

server/prisma/seed.ts

@@ -7,7 +7,6 @@ async function main() {
   console.log('seeding...');
 
   for (let i = 0; i < 10; i++) {
-
     const genders = ['male', 'female', 'nonbinary'];
 
     await prisma.applicant.upsert({