Add a navigation bar

pkg_client/src/App.css

@@ -1,7 +1,3 @@
-.App {
-  text-align: center;
-}
-
 .App-logo {
   height: 40vmin;
   pointer-events: none;

pkg_client/src/App.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from "react";
 import "./App.css";
 import APIHandler from "./components/APIHandler";
 import LoginForm from "./components/LoginForm";
-import Container from 'react-bootstrap/Container'
+import Container from "react-bootstrap/Container";
 import { UserContext } from "./contexts/UserContext";
 
 function App() {
@@ -13,9 +13,7 @@ function App() {
   return (
     <Container className="p-3">
       <Container className="p-3 mb-4 bg-light rounded-3">
-        <div className="App">
-          {content}
-        </div>
+        <div className="App">{content}</div>
       </Container>
     </Container>
   );

pkg_client/src/components/APIHandler.tsx

@@ -1,50 +1,27 @@
-import React, { useContext, useEffect, useState } from "react";
-import axios from "axios";
-import { UserContext } from "../contexts/UserContext";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import React, { useContext } from "react";
+
 import Container from "react-bootstrap/Container";
+import Layout from "./Layout";
+import { UserContext } from "../contexts/UserContext";
 
 const APIHandler: React.FC = () => {
   const { user } = useContext(UserContext);
-  // State tracker for service management data.
-  const [serviceData, setServiceData] = useState(null);
-  // State tracker for personal facts data.
-  const [factsData, setFactsData] = useState(null);
-  // State tracker for PKG exploration data. Data presentation, graphs, etc.
-  const [exploreData, setExploreData] = useState(null);
-
-  useEffect(() => {
-    const baseURL =
-      (window as any)["PKG_API_BASE_URL"] || "http://localhost:5000";
-
-    axios
-      .get(`${baseURL}/service`)
-      .then((response) => setServiceData(response.data));
-    axios
-      .get(`${baseURL}/facts`)
-      .then((response) => setFactsData(response.data));
-    axios
-      .get(`${baseURL}/explore`)
-      .then((response) => setExploreData(response.data));
-  }, []);
 
   return (
     <Container>
-      <h1>Personal Knowledge Graph API</h1>
-      <div>
-        <p>Welcome {JSON.stringify(user, null, 2)}</p>
-      </div>
-      <div>
-        <h2>Service Management Data</h2>
-        <pre>{JSON.stringify(serviceData, null, 2)}</pre>
-      </div>
-      <div>
-        <h2>Personal Facts Data</h2>
-        <pre>{JSON.stringify(factsData, null, 2)}</pre>
-      </div>
-      <div>
-        <h2>PKG Exploration Data</h2>
-        <pre>{JSON.stringify(exploreData, null, 2)}</pre>
-      </div>
+      <h1>Personal Knowledge Graph</h1>
+
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Layout />}>
+            <Route index element={<div>Welcome {user?.username}</div>} />
+            {/* <Route path="service" element={<div>Service Management</div>} /> */}
+            <Route path="population" element={<div>PKG Population</div>} />
+            <Route path="explore" element={<div>PKG Exploration</div>} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
     </Container>
   );
 };

pkg_client/src/components/Layout.tsx

@@ -0,0 +1,46 @@
+import { Link, Outlet } from "react-router-dom";
+
+import Nav from "react-bootstrap/Nav";
+import { useState } from "react";
+
+const Layout = () => {
+  const [activeKey, setActiveKey] = useState("/");
+
+  const handleSelect = (eventKey: string | null) => {
+    if (eventKey !== null) {
+      setActiveKey(eventKey);
+    }
+  };
+
+  return (
+    <>
+      <Nav variant="underline" activeKey={activeKey} onSelect={handleSelect}>
+        <Nav.Item>
+          <Nav.Link eventKey="/" as={Link} to="/">
+            Home
+          </Nav.Link>
+        </Nav.Item>
+        <Nav.Item>
+          <Nav.Link eventKey="/service" as={Link} to="/service">
+            Service Management
+          </Nav.Link>
+        </Nav.Item>
+        <Nav.Item>
+          <Nav.Link eventKey="/population" as={Link} to="/population">
+            Populate PKG
+          </Nav.Link>
+        </Nav.Item>
+        <Nav.Item>
+          <Nav.Link eventKey="/explore" as={Link} to="/explore">
+            Explore PKG
+          </Nav.Link>
+        </Nav.Item>
+      </Nav>
+
+      <br />
+      <Outlet />
+    </>
+  );
+};
+
+export default Layout;

pkg_client/src/components/LoginForm.tsx

@@ -1,65 +1,77 @@
 import { useContext, useState } from "react";
 import { UserContext } from "../contexts/UserContext";
 import axios from "axios";
-import Button from 'react-bootstrap/Button';
-import Form from 'react-bootstrap/Form';
-import Alert from 'react-bootstrap/Alert';
-import Row from 'react-bootstrap/Row';
+import Button from "react-bootstrap/Button";
+import Form from "react-bootstrap/Form";
+import Alert from "react-bootstrap/Alert";
+import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 
 const LoginForm = () => {
-    const { setUser } = useContext(UserContext);
-    const [username, setUsername] = useState("");
-    const [password, setPassword] = useState("");
-    const [error, setError] = useState("");
-    const baseURL = (window as any)["PKG_API_BASE_URL"] || "http://127.0.0.1:5000";
+  const { setUser } = useContext(UserContext);
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const baseURL =
+    (window as any)["PKG_API_BASE_URL"] || "http://127.0.0.1:5000";
 
-    const handleAuth = (isRegistration: boolean) => {
-        axios.post(`${baseURL}/auth`, { username, password, isRegistration })
-            .then((response) => {
-                setUser(response.data.user);
-                setError("");
-                console.log(response.data.message);
-            })
-            .catch((error) => {
-                setError(error.response.data.message);
-            });
-    }
+  const handleAuth = (isRegistration: boolean) => {
+    axios
+      .post(`${baseURL}/auth`, { username, password, isRegistration })
+      .then((response) => {
+        setUser(response.data.user);
+        setError("");
+        console.log(response.data.message);
+      })
+      .catch((error) => {
+        setError(error.response.data.message);
+      });
+  };
 
-    const login = () => {
-        handleAuth(false);
-    }
+  const login = () => {
+    handleAuth(false);
+  };
 
-    const register = () => {
-        handleAuth(true);
-    }
+  const register = () => {
+    handleAuth(true);
+  };
 
-    return (
-        <Form>
-            <h1>Login</h1>
-            {error && <Alert variant="danger">{error}</Alert>}
-            <Form.Group className="mb-6" controlId="formUsername">
-                <Form.Label>Username</Form.Label>
-                <Form.Control required type="username" placeholder="Enter username" onChange={(e) => setUsername(e.target.value)} />
-            </Form.Group>
-            <Form.Group className="mb-6" controlId="formPassword">
-                <Form.Label>Password</Form.Label>
-                <Form.Control required type="password" placeholder="Password" onChange={(e) => setPassword(e.target.value)} />
-            </Form.Group>
-            <Row className="pt-3">
-                <Col>
-                    <div className="d-flex justify-content-center">
-                        <Button variant="primary" onClick={login}>
-                            Login
-                        </Button>
-                        <Button variant="primary" onClick={register} className="ms-2">
-                            Register
-                        </Button>
-                    </div>
-                </Col>
-            </Row>
-        </Form >
-    );
-}
+  return (
+    <Form>
+      <h1>Login</h1>
+      {error && <Alert variant="danger">{error}</Alert>}
+      <Form.Group className="mb-6" controlId="formUsername">
+        <Form.Label>Username</Form.Label>
+        <Form.Control
+          required
+          type="username"
+          placeholder="Enter username"
+          onChange={(e) => setUsername(e.target.value)}
+        />
+      </Form.Group>
+      <Form.Group className="mb-6" controlId="formPassword">
+        <Form.Label>Password</Form.Label>
+        <Form.Control
+          required
+          type="password"
+          placeholder="Password"
+          onChange={(e) => setPassword(e.target.value)}
+        />
+      </Form.Group>
+      <Row className="pt-3">
+        <Col>
+          <div className="d-flex justify-content-center">
+            <Button variant="primary" onClick={login}>
+              Login
+            </Button>
+            <Button variant="primary" onClick={register} className="ms-2">
+              Register
+            </Button>
+          </div>
+        </Col>
+      </Row>
+    </Form>
+  );
+};
 
-export default LoginForm;
+export default LoginForm;

pkg_client/src/contexts/UserContext.tsx

@@ -1,22 +1,29 @@
 import React, { useState } from "react";
 
 export type User = {
-    username: string;
-    uri: string;
-}
+  username: string;
+  uri: string;
+};
 
 type UserProviderProps = {
-    children: React.ReactNode;
+  children: React.ReactNode;
 };
 
