frontend to backend communication working, starting on locations page

frontend/src/components/AppHeader.js

@@ -21,7 +21,7 @@ function AppHeader(props) {
           />
         </MediaQuery>
         <Group>
-          <ThemeIcon size="xl"><BsHouseDoor /></ThemeIcon>
+          <BsHouseDoor size={30} />
           <Title><Text inherit variant="gradient" gradient={{ from: 'indigo', to: 'cyan', deg: 45 }}>goInventorize</Text></Title>
         </Group>
 

frontend/src/components/SideBar.js

@@ -1,12 +1,26 @@
 import React, {useState } from 'react';
-import { Navbar, Text, Group, ThemeIcon, Button } from '@mantine/core';
+import { Navbar, Text, Group, ThemeIcon, Button, UnstyledButton } from '@mantine/core';
+import { createStyles } from '@mantine/styles';
 import { BsMap } from 'react-icons/bs'
-import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom'
 
 
+const useStyles = createStyles((theme) => ({
+    button: {
+      display: 'block',
+      width: '100%',
+      padding: theme.spacing.xs,
+      borderRadius: theme.radius.sm,
+      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+      backgroundColor: 'transparent',
+  
+      '&:hover': {
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+      },
+    },
+  }));
 
 function SideBar(props) {
-
+    const { classes } = useStyles();
 
     return (
         <Navbar
@@ -17,14 +31,13 @@ function SideBar(props) {
             hidden={!props.opened}
             width={{ base: 200, breakpoints: { sm: '100%', lg: 300 } }}
         >
-            <Router>
-                <Routes>
-                    <Route path="/" element={<Home />} />
-                </Routes>
-            <Button component={Link} to="/locations" leftIcon={<ThemeIcon><BsMap /></ThemeIcon>}>
-                <Text>Locations</Text>
-            </Button>
-            </Router>
+            <UnstyledButton className={classes.button} onClick={() => props.setCurrentPage("locations")} >
+                <Group>
+                    <BsMap />
+                    <Text>Locations</Text>
+                </Group>
+
+            </UnstyledButton>
            
         </Navbar>
     )

frontend/src/components/pages/HomePage.js

@@ -1,10 +1,10 @@
 import React, {useState, useEffect, useContext, createContext} from 'react';
 import APIContext from '../../App';
+import { Text } from '@mantine/core'
 
 
 
-
-function App() {
+function HomePage() {
     const [opened, setOpened] = useState(false);
 
     const serverConfig = useContext(APIContext);
@@ -12,9 +12,10 @@ function App() {
 
     return (
         <>
+        <Text>This is the homepage!</Text>
         </>
 
     );
 }
 
-export default App;
+export default HomePage;

frontend/src/components/pages/Locations.js

@@ -0,0 +1,70 @@
+import React, {useState, useEffect, useContext, createContext} from 'react';
+import APIContext from '../../App';
+import { Text, Loader, Center, Card, Image, Badge, Button, SimpleGrid, Group } from '@mantine/core'
+import { useNotifications } from '@mantine/notifications';
+
+import { backendAPI } from '../../services/backend-api';
+
+
+function LocationsPage() {
+    // const [opened, setOpened] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [locations, setLocations] = useState([])
+    const [baseURL, setBaseURL] = useState("")
+
+    const serverConfig = useContext(APIContext);
+
+    const notifications = useNotifications();
+
+    useEffect(() => {
+        setIsLoading(true)
+        async function fetchSettings() {
+          backendAPI.get('/locations').then(results => {
+            console.log("CONFIG: ", serverConfig)
+            //console.log("baseurl: ", results.config.baseURL)
+            setBaseURL(results.config.baseURL)
+            console.log("URL", `${results.data[0]}`)
+            setLocations(results.data)
+            setIsLoading(false)
+          }).catch(err => {
+            notifications.showNotification({
+              title: 'Backend Notice',
+              message: `Failed to fetch locations from backend! ${err}`,
+              autoClose: false,
+              color: "red",
+            })
+            setIsLoading(false)
+          })
+    
+        }
+        fetchSettings();
+        
+
+    }, [])
+
+
+    return (
+        <>
+        <Center>{ isLoading && <Loader size="xl" variant="bars" />}</Center>
+        <SimpleGrid cols={4} spacing="xl">
+            { locations.map((location, idx) => 
+                <Card key={idx} shadow="sm" padding="md">
+                    <Card.Section>
+                        <Image src={`${serverConfig.baseURL}/photos/locations/${location.Name}/${location.CoverPhoto}`}></Image>
+                    </Card.Section>
+                    <Group position="apart">
+                        <Text weight={500}>{location.Name}</Text>
+                        <Badge color="pink" variant="light">
+                            On Sale
+                        </Badge>
+                    </Group>
+                    <Text size="sm">{location.Description}</Text>
+                </Card>
+            )}
+        </SimpleGrid>
+        </>
+
+    );
+}
+
+export default LocationsPage;