Edit file upload appearance (#531)

Author: suewee

frontend/src/components/Files/Files.js

@@ -7,6 +7,7 @@ import AddIcon from '@material-ui/icons/Add';
 import CloseIcon from '@material-ui/icons/Close';
 
 import { useTranslations } from '../../hooks/useTranslations';
+import { formatDate } from '../../utils/date';
 
 const Files = ({
     title,
@@ -17,7 +18,7 @@ const Files = ({
     handleUpload,
     isDisabled = false,
 }) => {
-    const translations = useTranslations()[0];
+    const [translations, selectedLang] = useTranslations();
 
     const getDeleteFileButton = (file) => {
         if (isDisabled) return null;
@@ -47,12 +48,16 @@ const Files = ({
                 >
                     <div className="file-info-wrapper">
                         <ArrowDownwardIcon />
-                        <div>
+                        <div
+                            className={
+                                isDisabled ? `file-info-view` : `file-info-edit`
+                            }
+                        >
                             <Typography align="left">
                                 {`${file.filename}`}
                             </Typography>
                             <p id="file-upload-timestamp">
-                                {file.uploadDate.toString()}
+                                {formatDate(file.uploadDate, selectedLang)}
                             </p>
                         </div>
                     </div>

frontend/src/components/Files/Files.scss

@@ -28,19 +28,34 @@
         .file-row-wrapper {
             display: inherit;
             justify-content: space-between;
+            align-items: center;
             width: 100%;
         }
 
         .file-button {
             justify-content: flex-start;
             width: 100%;
+            overflow: hidden;
         }
 
         .file-info-wrapper {
             display: flex;
             flex-direction: row;
+            display: inherit;
+
+            .file-info-edit {
+                width: 315px;
+            }
+
+            .file-info-view {
+                width: 350px;
+                padding-right: 0.4em;
+            }
+
             #file-upload-timestamp {
                 line-height: 0;
+                margin-top: 0.3em;
+                text-align-last: end;
                 color: grey;
             }
         }

frontend/src/utils/date.js

@@ -9,6 +9,10 @@ import { LANGUAGES } from './constants';
 export const formatDate = (date, language) => {
     if (date == null) return 'Undefined';
 
+    let parsedDate = date;
+    if (!(typeof date === 'object' || date instanceof Object))
+        parsedDate = new Date(date);
+
     let locale = 'ar-SA';
     if (language === LANGUAGES.EN) locale = 'en-US';
 
@@ -20,5 +24,5 @@ export const formatDate = (date, language) => {
         minute: '2-digit',
     };
 
-    return date.toLocaleDateString(locale, options);
+    return parsedDate.toLocaleDateString(locale, options);
 };