Skip to content

Commit

Permalink
File uploader - uprava upozorneni (#221)
Browse files Browse the repository at this point in the history
* Add can resubmit logic

* Improve allerts of user when resubmit or after deadline

* fix after review
  • Loading branch information
Matushl authored Nov 15, 2023
1 parent 45a2ba9 commit d7f5ec8
Show file tree
Hide file tree
Showing 6 changed files with 82 additions and 25 deletions.
3 changes: 3 additions & 0 deletions src/components/Problems/Problem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export const Problem: FC<{
registered: boolean
canRegister: boolean
canSubmit: boolean
isAfterDeadline: boolean
invalidateSeriesQuery: () => Promise<void>
displayRegisterDialog: () => void
}> = ({
Expand All @@ -29,6 +30,7 @@ export const Problem: FC<{
setDisplaySideContent,
canRegister,
canSubmit,
isAfterDeadline,
invalidateSeriesQuery,
displayRegisterDialog,
}) => {
Expand Down Expand Up @@ -73,6 +75,7 @@ export const Problem: FC<{
problemId={problem.id}
setDisplayProblemUploadForm={setDisplayProblemUploadForm}
problemSubmitted={!!problem.submitted}
isAfterDeadline={isAfterDeadline}
invalidateSeriesQuery={invalidateSeriesQuery}
setDisplayActions={setDisplayActions}
/>
Expand Down
15 changes: 14 additions & 1 deletion src/components/Problems/Problems.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
import axios from 'axios'
import {useRouter} from 'next/router'
import {FC, useState} from 'react'
import {useInterval} from 'usehooks-ts'

import {Button, Link} from '@/components/Clickable/Clickable'
import {SeriesWithProblems} from '@/types/api/competition'
Expand Down Expand Up @@ -53,6 +54,17 @@ export const Problems: FC = () => {
const problems = series?.problems ?? []
const semesterId = series?.semester ?? -1
const canSubmit = series?.can_submit ?? false
const canResubmit = series?.can_resubmit ?? canSubmit
const [isAfterDeadline, setIsAfterDeadline] = useState<boolean>(new Date(series?.deadline ?? '') < new Date())

useInterval(
() => {
const isAfterDeadlineNew = new Date(series?.deadline ?? '') < new Date()
isAfterDeadlineNew !== isAfterDeadline && setIsAfterDeadline(isAfterDeadlineNew)
},
// Delay to null to stop it after deadline
isAfterDeadline ? null : 500,
)

const [overrideCanRegister, setOverrideCanRegister] = useState<boolean>()
const [overrideIsRegistered, setOverrideIsRegistered] = useState<boolean>()
Expand Down Expand Up @@ -118,7 +130,8 @@ export const Problems: FC = () => {
setDisplaySideContent={setDisplaySideContent}
registered={isRegistered}
canRegister={canRegister}
canSubmit={canSubmit}
canSubmit={problem.submitted ? canResubmit : canSubmit}
isAfterDeadline={isAfterDeadline}
invalidateSeriesQuery={invalidateSeriesQuery}
displayRegisterDialog={() => setDisplayRegisterDialog(true)}
/>
Expand Down
7 changes: 6 additions & 1 deletion src/components/Problems/UploadProblemForm.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
position: relative;
}

.inputWrapper {
position: relative;
}

.files {
margin-top: 8px;
display: grid;
Expand Down Expand Up @@ -39,5 +43,6 @@

.closeButton {
position: absolute;
right: 0;
right: 2px;
top: 2px;
}
1 change: 1 addition & 0 deletions src/components/Problems/UploadProblemForm.module.scss.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export type Styles = {
closeButton: string
container: string
files: string
inputWrapper: string
problemSubmitted: string
}

Expand Down
80 changes: 57 additions & 23 deletions src/components/Problems/UploadProblemForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,23 @@ import {CloseButton} from '@/components/CloseButton/CloseButton'
import {niceBytes} from '@/utils/niceBytes'

import {Button} from '../Clickable/Clickable'
import {Dialog} from '../Dialog/Dialog'
import {FileDropZone} from '../FileDropZone/FileDropZone'
import styles from './UploadProblemForm.module.scss'

export const UploadProblemForm: FC<{
problemId: number
setDisplayProblemUploadForm: Dispatch<SetStateAction<boolean>>
problemSubmitted?: boolean
problemSubmitted: boolean
isAfterDeadline: boolean
setDisplayActions: Dispatch<SetStateAction<boolean>>
invalidateSeriesQuery: () => Promise<void>
}> = ({
problemId,
setDisplayActions,
setDisplayProblemUploadForm,
// problemNumber,
problemSubmitted,
// setDisplaySideContent,
isAfterDeadline,
invalidateSeriesQuery,
}) => {
const {mutate: uploadSolution} = useMutation({
Expand All @@ -42,7 +43,7 @@ export const UploadProblemForm: FC<{
})

const [files, setFiles] = useState<File | undefined>(undefined)
const {acceptedFiles, fileRejections, getRootProps, getInputProps} = useDropzone({
const {fileRejections, getRootProps, getInputProps} = useDropzone({
multiple: false,
accept: {
'application/pdf': ['.pdf'],
Expand All @@ -68,34 +69,67 @@ export const UploadProblemForm: FC<{
setDisplayActions(true)
}

const [displayAlertDialog, setDisplayAlertDialog] = useState<boolean>(problemSubmitted)
const closeAlertDialog = () => setDisplayAlertDialog(false)
const cancel = () => {
closeAlertDialog()
setDisplayProblemUploadForm(false)
setDisplayActions(true)
}

const alertMessage = isAfterDeadline
? 'Toto riešenie nahrávaš PO TERMÍNE. Nahraním nového riešenia prepíšeš svoje predošlé odovzdanie a pri hodnotení budeme zohľadnovať len toto nové riešenie.'
: 'Nahraním nového riešenia prepíšeš svoje predošlé odovzdanie a pri hodnotení budeme zohľadnovať len toto nové riešenie.'

return (
<div className={styles.container}>
<CloseButton onClick={handleCloseButton} size={24} invertColors className={styles.closeButton} />
{isAfterDeadline && <div className={styles.problemSubmitted}>Toto riešenie už nahrávaš po termíne.</div>}
{problemSubmitted && (
<div className={styles.problemSubmitted}>
Pozor, nahraním nového riešenia prepíšeš svoje predošlé odovzdanie.
</div>
)}
{!files && (
<FileDropZone getRootProps={getRootProps} getInputProps={getInputProps} text="Vlož riešenie vo formáte pdf" />
)}
{files?.name && (
<div className={styles.files}>
<div>
<b>Súbor: </b>
<Dialog
open={displayAlertDialog}
close={closeAlertDialog}
title="Pozor"
contentText={alertMessage}
actions={
<>
<Button onClick={cancel}>Zrušiť</Button>
<Button onClick={closeAlertDialog}>Pokračovať</Button>
</>
}
/>
<div className={styles.inputWrapper}>
{!files && (
<>
<CloseButton onClick={handleCloseButton} size={24} invertColors className={styles.closeButton} />
<FileDropZone
getRootProps={getRootProps}
getInputProps={getInputProps}
text="Vlož riešenie vo formáte pdf"
/>
</>
)}
{files?.name && (
<div className={styles.files}>
<div>
<b>Súbor: </b>

<span>
{files.name} ({niceBytes(files.size)})
</span>
</div>
<div className={styles.actions}>
<Button onClick={handleSubmit}>Uložiť</Button>
<Button onClick={handleRemoveSelection}>Zrušiť</Button>
</div>
<span>
{files.name} ({niceBytes(files.size)})
</span>
</div>
<div className={styles.actions}>
<Button onClick={handleSubmit}>Uložiť</Button>
<Button onClick={handleRemoveSelection}>Zrušiť</Button>
</div>

{/* {fileRejections.length > 0 && <span>Nahraný súbor musí byť vo formáte pdf.</span>} */}
</div>
)}
{fileRejections.length > 0 && <span>Nahraný súbor musí byť vo formáte pdf.</span>}
</div>
)}
</div>
</div>
)
}
1 change: 1 addition & 0 deletions src/types/api/competition.ts
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@ export interface SeriesWithProblems {
is_registered: boolean
problems: Problem[]
can_submit: boolean
can_resubmit: boolean
order: number
deadline: string
complete: boolean
Expand Down

0 comments on commit d7f5ec8

Please sign in to comment.