[Task 3] Fixes, formatting, layout updates

task_3_react/src/client/components/FileCard.tsx

@@ -28,6 +28,7 @@ const FileCard = ( props: {
             <header>
                 <h2>Select a File</h2>
             </header>
+            <div className="table-scroll-wrapper">
                 <table id="table-content">
                     <thead>
                         <tr>
@@ -46,6 +47,7 @@ const FileCard = ( props: {
                         }
                     </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 {

task_3_react/src/client/css/Layout.css

@@ -21,7 +21,8 @@ body main {
     & article {
         margin: 0;
         padding: var(--spacing);
-    & > header {
+
+        &>header {
             margin: calc(var(--spacing) * -1) calc(var(--spacing) * -1) var(--spacing);
             padding: var(--spacing);
         }

task_3_react/src/client/index.css

@@ -8,13 +8,16 @@ dl {
     margin-top: 0;
     margin-bottom: 20px;
 }
+
 dt,
 dd {
     line-height: 1.42857143;
 }
+
 dt {
     font-weight: 700;
 }
+
 dd {
     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 );