update polling

frontend/src/UnAuthenticatedSwitch.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { get } from 'lodash-es';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import About from './About';
+import NotFound from './NotFound';
+import Login from './pages/Login';
+
+
+// import useSiteSettings from './models/site/useSiteSettings';
+import UnAuthenticatedAppHeader from './components/UnAuthenticatedAppHeader';
+
+import Home from './pages/Home';
+
+// import Footer from './components/Footer';
+
+export default function UnAuthenticatedSwitch() {
+//   const { data: siteSettings } = useSiteSettings();
+//   const siteNeedsSetup = get(siteSettings, [
+//     'site.needsSetup',
+//     'value',
+//   ]);
+
+  return (
+    <main>
+      <div style={{
+            position: 'fixed',
+            top: 0,
+            maxWidth: '1440px',
+            marginLeft: 'auto',
+            marginRight: 'auto',
+            zIndex: '100',
+            width: '100%',
+          }}>            
+            <UnAuthenticatedAppHeader />
+      </div>
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          justifyContent: 'center',
+          alignItems: 'center',
+          overflow: 'hidden',
+          boxSizing: 'border-box',
+          width: '100%',
+          minHeight: 'calc(100vh - 64px)', // Assuming the header height is 64px
+        }}
+      >
+        <Router>
+          <Routes>
+            <Route path="/about" element={<About />} />
+            <Route path="/home" element={<Home />} />
+            <Route path="/login" element={<Login />} />
+            <Route path="/" element={<Home />} />
+            <Route path="*" element={<NotFound />} />
+          </Routes>
+        </Router>
+        {/* <Footer authenticated /> */}
+      </div>
+    </main>
+  );
+}

frontend/src/components/UnauthenticatedAppHeader.jsx → frontend/src/components/UnAuthenticatedAppHeader.jsx

@@ -1,25 +1,56 @@
-import React from 'react';
+import React, { useState, useContext} from 'react';
 import { Navbar, Nav, NavDropdown } from 'react-bootstrap';
+import { LinkContainer } from 'react-router-bootstrap';
+import Avatar from './Avatar';
 import '../css/dropdown.css';
 import menu from '../constants/navMenu';
 import DownIcon from './svg/DownIcon';
 import Button from 'react-bootstrap/Button';
+import NotificationButton from './navBar/NotificationButton';
 import MultiLanguageDropdown from './navBar/MultiLanguageDropdown';
+import AuthContext from '../AuthProvider';
 
-export default function UnauthenticatedAppHeader () {
+
+export default function AuthenticatedAppHeader () {
     const location = window.location;
     const navBarFilled = location.pathname === '/';
     const backgroundColor = !navBarFilled ? '#00a1b2' : 'transparent';
 
-    return (<Navbar variant="dark" expand="lg" style={{ 
-          backgroundColor: backgroundColor,
-          width: '100%', 
-          height: '43px',
-          display: 'flex', 
-          justifyContent: 'space-between',
-          overflow: 'visible',
-          fontSize: '1rem',
-          }}>
+    const isLoggedIn = useContext(AuthContext);
+    console.log('=============>>>>>>>>>>>>>>>',isLoggedIn);
+
+    const logout = async event => {
+      console.log('Logging out');
+      event.preventDefault();
+      await fetch('/api/v3/logout')
+        .then(response => {
+          if (response.status === 200) {
+            console.log('User logged out');
+            window.location.href = '/';
+          } else if (response.status === 401) {
+            console.log('User is not logged in');
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });  
+    };
+
+    return (<Navbar variant="dark" expand="lg" 
+
+    style={{
+      backgroundColor: backgroundColor,
+      height: '43px',
+      fontSize: '1rem',
+      position: 'fixed',
+      top: 0,
+      maxWidth: '1440px',
+      marginLeft: 'auto',
+      marginRight: 'auto',
+      zIndex: '100',
+      width: '100%',
+    }}
+    >
             <Navbar.Brand href="/" style={{ marginLeft: '1rem' }}>Amphibian Wildbook</Navbar.Brand>
             <Navbar.Toggle aria-controls="basic-navbar-nav" />
             <Navbar.Collapse id="basic-navbar-nav" style={{marginLeft: '20%'}}>
@@ -53,6 +84,7 @@ export default function UnauthenticatedAppHeader () {
                 }}
                 href={"/login"}>Login
               </Button>
+
               <MultiLanguageDropdown />
 
             </Navbar.Collapse>

frontend/src/pages/Home.jsx

@@ -27,9 +27,8 @@ export default function Home( ) {
                 throw new Error('Network response was not ok');
             }
 
-            // const result = await response.json();
-            setData(response); 
-            console.log(response);
+            const result = await response.json();
+            setData(result); 
         } catch (error) {
             console.error('There has been a problem with your fetch operation:', error);
         }