fixing getting room photos, reworking how routing works, added jotai for state management

frontend/src/components/SideBar.js

@@ -1,4 +1,6 @@
 import React, {useState } from 'react';
+import { useAtom } from 'jotai';
+import { activePageAtom } from '../state/main';
 import { Navbar, Text, Group, ThemeIcon, Button, UnstyledButton } from '@mantine/core';
 import { Link } from 'react-router-dom';
 import { createStyles } from '@mantine/styles';
@@ -36,7 +38,7 @@ const useStyles = createStyles((theme) => ({
 
 function SideBar(props) {
     const { classes } = useStyles();
-    const [activePage, setActivePage] = useState("")
+    const [activePage, setActivePage] = useAtom(activePageAtom)
 
 
     return (
@@ -59,7 +61,7 @@ function SideBar(props) {
                 </Group>
 
             </UnstyledButton> */}
-            <UnstyledButton component={Link} to="/about" className={activePage === "rooms" ? classes.activeButton : classes.button} onClick={() => setActivePage("rooms")} >
+            <UnstyledButton component={Link} to="/rooms" className={activePage === "rooms" ? classes.activeButton : classes.button} onClick={() => setActivePage("rooms")} >
                 <Group>
                     <BsMap />
                     <Text>Rooms</Text>

frontend/src/components/pages/HomePage.js

@@ -1,13 +1,15 @@
 import React, {useState, useEffect, useContext, createContext} from 'react';
 import APIContext from '../../App';
 import { Text } from '@mantine/core'
+import { useAtom } from 'jotai';
+import { serverConfigAtom } from '../../state/main'
 
 
 
 function HomePage() {
     const [opened, setOpened] = useState(false);
+    const [serverConfig] = useAtom(serverConfigAtom)
 
-    const serverConfig = useContext(APIContext);
 
 
     return (

frontend/src/components/pages/Locations.js

@@ -1,9 +1,11 @@
 import React, {useState, useEffect, useContext, createContext} from 'react';
-import { APIContext } from '../../App';
+import { useAtom } from 'jotai'
+import { activePageAtom, roomFilterAtom, serverConfigAtom } from '../../state/main';
 import { Text, Loader, Center, Card, Image, Badge, Button, SimpleGrid, Group } from '@mantine/core'
 import { useNavigate } from "react-router-dom";
 import { useNotifications } from '@mantine/notifications';
 
+
 import { backendAPI } from '../../services/backend-api';
 
 
@@ -11,8 +13,10 @@ function LocationsPage(props) {
     // const [opened, setOpened] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const [locations, setLocations] = useState([])
+    const [serverConfig] = useAtom(serverConfigAtom)
+    const [, setRoomsFilter] = useAtom(roomFilterAtom)
+    const [, setActivePage] = useAtom(activePageAtom)
 
-    const serverConfig = useContext(APIContext);
 
     const notifications = useNotifications();
     const navigate = useNavigate();
@@ -42,6 +46,13 @@ function LocationsPage(props) {
 
     }, [])
 
+    const navigateToRooms = (locationID) => {
+        console.log("Passedlocid: ", locationID)
+        setActivePage("rooms")
+        setRoomsFilter({"locationID": locationID})
+        navigate("/rooms")
+    }
+
 
     return (
         <>
@@ -49,7 +60,7 @@ function LocationsPage(props) {
         <Center><Text>Locations</Text></Center>
         <SimpleGrid cols={4} spacing="xl">
             { locations.map((location, idx) => 
-                <Card key={`${idx} - ${location.ID}`} component="a" onClick={(e) => {navigate("/rooms", { state: { locationID: location.ID}})}} shadow="sm" padding="md">
+                <Card key={`${idx} - ${location.ID}`} component="a" onClick={() => navigateToRooms(location.ID)} shadow="sm" padding="md">
                     <Card.Section>
                         {location.CoverPhoto ? <Image src={`${serverConfig.baseURL}/photos/locations/${location.Name}/${location.CoverPhoto}`}></Image> : <Text>No Photo</Text>}
                     </Card.Section>

frontend/src/components/pages/RoomsPage.js

@@ -1,5 +1,6 @@
 import React, {useState, useEffect, useContext, createContext} from 'react';
-import { APIContext } from '../../App';
+import { useAtom } from 'jotai'
+import { roomFilterAtom, serverConfigAtom } from '../../state/main';
 import { Text, Loader, Center, Card, Image, Badge, Button, SimpleGrid, Group } from '@mantine/core'
 import { useLocation } from "react-router-dom";
 import { useNotifications } from '@mantine/notifications';
@@ -11,8 +12,10 @@ function RoomsPage(props) {
     // const [opened, setOpened] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const [rooms, setRooms] = useState([])
+    const [filter, setFilter] = useState("");
+    const [serverConfig] = useAtom(serverConfigAtom)
+    const [roomFilter, setRoomFilter] = useAtom(roomFilterAtom)
 
-    const serverConfig = useContext(APIContext);
 
     const notifications = useNotifications();
     const {state} = useLocation();
@@ -22,8 +25,9 @@ function RoomsPage(props) {
         async function fetchSettings() {
             let url = `rooms`
             console.log("CURRENT STATE: ", state)
-            if (state) {
-                url = `rooms/${state.locationID}`
+            // if we are filtering by location
+            if (roomFilter.locationID) {
+                url = `rooms/${roomFilter.locationID}`
             }
             backendAPI.get(url).then(results => {
                 console.log("ROOMS: ", results)
@@ -45,6 +49,13 @@ function RoomsPage(props) {
 
     }, [])
 
+    // Check if filter changes for this page and refresh results
+    useEffect(() => {
+        console.log("CURRENT ROOM FILTER: ", roomFilter)
+
+    }, [roomFilter, setFilter])
+    
+
 
     return (
         <>
@@ -54,7 +65,7 @@ function RoomsPage(props) {
             { rooms.map((room, idx) => 
                 <Card key={`${room.ID}`} component="a" onClick={(e) => {}} shadow="sm" padding="md">
                     <Card.Section>
-                        {room.CoverPhoto ? <Image src={`${serverConfig.baseURL}/photos/rooms/${room.Name}/${room.CoverPhoto}`}></Image> : <Text>No Photo</Text>}
+                        {room.CoverPhoto ? <Image src={`${serverConfig.baseURL}/photos/locations/${room.CoverPhoto}`}></Image> : <Text>No Photo</Text>}
                     </Card.Section>
                     <Group position="apart">
                         <Text weight={500}>{room.Name}</Text>