Continued FE development

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

-export function Agent() {
+import { useEffect } from "react";
+
+interface IAgentDetail{
+    // todo agentdetail fields
+}
+
+export function Agent(props: { id: number; }) {
+    const Agent = null;
+
+    useEffect(() => {
+        props.id;
+        // fetch agent data
+    });
     return(
         <div>
             <h2>Šakal šakalovič, český skaut a lámač ženských sŕdc</h2>

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

+import React, { useState, useEffect } from 'react';
+
 export function AgentsList () {
-    return(
-        <div>
-            <ul>
-                <li>Janko</li>
-                <li>Vanko</li>
-                <li>KAko</li>
-                <li>Kapo</li>
-                <li>Šakal Šakalovič český skaut a lámač ženských sŕdc</li>
-            </ul>
-        </div>
-    )
+
+    const [agents, setAgents] = useState(null);
+
+    useEffect(() => {
+        // fetch data
+    });
+
+    if (agents === null) {
+        return(
+            <div>
+                <h1>Loading ......</h1>
+            </div>
+        )
+    } else {
+        return(
+            <div>
+                <ul>
+                    <li>Janko</li>
+                    <li>Vanko</li>
+                    <li>KAko</li>
+                    <li>Kapo</li>
+                    <li>Šakal Šakalovič český skaut a lámač ženských sŕdc</li>
+                </ul>
+            </div>
+        )
+    }
 }
\ No newline at end of file

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

-export function Content(){
-    return(
-        <div></div>
-    )
-}// import { Home } from './Home';
-// import { Agent } from './Agent';
-// import { AgentList } from './AgentsList';
-// import { Mission } from './Mission';
-// import { MissionsList } from './MissionsList';
-// import { FindAgent } from './FindAvailableAgents';
-
-
-// interface IContentProps{
-//     whatToShow: string
-// }
-
-// export function Content(props: IContentProps) {
-
-//     switch (props.whatToShow) {
-//         case "Agent":
-//             return(
-//                 <div>
-//                     <Agent/>
-//                 </div>
-//             )
-//             break;
-//         case "AgentsList":
-//             return(
-//                 <div>
-//                     <AgentList/>
-//                 </div>
-//             )            
-//             break;
-//         case "Mission":
-//             return(
-//                 <div>
-//                     <Mission/>
-//                 </div>
-//             )            
-//             break;
-//         case "MissionsList":
-//             return(
-//                 <div>
-//                     <MissionsList/>
-//                 </div>
-//             )            
-//             break;
-//         case "FindAgent":
-//             return(
-//                 <div>
-//                     <FindAgent/>
-//                 </div>
-//             )            
-//             break;
-    
-//         default:
-//             return(
-//                 <div>
-//                     <Home/>
-//                 </div>
-//             )
-//             break;
-//     }
-// }
\ No newline at end of file

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

 import Combobox from "react-widgets/Combobox";
+import { useState, useCallback } from "react";
 
 export function FindAvailableAgents() {
+
+    const [result, setResult] = useState(null);
+
+    const searchForAgent = useCallback (()=>{
+        //todo find result
+    },[result]);
+
+    let content;
+    if (result === null) {
+        content = <h2>No items found</h2>
+    } else {
+        // todo content = db result
+        <ul>
+            <li>
+                <image></image> {/*moze byt nejaka agent ikonka*/}
+                <p>Name</p>
+                <p>Skills</p>
+
+            </li>
+        </ul>
+    }
+        
+
     return(
         <div>
-            <input placeholder="napis sem nieco ty kekekt"></input>
-            <Combobox 
-                hideCaret
-                hideEmptyPopup
-                data={["Nigger", "Chad", "Belize", "Tramtaria", "Kekistan", "Bobri vrch", "Normandia"]}
-                placeholder="Choose a country"/>
+            <div className="searchBar">
+                <Combobox 
+                    hideCaret
+                    hideEmptyPopup
+                    data={["Nigger", "Chad", "Belize", "Tramtaria", "Kekistan", "Bobri vrch", "Normandia"]}
+                    placeholder="Choose a country"/>
+                <Combobox 
+                    hideCaret
+                    hideEmptyPopup
+                    data={["Bombenie", "Busenie", "Prebombenie", "Vybombenie", "Zabombenie", "Bombickovanie", "Bodovanie"]}
+                    placeholder="Choose a skill"/>
+                <button onClick={ searchForAgent }>Search</button>
+            </div>
+            <div className="Content">
+                { content }
+            </div>
         </div>
     )
 }
\ No newline at end of file

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

@@ -49,7 +49,7 @@ export class Main extends Component<IMainProps, IMainState>{
                     <Route path="/missions" element={ <MissionsList/> }/>
                     <Route path="/findAgent" element={ <FindAvailableAgents/> }/>
                     <Route path="mission/:id" element={ <Mission />} />
-                    <Route path="agent/:id" element={ <Agent />} />
+                    <Route path="agent/:id" element={ <Agent id={ 0 } />} />
                 </Routes>
             </div>
         )