From 07d16b9aefeafdcfec4261b7c1d15ea34a177664 Mon Sep 17 00:00:00 2001
From: CodeServer <CodeServer@jlu42.com>
Date: Fri, 8 Apr 2022 02:53:40 +0100
Subject: [PATCH] displays image names

---
 src/App.tsx                    |  2 +-
 src/components/Home.tsx        | 13 --------
 src/components/home/Home.tsx   | 60 ++++++++++++++++++++++++++++++++++
 src/interfaces/Repositoriy.tsx | 11 +++++++
 4 files changed, 72 insertions(+), 14 deletions(-)
 delete mode 100644 src/components/Home.tsx
 create mode 100644 src/components/home/Home.tsx
 create mode 100644 src/interfaces/Repositoriy.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 414693f..78ef8e8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import CheckENVRoute from "./CheckENVRoute";
-import Home from "./components/Home";
+import Home from "./components/home/Home";
 import Login from "./components/Login";
 import ProtectedRoute from "./ProtectedRoute";
 
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
deleted file mode 100644
index f84dfbc..0000000
--- a/src/components/Home.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-import axios from "../api/axios";
-
-const Home: React.FC = () => {
-
-    
-
-    return(
-        <h1>Home</h1>
-    );
-};
-
-export default Home;
\ No newline at end of file
diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
new file mode 100644
index 0000000..5160044
--- /dev/null
+++ b/src/components/home/Home.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import { useState, useEffect } from "react";
+import { List, ListItemButton, Box, Typography } from "@mui/material";
+import axios from "../../api/axios";
+import useAuth from "../../hooks/useAuth";
+import Repository from "../../interfaces/Repositoriy";
+
+const Home: React.FC = () => {
+    const auth = useAuth();
+
+    const [repositories, setRepositories] = useState<Repository[]>([]);
+
+    const listRepositories = async() => {
+
+        const response = await axios.get(
+            "/_catalog",
+            {
+                auth: {
+                    username: auth.username,
+                    password: auth.password
+                }
+            }
+        );
+
+        let newRepositories: Repository[] = [];
+        response?.data?.repositories.forEach((repositoriyName: string) => {
+            let newRepository: Repository = {
+                name: repositoriyName,
+                tags: []
+            }
+            newRepositories.push(newRepository);
+        });
+        setRepositories(newRepositories);
+
+    };
+
+    useEffect(() => {
+        setInterval(() => listRepositories(), 1000);
+    }, []);
+
+    return(
+        <List style={{ maxHeight: "100%", overflow: "auto" }}>
+            {repositories.map((repositoriy: Repository) => {
+                return(
+                    <ListItemButton 
+                        component="a" 
+                    >
+                        <Box sx={{ display: "flex", flexDirection: "column" }}>
+                            <Typography color="black" variant="h5">{repositoriy.name}</Typography>
+                            <Typography color="white" variant="h6"></Typography>
+                            <Typography color="mistyrose" variant="body1"></Typography>
+                        </Box>
+                    </ListItemButton>
+                );
+            })}
+        </List>
+    );
+};
+
+export default Home;
\ No newline at end of file
diff --git a/src/interfaces/Repositoriy.tsx b/src/interfaces/Repositoriy.tsx
new file mode 100644
index 0000000..ff1678a
--- /dev/null
+++ b/src/interfaces/Repositoriy.tsx
@@ -0,0 +1,11 @@
+interface Tag {
+    label: string;
+    architecture: string;
+}
+
+interface Repository {
+    name: string;
+    tags: Tag[];
+}
+
+export default Repository;
\ No newline at end of file