-export const UserContext = React.createContext<{ user: User | null; setUser: React.Dispatch<React.SetStateAction<User | null>>; }>({ user: null, setUser: () => { } });
+export const UserContext = React.createContext<{
+  user: User | null;
+  setUser: React.Dispatch<React.SetStateAction<User | null>>;
+}>({ user: null, setUser: () => {} });
 
-export const UserProvider: React.FC<UserProviderProps> = ({ children, }: { children: React.ReactNode }) => {
-    const [user, setUser] = useState<User | null>(null);
+export const UserProvider: React.FC<UserProviderProps> = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [user, setUser] = useState<User | null>(null);
 
-    return (
-        <UserContext.Provider value={{ user, setUser }}>
-            {children}
-        </UserContext.Provider>
-    );
-}
+  return (
+    <UserContext.Provider value={{ user, setUser }}>
+      {children}
+    </UserContext.Provider>
+  );
+};

pkg_client/src/index.tsx

@@ -1,10 +1,11 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
 import "./index.css";
-import App from "./App";
-import reportWebVitals from "./reportWebVitals";
 import "bootstrap/dist/css/bootstrap.min.css";
+
+import App from "./App";
+import React from "react";
+import ReactDOM from "react-dom/client";
 import { UserProvider } from "./contexts/UserContext";
+import reportWebVitals from "./reportWebVitals";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement