Add data fetching for Agent & Mission Detail

ssa-api/src/main/java/cz/muni/fi/pa165/dto/MissionDetailDto.java

@@ -14,7 +14,7 @@ import java.util.List;
 @NoArgsConstructor
 public class MissionDetailDto {
     private long id;
-    private String codename;
+    private String codeName;
     private Date startDate;
     private int durationDays;
     private String objectives;

ssa-frontend/secret_service_archive/package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/material": "^5.7.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
@@ -10,6 +13,7 @@
     "@types/node": "^16.11.34",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",
+    "axios": "^0.27.2",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",
@@ -18,6 +22,7 @@
     "typescript": "^4.6.4",
     "web-vitals": "^2.1.4"
   },
+  "proxy": "http://localhost:6969/pa165/rest",
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",

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

-import { useEffect } from "react";
+import Button from '@mui/material/Button';
+import { Link } from 'react-router-dom';
 
-interface IAgentDetail{
-    // todo agentdetail fields
-}
-
-export function Agent(props: { id: number; }) {
-    const Agent = null;
-
-    useEffect(() => {
-        props.id;
-        // fetch agent data
-    });
+export function Agent (props: any){
     return(
         <div>
-            <h2>Šakal šakalovič, český skaut a lámač ženských sŕdc</h2>
-            <h4>Missions</h4>
-            <ul>
-                <li>Bobrík červený</li>
-                <li>Bobrík hnedý</li>
-                <li>Bobrík nepamäti</li>
-            </ul>
+            <p className="codeName">{ props.codeName }</p>
+            <div>
+                <p>{ props.startDate }</p>
+                <p>{ props.endDate }</p>
+            </div>
+            <Button component={Link} to={"/agent/" + props.agentId}>Got to agent</Button>
         </div>
     )
 }
\ No newline at end of file

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

+import { useEffect, useState } from "react";
+import axios from 'axios';
+import { Mission } from './Mission'
+
+export function AgentDetail() {
+    const [agent, setAgent] = useState<any>(null);
+    const [id, setId] = useState(getId());
+
+    function getId() {
+        var urlId = window.location.pathname.split('/');
+        return urlId.at(urlId.length - 1);
+    }
+
+    useEffect(() => {
+        axios.get(`/agents/` + id)
+            .then(res => {
+                const agentData = res.data;
+                setAgent(agentData);
+            });
+    },[]);
+
+    if (agent === null) {
+        return(
+            <div>
+                <h2>Loading....</h2>
+            </div>
+        )
+    } else {
+        return(
+            <div>
+                <h2> { agent[`codeName`] } </h2>
+                <h4>Missions</h4>
+                { agent[`missions`].map((mission: any) => {
+                    return(
+                        <Mission codeName={ mission.missionName.codename }
+                                 startDate={ mission.startDate }
+                                 endDate={ mission.endDate }
+                                 missionId={ mission.missionName.id }/>
+                    );
+                }) }
+            </div>
+        )
+    }
+}
\ No newline at end of file

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

@@ -6,8 +6,8 @@ import { Base } from './Base';
 import { MissionsList } from'./MissionsList';
 import { AgentsList } from './AgentsList';
 import { FindAvailableAgents } from './FindAvailableAgents';
-import { Agent } from './Agent';
-import { Mission } from './Mission';
+import { AgentDetail } from './AgentDetail';
+import { MissionDetail } from './MissionDetail';
 
 import { Route, Routes } from "react-router-dom";
 
@@ -48,8 +48,8 @@ export class Main extends Component<IMainProps, IMainState>{
                     <Route path="/agents" element={ <AgentsList/> }/>
                     <Route path="/missions" element={ <MissionsList/> }/>
                     <Route path="/findAgent" element={ <FindAvailableAgents/> }/>
-                    <Route path="mission/:id" element={ <Mission />} />
-                    <Route path="agent/:id" element={ <Agent id={ 0 } />} />
+                    <Route path="mission/:id" element={ <MissionDetail />} />
+                    <Route path="agent/:id" element={ <AgentDetail />} />
                 </Routes>
             </div>
         )

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

-export function Mission() {
+import Button from '@mui/material/Button';
+import { Link } from 'react-router-dom';
+
+export function Mission (props: any){
     return(
         <div>
-            <h2>Cleansing the country</h2>
-            <h4>Nigger</h4>
-            <ul>
-                <li>Johnz</li>
-                <li>Bony</li>
-                <li>Klajd</li>
-            </ul>
+            <p className="codeName">{ props.codeName }</p>
+            <div>
+                <p>{ props.startDate }</p>
+                <p>{ props.endDate }</p>
+            </div>
+            <Button component={Link} to={"/mission/" + props.missionId}>Got to mission</Button>
         </div>
     )
 }
\ No newline at end of file

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

+import { useEffect, useState } from "react";
+import axios from 'axios';
+import { Agent } from './Agent'
+
+export function MissionDetail() {
+    const [mission, setMission] = useState<any>(null);
+    const [id, setId] = useState(getId());
+
+    function getId() {
+        var urlId = window.location.pathname.split('/');
+        return urlId.at(urlId.length - 1);
+    }
+
+    useEffect(() => {
+        axios.get(`/missions/` + id)
+            .then(res => {
+                const missionData = res.data;
+                setMission(missionData);
+            });
+    },[]);
+
+    if (mission === null) {
+        return(
+            <div>
+                <h2>Loading....</h2>
+            </div>
+        )
+    } else {
+        return(
+            <div>
+                <h2> { mission[`codeName`] } </h2>
+                <h4>Agents</h4>
+                { mission[`agents`].map((agent: any) => {
+                    return(
+                        <Agent codeName={ agent.agentCodeName.codename }
+                                 startDate={ agent.startDate }
+                                 endDate={ agent.endDate }
+                                 agentId={ agent.agentCodeName.id }/>
+                    );
+                }) }
+            </div>
+        )
+    }
+}
\ No newline at end of file

ssa-service/src/test/java/cz/muni/fi/pa165/facade/MissionFacadeTest.java

@@ -86,7 +86,7 @@ public class MissionFacadeTest {
     public void getMission()
     {
         MissionDetailDto mission1DetailDto = new MissionDetailDto();
-        mission1DetailDto.setCodename(mission1.getCodename());
+        mission1DetailDto.setCodeName(mission1.getCodename());
         mission1DetailDto.setStartDate(mission1.getStartDate());
         mission1DetailDto.setDurationDays(mission1.getDurationDays());
         mission1DetailDto.setId(mission1.getId());