diff --git a/.eslintrc.js b/.eslintrc.js index 76d13bd..015fed2 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -13,7 +13,7 @@ module.exports = { }, }, rules: { - '@typescript-eslint/ban-ts-ignore': 'off', + '@typescript-eslint/ban-ts-comment': 'off', '@typescript-eslint/explicit-module-boundary-types': 'off', }, settings: { diff --git a/components/CreateChallenge.tsx b/components/CreateChallenge.tsx index 61e46da..e74bf49 100644 --- a/components/CreateChallenge.tsx +++ b/components/CreateChallenge.tsx @@ -17,6 +17,7 @@ import Heading from '../ui/Heading' type InitialValue = { cover: string coverName: string + coverSize: number name: string description: string questions: Question[] @@ -38,6 +39,7 @@ const ErrorMessage = ({ name }: { name: string }) => ( const initialValues: InitialValue = { cover: '', coverName: '', + coverSize: 0, name: '', description: '', questions: [], @@ -103,6 +105,12 @@ const CreateChallenge = () => { description: Yup.string() .required('Required') .max(280, 'Must be 280 characters or less'), + cover: Yup.string().required('Required').min(1, 'Required'), + coverName: Yup.string().optional(), + coverSize: Yup.number().max( + 5 * 1024 * 1024, + 'File size should be lower than 5 mb.', + ), questions: Yup.array() .min(1) .of( @@ -133,8 +141,8 @@ const CreateChallenge = () => { isSubmitting, values, setFieldValue, - /* setFieldError, - setFieldTouched, */ + setValues, + setTouched, }) => (
@@ -143,6 +151,7 @@ const CreateChallenge = () => { type="text" className="border-2 px-4 py-2 focus:outline-none focus:shadow-outline w-full mb-1" placeholder="Name" + disabled={isSubmitting} />
@@ -152,6 +161,7 @@ const CreateChallenge = () => { type="text" className="border-2 px-4 py-2 focus:outline-none focus:shadow-outline w-full mb-1" placeholder="Description" + disabled={isSubmitting} /> @@ -172,41 +182,33 @@ const CreateChallenge = () => { ? event.currentTarget.files[0] : null - /* function bytesToSize(bytes: number) { - const bytesLog = Math.log(bytes) - const divisor = Math.log(1024) - const floor = Math.floor(bytesLog / divisor) - const value = parseInt(`${floor}`) - - return bytes / Math.pow(1024, value) - } */ - if (file) { - /* const size = bytesToSize(file.size) - - if (size > 1) { - setFieldValue('coverName', '') - setFieldValue('cover', '') - setFieldError( - 'cover', - 'File size should be less than 5 mb.', - ) - setFieldTouched('cover', true, false) - - return - } */ - const reader = new FileReader() reader.readAsDataURL(file) reader.onload = function () { - setFieldValue('coverName', file.name) - setFieldValue('cover', reader.result) + setTouched({ + cover: true, + coverName: true, + coverSize: true, + }) + + setValues({ + ...values, + // @ts-ignore + cover: reader.result, + coverName: file.name, + coverSize: file.size, + }) } } else { - setFieldValue('coverName', '') - setFieldValue('cover', '') + setValues({ + ...values, + cover: '', + coverName: '', + coverSize: 0, + }) if (coverRef.current) { coverRef.current.value = '' @@ -218,6 +220,7 @@ const CreateChallenge = () => {