[Task 3] Fixes, formatting, layout updates

task_3_react/src/client/components/FileCard.tsx

@@ -28,24 +28,26 @@ const FileCard = ( props: {
             <header>
                 <h2>Select a File</h2>
             </header>
-            <table id="table-content">
+            <div className="table-scroll-wrapper">
-                <thead>
+                <table id="table-content">
-                    <tr>
+                    <thead>
-                        <th>Filename</th>
+                        <tr>
-                        <th>Upload Time</th>
+                            <th>Filename</th>
-                        <th>Action</th>
+                            <th>Upload Time</th>
-                    </tr>
+                            <th>Action</th>
-                </thead>
+                        </tr>
-                <tbody>
+                    </thead>
-                    {
+                    <tbody>
-                        list ? list.map( ( file, i ) => <FileRow
+                        {
-                            key={i}
+                            list ? list.map( ( file, i ) => <FileRow
-                            filename={file.filename!}
+                                key={i}
-                            uploadTime={file.uploadTime!}
+                                filename={file.filename!}
-                            fileChangeHandle={props.fileChangeHandle}/> ) : <tr></tr>
+                                uploadTime={file.uploadTime!}
-                    }
+                                fileChangeHandle={props.fileChangeHandle}/> ) : <tr></tr>
-                </tbody>
+                        }
-            </table>
+                    </tbody>
+                </table>
+            </div>
         </article>
     );
 };
@@ -80,4 +82,3 @@ const FileRow = ( props: {
 };
 
 export default FileCard;
-

task_3_react/src/client/css/App.css

@@ -1,6 +1,6 @@
 /*some style for app component*/
 :root {
-    --spacing: 0.25rem;
+    --spacing: 0.5rem;
     --border-color: #a0a0a0;
 }
 
@@ -37,7 +37,11 @@ article {
 }
 
 article.wide {
-    width: 800px
+    width: 800px;
+
+    .table-scroll-wrapper {
+        max-height: 40vh;
+    }
 }
 
 .action-icons {
@@ -148,4 +152,4 @@ body>main {
             content: "\f0d7";
         }
     }
-}
+}

task_3_react/src/client/css/Layout.css

@@ -1,29 +1,30 @@
 body h1,
 body h2 {
-  margin-bottom: 0;
+    margin-bottom: 0;
 }
 
 nav {
-  border-bottom: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
 }
 
 body main {
-  max-height: calc(100vh - 100px);
+    max-height: calc(100vh - 100px);
-  overflow-y: auto;
+    overflow-y: auto;
 
-  padding: var(--spacing) !important;
+    padding: var(--spacing) !important;
-  display: flex;
+    display: flex;
-  flex-direction: row;
+    flex-direction: row;
-  flex-wrap: wrap;
+    flex-wrap: wrap;
-  align-items: start;
+    align-items: start;
-  gap: var(--spacing);
+    gap: var(--spacing);
 
-  & article {
+    & article {
-    margin: 0;
+        margin: 0;
-    padding: var(--spacing);
+        padding: var(--spacing);
-    & > header {
+
-      margin: calc(var(--spacing) * -1) calc(var(--spacing) * -1) var(--spacing);
+        &>header {
-      padding: var(--spacing);
+            margin: calc(var(--spacing) * -1) calc(var(--spacing) * -1) var(--spacing);
+            padding: var(--spacing);
+        }
     }
-  }
 }

task_3_react/src/client/index.css

@@ -1,20 +1,23 @@
 :root {
-  --spacing: 1rem;
+    --spacing: 1rem;
-  --border-color: #a0a0a0;
+    --border-color: #a0a0a0;
 }
 
 /* Style for definition list */
 dl {
-  margin-top: 0;
+    margin-top: 0;
-  margin-bottom: 20px;
+    margin-bottom: 20px;
 }
+
 dt,
 dd {
-  line-height: 1.42857143;
+    line-height: 1.42857143;
 }
+
 dt {
-  font-weight: 700;
+    font-weight: 700;
 }
+
 dd {
-  margin-left: 0;
+    margin-left: 0;
 }

task_3_react/src/server/main.ts

@@ -66,6 +66,21 @@ app.post(
     }
 );
 
+
+const zeroExtend = ( num: number ) => {
+    if ( num < 10 ) {
+        return '0' + num;
+    } else {
+        return '' + num;
+    }
+};
+
+const formatDate = ( date: Date ) => {
+    return `${ date.getFullYear() }-${ zeroExtend( date.getMonth() ) }-${ zeroExtend( date.getDay() ) }`
+    + ' at '
+    + `${ zeroExtend( date.getHours() ) }:${ zeroExtend( date.getMinutes() ) }:${ zeroExtend( date.getSeconds() ) }`;
+};
+
 // Endpoint to send back file names/upload times
 app.get( '/status', async ( _req, res ) => {
     const resObject: responseObject = {
@@ -78,7 +93,7 @@ app.get( '/status', async ( _req, res ) => {
         resObject.names.push( file.name );
         const stats = await fs.stat( `./src/server/uploads/${ file.name }` );
 
-        resObject.uploadTimes.push( stats.birthtime.toString() );
+        resObject.uploadTimes.push( formatDate( stats.birthtime ) );
     }
 
     res.status( 200 ).json( resObject );