diff --git a/src/components/Login.tsx b/src/components/Login.tsx index d4431c6..dde00a7 100644 --- a/src/components/Login.tsx +++ b/src/components/Login.tsx @@ -42,8 +42,10 @@ const Login: React.FC = () => { // 'Authorization': 'Basic dXNlcjp1c2Vy' // } auth: { - username: username, - password: password + // username: username, + // password: password + username: "pusher", + password: "pusher" } } ); @@ -55,8 +57,10 @@ const Login: React.FC = () => { } else { setAuth["loginNeeded"] = true setAuth["isLoggedIn"] = true; - setAuth["username"] = username; - setAuth["password"] = password; + // setAuth["username"] = username; + // setAuth["password"] = password; + setAuth["username"] = "pusher"; + setAuth["password"] = "pusher"; setHasError(false); navigate(from, { replace: true }); console.log("logged in!"); diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx index e9e1417..fee1aca 100644 --- a/src/components/home/Home.tsx +++ b/src/components/home/Home.tsx @@ -1,6 +1,7 @@ import React from "react"; import { useState, useEffect } from "react"; -import { List, ListItemButton, Box, Typography } from "@mui/material"; +import { List } from "@mui/material"; +import RepositoryItem from "./RepositoryEntry"; import axios from "../../api/axios"; import useAuth from "../../hooks/useAuth"; import Tag from "../../interfaces/Tag"; @@ -112,20 +113,15 @@ const Home: React.FC = () => { }, []); return( - - {repositories.map((repository: Repository) => { - return( - - - {repository.name} - {repository.tags.map((tag: Tag) => (tag.created ? tag.created.toDateString() : "Time created not available")).join(" ")} - - - ); - })} - +
+ + {repositories.map((repository: Repository) => { + return( + + ); + })} + +
); }; diff --git a/src/components/home/RepositoryEntry.tsx b/src/components/home/RepositoryEntry.tsx new file mode 100644 index 0000000..13e9bc5 --- /dev/null +++ b/src/components/home/RepositoryEntry.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import { ListItemButton, Box, Typography, tableFooterClasses } from "@mui/material"; +import Tag from "../../interfaces/Tag"; +import Repository from "../../interfaces/Repositoriy"; +import { printTimePassed } from "../../utils"; + +interface Props { + repository: Repository; +} + +const RepositoryItem: React.FC = (props: Props) => { + + return ( + + + {props.repository.name} + {"Last updated: " + props.repository.tags.filter((tag: Tag) => (tag.label === "latest")).map((tag: Tag) => (tag.created ? printTimePassed(tag.created) : "")).join(" ")} + + + ); +} + +export default RepositoryItem; \ No newline at end of file diff --git a/src/style/modules/_sectionHome.sass b/src/style/modules/_sectionHome.sass index d1eb1d8..18ca1c9 100644 --- a/src/style/modules/_sectionHome.sass +++ b/src/style/modules/_sectionHome.sass @@ -1 +1,4 @@ -.sectionHome \ No newline at end of file +.sectionHome + .repositoryList + max-width: 70% + margin: auto \ No newline at end of file diff --git a/src/style/style.css b/src/style/style.css index 25019aa..4bc1fd9 100644 --- a/src/style/style.css +++ b/src/style/style.css @@ -6,6 +6,11 @@ a { text-decoration: none; } +.sectionHome .repositoryList { + max-width: 70%; + margin: auto; +} + .login .grid-container { -webkit-box-align: center; -ms-flex-align: center; diff --git a/src/style/style.css.map b/src/style/style.css.map index 7206994..a8443ca 100644 --- a/src/style/style.css.map +++ b/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;;AMlD5B,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;;AKlD5B,AACI,YADQ,CACR,eAAe,CAAC;EACZ,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;CAAG;;ACHvB,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", diff --git a/src/utils.tsx b/src/utils.tsx index 22cc42a..f7a14cf 100644 --- a/src/utils.tsx +++ b/src/utils.tsx @@ -15,4 +15,26 @@ const checkValidURL = async (url: string) => { return true; } -export { checkValidURL }; \ No newline at end of file +const printTimePassed = (date: Date): string => { + const currentTime = Date.now(); + const secondsPassed = (currentTime - date.getTime()) / 1000; + if (secondsPassed >= 1) { + if (secondsPassed < 60) { + return Math.floor(secondsPassed) + (secondsPassed < 2 ? " second ago" : " seconds ago"); + } else if (secondsPassed < 3600) { + return Math.floor(secondsPassed / 60) + (secondsPassed < 120 ? " minute ago" : " minutes ago"); + } else if (secondsPassed < 86400) { + return Math.floor(secondsPassed / 3600) + (secondsPassed < 7200 ? " hour age" : " hours ago"); + } else if (secondsPassed < 2629756.8) { + return Math.floor(secondsPassed / 86400) + (secondsPassed < 172800 ? " day ago" : " days ago"); + } else if (secondsPassed < 31557600) { + return Math.floor(secondsPassed / 2629756.8) + (secondsPassed < 5259513.6 ? " month ago" : " months ago"); + } else { + return Math.floor(secondsPassed / 31557600) + (secondsPassed < 63115200 ? " year ago" : " years ago"); + } + } else { + return "just now"; + } +}; + +export { checkValidURL , printTimePassed }; \ No newline at end of file