UI Fixes on Submission Box Page

cypress/e2e/app/submission-box/detail/editBoxDetail.cy.ts

@@ -1,6 +1,6 @@
 import { TIMEOUT } from '../../../../utils/constants'
 
-describe('Recieving Dashboard Details Page Tests', () => {
+describe('Edit Box Detail Page Tests', () => {
     // Submission Box information
     const submissionBoxTitle1 = 'Test Modification with only title'
     const submissionBoxTitle2 = 'Test Modification with all fields'
@@ -12,6 +12,7 @@ describe('Recieving Dashboard Details Page Tests', () => {
     const newDescription = 'A new description for the submission box.'
     const newTimeCharacters = '2060 06 13 03:30 AM' // Characters to be typed in DatePicker
     const newTimeDisplay = '2060/06/13 03:30 AM'
+
     beforeEach(() => {
         cy.task('clearDB')
         // User information

cypress/e2e/app/submission-box/detail/viewBoxDetail.cy.ts

@@ -0,0 +1,59 @@
+import { TIMEOUT } from '../../../../utils/constants'
+
+describe('View Box Detail Page Tests', () => {
+    // Submission Box information
+    const submissionBoxTitle1 = 'Test Viewing With Members'
+    const submissionBoxTitle2 = 'Test Viewing Without Members'
+    const submissionBoxDescription = 'Description'
+    const submissionBoxTime = new Date('December 17, 2045 03:24:00')
+    const invitedEmail = 'invited@member.email'
+
+    beforeEach(() => {
+        cy.task('clearDB')
+        // User information
+        const email = 'view@detail.test'
+        const password = 'Pass1234'
+
+        // Create a user with two managed submission boxes, one with members, one without
+        cy.task('createUser', { email, password })
+        cy.visit('/login')
+        cy.get('[data-cy=email]').type(email)
+        cy.get('[data-cy=password]').type(password)
+        cy.get('[data-cy=submit]').click()
+        cy.url({ timeout: TIMEOUT.EXTRA_LONG }).should('not.contain', 'login')
+        cy.task('getUserId', email).then((userId) => {
+            cy.task('createSubmissionBoxWithEmail', { submissionBoxTitle: submissionBoxTitle1, email: invitedEmail, userId, submissionBoxDescription})
+            cy.task('createSubmissionBoxForSubmissions', { submissionBoxTitle: submissionBoxTitle2, submissionBoxDescription, userId, closesAt: submissionBoxTime })
+        })
+        cy.reload()
+        cy.visit('/dashboard')
+    })
+
+    it('Should allow the user to view members if there are members', () => {
+        cy.get('[data-cy="Manage Boxes"]')
+        cy.wait(1000)
+        cy.get('[data-cy="Manage Boxes"]').click()
+
+        cy.get(`[data-cy="${ submissionBoxTitle1 }"]`)
+        cy.wait(1000)   // Waiting for it to be clickable
+        cy.get(`[data-cy="${ submissionBoxTitle1 }"]`).click()
+
+        cy.get('[data-cy="submissionBoxMembersHeading"]').should('be.visible')
+
+        cy.get('[data-cy="submissionBoxMembers"]').should('contain', invitedEmail)
+    })
+
+    it('Should not display members if there aren\'t any', () => {
+        cy.get('[data-cy="Manage Boxes"]')
+        cy.wait(1000)
+        cy.get('[data-cy="Manage Boxes"]').click()
+
+        cy.get(`[data-cy="${ submissionBoxTitle2 }"]`)
+        cy.wait(1000)   // Waiting for it to be clickable
+        cy.get(`[data-cy="${ submissionBoxTitle2 }"]`).click()
+
+        cy.get('[data-cy="submissionBoxMembersHeading"]').should('not.exist')
+
+        cy.get('[data-cy="submissionBoxMembers"]').should('not.exist')
+    })
+})

src/app/api/submission-box/[id]/route.ts

@@ -40,6 +40,7 @@ export async function GET(req: NextRequest): Promise<NextResponse> {
                     select: {
                         id: true,
                         userId: true,
+                        email: true,
                     },
                 },
             },

src/app/api/submission-box/update/[id]/route.ts

@@ -78,12 +78,20 @@ export async function PUT(req: NextRequest): Promise<NextResponse> {
             where: {
                 id: submissionBoxId,
             },
+            include: {
+                requestedSubmissions: {
+                    select: {
+                        email: true,
+                    },
+                },
+            },
             data: {
                 title: title,
                 description: description,
                 closesAt: closesAt ? new Date(closesAt.toString()) : null,
             },
         })
+
         return NextResponse.json( {submission: updatedSubmissionBox}, { status: 200 })
     } catch (error) {
         return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })

src/app/submission-box/[boxId]/page.tsx

@@ -3,7 +3,7 @@
 import { useRouter } from 'next/navigation'
 import React, { useEffect, useState } from 'react'
 import { Typography, Box, Link, Dialog, DialogTitle, DialogActions, Button, Alert, TextField } from '@mui/material'
-import { SubmissionBox, Video } from '@prisma/client'
+import { RequestedSubmission, SubmissionBox, Video } from '@prisma/client'
 import VideoList from '@/components/VideoList'
 import BackButtonWithLink from '@/components/BackButtonWithLink'
 import SubmissionBoxDetails from '@/components/SubmissionBoxDetails'
@@ -32,7 +32,7 @@ export default function SubmissionBoxDetailPage({ params }: SubmissionBoxDetailP
     const [isFetchingSubmissionBox, setIsFetchingSubmissionBox] = useState(true)
     const [boxType, setBoxType] = useState<BoxStatus>('requested')
     const [videos, setVideos] = useState<(Video & VideoSubmission)[]>([])
-    const [boxInfo, setBoxInfo] = useState<SubmissionBox | null>(null)
+    const [boxInfo, setBoxInfo] = useState<SubmissionBox & { requestedSubmissions: RequestedSubmission[]} | null>(null)
     const [isEditing, setIsEditing] = useState(false)
     const [isFormSubmitted, setIsFormSubmitted] = useState(false)
 
@@ -139,7 +139,7 @@ export default function SubmissionBoxDetailPage({ params }: SubmissionBoxDetailP
                                     emptyMessage={'No Videos Have Been Submitted to Your Box'}
                                 />
                             </Box>
-                            <Box paddingLeft='2rem'>
+                            <Box pr='1rem' pl='2rem'>
                                 {!isEditing && (
                                     <Box
                                         top='2rem'
@@ -158,7 +158,7 @@ export default function SubmissionBoxDetailPage({ params }: SubmissionBoxDetailP
                                     </Box>
                                 )}
                                 {!isEditing ? (
-                                    <SubmissionBoxDetails submissionBox={boxInfo} />
+                                    <SubmissionBoxDetails submissionBox={boxInfo} isOwned={true}/>
                                 ) : (
                                     <>
                                         <form onSubmit={formik.handleSubmit} noValidate>
@@ -334,7 +334,7 @@ export default function SubmissionBoxDetailPage({ params }: SubmissionBoxDetailP
                                 <Box sx={{
                                     pr: '2rem',
                                 }}>
-                                    <SubmissionBoxDetails submissionBox={boxInfo} onUnsubmit={videos?.length !== 0 ? () => setUnsubmitDialogOpen(true) : undefined}/>
+                                    <SubmissionBoxDetails submissionBox={boxInfo} onUnsubmit={videos?.length !== 0 ? () => setUnsubmitDialogOpen(true) : undefined} isOwned={false}/>
                                     <Dialog
                                         open={unsubmitDialogOpen}
                                         onClose={() => setUnsubmitDialogOpen(false)}

src/components/SubmissionBoxDetails/index.tsx

@@ -2,13 +2,14 @@
 
 import Typography from '@mui/material/Typography'
 import React from 'react'
-import { SubmissionBox } from '@prisma/client'
-import { Box } from '@mui/material'
+import { RequestedSubmission, SubmissionBox } from '@prisma/client'
+import { Box, Chip } from '@mui/material'
 import Button from '@mui/material/Button'
 
 export type SubmissionBoxInfoProps = {
-    submissionBox: SubmissionBox | null
+    submissionBox: SubmissionBox & { requestedSubmissions: RequestedSubmission[]} | null
     onUnsubmit?: () => void
+    isOwned: boolean
 }
 export default function SubmissionBoxDetails(props: SubmissionBoxInfoProps) {
     return (
@@ -61,6 +62,19 @@ export default function SubmissionBoxDetails(props: SubmissionBoxInfoProps) {
                     </Typography>
                 </Box>
             )}
+            {props.isOwned && props.submissionBox && props.submissionBox.requestedSubmissions && props.submissionBox.requestedSubmissions.length > 0 && (
+                <Box>
+                    <Typography data-cy='submissionBoxMembersHeading' color={'textSecondary'} sx={{ fontWeight: 'bold' }}>
+                    Members
+                    </Typography>
+                    <Box data-cy='submissionBoxMembers'>
+                        {props.submissionBox.requestedSubmissions.map((requestedSubmission: {id: string, email: string}) =>
+                            <Chip sx={{ m: 0.5, ml: 0 }} key={`submission-box-chip-${ requestedSubmission.id }`} label={requestedSubmission.email} />
+                        )
+                        }
+                    </Box>
+                </Box>
+            )}
             {props.onUnsubmit && (
                 <Box
                     sx={{