added os icons

package-lock.json

@@ -15,6 +15,7 @@
         "axios": "^0.26.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-icons": "^4.3.1",
         "react-router-dom": "^6.2.1"
       },
       "devDependencies": {
@@ -10224,6 +10225,14 @@
         "react": "17.0.2"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
+      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -20040,6 +20049,12 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-icons": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
+      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

package.json

@@ -15,6 +15,7 @@
     "axios": "^0.26.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
     "react-router-dom": "^6.2.1"
   },
   "scripts": {

src/components/Loading.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const Loading: React.FC = () => {
+    return(
+        <h1>Loading!</h1>
+    );
+};
+
+export default Loading;

src/components/navbar/NavBar.tsx

@@ -13,7 +13,7 @@ import { getHostNameFromURL } from "../../utils";
 
 const NavBar: React.FC = () => {
     const { auth } = useAuth();
-    const { setRepositories } = useRepositories();
+    const { setIsFetched, setRepositories } = useRepositories();
     const [anchorElUser, setAnchorElUser] = React.useState<(EventTarget & HTMLButtonElement) | null>(null);
     const [snackbarOpen, setSnackbarOpen] = React.useState(false);
   
@@ -110,6 +110,11 @@ const NavBar: React.FC = () => {
                   tags.push(tag);
               });
               repository.tags = tags;
+          }).catch((err) => {
+            const index = newRepositories.indexOf(repository);
+            if (index > -1) {
+              newRepositories.splice(index, 1);
+            }
           });
           promises.push(promise);
       });
@@ -140,6 +145,7 @@ const NavBar: React.FC = () => {
       await getTags(newRepositories, auth)
       
       setRepositories(newRepositories);
+      setIsFetched(true);
       // setRepositories(newRepositories);
 
     };

src/components/repositoryInfo/RepoNotFound.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+interface Props {
+    repositoryName: string;
+}
+
+const NotFound: React.FC<Props> = (props: Props) => {
+    return(
+        <h1>Repository "{props.repositoryName}" Not Found!</h1>
+    );
+};
+
+export default NotFound;

src/components/repositoryInfo/RepositoryInfo.tsx

@@ -1,17 +1,19 @@
 import React from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation, Link } from "react-router-dom";
-import { ListItemButton, Button, Box, Card, CardContent, Typography, CardActions, Grid, ListItemText, Snackbar, Alert } from "@mui/material";
+import { ListItemButton, Button, Box, Card, CardContent, Typography, CardActions, Grid, List, ListItemText, Snackbar, Alert } from "@mui/material";
 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 } from "../../utils";
