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

backend/src/repositories/techniqueRepository.ts

@@ -29,6 +29,8 @@ export async function getAllTechniques() {
             mitreId: technique.mitre_id,
             name: technique.name,
             description: technique.description,
+            /*tactic: technique.tactic,
+            platform: technique.platform,*/
         })
         .from(technique);
 }

docs/referat/meeting-29-09-26.txt

@@ -0,0 +1,8 @@
+Oppsummering
+
+- Vi har alle begynt på hver våre sider (som vi fordelte forrige møte)
+- Vi skal begynne å skrive KI kommentarer i PR 
+- Jobbe med readME til neste møte (fredag)
+- Se om vi kan implementere globale: card, grid og toolbar
+- Legge layout til «left» istedenfor «center»
+- Tenke på ideer for å oppfylle «utvidet bruker-funksjonalitet»

frontend/package.json

@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@apollo/client": "^4.3.3",
+    "graphql": "16.11.0",
     "lucide-react": "^1.48.0",
     "react": "^19.2.8",
     "react-country-flag": "^3.1.0",

frontend/src/apollo/client.ts

@@ -0,0 +1,13 @@
+import {
+  ApolloClient,
+  InMemoryCache,
+  HttpLink,
+} from "@apollo/client";
+
+export const apolloClient =
+  new ApolloClient({
+    link: new HttpLink({
+      uri: "http://localhost:3001",
+    }),
+    cache: new InMemoryCache(),
+  });

frontend/src/components/techniques/allTechniques/TechniqueCard/TechniqueCard.tsx

@@ -8,8 +8,8 @@ type TechniqueCardProps = {
   mitreId: string;
   name: string;
   description: string;
-  tactic: string;
-  platform: string;
+  tactic?: string;
+  platform?: string;
 };
 
 function TechniqueCard({
@@ -44,16 +44,16 @@ function TechniqueCard({
 
         <section className="technique-card-tags">
             <span className="technique-tag technique-tactic-tag">
-                {tactic}
+                {tactic ?? "Unknown"}
             </span>
 
             <span className="technique-tag platform-tag">
-                {platform}
+              {platform ?? "Unknown"}
             </span>
         </section>
 
         <Link
-            to={`/techniques/details/`}
+            to={`/techniques/details/${mitreId}`}
             className="technique-card-footer"
         >
             <span>Open profile</span>

frontend/src/components/techniques/allTechniques/TechniqueGrid/TechniqueGrid.tsx

@@ -5,8 +5,8 @@ type Technique = {
   mitreId: string;
   name: string;
   description: string;
-  tactic: string;
-  platform: string;
+  tactic?: string;
+  platform?: string;
 };
 
 type TechniqueGridProps = {
@@ -24,8 +24,8 @@ function TechniqueGrid({
           mitreId={technique.mitreId}
           name={technique.name}
           description={technique.description}
-          tactic={technique.tactic}
-          platform={technique.platform}
+          tactic={technique.tactic ?? "Unknown"}
+          platform={technique.platform ?? "Unknown"}
         />
       ))}
     </section>

frontend/src/graphql/queries/techniqueQueries.ts

@@ -0,0 +1,11 @@
+import { gql } from "@apollo/client";
+
+export const GET_TECHNIQUES = gql`
+  query GetTechniques {
+    allTechniques {
+      mitreId
+      name
+      description
+    }
+  }
+`;

frontend/src/main.tsx

@@ -1,10 +1,15 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { ApolloProvider } from "@apollo/client/react";
+
 import "./index.css";
 import App from "./App.tsx";
+import { apolloClient } from "./apollo/client";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
+    <ApolloProvider client={apolloClient}>
+      <App />
+    </ApolloProvider>
   </StrictMode>,
 );

frontend/src/pages/Techniques/Techniques.tsx

@@ -2,42 +2,38 @@ import TechniqueGrid from "../../components/techniques/allTechniques/TechniqueGr
 import TechniqueToolbar from "../../components/techniques/allTechniques/TechniqueToolbar/TechniqueToolbar";
 
 import "./Techniques.css";
+import { useQuery } from "@apollo/client/react";
+import { GET_TECHNIQUES } from "../../graphql/queries/techniqueQueries";
+
+interface Technique {
+  mitreId: string;
+  name: string;
+  description: string;
+  tactic?: string;
+  platform?: string;
+}
+
+interface GetTechniquesData {
+  allTechniques: Technique[];
+}
+
 
 function Techniques() {
-  const techniques = [
-    {
-      mitreId: "T1566",
-      name: "Phishing",
-      description:
-        "Send deceptive messages to induce victims to reveal information.",
-      tactic: "Initial Access",
-      platform: "Windows",
-    },
-    {
-      mitreId: "T1059",
-      name: "Command and Scripting Interpreter",
-      description:
-        "Execute commands and scripts through supported interpreters.",
-      tactic: "Execution",
-      platform: "Linux",
-    },
-    {
-      mitreId: "T1003",
-      name: "OS Credential Dumping",
-      description:
-        "Obtain account login and credential material from operating systems.",
-      tactic: "Credential Access",
-      platform: "Windows",
-    },
-    {
-      mitreId: "T1027",
-      name: "Obfuscated Files or Information",
-      description:
-        "Hide artifacts to make detection and analysis more difficult.",
-      tactic: "Defense Evasion",
-      platform: "Cross Platform",
-    },
-  ];
+  const {
+    data,
+    loading,
+    error,
+  } = useQuery<GetTechniquesData>(
+    GET_TECHNIQUES,
+  );
+  console.log(data);
+  console.log(error);
+  console.log(loading);
+
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error: {error.message}</p>;
+
+  const techniques = data?.allTechniques || [];
 
   return (
     <section className="techniques-page">