Styling inner workings

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",

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}}.",

src/components/navigation/profile-button/ProfileButton.tsx

@@ -40,7 +40,8 @@ const ProfileButton = () => {
                 <Icon name={'logout'} />
               </button>
             ) : (
-              // TODO bene mach mal login button hin
+              // TODO Add login button
+              // Also see: https://github.com/mensatt/frontend/issues/120
               <></>
             )
           }

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;
   }

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<AddReviewMutation, AddReviewMutationVariables>(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 && (
-        <p className={styles.error}>{t('reviewModalSubmitError')}</p>
-      )}
-      {showMissingStarValueError && (
-        <p className={styles.error}>{t('reviewModalMissingStarValueError')}</p>
-      )}
-      {showImageTooBigError && (
-        <p className={styles.error}>
-          {t('reviewModalImageTooBigError', {
-            size: `${MAX_UPLOAD_FILE_SIZE / (1024 * 1024)}MB`,
-          })}
-        </p>
-      )}
-      {showWrongExtensionError && (
-        <p className={styles.error}>
-          {t('reviewModalWrongExtensionError', {
-            extensions: ALLOWED_EXTENSIONS.map(
-              (ext) => '.' + ext.toLowerCase(),
-            ).join(' '),
-          })}
-        </p>
-      )}
-    </>
+  const errors = useMemo(
+    () => (
+      <>
+        {addReviewError && (
+          <p className={styles.error}>{t('reviewModalSubmitError')}</p>
+        )}
+        {showMissingStarValueError && (
+          <p className={styles.error}>
+            {t('reviewModalMissingStarValueError')}
+          </p>
+        )}
+        {showImageTooBigError && (
+          <p className={styles.error}>
+            {t('reviewModalImageTooBigError', {
+              size: `${MAX_UPLOAD_FILE_SIZE / (1024 * 1024)}MB`,
+            })}
+          </p>
+        )}
+        {showWrongExtensionError && (
+          <p className={styles.error}>
+            {t('reviewModalWrongExtensionError', {
+              extensions: ALLOWED_EXTENSIONS.map(
+                (ext) => '.' + ext.toLowerCase(),
+              ).join(' '),
+            })}
+          </p>
+        )}
+      </>
+    ),
+    [
+      addReviewError,
+      showImageTooBigError,
+      showMissingStarValueError,
+      showWrongExtensionError,
+      t,
+    ],
   );
 
   return (
@@ -151,12 +165,27 @@ const Form = ({ occurrenceName, occurrenceId, onSuccessfulSubmit }: Props) => {
         />
       </div>
       <label>{t('reviewModalImageLabel')}</label>
-      <div className={styles.fileUpload}>
-        {/* TODO give this div element an additional class when the user is dragging a file over it */}
-        <input type="file" onChange={onFileInputChange} multiple />
-        {/* TODO put this into lang file */}
-        <span>Click or drop an image to upload.</span>
-        {/* TODO show a preview of the selected image file here, just add an <img> tag or something i can style if there is a file selected */}
+      <div
+        className={
+          styles.fileUpload +
+          (fileInputIsDraggedOver ? ' ' + styles.draggedOver : '')
+        }
+      >
+        <input
+          type="file"
+          onChange={onFileInputChange}
+          multiple
+          onDragEnter={() => setFileInputIsDraggedOver(true)}
+          onDragLeave={() => setFileInputIsDraggedOver(false)}
+        />
+        <span>
+          {fileAmount
+            ? t('reviewModalImagesSelected', { amount: fileAmount })
+            : t('reviewModalNoImagesSelected')}
+        </span>
+        {/* TODO Add image preview
+            Also see: https://github.com/mensatt/frontend/issues/121
+        */}
       </div>
       {formState.images && <p>{t('reviewModalImageDisclaimer')}</p>}
       <label htmlFor="reviewModalCommentInput">
@@ -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')}
       </button>
     </form>
   );