Allow users to joing nominations and edit them

Signed-off-by: miam-miam100 <[email protected]>

src/app/(pages)/nominations/[electionId]/edit/NominationForm/index.tsx

@@ -3,6 +3,7 @@
 import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import RichTextField from '@payloadcms/richtext-slate/dist/field'
+import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { createEditor } from 'slate'
 import { Editable, Slate, withReact } from 'slate-react'
@@ -127,6 +128,17 @@ const NominationForm: React.FC<{ nominationId?: string }> = props => {
     <form onSubmit={handleSubmit(onSubmit)} className={classes.form}>
       <Message error={error} success={success} className={classes.message} />
       <Fragment>
+        {nomination &&
+          nomination.populatedNominees.map(n => {
+            const email = `${n.username}@soton.ac.uk`
+            return (
+              <Link key={n.id} href={`mailto:${email}`}>
+                {n.name}
+              </Link>
+            )
+          })}
+        <p>URL to give to anyone who you want to join your nomination</p>
+        <span>{`${process.env.NEXT_PUBLIC_SERVER_URL}/nominations/${nomination?.id}/join/${nomination?.joinUUID}`}</span>
         <p>Edit your nomination below</p>
         <Input
           name="nickname"

src/app/(pages)/nominations/[electionId]/join/[joinKey]/JoinNominationForm/index.module.scss

@@ -0,0 +1,23 @@
+@import "../../../../../../_css/common";
+
+.error {
+  color: red;
+  margin-bottom: 15px;
+}
+
+.formWrapper {
+  width: 66.66%;
+
+  @include mid-break {
+    width: 100%;
+  }
+}
+
+.submit {
+  margin-top: var(--base);
+}
+
+.message {
+  margin-bottom: var(--base);
+}
+

src/app/(pages)/nominations/[electionId]/join/[joinKey]/JoinNominationForm/index.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import React, { Fragment, useCallback, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+
+import { Button } from '../../../../../../_components/Button'
+import { Input } from '../../../../../../_components/Input'
+import { Message } from '../../../../../../_components/Message'
+
+import classes from './index.module.scss'
+
+async function joinNomination(
+  router: AppRouterInstance,
+  nominationId: string,
+  joinKey: string,
+  setError,
+) {
+  try {
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_SERVER_URL}/api/nominations/${nominationId}/join/${joinKey}`,
+      {
+        method: 'POST',
+        credentials: 'include',
+      },
+    )
+    const json = await res.json()
+    console.log(json)
+    if (json?.success) {
+      router.push(`/nominations/${nominationId}`)
+    }
+    if (json?.error) {
+      setError(json.error)
+    }
+  } catch (err) {
+    console.log(err)
+  }
+}
+
+export const JoinNominationForm: React.FC<{ nominationId?: string; joinKey?: string }> = params => {
+  const { nominationId, joinKey } = params
+  const router = useRouter()
+  const [error, setError] = useState<string>('')
+
+  return (
+    <Fragment>
+      <Button
+        appearance="primary"
+        label="Join Nomination"
+        onClick={async () => {
+          await joinNomination(router, nominationId, joinKey, setError)
+        }}
+      />
+      {error && <p>{error}</p>}
+    </Fragment>
+  )
+}

src/app/(pages)/nominations/[electionId]/join/[joinKey]/index.module.scss

@@ -0,0 +1,5 @@
+@import "../../../../../_css/common";
+
+.recoverPassword {
+  margin-bottom: var(--block-padding);
+}

src/app/(pages)/nominations/[electionId]/join/[joinKey]/page.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Metadata } from 'next'
+
+import { Gutter } from '../../../../../_components/Gutter'
+import { getMeUser } from '../../../../../_utilities/getMeUser'
+import { mergeOpenGraph } from '../../../../../_utilities/mergeOpenGraph'
+import { JoinNominationForm } from './JoinNominationForm'
+
+import classes from './index.module.scss'
+
+export default async function JoinNomination({ params: { electionId: nominationId, joinKey } }) {
+  const { user } = await getMeUser({
+    nullUserRedirect: `/login?error=${encodeURIComponent(
+      'You must be logged in to access your account.',
+    )}&redirect=${encodeURIComponent(`/nominations/${nominationId}/join/${joinKey}`)}`,
+  })
+
+  return (
+    <Gutter className={classes.recoverPassword}>
+      <JoinNominationForm nominationId={nominationId} joinKey={joinKey} />
+    </Gutter>
+  )
+}
+
+export const metadata: Metadata = {
+  title: 'Recover Password',
+  description: 'Enter your email address to recover your password.',
+  openGraph: mergeOpenGraph({
+    title: 'Recover Password',
+    url: '/recover-password',
+  }),
+}

src/app/(pages)/nominations/[electionId]/page.tsx

@@ -54,7 +54,12 @@ export default async function Nomination({ params: { electionId: nominationId }
         <h3>{nomination.nickname ?? names}</h3>
         {nomination.populatedNominees.map(n => {
           const email = `${n.username}@soton.ac.uk`
-          return <Link href={`mailto:${email}`}>{n.name}</Link>
+          return (
+            <Fragment key={n.id}>
+              {' '}
+              <Link href={`mailto:${email}`}>{n.name}</Link>{' '}
+            </Fragment>
+          )
         })}
         <h4>Running for {position.name}</h4>
         {isMyNomination && (

src/payload/collections/Nominations/endpoints/joinNomination.ts

@@ -11,6 +11,9 @@ export const joinNomination: PayloadHandler = async (req, res): Promise<void> =>
     return
   }
 
+  console.log(req.params)
+  console.log(user)
+
   const nominations: PaginatedDocs<Nomination> = await payload.find({
     collection: 'nominations',
     where: {
@@ -53,7 +56,7 @@ export const joinNomination: PayloadHandler = async (req, res): Promise<void> =>
       id: req.params.id,
       collection: 'nominations',
       data: {
-        nominees,
+        nominees: nominees,
       },
     })
 

src/payload/collections/Nominations/validate/addOwnId.ts

@@ -9,6 +9,8 @@ export const addOwnId: Validate = async (userList: string[], args) => {
     return true
   }
 
+  if (!args.user) return true
+
   const nominations = await args.payload.find({
     collection: 'nominations',
     depth: 0,

src/payload/collections/Nominations/validate/nominationIsUnique.ts

@@ -30,7 +30,7 @@ export const nominationIsUnique: Validate = async (nominees, args) => {
           },
           {
             id: {
-              not_equals: args.operation === 'create' ? '' : args.data.id,
+              not_equals: args.operation === 'create' ? 'non-existent-id' : args.data.id,
             },
           },
           {