Erstatte mock-data med database-data på TechniquesDetailed page

frontend/src/pages/Techniques/TechniqueDetailed.tsx

@@ -1,12 +1,36 @@
+import { gql } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
+import { useParams } from "react-router-dom";
+
 import TechniqueDetailedHeader from "../../components/techniques/specificTechnique/TechniqueDetailedHeader/TechniqueDetailedHeader";
 import TechniqueDescription from "../../components/techniques/specificTechnique/TechniqueDescription/TechniqueDescription";
-import TechniqueOverview from "../../components/techniques/specificTechnique/TechniqueOverview/TechniqueOverview.tsx";
+import TechniqueOverview from "../../components/techniques/specificTechnique/TechniqueOverview/TechniqueOverview";
 import SubTechniques from "../../components/techniques/specificTechnique/TechniqueSubTechnique/SubTechniques";
 import RelatedThreatActors from "../../components/techniques/specificTechnique/RelatedThreatActors/RelatedThreatActors";
-import AssociatedSoftware from "../../components/techniques/specificTechnique/AssociatedSoftware/AssociatedSoftware.tsx";
-//import worldMap from "../../assets/tungnguyen0905-technology-7111765.jpg";
+import AssociatedSoftware from "../../components/techniques/specificTechnique/AssociatedSoftware/AssociatedSoftware";
+
 import "./TechniqueDetailed.css";
 
+export const GET_TECHNIQUE = gql`
+  query GetTechnique($mitreId: String!) {
+    techniqueByMitreId(mitreId: $mitreId) {
+      mitreId
+      name
+      description
+    }
+  }
+`;
+
+interface Technique {
+  mitreId: string;
+  name: string;
+  description: string;
+}
+
+interface GetTechniqueData {
+  techniqueByMitreId: Technique | null;
+}
+
 const subTechniques = [
   {
     mitreId: "T1566.001",
@@ -61,71 +85,90 @@ const software = [
 ];
 
 function TechniqueDetailed() {
+  const { mitreId } = useParams();
+
+  const {
+    data,
+    loading,
+    error,
+  } = useQuery<GetTechniqueData>(
+    GET_TECHNIQUE,
+    {
+      variables: {
+        mitreId,
+      },
+    }
+  );
+
+  console.log(data);
+  console.log(error);
+  console.log(loading);
+
+  if (loading) {
+    return <p>Loading...</p>;
+  }
+
+  if (error) {
+    return <p>Error: {error.message}</p>;
+  }
+
+  const technique = data?.techniqueByMitreId;
+
+  if (!technique) {
+    return <p>Technique not found.</p>;
+  }
+
   return (
     <section className="technique-background">
       <section className="technique-detailed-page">
         <section className="technique-detailed-top">
-            <div className="technique-detailed-left">
-                <TechniqueDetailedHeader
-                    mitreId="T1566"
-                    name="Phishing"
-                    tactic="Initial Access"
-                    platforms={[
-                        "Windows",
-                        "macOS",
-                        "Linux",
-                    ]}
-                />
-            </div>
-
-            <div className="technique-detailed-right">
-                <TechniqueOverview
-                mitreId="T1566"
-                name="Phishing"
-                tactic="Initial Access"
-                platforms={[
-                    "Windows",
-                    "macOS",
-                    "Linux",
-                ]}
-                />
-            </div>
+          <div className="technique-detailed-left">
+            <TechniqueDetailedHeader
+              mitreId={technique.mitreId}
+              name={technique.name}
+              tactic="Unknown"
+              platforms={[]}
+            />
+          </div>
 
+          <div className="technique-detailed-right">
+            <TechniqueOverview
+              mitreId={technique.mitreId}
+              name={technique.name}
+              tactic="Unknown"
+              platforms={[]}
+            />
+          </div>
         </section>
 
         <section className="technique-detailed-description">
-            <TechniqueDescription
-                description="
-                Adversaries may send phishing messages
-                to deceive victims into revealing
-                sensitive information, clicking
-                malicious links, or opening malicious
-                attachments.
-                "
-            />
+          <TechniqueDescription
+            description={technique.description}
+          />
         </section>
 
         <section className="technique-detailed-middle">
-            <section className="technique-detailed-middle">
-                <div className="technique-detailed-left-column">
-                    <SubTechniques
-                    subTechniques={subTechniques}
-                    />
-
-                    <AssociatedSoftware
-                    software={software}
-                    />
-                </div>
-
-                <div className="technique-detailed-right-column">
-                    <RelatedThreatActors
-                        actors={actors}
-                    />
-                </div>
-            </section>
+          <section className="technique-detailed-middle">
+            <div className="technique-detailed-left-column">
+              <SubTechniques
+                subTechniques={subTechniques}
+              />
+
+              <AssociatedSoftware
+                software={software}
+              />
+            </div>
+
+            <div className="technique-detailed-right-column">
+              <RelatedThreatActors
+                actors={actors}
+              />
+            </div>
+          </section>
         </section>
       </section>
     </section>
-    );
+  );
 }
+
 export default TechniqueDetailed;

frontend/src/routes/AppRoutes.tsx

@@ -35,7 +35,7 @@ function AppRoutes() {
           <Route path="/tactics/:mitreId" element={<TacticDetailed />}/>
           <Route path="/saved-items" element={<SavedItems />} />
           <Route path="/techniques" element={<Techniques />} />
-          <Route path="/techniques/details" element={<TechniqueDetailed />} />
+          <Route path="/techniques/details/:mitreId" element={<TechniqueDetailed />} />
         </Route>
       </Routes>
     </BrowserRouter>