Add navbar login and stuff

ssa-frontend/secret_service_archive/src/components/AgentInMission.tsx

@@ -20,7 +20,7 @@ export function AgentInMission (props: any){
 
     useEffect(() => {
         if (reportId) {
-            axios.get(`/reports/report` + reportId)
+            axios.get(`/reports/reports` + reportId)
             .then(res => {
                 const reportData = res.data;
                 setReport(reportData);

ssa-frontend/secret_service_archive/src/components/FindAvailableAgents.tsx

@@ -26,8 +26,8 @@ export function FindAvailableAgents() {
         }
 
         if (picked.skill !== null && (picked.country === null || picked.country === '')){
-            console.log("skill", picked.skill.id)
-            axios.get(`/agents/allSkills?page=1&pageSize=0`)
+            console.log("skill", picked.skill)
+            axios.get(`/agents/skills/` + picked.skill.id + `?page=1&pageSize=5`)
             .then(res => {
                 const skillsData = res.data;
                 setSkills(skillsData);
@@ -36,7 +36,7 @@ export function FindAvailableAgents() {
 
         if ((picked.skill !== null && picked.skill !== '') && (picked.country !== null && picked.country !== '')){
             console.log("both", picked.country.id, picked.skill.id);
-            axios.get(`/agents/allSkills?page=1&pageSize=0`)
+            axios.get(`/agents/countries/` + picked.country.id + `/skills/` + picked.skill.id + `?page=0&pageSize=10`)
             .then(res => {
                 const skillsData = res.data;
                 setSkills(skillsData);
@@ -64,7 +64,7 @@ export function FindAvailableAgents() {
 
         
 
-    if (skills.data === null && countries.data === null) {
+    if (skills.data === null || countries.data === null) {
         return(
             <h1>Loading....</h1>
         )

ssa-frontend/secret_service_archive/src/components/LogIn.tsx

@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { solid, regular, brands } from '@fortawesome/fontawesome-svg-core/import.macro';
+import { Button } from '@mui/material';
 
 interface ILogInProps{
     main: Main
@@ -25,6 +26,7 @@ export class LogIn extends Component<ILogInProps, ILogInState>{
     }
 
     onLogInClick() {
+        sessionStorage.setItem("loggedIn", "ok")
         // TODO login function
         this.props.main.setState( () => ({
             userId: 0, userRole: Roles.Operator, loggedIn: true 
@@ -57,9 +59,9 @@ export class LogIn extends Component<ILogInProps, ILogInState>{
                                     <input type="password" className="form-control" placeholder="Enter password"
                 onChange={ event => this.setState({ password: event.target.value })}/>
                                 </div>
-                                <button className="btn btn-primary text-center mt-2" type="submit">
+                                <Button component={Link} to={"/home"} onClick={this.onLogInClick} className="btn btn-primary text-center mt-2" type="submit">
                                     Login
-                                </button>
+                                </Button>
                                 <p className="text-center mt-5">Don't have an account?&nbsp;
                                     <Link to={"your mum"} className="text-primary">Sign Up</Link>
                                 </p>

ssa-frontend/secret_service_archive/src/components/Main.tsx

@@ -40,7 +40,7 @@ export class Main extends Component<IMainProps, IMainState>{
     render(){
         return(
             <div>
-                <NavBar loggedIn={ false }/>
+                <NavBar loggedIn={ this.state.loggedIn }/>
                 <Routes>
                     <Route path="/login" element={ <LogIn main={ this }/> }/>
                     <Route path="/" element={ <Base /> }/>

ssa-frontend/secret_service_archive/src/components/Navbar.tsx

@@ -24,26 +24,48 @@ export class NavBar extends Component<INavBarProps, INavBarState>{
     }
 
     render(){
-        return(
-            <Navbar bg="primary" variant="dark">
-            <Container>
-              <Navbar.Brand href="/pa165/home">
-                <img
-                  alt=""
-                  src={ serviceImage }
-                  width="30"
-                  height="30"
-                  className="d-inline-block align-top"
-                />{' '}
-              Secret Service Archive
-              </Navbar.Brand>
-                <Nav className="me-auto">
-                    <Nav.Link href="/pa165/agents">Agents</Nav.Link>
-                    <Nav.Link href="/pa165/missions">Missions</Nav.Link>
-                    <Nav.Link href="/pa165/findAgent">Find Available Agent</Nav.Link>
-                </Nav>
-            </Container>
-          </Navbar>
-        )
+        if (sessionStorage.getItem("loggedIn") === "ok") {
+            return(
+                <Navbar bg="primary" variant="dark">
+                <Container>
+                  <Navbar.Brand href="/pa165/home">
+                    <img
+                      alt=""
+                      src={ serviceImage }
+                      width="30"
+                      height="30"
+                      className="d-inline-block align-top"
+                    />{' '}
+                  Secret Service Archive
+                  </Navbar.Brand>
+                    <Nav className="me-auto">
+                        <Nav.Link href="/pa165/agents">Agents</Nav.Link>
+                        <Nav.Link href="/pa165/missions">Missions</Nav.Link>
+                        <Nav.Link href="/pa165/findAgent">Find Available Agent</Nav.Link>
+                    </Nav>
+                </Container>
+              </Navbar>
+            )
+        } else {
+            return(
+                <Navbar bg="primary" variant="dark">
+                <Container>
+                  <Navbar.Brand href="/pa165/">
+                    <img
+                      alt=""
+                      src={ serviceImage }
+                      width="30"
+                      height="30"
+                      className="d-inline-block align-top"
+                    />{' '}
+                  Secret Service Archive
+                  </Navbar.Brand>
+                    <Nav className="me-auto">
+                        <Nav.Link href="/pa165/login">Log In</Nav.Link>
+                    </Nav>
+                </Container>
+              </Navbar>
+            )
+        }
     }
 }