+import { getHostNameFromURL, printSize, printTimePassed, PrintOSIcon } from "../../utils";
-import NotFound from "../NotFound";
+import RepoNotFound from "./RepoNotFound"
+import Loading from "../Loading";
 
 const RepositoryInfo: React.FC = () => {
     const location = useLocation();
     const path = location.pathname;
-    const  { repositories } = useRepositories();
+    const  { isFetched, repositories } = useRepositories();
+    const [hideTags, setHideTags] = React.useState(true);
     const [snackbarOpen, setSnackbarOpen] = React.useState(false);
     const repository = repositories.find((element) => (element.name === path.slice(12,path.length)));
 
@@ -28,54 +30,128 @@ const RepositoryInfo: React.FC = () => {
     const handleClose = () => {
         setSnackbarOpen(false);
     };
+
+    const toggleHide = () => {
+        setHideTags(!hideTags);
+    }
     
-    return (repository ? (
+    return (isFetched ? (
-        <div className="repositoryInfo">
+        repository ? (
-            <Card className="repositoryDetail" variant="outlined">
+            <div className="repositoryInfo">
-                <CardContent>
+                <Card className="repositoryDetail" variant="outlined">
-                    {/* <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+                    <CardContent>
-                        Word of the Day
+                        {/* <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
-                    </Typography> */}
+                            Word of the Day
-                    <Typography className="lines" variant="h5" component="div">
+                        </Typography> */}
-                        {repository.name}
+                        <Grid container>
-                    </Typography>
+                            <Grid item lg={6} sm={12}>
-                    <Typography className="lines" sx={{ mb: 1.5 }} color="text.secondary">
+                                <Typography className="lines" variant="h5" component="div">
-                        <AccessTimeIcon className="clock-icon" />
+                                    {repository.name}
-                        {"Last updated: " + repository.tags.filter((tag: Tag) => (tag.label === "latest")).map((tag: Tag) => (tag.created ? printTimePassed(tag.created) : "")).join(" ")}
+                                </Typography>
-                    </Typography>
+                                <Typography className="lines" sx={{ mb: 1.5 }} color="text.secondary">
-                    <Typography className="lines" variant="h6">
+                                    <AccessTimeIcon className="clock-icon" />
-                        Docker commands
+                                    {"Last updated: " + repository.tags.filter((tag: Tag) => (tag.label === "latest")).map((tag: Tag) => (tag.created ? printTimePassed(tag.created) : "")).join(" ")}
-                    </Typography>
+                                </Typography>
-                    <Typography className="lines" variant="body2">
+                            </Grid>
-                        To push a new tag to this repository,
+                            <Grid item lg={6} sm={12}>
-                    </Typography>
+                                <Box sx={{ display: "flex", flexDirection: "column" }}>
-                    <Box className="commandDisplay" onClick={handleClick} component="span" sx={{ display: 'block', bgcolor: '#445d6e', color: 'white', borderColor: '#445d6e' }}>{generatePushCommand(getHostNameFromURL(process.env.REGISTRY_URL ? process.env.REGISTRY_URL : ""))}</Box>
+                                    <Typography className="lines" variant="h6">
-                </CardContent>
+                                        Docker commands
-                {/* <CardActions>
+                                    </Typography>
-                    <Button size="small">Learn More</Button>
+                                    <Typography className="lines" variant="body2">
-                </CardActions> */}
+                                        To push a new tag to this repository,
+                                    </Typography>
+                                    <Box className="commandDisplay" onClick={handleClick} component="span" sx={{ display: 'block', bgcolor: '#445d6e', color: 'white', borderColor: '#445d6e' }}>{generatePushCommand(getHostNameFromURL(process.env.REGISTRY_URL ? process.env.REGISTRY_URL : ""))}</Box>
+                                </Box>
+                            </Grid>
+                        </Grid>
+                    </CardContent>
+                    {/* <CardActions>
+                        <Button size="small">Learn More</Button>
+                    </CardActions> */}
+                </Card>
+                <Card className="tagsDetail" variant="outlined">
+                    <CardContent>
+                        <Typography className="lines" variant="h6">
+                            Tags
+                        </Typography>
+                        <Typography className="lines" variant="body2">
+                            {"This repository contains " + repository.tags.length + " tag" + (repository.tags.length > 1 ? "s" : "") + "."}
+                        </Typography>
+                        <List>
+                            <Grid container>
+                                <Grid item sm={5}>
+                                    <ListItemText primary="TAG" />
+                                </Grid>
+                                <Grid item sm={3}>
+                                    <ListItemText primary="OS" />
+                                </Grid>
+                                <Grid item sm={2}>
+                                    <ListItemText style={{display:'flex', justifyContent:'flex-end'}} primary="SIZE" />
+                                </Grid>
+                                <Grid item sm={2}>
+                                    <ListItemText style={{display:'flex', justifyContent:'flex-end'}} primary="CREATED" />
+                                </Grid>
+                            </Grid>
+                            {repository.tags.sort((a,b) => {
+                                let result = (b.created ? b.created.getTime() : 0) - (a.created ? a.created.getTime() : 0);
+                                if (result === 0) {
+                                    if (b.label === "latest") {
+                                        return 1;
+                                    } else if (a.label === "latest") {
+                                        return -1;
+                                    } else {
+                                        return 0;
+                                    }
+                                } else {
+                                    return result;
+                                }
+                            }).slice(0,((hideTags && repository.tags.length > 4) ? 3 : repository.tags.length)).map((tag) => (
+                                <Grid container>
+                                    <Grid item sm={5}>
+                                        <ListItemText primary={tag.label} />
+                                    </Grid>
+                                    <Grid item sm={3}>
+                                        <ListItemText primary={<PrintOSIcon os={tag.os} />} />
+                                    </Grid>
+                                    <Grid item sm={2}>
+                                        <ListItemText style={{display:'flex', justifyContent:'flex-end'}} primary={tag.size ? printSize(tag.size) : "---"} />
+                                    </Grid>
+                                    <Grid item sm={2}>
+                                        <ListItemText style={{display:'flex', justifyContent:'flex-end'}} primary={tag.created ? printTimePassed(tag.created) : "---"} />
+                                    </Grid>
+                                </Grid>
+                            ))}
+                            {repository.tags.length > 4 ? (
+                                <Grid container>
+                                    <Grid item sm={5}>
+                                        <ListItemText
+                                            className="moreBtn"
+                                            onClick={toggleHide}
+                                            primary={hideTags ? "more" : "less"}
+                                        />
+                                    </Grid>
+                                </Grid>
+                            ) : (
+                                <></>
+                            )}
+                        </List>
+                    </CardContent>
+                    <CardActions>
+                        <Button size="small">Details</Button>
+                    </CardActions>
+                </Card>
                 <Snackbar open={snackbarOpen} autoHideDuration={6000} onClose={handleClose}>
                     <Alert onClose={handleClose} severity="success" sx={{ width: '100%' }}>
                         Copied!
                     </Alert>
                 </Snackbar>
-            </Card>
+            </div>
-            <Card className="tagsDetail" variant="outlined">
+        ) : (
-                <CardContent>
+            <RepoNotFound repositoryName={path.slice(12,path.length)} />
-                    <Typography className="lines" variant="h6">
+        )
-                        Tags
-                    </Typography>
-                    <Typography className="lines" variant="body2">
-                        {"This repository contains " + repository.tags.length + " tag" + (repository.tags.length > 1 ? "s" : "") + "."}
-                    </Typography>
-                </CardContent>
-                <CardActions>
-                    <Button size="small">Details</Button>
-                </CardActions>
-            </Card>
-        </div>
     ) : (
-        <NotFound />
+        <Loading />
     ));
 }
 

src/context/RepositoriesProvider.tsx

@@ -3,19 +3,24 @@ import Repository from "../interfaces/Repositoriy";
 
 
 interface MyRepositoriesState {
+  isFetched: boolean;
+  setIsFetched: React.Dispatch<React.SetStateAction<boolean>>
   repositories: Repository[];
   setRepositories: React.Dispatch<React.SetStateAction<Repository[]>>
 }
 
 const RepositoriesContext = createContext<MyRepositoriesState>({
+  isFetched: false,
+  setIsFetched: () => {},
   repositories: [],
   setRepositories: () => {}
 });
 
 export const RepositoriesProvider = ({ children }: { children: React.ReactNode }) => {
+  const [isFetched, setIsFetched] = useState<boolean>(false);
   const [repositories, setRepositories] = useState<Repository[]>([]);
   
-  return <RepositoriesContext.Provider value={{repositories, setRepositories}}>{children}</RepositoriesContext.Provider>;
+  return <RepositoriesContext.Provider value={{isFetched, setIsFetched, repositories, setRepositories}}>{children}</RepositoriesContext.Provider>;
 };
 
 export default RepositoriesContext;

src/style/modules/_repositoryInfo.sass

@@ -1,4 +1,6 @@
 .repositoryInfo
+    max-width: 70%
+    margin: auto
     .repositoryDetail
         margin: 5%
         padding: 15px
@@ -16,4 +18,9 @@
         margin: 5%
         padding: 15px
         .lines
-            margin-bottom: 10px
+            margin-bottom: 10px
+        .moreBtn
+            color: #1976d2
+            cursor: pointer
+        .moreBtn:focus
+            color: purple

src/style/style.css

@@ -24,6 +24,11 @@ a {
   margin: auto;
 }
 
+.repositoryInfo {
+  max-width: 70%;
+  margin: auto;
+}
+
 .repositoryInfo .repositoryDetail {
   margin: 5%;
   padding: 15px;
@@ -54,6 +59,15 @@ a {
   margin-bottom: 10px;
 }
 
+.repositoryInfo .tagsDetail .moreBtn {
+  color: #1976d2;
+  cursor: pointer;
+}
+
+.repositoryInfo .tagsDetail .moreBtn:focus {
+  color: purple;
+}
+
 .login .grid-container {
   -webkit-box-align: center;
       -ms-flex-align: center;

src/style/style.css.map

@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "AG8CA,AAAA,WAAW,CAAC;EACR,KAAK,EAAE,IAAI;CAAG;;AAElB,AAAA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;CAAG;;AElD5B,AAAA,OAAO,CAAC;EACJ,MAAM,EAAE,CAAC;CAKU;;AANvB,AAEI,OAFG,CAEH,SAAS,CAAC;EACN,KAAK,EAAE,KAAK;CAAG;;AAHvB,AAII,OAJG,CAIH,WAAW,CAAC;EACR,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,GAAG;CAAG;;AGNrB,AACI,YADQ,CACR,eAAe,CAAC;EACZ,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;CAAG;;ACHvB,AACI,eADW,CACX,iBAAiB,CAAC;EACd,MAAM,EAAE,EAAE;EACV,OAAO,EAAE,IAAI;CAUW;;AAbhC,AAIQ,eAJO,CACX,iBAAiB,CAGb,MAAM,CAAC;EACH,aAAa,EAAE,IAAI;CAAG;;AALlC,AAMQ,eANO,CACX,iBAAiB,CAKb,WAAW,CAAC;EACR,cAAc,EAAE,MAAM;EACtB,YAAY,EAAE,IAAI;CAAG;;AARjC,AASQ,eATO,CACX,iBAAiB,CAQb,eAAe,CAAC;EACZ,WAAW,EAAE,IAAI;EACjB,aAAa,EAAE,GAAG;EAClB,OAAO,EAAE,MAAM;EACf,UAAU,EAAE,GAAG;CAAG;;AAb9B,AAcI,eAdW,CAcX,WAAW,CAAC;EACR,MAAM,EAAE,EAAE;EACV,OAAO,EAAE,IAAI;CAEe;;AAlBpC,AAiBQ,eAjBO,CAcX,WAAW,CAGP,MAAM,CAAC;EACH,aAAa,EAAE,IAAI;CAAG;;AClBlC,AACI,MADE,CACF,eAAe,CAAC;EACZ,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;EACf,SAAS,EAAE,cAAc;CAeS;;AApB1C,AAMQ,MANF,CACF,eAAe,GAKT,CAAC,CAAC;EACA,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,MAAM;CAAG;;AAR7B,AASQ,MATF,CACF,eAAe,CAQX,YAAY,CAAC;EACT,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,IAAI;EACZ,SAAS,EAAE,IAAI;CAAG;;AAb9B,AAcQ,MAdF,CACF,eAAe,CAaX,UAAU,CAAC;EACP,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;CACpB;;AAjBF,AAkBQ,MAlBF,CACF,eAAe,CAiBX,eAAe,CAAC;EACZ,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,OAAO;CAAG;;ACpBxC,AAAA,QAAQ,CAAC;EACL,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;CAEU;;AAL7B,AAII,QAJI,CAIJ,eAAe,CAAC;EACZ,UAAU,EAAE,IAAI;CAAG",
+    "mappings": "AG8CA,AAAA,WAAW,CAAC;EACR,KAAK,EAAE,IAAI;CAAG;;AAElB,AAAA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;CAAG;;AElD5B,AAAA,OAAO,CAAC;EACJ,MAAM,EAAE,CAAC;CAKU;;AANvB,AAEI,OAFG,CAEH,SAAS,CAAC;EACN,KAAK,EAAE,KAAK;CAAG;;AAHvB,AAII,OAJG,CAIH,WAAW,CAAC;EACR,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,GAAG;CAAG;;AGNrB,AACI,YADQ,CACR,eAAe,CAAC;EACZ,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;CAAG;;ACHvB,AAAA,eAAe,CAAC;EACZ,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;CAuBgB;;AAzBhC,AAGI,eAHW,CAGX,iBAAiB,CAAC;EACd,MAAM,EAAE,EAAE;EACV,OAAO,EAAE,IAAI;CAUW;;AAfhC,AAMQ,eANO,CAGX,iBAAiB,CAGb,MAAM,CAAC;EACH,aAAa,EAAE,IAAI;CAAG;;AAPlC,AAQQ,eARO,CAGX,iBAAiB,CAKb,WAAW,CAAC;EACR,cAAc,EAAE,MAAM;EACtB,YAAY,EAAE,IAAI;CAAG;;AAVjC,AAWQ,eAXO,CAGX,iBAAiB,CAQb,eAAe,CAAC;EACZ,WAAW,EAAE,IAAI;EACjB,aAAa,EAAE,GAAG;EAClB,OAAO,EAAE,MAAM;EACf,UAAU,EAAE,GAAG;CAAG;;AAf9B,AAgBI,eAhBW,CAgBX,WAAW,CAAC;EACR,MAAM,EAAE,EAAE;EACV,OAAO,EAAE,IAAI;CAOS;;AAzB9B,AAmBQ,eAnBO,CAgBX,WAAW,CAGP,MAAM,CAAC;EACH,aAAa,EAAE,IAAI;CAAG;;AApBlC,AAqBQ,eArBO,CAgBX,WAAW,CAKP,QAAQ,CAAC;EACL,KAAK,EAAE,OAAO;EACd,MAAM,EAAE,OAAO;CAAG;;AAvB9B,AAwBQ,eAxBO,CAgBX,WAAW,CAQP,QAAQ,AAAA,MAAM,CAAC;EACX,KAAK,EAAE,MAAM;CAAG;;ACzB5B,AACI,MADE,CACF,eAAe,CAAC;EACZ,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;EACf,SAAS,EAAE,cAAc;CAeS;;AApB1C,AAMQ,MANF,CACF,eAAe,GAKT,CAAC,CAAC;EACA,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,MAAM;CAAG;;AAR7B,AASQ,MATF,CACF,eAAe,CAQX,YAAY,CAAC;EACT,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,IAAI;EACZ,SAAS,EAAE,IAAI;CAAG;;AAb9B,AAcQ,MAdF,CACF,eAAe,CAaX,UAAU,CAAC;EACP,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;CACpB;;AAjBF,AAkBQ,MAlBF,CACF,eAAe,CAiBX,eAAe,CAAC;EACZ,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,OAAO;CAAG;;ACpBxC,AAAA,QAAQ,CAAC;EACL,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;CAEU;;AAL7B,AAII,QAJI,CAIJ,eAAe,CAAC;EACZ,UAAU,EAAE,IAAI;CAAG",
     "sources": [
         "style.sass",
         "_variables.sass",

src/utils.tsx

@@ -1,4 +1,6 @@
 import axios from "./api/axios"
+import { FcLinux } from "react-icons/fc";
+import { FaWindows } from "react-icons/fa";
 
 const checkValidURL = async (url: string) => {
     try {
@@ -54,4 +56,14 @@ const printSize = (sizeInByte: number): string => {
     }
 };
 
-export { checkValidURL, printTwoDecimalPlaces, printTimePassed, printSize, getHostNameFromURL };
+const PrintOSIcon: React.FC<{ os: string }> = ({ os }) => {
+    if (os === "linux") {
+        return <FcLinux />
+    } else if (os === "windows") {
+        return <FaWindows />
+    } else {
+        return <div>os</div>;
+    }
+}
+
+export { checkValidURL, printTwoDecimalPlaces, printTimePassed, printSize, getHostNameFromURL, PrintOSIcon };