Format code

.expo/README.md

@@ -0,0 +1,15 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

.expo/settings.json

@@ -0,0 +1,8 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false
+}

src/components/layout/Layout.tsx

@@ -1,16 +1,16 @@
-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";
+import { Box, Flex } from "@chakra-ui/react";
 
-const Layout: FC<PropsWithChildren<unknown>> = ({children}) => {
+const Layout: FC<PropsWithChildren<unknown>> = ({ children }) => {
   return (
     <Flex direction="column" minH="100vh">
-      <Header/>
+      <Header />
       <Box as="main" flex="1">
         {children}
       </Box>
-      <Footer/>
+      <Footer />
     </Flex>
   );
 }

src/components/layout/footer/Footer.tsx

@@ -9,15 +9,15 @@ import {
   VisuallyHidden,
   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;
@@ -57,7 +57,7 @@ export default function Footer() {
         justify={'center'}
         align={'center'}>
         <Link href="/">
-          <Image src={LogoTitle.src} alt="logo" height="50px" objectFit="cover"/>
+          <Image src={LogoTitle.src} alt="logo" height="50px" objectFit="cover" />
         </Link>
         <Stack direction={'row'} spacing={6}>
           <Link href={'/'}>Home</Link>
@@ -74,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>

src/components/layout/header/Header.tsx

@@ -1,4 +1,4 @@
-import {ReactNode} from 'react';
+import { ReactNode } from 'react';
 import {
   Box,
   Flex,
@@ -10,7 +10,7 @@ import {
   useColorMode,
   Image, HStack, IconButton,
 } from '@chakra-ui/react';
-import {MoonIcon, SunIcon, CloseIcon, HamburgerIcon} from '@chakra-ui/icons';
+import { MoonIcon, SunIcon, CloseIcon, HamburgerIcon } from '@chakra-ui/icons';
 import Logo from "public/train_logo.png";
 
 const Links = ['Home', 'Photos', 'Dashboard'];
@@ -21,7 +21,7 @@ interface NavLinkProps {
   href: string;
 }
 
-const NavLink = ({children, href}: NavLinkProps) => (
+const NavLink = ({ children, href }: NavLinkProps) => (
   <Link
     px={2}
     py={1}
@@ -36,31 +36,31 @@ 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}
@@ -72,15 +72,15 @@ export default function Header() {
           <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]}>

src/components/screens/dashboard/Dashboard.tsx

@@ -1,8 +1,8 @@
-import {FC, useEffect, useState} from 'react';
+import { FC, useEffect, useState } from 'react';
 import Layout from '@/components/layout/Layout';
-import {Box, Button, Center, Container, Divider, Flex, IconButton, Text, VStack} from '@chakra-ui/react';
-import {DeleteIcon} from '@chakra-ui/icons';
-import {KeyService} from "@/service/key.service";
+import { Box, Button, Center, Container, Divider, Flex, IconButton, Text, VStack } from '@chakra-ui/react';
+import { DeleteIcon } from '@chakra-ui/icons';
+import { KeyService } from "@/service/key.service";
 
 const Dashboard: FC = () => {
   const [apiKeys, setApiKeys] = useState<string[]>([]);
@@ -38,14 +38,14 @@ const Dashboard: FC = () => {
             <Center>
               <Button onClick={handleCreateApiKey}>Create API Key</Button>
             </Center>
-            <Divider orientation="horizontal" py={2}/>
+            <Divider orientation="horizontal" py={2} />
             <VStack py={4}>
               {apiKeys.map((apiKey, index) => (
                 <Box key={index} display="flex" alignItems="center">
                   <Text>{apiKey}</Text>
                   <IconButton
                     ml={2}
-                    icon={<DeleteIcon/>}
+                    icon={<DeleteIcon />}
                     aria-label="Delete"
                     onClick={() => handleDeleteApiKey(apiKey)}
                   ></IconButton>

src/components/screens/home/Home.tsx

@@ -1,12 +1,12 @@
-import {FC, useState} from 'react';
+import { FC, useState } from 'react';
 import Layout from '@/components/layout/Layout';
-import {IWagonData} from '@/interfaces/wagon.interface';
-import {WagonItem} from '@/components/ui/wagon/WagonItem';
-import {Box, Flex, SimpleGrid, Button} from '@chakra-ui/react';
+import { IWagonData } from '@/interfaces/wagon.interface';
+import { WagonItem } from '@/components/ui/wagon/WagonItem';
+import { Box, Flex, SimpleGrid, Button } from '@chakra-ui/react';
 import WagonSort from '@/components/ui/wagon/WagonSort';
 import WagonSearch from '@/components/ui/wagon/WagonSearch';
 
-const Home: FC<IWagonData> = ({Vagons}) => {
+const Home: FC<IWagonData> = ({ Vagons }) => {
   const [sortField, setSortField] = useState<string | string[]>('VagonNumber');
   const [sortOrder, setSortOrder] = useState<string | string[]>('asc');
   const [searchQuery, setSearchQuery] = useState<string>('');
@@ -40,18 +40,18 @@ const Home: FC<IWagonData> = ({Vagons}) => {
   return (
     <Layout>
       <Flex justifyContent="center" alignItems="center" mt={4}>
-        <WagonSearch searchQuery={searchQuery} onSearchQueryChange={setSearchQuery}/>
-        <Box ml={4}/>
+        <WagonSearch searchQuery={searchQuery} onSearchQueryChange={setSearchQuery} />
+        <Box ml={4} />
         <WagonSort
           sortField={sortField}
           sortOrder={sortOrder}
           onSortFieldChange={setSortField}
           onSortOrderChange={setSortOrder}
         />
       </Flex>
-      <SimpleGrid columns={{sm: 1, md: 2, lg: 3, xl: 5}} spacing={4} px={4} py={4}>
+      <SimpleGrid columns={{ sm: 1, md: 2, lg: 3, xl: 5 }} spacing={4} px={4} py={4}>
         {visibleWagons.map(wagon => (
-          <WagonItem key={wagon.VagonNumber} Wagon={wagon}/>
+          <WagonItem key={wagon.VagonNumber} Wagon={wagon} />
         ))}
       </SimpleGrid>
       {filteredWagons.length > currentPage * itemsPerPage && (

src/components/screens/photos/Photos.tsx

@@ -1,12 +1,12 @@
-import {FC, useState} from "react";
+import { FC, useState } from "react";
 import Layout from "@/components/layout/Layout";
-import {IPhoto} from "@/interfaces/photo.interface";
-import {SimpleGrid, Button, Flex, Box} from "@chakra-ui/react";
-import {PhotoItem} from "@/components/ui/photo/PhotoItem";
+import { IPhoto } from "@/interfaces/photo.interface";
+import { SimpleGrid, Button, Flex, Box } from "@chakra-ui/react";
+import { PhotoItem } from "@/components/ui/photo/PhotoItem";
 import PhotoSort from "@/components/ui/photo/PhotoSort";
 import PhotoSearch from "@/components/ui/wagon/WagonSearch";
 
-const Photos: FC<IPhoto> = ({photoPaths}) => {
+const Photos: FC<IPhoto> = ({ photoPaths }) => {
   const [sortField, setSortField] = useState<string | string[]>('VagonNumber');
   const [sortOrder, setSortOrder] = useState<string | string[]>('asc');
   const [searchQuery, setSearchQuery] = useState<string>("");
@@ -39,17 +39,17 @@ const Photos: FC<IPhoto> = ({photoPaths}) => {
           searchQuery={searchQuery}
           onSearchQueryChange={setSearchQuery}
         />
-        <Box ml={4}/>
+        <Box ml={4} />
         <PhotoSort
           sortField={sortField}
           sortOrder={sortOrder}
           onSortFieldChange={setSortField}
           onSortOrderChange={setSortOrder}
         />
       </Flex>
-      <SimpleGrid columns={{sm: 1, md: 2, lg: 3, xl: 5}} spacing={4} px={4} py={4}>
+      <SimpleGrid columns={{ sm: 1, md: 2, lg: 3, xl: 5 }} spacing={4} px={4} py={4}>
         {visibleDirs.map((dir) => (
-          <PhotoItem key={dir} photoPath={dir}/>
+          <PhotoItem key={dir} photoPath={dir} />
         ))}
       </SimpleGrid>
       {filteredPhotoPaths.length > currentPage * itemsPerPage && (

src/components/screens/wagon/WagonSingle.tsx

@@ -1,9 +1,9 @@
-import {FC} from 'react';
+import { FC } from 'react';
 import Layout from "@/components/layout/Layout";
-import {IWagonDataSingle} from "@/interfaces/wagon.interface";
-import {Box, Text} from "@chakra-ui/react";
+import { IWagonDataSingle } from "@/interfaces/wagon.interface";
+import { Box, Text } from "@chakra-ui/react";
 
-const WagonSingle: FC<IWagonDataSingle> = ({Wagon}) => {
+const WagonSingle: FC<IWagonDataSingle> = ({ Wagon }) => {
   return (
     <Layout>
       <Box p={4} w="100%">

src/components/ui/photo/PhotoItem.tsx

@@ -1,10 +1,10 @@
-import {FC} from "react";
-import {Box, Flex, IconButton, Image, Text} from "@chakra-ui/react";
-import {IPhotoSingle} from "@/interfaces/photo.interface";
-import {PhotoService} from "@/service/photo.service";
-import {DeleteIcon} from "@chakra-ui/icons";
+import { FC } from "react";
+import { Box, Flex, IconButton, Image, Text } from "@chakra-ui/react";
+import { IPhotoSingle } from "@/interfaces/photo.interface";
+import { PhotoService } from "@/service/photo.service";
+import { DeleteIcon } from "@chakra-ui/icons";
 
-export const PhotoItem: FC<IPhotoSingle> = ({photoPath}) => {
+export const PhotoItem: FC<IPhotoSingle> = ({ photoPath }) => {
   const fileName = photoPath.split(".")[0];
 
   const handleFileDelete = async () => {
@@ -20,11 +20,11 @@ export const PhotoItem: FC<IPhotoSingle> = ({photoPath}) => {
   return (
     <Box key={photoPath} borderWidth={1} p={4} borderRadius="md">
       <Flex direction="column" align="center">
-        <Image src={"/photos/" + photoPath} alt={fileName} maxW="200px" maxH="200px"/>
+        <Image src={"/photos/" + photoPath} alt={fileName} maxW="200px" maxH="200px" />
         <Text>{fileName}</Text>
         <IconButton
           onClick={handleFileDelete}
-          icon={<DeleteIcon/>}
+          icon={<DeleteIcon />}
           aria-label="Delete">
         </IconButton>
       </Flex>

src/components/ui/photo/PhotoSort.tsx

@@ -1,4 +1,4 @@
-import {FC} from 'react';
+import { FC } from 'react';
 import {
   Button,
   Menu,
@@ -10,7 +10,7 @@ import {
   Icon,
   Flex
 } from '@chakra-ui/react';
-import {FaSort} from "react-icons/fa";
+import { FaSort } from "react-icons/fa";
 
 interface IPhotoSort {
   sortField: string | string[];
@@ -20,24 +20,24 @@ interface IPhotoSort {
 }
 
 const PhotoSort: FC<IPhotoSort> = ({
-                                     sortField,
-                                     sortOrder,
-                                     onSortFieldChange,
-                                     onSortOrderChange,
-                                   }) => {
+  sortField,
+  sortOrder,
+  onSortFieldChange,
+  onSortOrderChange,
+}) => {
 
   return (
     <Menu closeOnSelect={false}>
       <MenuButton as={Button}>
         <Flex alignItems="center">
-          <Icon as={FaSort}/>
+          <Icon as={FaSort} />
         </Flex>
       </MenuButton>
       <MenuList minWidth='240px'>
         <MenuOptionGroup defaultValue={sortField} title='Sort By' type='radio' onChange={onSortFieldChange}>
           <MenuItemOption value='VagonNumber'>Wagon Number</MenuItemOption>
         </MenuOptionGroup>
-        <MenuDivider/>
+        <MenuDivider />
         <MenuOptionGroup defaultValue={sortOrder} title='Order' type='radio' onChange={onSortOrderChange}>
           <MenuItemOption value='asc'>Ascending</MenuItemOption>
           <MenuItemOption value='desc'>Descending</MenuItemOption>