refactor: split up into components with props (#2)

Co-authored-by: Roland Schlaefli <[email protected]>

package.json

@@ -83,6 +83,7 @@
     "tailwindcss-radix": "2.8.0",
     "ts-node": "10.9.1",
     "ts-node-dev": "2.0.0",
+    "type-fest": "4.5.0",
     "typescript": "5.2.2"
   },
   "volta": {

src/components/AcceptProposalForm.tsx

@@ -7,7 +7,17 @@ import { Form, Formik } from 'formik'
 import toast, { Toaster } from 'react-hot-toast'
 import * as Yup from 'yup'
 
-function AcceptProposalForm({ proposalName, proposalId, supervisorEmail }) {
+interface AcceptProposalFormProps {
+  proposalName: string
+  proposalId: string
+  supervisorEmail: string
+}
+
+export default function AcceptProposalForm({
+  proposalName,
+  proposalId,
+  supervisorEmail,
+}: AcceptProposalFormProps) {
   const SignupSchema = Yup.object().shape({
     comment: Yup.string().required('Required'),
   })
@@ -77,5 +87,3 @@ function AcceptProposalForm({ proposalName, proposalId, supervisorEmail }) {
     </Formik>
   )
 }
-
-export default AcceptProposalForm

src/components/ApplicationForm.tsx

@@ -14,16 +14,24 @@ import useLocalStorage from 'src/lib/hooks/useLocalStorage'
 import { trpc } from 'src/lib/trpc'
 import * as Yup from 'yup'
 
-function ApplicationForm({ proposalName, proposalId }) {
-  const [cv, setCv] = useState([])
-  const [transcript, setTranscript] = useState([])
+interface ApplicationFormProps {
+  proposalName: string
+  proposalId: string
+}
+export default function ApplicationForm({
+  proposalName,
+  proposalId,
+}: ApplicationFormProps) {
+  const [cv, setCv] = useState<any[]>([])
+  const [transcript, setTranscript] = useState<any[]>([])
 
   const mutation = trpc.generateSasQueryToken.useMutation()
 
   const [submitted, setLocalStorage] = useLocalStorage<boolean>(proposalId)
 
   const handleFileFieldChange =
-    (fieldKey, fileName, formikProps) => async (files) => {
+    (fieldKey: string, fileName: string, formikProps: any) =>
+    async (files: any[]) => {
       const file = files[0]
       const { SAS_STRING } = await mutation.mutateAsync()
       console.log('MUTATION RESULT: ', SAS_STRING)
@@ -248,5 +256,3 @@ function ApplicationForm({ proposalName, proposalId }) {
     </>
   )
 }
-
-export default ApplicationForm

src/components/CreateProposal.tsx

@@ -0,0 +1,34 @@
+import { Ref } from 'react'
+
+interface CreateProposalProps {
+  displayMode: string
+  ref: Ref<HTMLIFrameElement>
+}
+
+export default function CreateProposal({
+  displayMode,
+  ref,
+}: CreateProposalProps) {
+  if (displayMode === 'createSupervisor') {
+    return (
+      <iframe
+        ref={ref}
+        className="rounded"
+        width="100%"
+        height="1400px"
+        src={process.env.NEXT_PUBLIC_FORMS_URL_PUBLISH}
+      ></iframe>
+    )
+  } else if (displayMode === 'createStudent') {
+    return (
+      <iframe
+        ref={ref}
+        className="rounded"
+        width="100%"
+        height="1400px"
+        src={process.env.NEXT_PUBLIC_FORMS_URL_SUBMIT}
+      ></iframe>
+    )
+  }
+  return null
+}

src/components/DeclineProposalForm.tsx

@@ -8,7 +8,17 @@ import { Form, Formik } from 'formik'
 import toast, { Toaster } from 'react-hot-toast'
 import * as Yup from 'yup'
 
-function DeclineProposalForm({ proposalName, proposalId, supervisorEmail }) {
+interface DeclineProposalFormProps {
+  proposalName: string
+  proposalId: string
+  supervisorEmail: string
+}
+
+export default function DeclineProposalForm({
+  proposalName,
+  proposalId,
+  supervisorEmail,
+}: DeclineProposalFormProps) {
   const SignupSchema = Yup.object().shape({
     reason: Yup.string().required('Required'),
     comment: Yup.string().required('Required'),
@@ -102,5 +112,3 @@ function DeclineProposalForm({ proposalName, proposalId, supervisorEmail }) {
     </Formik>
   )
 }
-
-export default DeclineProposalForm

src/components/Header.tsx

@@ -1,7 +1,7 @@
 import { Button, H1 } from '@uzh-bf/design-system'
 import { signIn, signOut, useSession } from 'next-auth/react'
 
-function Header() {
+export default function Header() {
   const { data: session } = useSession()
 
   return (
@@ -26,5 +26,3 @@ function Header() {
     </header>
   )
 }
-
-export default Header

src/components/NewProposalButton.tsx

@@ -0,0 +1,41 @@
+import { Button } from '@uzh-bf/design-system'
+import { RefObject } from 'react'
+
+interface NewProposalButtonProps {
+  isSupervisor: boolean
+  displayMode: string
+  setDisplayMode: (displayMode: string) => void
+  setSelectedProposal: (proposalId: string | null) => void
+  buttonRef: RefObject<HTMLButtonElement>
+}
+
+export default function NewProposalButton({
+  isSupervisor,
+  displayMode,
+  setDisplayMode,
+  setSelectedProposal,
+  buttonRef,
+}: NewProposalButtonProps) {
+  const handleButtonClick = () => {
+    setSelectedProposal(null)
+    isSupervisor
+      ? setDisplayMode('createSupervisor')
+      : setDisplayMode('createStudent')
+    buttonRef?.current?.scrollIntoView({
+      behavior: 'smooth',
+    })
+  }
+
+  return (
+    <div>
+      <Button
+        active={
+          displayMode === 'createSupervisor' || displayMode === 'createStudent'
+        }
+        onClick={handleButtonClick}
+      >
+        New Proposal
+      </Button>
+    </div>
+  )
+}

src/components/ProposalApplication.tsx

@@ -0,0 +1,132 @@
+import {
+  IconDefinition,
+  faFilePdf,
+  faMessage,
+} from '@fortawesome/free-regular-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { H2, Table } from '@uzh-bf/design-system'
+import { add, format, parseISO } from 'date-fns'
+import { ProposalDetails } from 'src/types/app'
+import { IterableElement } from 'type-fest'
+import ApplicationForm from './ApplicationForm'
+
+interface ProposalApplicationProps {
+  proposalDetails: ProposalDetails
+  isStudent: boolean
+  isSupervisor: boolean
+}
+
+export default function ProposalApplication({
+  proposalDetails,
+  isStudent,
+  isSupervisor,
+}: ProposalApplicationProps) {
+  const FileTypeIconMap: Record<string, IconDefinition> = {
+    'application/pdf': faFilePdf,
+  }
+  if (proposalDetails?.typeKey === 'SUPERVISOR') {
+    return (
+      <div className="p-4">
+        {isStudent && (
+          <ApplicationForm
+            key={proposalDetails.id}
+            proposalName={proposalDetails.title}
+            proposalId={proposalDetails.id}
+          />
+        )}
+        {isSupervisor && (
+          <div className="pt-4">
+            <H2>Applications</H2>
+            {proposalDetails?.applications?.length === 0 &&
+              'No applications for this proposal...'}
+            {proposalDetails?.applications?.length > 0 && (
+              <Table<IterableElement<(typeof proposalDetails)['applications']>>
+                className={{
+                  root: 'text-xs',
+                  tableHeader: 'text-sm',
+                }}
+                columns={[
+                  {
+                    label: 'Date',
+                    accessor: 'createdAt',
+                    transformer: ({ row }) =>
+                      format(parseISO(row.createdAt), 'dd.MM.Y'),
+                  },
+                  {
+                    label: 'Status',
+                    accessor: 'status',
+                    sortable: true,
+                    transformer: ({ row }) => <div>{row.statusKey}</div>,
+                  },
+                  {
+                    label: 'Working Period',
+                    accessor: 'plannedStartAt',
+                    sortable: true,
+                    transformer: ({ row }) =>
+                      `${format(
+                        parseISO(row.plannedStartAt),
+                        'd.M.Y'
+                      )} - ${format(
+                        add(parseISO(row.plannedStartAt), { months: 6 }),
+                        'd.M.Y'
+                      )}`,
+                  },
+                  {
+                    label: 'Name',
+                    accessor: 'fullName',
+                    sortable: true,
+                    transformer: ({ row }) => (
+                      <a
+                        href={`mailto:${row.email}`}
+                        target="_blank"
+                        className="flex flex-row items-center gap-2 hover:text-orange-700"
+                        rel="noreferrer"
+                      >
+                        <FontAwesomeIcon icon={faMessage} />
+                        {row.fullName}
+                      </a>
+                    ),
+                  },
+                  {
+                    label: 'Motivation',
+                    accessor: 'motivation',
+                    transformer: ({ row }) => (
+                      <div className="text-xs break-all">{row.motivation}</div>
+                    ),
+                  },
+                  {
+                    label: 'Attachments',
+                    accessor: 'attachments',
+                    transformer: ({ row }) => (
+                      <div>
+                        {row.attachments?.map((attachment: any) => (
+                          <a
+                            href={attachment.href}
+                            target="_blank"
+                            key={attachment.id}
+                            className="hover:text-orange-700"
+                            rel="noreferrer"
+                          >
+                            <div className="flex flex-row items-center gap-2">
+                              <FontAwesomeIcon
+                                icon={FileTypeIconMap[attachment.type]}
+                              />
+                              {attachment.name}
+                            </div>
+                          </a>
+                        ))}
+                      </div>
+                    ),
+                  },
+                ]}
+                data={proposalDetails.applications}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    )
+  } else {
+    return null
+  }
+}