(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) => {
/>
{t('reviewModalImageLabel')}
-
- {/* 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')}
}
@@ -191,8 +220,7 @@ const Form = ({ occurrenceName, occurrenceId, onSuccessfulSubmit }: Props) => {
className={styles.button}
disabled={addReviewLoading || formIsInvalid}
>
- {/* TODO can we change the text here to something like "send review"? */}
- {addReviewLoading ? t('loading') : t('rate')}
+ {addReviewLoading ? t('loading') : t('reviewModalSubmit')}
);