From 455b0b383ee3a11ad230ed0ff72060828ff37a9e Mon Sep 17 00:00:00 2001
From: CodeServer <CodeServer@jlu42.com>
Date: Tue, 12 Apr 2022 08:43:10 +0100
Subject: [PATCH] added loading circle

---
 src/components/Loading.tsx                    |  5 ++++-
 src/components/home/Home.tsx                  |  9 ++++++---
 .../repositoryInfo/RepositoryInfo.tsx         |  6 ++++--
 src/utils.tsx                                 | 20 ++++++++++++++++++-
 4 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index 93eec1e..1485d2c 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -1,8 +1,11 @@
 import React from "react";
+import { CircularProgress } from "@mui/material";
 
 const Loading: React.FC = () => {
     return(
-        <h1>Loading!</h1>
+        <div style={{display: 'flex', justifyContent: 'center', marginTop: '15%'}}>
+            <CircularProgress size="5%"/>
+        </div>
     );
 };
 
diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
index f00deb8..60ec4c5 100644
--- a/src/components/home/Home.tsx
+++ b/src/components/home/Home.tsx
@@ -3,11 +3,12 @@ import { List } from "@mui/material";
 import RepositoryItem from "./RepositoryEntry";
 import useRepositories from "../../hooks/useRepositories";
 import Repository from "../../interfaces/Repositoriy";
+import Loading from "../Loading";
 
 const Home: React.FC = () => {
-    const  { repositories } = useRepositories();
+    const  { isFetched, repositories } = useRepositories();
 
-    return(
+    return(isFetched ? (
         <div className="sectionHome">
             <List className="repositoryList" style={{ maxHeight: "100%", overflow: "auto" }}>
                 {repositories.map((repository: Repository) => {
@@ -17,7 +18,9 @@ const Home: React.FC = () => {
                 })}
             </List>
         </div>
-    );
+    ) : (
+        <Loading />
+    ));
 };
 
 export default Home;
\ No newline at end of file
diff --git a/src/components/repositoryInfo/RepositoryInfo.tsx b/src/components/repositoryInfo/RepositoryInfo.tsx
index 0d424ef..4f9fc5b 100644
--- a/src/components/repositoryInfo/RepositoryInfo.tsx
+++ b/src/components/repositoryInfo/RepositoryInfo.tsx
@@ -5,7 +5,7 @@ import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import useRepositories from "../../hooks/useRepositories";
 import Tag from "../../interfaces/Tag";
 import Repository from "../../interfaces/Repositoriy";
-import { getHostNameFromURL, printSize, printTimePassed, PrintOSIcon, toUpperFirst } from "../../utils";
+import { getHostNameFromURL, printSize, printTimePassed, PrintOSIcon, toUpperFirst, printMonth } from "../../utils";
 import RepoNotFound from "./RepoNotFound"
 import Loading from "../Loading";
 
@@ -113,6 +113,7 @@ const RepositoryInfo: React.FC = () => {
                                     </Grid>
                                     <Grid item sm={3}>
                                         <Tooltip 
+                                            className="tooltip"
                                             title={
                                                 <>
                                                     <div>{"Operating System: " + toUpperFirst(tag.os)}</div>
@@ -131,8 +132,9 @@ const RepositoryInfo: React.FC = () => {
                                     </Grid>
                                     <Grid item sm={2}>
                                         <Tooltip 
+                                            className="tooltip"
                                             title={
-                                                tag.created ? (tag.created.toLocaleString()) : "---"
+                                                tag.created ? (printMonth(tag.created.getMonth()) + " " + tag.created.getDate() + ", " + tag.created.getFullYear() + " at " + tag.created.toLocaleTimeString().replace('.','').toUpperCase()) : "---"
                                             } 
                                             placement="bottom-end" 
                                             arrow
diff --git a/src/utils.tsx b/src/utils.tsx
index b3c16f0..31ec028 100644
--- a/src/utils.tsx
+++ b/src/utils.tsx
@@ -18,6 +18,24 @@ const checkValidURL = async (url: string) => {
     return true;
 }
 
+const printMonth = (month: number): string => {
+    switch (month) {
+        case 0:return "Jan";break;
+        case 1:return "Feb";break;
+        case 2:return "Mar";break;
+        case 3:return "Apr";break;
+        case 4:return "May";break;
+        case 5:return "Jun";break;
+        case 6:return "Jul";break;
+        case 7:return "Aug";break;
+        case 8:return "Sep";break;
+        case 9:return "Oct";break;
+        case 10:return "Nov";break;
+        case 11:return "Dec";break;
+        default:return "" + month;break;
+    }
+}
+
 const toUpperFirst= (s: string):string => {
     if (s.length > 0) {
         return s[0].toUpperCase() + s.substring(1);
@@ -75,4 +93,4 @@ const PrintOSIcon: React.FC<{ className: string, os: string }> = ({ className, o
     }
 }
 
-export { checkValidURL, printTwoDecimalPlaces, printTimePassed, printSize, getHostNameFromURL, PrintOSIcon, toUpperFirst };
\ No newline at end of file
+export { checkValidURL, printTwoDecimalPlaces, printTimePassed, printSize, getHostNameFromURL, PrintOSIcon, toUpperFirst, printMonth };
\ No newline at end of file