From 9f61c1590faadfa65b1b852a78915cfe6024de68 Mon Sep 17 00:00:00 2001
From: mxmlnwbr <71628027+mxmlnwbr@users.noreply.github.com>
Date: Thu, 9 Nov 2023 10:46:37 +0100
Subject: [PATCH] feat(app): Proposal filtering (#7)

Co-authored-by: Roland Schlaefli <rolandschlaefli@gmail.com>
---
 src/components/ProposalStatusForm.tsx         |   7 +-
 src/components/StudentProposals.tsx           |  64 ++++-
 src/components/SupervisorProposals.tsx        |   7 +-
 ...useLocalStorage.tsx => useLocalStorage.ts} |   0
 src/lib/hooks/useUserRole.ts                  |  18 ++
 src/pages/index.tsx                           |  83 +++---
 src/server/routers/_app.ts                    | 251 +++++++++++-------
 src/types/{app.d.ts => app.ts}                |  19 +-
 8 files changed, 290 insertions(+), 159 deletions(-)
 rename src/lib/hooks/{useLocalStorage.tsx => useLocalStorage.ts} (100%)
 create mode 100644 src/lib/hooks/useUserRole.ts
 rename src/types/{app.d.ts => app.ts} (60%)

diff --git a/src/components/ProposalStatusForm.tsx b/src/components/ProposalStatusForm.tsx
index eb86f95..26ceeef 100644
--- a/src/components/ProposalStatusForm.tsx
+++ b/src/components/ProposalStatusForm.tsx
@@ -1,6 +1,6 @@
 import { useSessionStorage } from '@uidotdev/usehooks'
 import { Tabs, UserNotification } from '@uzh-bf/design-system'
-import type { Session } from 'next-auth'
+import { useSession } from 'next-auth/react'
 import { ProposalDetails } from 'src/types/app'
 import AcceptProposalForm from './AcceptProposalForm' // Import AcceptProposalForm and other form components
 import DeclineProposalForm from './DeclineProposalForm'
