Format code. Added API implementation.

Spytex · Jul 20, 2023 · 707d22b · 707d22b
1 parent 6dc7639
commit 707d22b
Show file tree

Hide file tree

Showing 30 changed files with 425 additions and 301 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,10 +13,12 @@
     "@chakra-ui/react": "^2.7.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@node-redis/client": "^1.0.6",
     "@types/formidable": "^3.4.0",
-    "@types/node": "20.4.0",
+    "@types/node": "^20.4.0",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
+    "@types/uuid": "^9.0.2",
     "axios": "^1.4.0",
     "cypress": "^12.17.1",
     "cypress-file-upload": "^5.0.8",
@@ -30,6 +32,6 @@
     "react-icons": "^4.10.1",
     "react-query": "^3.39.3",
     "typescript": "5.1.6",
-    "uuid-by-string": "^4.0.0"
+    "uuid": "^9.0.0"
   }
 }
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
@@ -1,17 +1,17 @@
-import { FC, PropsWithChildren } from "react";
+import {FC, PropsWithChildren} from "react";
 import Header from "./header/Header";
 import Footer from "./footer/Footer";
 import {Box, Flex} from "@chakra-ui/react";
 
-const Layout: FC<PropsWithChildren<unknown>> = ({ children }) => {
-    return (
-        <Flex direction="column" minH="100vh">
-            <Header/>
-            <Box as="main" flex="1">
-                {children}
-            </Box>
-            <Footer/>
-        </Flex>
+const Layout: FC<PropsWithChildren<unknown>> = ({children}) => {
+  return (
+    <Flex direction="column" minH="100vh">
+      <Header/>
+      <Box as="main" flex="1">
+        {children}
+      </Box>
+      <Footer/>
+    </Flex>
   );
 }
 

diff --git a/src/components/layout/footer/Footer.tsx b/src/components/layout/footer/Footer.tsx
@@ -7,17 +7,17 @@ import {
   Text,
   useColorModeValue,
   VisuallyHidden,
-    Image,
+  Image,
 } from '@chakra-ui/react';
-import { FaInstagram, FaTwitter, FaYoutube } from 'react-icons/fa';
-import { ReactNode } from 'react';
+import {FaInstagram, FaTwitter, FaYoutube} from 'react-icons/fa';
+import {ReactNode} from 'react';
 import LogoTitle from "public/train_logo_title.png";
 
 const SocialButton = ({
-  children,
-  label,
-  href,
-}: {
+                        children,
+                        label,
+                        href,
+                      }: {
   children: ReactNode;
   label: string;
   href: string;
@@ -56,12 +56,13 @@ export default function Footer() {
         spacing={4}
         justify={'center'}
         align={'center'}>
-          <Link href="/">
-                <Image src={LogoTitle.src} alt="logo" height="50px"  objectFit="cover" />
-              </Link>
+        <Link href="/">
+          <Image src={LogoTitle.src} alt="logo" height="50px" objectFit="cover"/>
+        </Link>
         <Stack direction={'row'} spacing={6}>
           <Link href={'/'}>Home</Link>
           <Link href={'/photos'}>Photos</Link>
+          <Link href={'/dashboard'}>Dashboard</Link>
         </Stack>
       </Container>
 
@@ -73,20 +74,20 @@ export default function Footer() {
           as={Stack}
           maxW={'6xl'}
           py={4}
-          direction={{ base: 'column', md: 'row' }}
+          direction={{base: 'column', md: 'row'}}
           spacing={4}
-          justify={{ base: 'center', md: 'space-between' }}
-          align={{ base: 'center', md: 'center' }}>
+          justify={{base: 'center', md: 'space-between'}}
+          align={{base: 'center', md: 'center'}}>
           <Text>© 2023 Wagon. All rights reserved</Text>
           <Stack direction={'row'} spacing={6}>
             <SocialButton label={'Twitter'} href={'https://www.twitter.com/'}>
-              <FaTwitter />
+              <FaTwitter/>
             </SocialButton>
             <SocialButton label={'YouTube'} href={'https://www.youtube.com/'}>
-              <FaYoutube />
+              <FaYoutube/>
             </SocialButton>
             <SocialButton label={'Instagram'} href={'https://www.instagram.com/'}>
-              <FaInstagram />
+              <FaInstagram/>
             </SocialButton>
           </Stack>
         </Container>

diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import {ReactNode} from 'react';
 import {
   Box,
   Flex,
@@ -13,15 +13,15 @@ import {
 import {MoonIcon, SunIcon, CloseIcon, HamburgerIcon} from '@chakra-ui/icons';
 import Logo from "public/train_logo.png";
 
-const Links = ['Home', 'Photos'];
-const Hrefs = ['/', 'photos'];
+const Links = ['Home', 'Photos', 'Dashboard'];
+const Hrefs = ['/', 'photos', 'dashboard'];
 
 interface NavLinkProps {
   children: ReactNode;
   href: string;
 }
 
-const NavLink = ({ children, href }: NavLinkProps) => (
+const NavLink = ({children, href}: NavLinkProps) => (
   <Link
     px={2}
     py={1}
@@ -36,57 +36,57 @@ const NavLink = ({ children, href }: NavLinkProps) => (
 );
 
 export default function Header() {
-  const { colorMode, toggleColorMode } = useColorMode();
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const {colorMode, toggleColorMode} = useColorMode();
+  const {isOpen, onOpen, onClose} = useDisclosure();
   return (
     <>
       <Box bg={useColorModeValue('gray.100', 'gray.900')} px={4} position="sticky" top={0} zIndex="1">
         <Flex h={16} alignItems={'center'} justifyContent={'space-between'}>
 
           <IconButton
             size={'md'}
-            icon={isOpen ? <CloseIcon /> : <HamburgerIcon />}
+            icon={isOpen ? <CloseIcon/> : <HamburgerIcon/>}
             aria-label={'Open Menu'}
-            display={{ md: 'none' }}
+            display={{md: 'none'}}
             onClick={isOpen ? onClose : onOpen}
           />
 
           <HStack spacing={8} alignItems={'center'}>
             <Box>
               <Link href="/">
-                <Image src={Logo.src} alt="logo" boxSize="50px" objectFit="cover" />
+                <Image src={Logo.src} alt="logo" boxSize="50px" objectFit="cover"/>
               </Link>
             </Box>
             <HStack
               as={'nav'}
               spacing={4}
-              display={{ base: 'none', md: 'flex' }}>
+              display={{base: 'none', md: 'flex'}}>
               {Links.map((link, index) => (
-                  <NavLink key={link} href={Hrefs[index]}>
-                    {link}
-                  </NavLink>
-                ))}
+                <NavLink key={link} href={Hrefs[index]}>
+                  {link}
+                </NavLink>
+              ))}
             </HStack>
           </HStack>
 
           <Flex alignItems={'center'}>
             <Stack direction={'row'} spacing={7}>
               <Button onClick={toggleColorMode}>
-                {colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
+                {colorMode === 'light' ? <MoonIcon/> : <SunIcon/>}
               </Button>
             </Stack>
           </Flex>
 
         </Flex>
 
         {isOpen ? (
-          <Box pb={4} display={{ md: 'none' }}>
+          <Box pb={4} display={{md: 'none'}}>
             <Stack as={'nav'} spacing={4}>
               {Links.map((link, index) => (
-                  <NavLink key={link} href={Hrefs[index]}>
-                    {link}
-                  </NavLink>
-                ))}
+                <NavLink key={link} href={Hrefs[index]}>
+                  {link}
+                </NavLink>
+              ))}
             </Stack>
           </Box>
         ) : null}