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

@@ -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'

src/components/SubmissionBoxDetails/index.tsx

@@ -2,12 +2,12 @@
 
 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
 }
 export default function SubmissionBoxDetails(props: SubmissionBoxInfoProps) {
@@ -61,6 +61,19 @@ export default function SubmissionBoxDetails(props: SubmissionBoxInfoProps) {
                     </Typography>
                 </Box>
             )}
+            {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={{