@@ -8,16 +8,17 @@ import RejectProposalForm from './RejectProposalForm'
 import TentativeAcceptProposalForm from './TentativeAcceptProposalForm'
 interface ProposalStatusFormProps {
   proposalDetails: ProposalDetails
-  session: Session | null
 }
 
 export default function ProposalStatusForm({
   proposalDetails,
-  session,
 }: ProposalStatusFormProps) {
+  const { data: session } = useSession()
+
   const [providedFeedback, setProvidedFeedback] = useSessionStorage<
     null | string
   >(proposalDetails.id, null)
+
   if (
     (proposalDetails?.typeKey === 'STUDENT' &&
       proposalDetails?.statusKey === 'MATCHED_TENTATIVE') ||
diff --git a/src/components/StudentProposals.tsx b/src/components/StudentProposals.tsx
index f98a8c1..293ee30 100644
--- a/src/components/StudentProposals.tsx
+++ b/src/components/StudentProposals.tsx
@@ -1,27 +1,72 @@
-import { H2, H3 } from '@uzh-bf/design-system'
-import { RefObject } from 'react'
+import { H2, H3, Select } from '@uzh-bf/design-system'
+import * as R from 'ramda'
+import { RefObject, useMemo } from 'react'
+import { ProposalDetails, ProposalStatusFilter } from 'src/types/app'
 import ProposalCard from './ProposalCard'
 
 interface StudentProposalsProps {
-  data: any
-  groupedStudentProposals: any
+  data: ProposalDetails[]
   selectedProposal: string | null
   setSelectedProposal: (proposalId: string | null) => void
-  setDisplayMode: (displayMode: string) => void
   buttonRef: RefObject<HTMLButtonElement>
+  filters: {
+    status: ProposalStatusFilter
+  }
+  setFilters: (filters: { status: ProposalStatusFilter }) => void
 }
 
 export default function StudentProposals({
   data,
-  groupedStudentProposals,
   selectedProposal,
   setSelectedProposal,
-  setDisplayMode,
   buttonRef,
+  filters,
+  setFilters,
 }: StudentProposalsProps) {
+  const groupedStudentProposals = useMemo(() => {
+    if (!data) return {}
+
+    return R.groupBy<ProposalDetails>(
+      (p) => p.topicArea.name,
+      R.sortBy(
+        R.prop('title'),
+        data.filter(
+          (proposal: ProposalDetails) => proposal.typeKey === 'STUDENT'
+        )
+      )
+    )
+  }, [data])
+
   return (
     <div>
-      <H2>Student Proposals</H2>
+      <div className="flex items-center justify-between">
+        <H2>Student Proposals</H2>
+        <Select
+          value={filters.status}
+          items={[
+            {
+              value: ProposalStatusFilter.OPEN_PROPOSALS,
+              label: 'Open Proposals',
+            },
+            {
+              value: ProposalStatusFilter.MY_PROPOSALS,
+              label: 'My Proposals',
+            },
+            {
+              value: ProposalStatusFilter.REJECTED_AND_DECLINED_PROPOSALS,
+              label: 'Rejected / Declined Proposals',
+            },
+            {
+              value: ProposalStatusFilter.ALL_PROPOSALS,
+              label: 'All Proposals',
+            },
+          ]}
+          onChange={(newStatus: string) => {
+            setFilters({ status: newStatus as ProposalStatusFilter })
+            setSelectedProposal(null)
+          }}
+        />
+      </div>
       <div className="text-base">
         {data?.filter((proposal: any) => proposal.typeKey === 'STUDENT')
           .length === 0 && <div>No student proposals available...</div>}
@@ -46,8 +91,7 @@ export default function StudentProposals({
                     proposal={proposal}
                     isActive={selectedProposal === proposal.id}
                     onClick={() => {
-                      setSelectedProposal(proposal.id),
-                        setDisplayMode('details')
+                      setSelectedProposal(proposal.id)
                       buttonRef?.current?.scrollIntoView({
                         behavior: 'smooth',
                       })
diff --git a/src/components/SupervisorProposals.tsx b/src/components/SupervisorProposals.tsx
index 690aab5..0e4b481 100644
--- a/src/components/SupervisorProposals.tsx
+++ b/src/components/SupervisorProposals.tsx
@@ -1,13 +1,13 @@
 import { H2 } from '@uzh-bf/design-system'
 import { RefObject } from 'react'
+import { ProposalDetails } from 'src/types/app'
 import ProposalCard from './ProposalCard'
 
 interface SupervisorProposalsProps {
   isSupervisor: boolean
-  data: any
+  data: ProposalDetails[]
   selectedProposal: string | null
   setSelectedProposal: (proposalId: string | null) => void
-  setDisplayMode: (displayMode: string) => void
   buttonRef: RefObject<HTMLButtonElement>
 }
 
@@ -16,7 +16,6 @@ export default function SupervisorProposals({
   data,
   selectedProposal,
   setSelectedProposal,
-  setDisplayMode,
   buttonRef,
 }: SupervisorProposalsProps) {
   return (
@@ -35,7 +34,7 @@ export default function SupervisorProposals({
               proposal={proposal}
               isActive={selectedProposal === proposal.id}
               onClick={() => {
-                setSelectedProposal(proposal.id), setDisplayMode('details')
+                setSelectedProposal(proposal.id)
                 buttonRef.current?.scrollIntoView({
                   behavior: 'smooth',
                 })
diff --git a/src/lib/hooks/useLocalStorage.tsx b/src/lib/hooks/useLocalStorage.ts
similarity index 100%
rename from src/lib/hooks/useLocalStorage.tsx
rename to src/lib/hooks/useLocalStorage.ts
diff --git a/src/lib/hooks/useUserRole.ts b/src/lib/hooks/useUserRole.ts
new file mode 100644
index 0000000..1e887bb
--- /dev/null
+++ b/src/lib/hooks/useUserRole.ts
@@ -0,0 +1,18 @@
+import { useSession } from 'next-auth/react'
+import { UserRole } from '../constants'
+
+function useUserRole() {
+  const { data: session } = useSession()
+
+  const isAdmin = session?.user?.role === UserRole.ADMIN
+  const isSupervisor = session?.user?.role === UserRole.SUPERVISOR
+  const isStudent = !isAdmin && !isSupervisor
+
+  return {
+    isAdmin,
+    isSupervisor,
+    isStudent,
+  }
+}
+
+export default useUserRole
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 5edb102..69cca8f 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,7 +1,4 @@
-import { IconDefinition, faFilePdf } from '@fortawesome/free-regular-svg-icons'
-import { useSession } from 'next-auth/react'
 import { useRouter } from 'next/router'
-import * as R from 'ramda'
 import { useMemo, useRef, useState } from 'react'
 import ProposalApplication from 'src/components/ProposalApplication'
 import ProposalFeedback from 'src/components/ProposalFeedback'
@@ -9,62 +6,54 @@ import ProposalMeta from 'src/components/ProposalMeta'
 import ProposalStatusForm from 'src/components/ProposalStatusForm'
 import StudentProposals from 'src/components/StudentProposals'
 import SupervisorProposals from 'src/components/SupervisorProposals'
-import { UserRole } from 'src/lib/constants'
+import useUserRole from 'src/lib/hooks/useUserRole'
 import { trpc } from 'src/lib/trpc'
-import { ProposalDetails } from 'src/types/app'
+import { ProposalStatusFilter } from 'src/types/app'
 
-const FileTypeIconMap: Record<string, IconDefinition> = {
-  'application/pdf': faFilePdf,
-}
 export default function Index() {
   const router = useRouter()
   const buttonRef = useRef<null | HTMLDivElement>(null)
 
-  const { data: session } = useSession()
+  const [filters, setFilters] = useState<{
+    status: ProposalStatusFilter
+  }>({
+    status: ProposalStatusFilter.OPEN_PROPOSALS,
+  })
+
+  const { isAdmin, isStudent, isSupervisor } = useUserRole()
 
-  const { data, isLoading, isError, isFetching } = trpc.proposals.useQuery()
+  const { data, isLoading, isError, isFetching } = trpc.proposals.useQuery({
+    filters,
+  })
 
-  const [displayMode, setDisplayMode] = useState('')
   const [selectedProposal, setSelectedProposal] = useState<string | null>(
     (router?.query?.proposalId as string) ?? null
   )
 
-  const groupedStudentProposals = useMemo(() => {
-    if (!data) return []
-    return R.groupBy<ProposalDetails>(
-      (p) => p.topicArea.name,
-      R.sortBy(
-        R.prop('title'),
-        data.filter((proposal) => proposal.typeKey === 'STUDENT')
-      )
-    )
-  }, [data])
-
   const proposalDetails = useMemo(() => {
-    if (!selectedProposal) return setSelectedProposal(data?.[0]?.id as string)
+    if (!selectedProposal) {
+      setSelectedProposal(data?.[0]?.id as string)
+      return
+    }
 
     return data?.find((p) => p.id === selectedProposal)
-  }, [data, selectedProposal, displayMode])
+  }, [data, selectedProposal])
 
   if (isLoading) {
     return <div className="p-2">Loading 🔄🚀</div>
   }
 
-  const isAdmin = session?.user?.role === UserRole.ADMIN
-  const isSupervisor = session?.user?.role === UserRole.SUPERVISOR
-  const isStudent = !isAdmin && !isSupervisor
-
   return (
-    <div className="grid grid-cols-1 gap-2 m-4 md:grid-cols-2 flex-1">
+    <div className="grid flex-1 grid-cols-1 gap-2 m-4 md:grid-cols-2">
       <div className="flex-initial pb-4 space-y-4 md:flex-1">
         {isSupervisor && (
           <StudentProposals
             data={data}
-            groupedStudentProposals={groupedStudentProposals}
             selectedProposal={selectedProposal}
             setSelectedProposal={setSelectedProposal}
-            setDisplayMode={setDisplayMode}
             buttonRef={buttonRef}
+            filters={filters}
+            setFilters={setFilters}
           />
         )}
 
@@ -73,28 +62,28 @@ export default function Index() {
           data={data}
           selectedProposal={selectedProposal}
           setSelectedProposal={setSelectedProposal}
-          setDisplayMode={setDisplayMode}
           buttonRef={buttonRef}
         />
       </div>
 
       <div className="mb-4 border shadow" ref={buttonRef}>
         {!selectedProposal && <div className="p-4">No proposal selected</div>}
-        <ProposalMeta proposalDetails={proposalDetails} />
-        <ProposalApplication
-          proposalDetails={proposalDetails}
-          isStudent={isStudent}
-          isSupervisor={isSupervisor}
-        />
-        <ProposalFeedback
-          proposalDetails={proposalDetails}
-          isSupervisor={isSupervisor}
-          isAdmin={isAdmin}
-        />
-        <ProposalStatusForm
-          proposalDetails={proposalDetails}
-          session={session}
-        />
+        {proposalDetails && (
+          <>
+            <ProposalMeta proposalDetails={proposalDetails} />
+            <ProposalApplication
+              proposalDetails={proposalDetails}
+              isStudent={isStudent}
+              isSupervisor={isSupervisor}
+            />
+            <ProposalFeedback
+              proposalDetails={proposalDetails}
+              isSupervisor={isSupervisor}
+              isAdmin={isAdmin}
+            />
+            <ProposalStatusForm proposalDetails={proposalDetails} />
+          </>
+        )}
       </div>
     </div>
   )
diff --git a/src/server/routers/_app.ts b/src/server/routers/_app.ts
index 9bb2cd5..306bfc7 100644
--- a/src/server/routers/_app.ts
+++ b/src/server/routers/_app.ts
@@ -1,5 +1,5 @@
 // import { ClientSecretCredential } from '@azure/identity'
-import { ProposalStatus, UserRole } from 'src/lib/constants'
+import { ProposalStatus, ProposalType, UserRole } from 'src/lib/constants'
 // import { Client } from '@microsoft/microsoft-graph-client'
 // import { TokenCredentialAuthenticationProvider } from '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials'
 import {
@@ -16,8 +16,149 @@ import {
   publicProcedure,
   router,
 } from 'src/server/trpc'
+import { ProposalStatusFilter } from 'src/types/app'
 import { z } from 'zod'
 
+async function getStudentProposals({ ctx, filters }) {
+  const proposals = await prisma.proposal.findMany({
+    where: {
+      typeKey: ProposalType.SUPERVISOR,
+      statusKey: ProposalStatus.OPEN,
+    },
+    include: {
+      attachments: true,
+      topicArea: true,
+      supervisedBy: {
+        include: {
+          supervisor: true,
+        },
+      },
+    },
+  })
+
+  return proposals.map((p) => ({
+    ...p,
+    supervisedBy: p.supervisedBy?.[0]?.supervisor,
+  }))
+}
+
+async function getSupervisorProposals({ ctx, filters }) {
+  let where = {}
+  let applications = undefined
+  let receivedFeedbacks = undefined
+
+  if (ctx.user?.role === UserRole.SUPERVISOR) {
+    where = {
+      ...where,
+      typeKey: {
+        in: ['SUPERVISOR', 'STUDENT'],
+      },
+    }
+    applications = {
+      include: {
+        attachments: true,
+        status: true,
+      },
+    }
+    receivedFeedbacks = {
+      where: {
+        user: {
+          email: ctx.user.email,
+        },
+      },
+    }
+  } else {
+    where = {
+      ...where,
+      typeKey: {
+        in: ['SUPERVISOR'],
+      },
+    }
+  }
+
+  if (filters.status === ProposalStatusFilter.ALL_PROPOSALS) {
+    where = {
+      ...where,
+      OR: [
+        { statusKey: ProposalStatus.OPEN },
+        {
+          supervisedBy: {
+            some: {
+              supervisorEmail: ctx.user?.email,
+            },
+          },
+        },
+      ],
+    }
+  }
+
+  if (filters.status === ProposalStatusFilter.OPEN_PROPOSALS) {
+    where = {
+      ...where,
+      statusKey: ProposalStatus.OPEN,
+      NOT: {
+        receivedFeedbacks: {
+          some: {
+            userEmail: ctx.user?.email,
+          },
+        },
+      },
+    }
+  }
+
+  if (filters.status === ProposalStatusFilter.MY_PROPOSALS) {
+    where = {
+      ...where,
+      supervisedBy: {
+        some: {
+          supervisorEmail: ctx.user?.email,
+        },
+      },
+    }
+  }
+
+  if (filters.status === ProposalStatusFilter.REJECTED_AND_DECLINED_PROPOSALS) {
+    where = {
+      ...where,
+      OR: [
+        {
+          receivedFeedbacks: {
+            some: {
+              userEmail: ctx.user?.email,
+              typeKey: { startsWith: 'REJECTED' },
+            },
+          },
+        },
+        {
+          receivedFeedbacks: {
+            some: {
+              userEmail: ctx.user?.email,
+              typeKey: { startsWith: 'DECLINED' },
+            },
+          },
+        },
+      ],
+    }
+  }
+
+  const proposals = await prisma.proposal.findMany({
+    where,
+    include: {
+      attachments: true,
+      topicArea: true,
+      ownedByUser: true,
+      supervisedBy: {
+        include: {
+          supervisor: true,
+        },
+      },
+      applications,
+      receivedFeedbacks,
+    },
+  })
+  return proposals
+}
+
 export const appRouter = router({
   generateSasQueryToken: optionalAuthedProcedure.mutation(() => {
     const sharedKeyCredential = new StorageSharedKeyCredential(
@@ -45,69 +186,26 @@ export const appRouter = router({
 
   healthcheck: publicProcedure.query(() => 'OK'),
 
-  proposals: optionalAuthedProcedure.query(async ({ ctx }) => {
-    const proposals = await prisma.proposal.findMany({
-      where: {
-        typeKey: {
-          in:
-            ctx.user?.role === UserRole.SUPERVISOR ||
-            ctx.user?.role === UserRole.ADMIN
-              ? ['SUPERVISOR', 'STUDENT']
-              : ['SUPERVISOR'],
-        },
-      },
-      include: {
-        attachments: true,
-        topicArea: true,
-        ownedByUser: true,
-        supervisedBy: {
-          include: {
-            supervisor: true,
-          },
-        },
-        applications:
-          ctx.user?.role === UserRole.SUPERVISOR
-            ? {
-                include: {
-                  attachments: true,
-                  status: true,
-                },
-              }
-            : undefined,
-        receivedFeedbacks: ctx.user?.role
-          ? [UserRole.SUPERVISOR, UserRole.ADMIN].includes(ctx.user.role) && {
-              where:
-                ctx.user.role === UserRole.SUPERVISOR && ctx.user.email
-                  ? {
-                      user: {
-                        email: ctx.user.email,
-                      },
-                    }
-                  : undefined,
-            }
-          : undefined,
-      },
-    })
-
-    return proposals
-      .map((p) => ({
-        ...p,
-        supervisedBy: p.supervisedBy?.[0]?.supervisor,
-        ownedBy: p.ownedByUser,
-        isSupervisedProposal:
-          p.supervisedBy && p.supervisedBy[0]?.supervisor?.id === ctx.user?.sub,
-        isOwnProposal: p.ownedByUser && p.ownedByUser.id === ctx.user?.sub,
-        receivedFeedbacks: p.receivedFeedbacks,
-      }))
-      .filter((p) => {
-        return (
-          ctx.user?.role === UserRole.ADMIN ||
-          p.statusKey === ProposalStatus.OPEN ||
-          p.isOwnProposal ||
-          p.isSupervisedProposal
-        )
+  proposals: optionalAuthedProcedure
+    .input(
+      z.object({
+        filters: z.object({
+          status: z.enum([
+            ProposalStatusFilter.ALL_PROPOSALS,
+            ProposalStatusFilter.OPEN_PROPOSALS,
+            ProposalStatusFilter.MY_PROPOSALS,
+            ProposalStatusFilter.REJECTED_AND_DECLINED_PROPOSALS,
+          ]),
+        }),
       })
-  }),
+    )
+    .query(({ input, ctx }) => {
+      if ([UserRole.ADMIN, UserRole.SUPERVISOR].includes(ctx.user?.role)) {
+        return getSupervisorProposals({ ctx, filters: input.filters })
+      }
+
+      return getStudentProposals({ ctx, filters: input.filters })
+    }),
 
   submitProposalFeedback: authedProcedure
     .input(
@@ -144,33 +242,6 @@ export const appRouter = router({
     .mutation(async ({ ctx, input }) => {
       const res = await axios.post(process.env.APPLICATION_URL as string, input)
     }),
-
-  // supervisors: optionalAuthedProcedure.query(async ({ ctx }) => {
-  //   // Create an instance of the TokenCredential class that is imported
-  //   const tokenCredential = new ClientSecretCredential(
-  //     process.env.AZURE_AD_TENANT_ID,
-  //     process.env.AZURE_AD_CLIENT_ID,
-  //     process.env.AZURE_AD_CLIENT_SECRET,
-  //   )
-
-  //   // Create an instance of the TokenCredentialAuthenticationProvider by passing the tokenCredential instance and options to the constructor
-  //   const authProvider = new TokenCredentialAuthenticationProvider(
-  //     tokenCredential,
-  //     {
-  //       scopes: ['https://graph.microsoft.com/.default'],
-  //       getTokenOptions: { tenantId: process.env.AZURE_AD_TENANT_ID },
-  //     },
-  //   )
-  //   const client = Client.initWithMiddleware({
-  //     debugLogging: true,
-  //     authProvider: authProvider,
-  //   })
-  //   const res = await client
-  //     .api('/sites/UZHBFThesisMarket/lists/Supervisors/items')
-  //     .get()
-
-  //   console.log(res)
-  // }),
 })
 
 export type AppRouter = typeof appRouter
diff --git a/src/types/app.d.ts b/src/types/app.ts
similarity index 60%
rename from src/types/app.d.ts
rename to src/types/app.ts
index 7b3132f..9bde003 100644
--- a/src/types/app.d.ts
+++ b/src/types/app.ts
@@ -35,9 +35,18 @@ declare module 'next-auth' {
   }
 }
 
-type RouterInput = inferRouterInputs<AppRouter>
-type RouterOutput = inferRouterOutputs<AppRouter>
+export type RouterInput = inferRouterInputs<AppRouter>
+export type RouterOutput = inferRouterOutputs<AppRouter>
 
-type ProposalsOutput = RouterOutput['proposals']
-type ProposalDetails = IterableElement<ProposalsOutput>
-type ApplicationDetails = IterableElement<ProposalDetails['applications']>
+export type ProposalsOutput = RouterOutput['proposals']
+export type ProposalDetails = IterableElement<ProposalsOutput>
+export type ApplicationDetails = IterableElement<
+  ProposalDetails['applications']
+>
+
+export enum ProposalStatusFilter {
+  OPEN_PROPOSALS = 'OPEN_PROPOSALS',
+  ALL_PROPOSALS = 'ALL_PROPOSALS',
+  MY_PROPOSALS = 'MY_PROPOSALS',
+  REJECTED_AND_DECLINED_PROPOSALS = 'REJECTED_AND_DECLINED_PROPOSALS',
+}