diff --git a/public/locales/de/common.json b/public/locales/de/common.json index 40b8e51..955a123 100644 --- a/public/locales/de/common.json +++ b/public/locales/de/common.json @@ -21,8 +21,11 @@ "reviewModalHeading": "Wie war '{{name}}'?", "reviewModalRatingLabel": "Bewertung", "reviewModalImageLabel": "Bild (Optional)", + "reviewModalNoImagesSelected": "Klicke oder ziehe ein Bild hierher um es hochzuladen.", + "reviewModalImagesSelected": "{{amount}} Bilde(r) ausgewählt.", "reviewModalCommentLabel": "Kommentar (Optional)", "reviewModalNameLabel": "Nickname (Optional)", + "reviewModalSubmit": "Absenden", "reviewModalSubmitError": "Es gab einen Fehler beim Absenden deiner Bewertung", "reviewModalMissingStarValueError": "Du musst eine Sternebewertung angeben", "reviewModalImageTooBigError": "Eins deiner Bilder ist zu groß. Bilder dürfen maximal {{size}} groß sein", diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 426290c..5620a52 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -21,8 +21,11 @@ "reviewModalHeading": "How was '{{name}}'?", "reviewModalRatingLabel": "Rating", "reviewModalImageLabel": "Picture (Optional)", + "reviewModalNoImagesSelected": "Click or drop an image to upload.", + "reviewModalImagesSelected": "{{amount}} picture(s) selected.", "reviewModalCommentLabel": "Comment (Optional)", "reviewModalNameLabel": "Nickname (Optional)", + "reviewModalSubmit": "Submit", "reviewModalSubmitError": "There was an error while submitting your review", "reviewModalMissingStarValueError": "You need to provide a star rating", "reviewModalImageTooBigError": "One of your pictures is too big. Pictures must not be bigger than {{size}}.", diff --git a/src/components/navigation/profile-button/ProfileButton.tsx b/src/components/navigation/profile-button/ProfileButton.tsx index 3d893b6..d5eeb28 100644 --- a/src/components/navigation/profile-button/ProfileButton.tsx +++ b/src/components/navigation/profile-button/ProfileButton.tsx @@ -40,7 +40,8 @@ const ProfileButton = () => { ) : ( - // TODO bene mach mal login button hin + // TODO Add login button + // Also see: https://github.com/mensatt/frontend/issues/120 <> ) } diff --git a/src/components/occurrence/review-modal/form/Form.module.scss b/src/components/occurrence/review-modal/form/Form.module.scss index 4a05b30..3f3d856 100644 --- a/src/components/occurrence/review-modal/form/Form.module.scss +++ b/src/components/occurrence/review-modal/form/Form.module.scss @@ -53,6 +53,10 @@ } } + .draggedOver { + // TODO: @maanex Style the input area if a file is dragged over + } + .stars { justify-self: center; } diff --git a/src/components/occurrence/review-modal/form/Form.tsx b/src/components/occurrence/review-modal/form/Form.tsx index 88c3eac..9ee1fc1 100644 --- a/src/components/occurrence/review-modal/form/Form.tsx +++ b/src/components/occurrence/review-modal/form/Form.tsx @@ -40,6 +40,9 @@ const Form = ({ occurrenceName, occurrenceId, onSuccessfulSubmit }: Props) => { { loading: addReviewLoading, data: addReviewData, error: addReviewError }, ] = useMutation(ADD_REVIEW); + const [fileInputIsDraggedOver, setFileInputIsDraggedOver] = useState(false); + const [fileAmount, setFileAmount] = useState(0); + const [showMissingStarValueError, setShowMissingStarValueError] = useState(true); const [showImageTooBigError, setShowImageTooBigError] = useState(false); @@ -79,6 +82,7 @@ const Form = ({ occurrenceName, occurrenceId, onSuccessfulSubmit }: Props) => { if (event.target.files) { // `FileList` is not an array so we have to "convert" it const fileList = Array.from(event.target.files); + setFileAmount(fileList.length); // This function is from here: https://stackoverflow.com/a/12900504 const getFileExt = (file: File) => @@ -109,32 +113,42 @@ const Form = ({ occurrenceName, occurrenceId, onSuccessfulSubmit }: Props) => { [formState], ); - // TODO @bene bitte useState oder so draus machen - const errors = ( - <> - {addReviewError && ( -

{t('reviewModalSubmitError')}

- )} - {showMissingStarValueError && ( -

{t('reviewModalMissingStarValueError')}

- )} - {showImageTooBigError && ( -

- {t('reviewModalImageTooBigError', { - size: `${MAX_UPLOAD_FILE_SIZE / (1024 * 1024)}MB`, - })} -

- )} - {showWrongExtensionError && ( -

- {t('reviewModalWrongExtensionError', { - extensions: ALLOWED_EXTENSIONS.map( - (ext) => '.' + ext.toLowerCase(), - ).join(' '), - })} -

- )} - + const errors = useMemo( + () => ( + <> + {addReviewError && ( +

{t('reviewModalSubmitError')}

+ )} + {showMissingStarValueError && ( +

+ {t('reviewModalMissingStarValueError')} +

+ )} + {showImageTooBigError && ( +

+ {t('reviewModalImageTooBigError', { + size: `${MAX_UPLOAD_FILE_SIZE / (1024 * 1024)}MB`, + })} +

+ )} + {showWrongExtensionError && ( +

+ {t('reviewModalWrongExtensionError', { + extensions: ALLOWED_EXTENSIONS.map( + (ext) => '.' + ext.toLowerCase(), + ).join(' '), + })} +

+ )} + + ), + [ + addReviewError, + showImageTooBigError, + showMissingStarValueError, + showWrongExtensionError, + t, + ], ); return ( @@ -151,12 +165,27 @@ const Form = ({ occurrenceName, occurrenceId, onSuccessfulSubmit }: Props) => { /> -
- {/* TODO give this div element an additional class when the user is dragging a file over it */} - - {/* TODO put this into lang file */} - Click or drop an image to upload. - {/* TODO show a preview of the selected image file here, just add an tag or something i can style if there is a file selected */} +
+ setFileInputIsDraggedOver(true)} + onDragLeave={() => setFileInputIsDraggedOver(false)} + /> + + {fileAmount + ? t('reviewModalImagesSelected', { amount: fileAmount }) + : t('reviewModalNoImagesSelected')} + + {/* TODO Add image preview + Also see: https://github.com/mensatt/frontend/issues/121 + */}
{formState.images &&

{t('reviewModalImageDisclaimer')}

}