Creation of single circuit page base (#304)

* Created the single circuit page based on the key

* Corrected typo in the fetching useEffect function

* Ran linter and prettier

* Copy and paste again the minified version of ALL_CIRCUITS.json

* Added public to gitignore and ran prettier

---------

Co-authored-by: Loris Olivier <53363974+loris-maru@users.noreply.github.com>

Author: loris-olivier-obi

.prettierignore

@@ -4,3 +4,4 @@
 .vscode/
 __tests__/**/*.json
 /src/env.mjs
+/public

src/app/app/virtual-lab/(free)/explore/(interactive)/interactive/(data)/model/circuit/[key]/page.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+import { CircuitSchemaProps } from '@/components/explore-section/Circuit/type';
+import { buildCircuitMap } from '@/components/explore-section/Circuit/utils/circuits-map';
+
+export default function CircuitDetailPage() {
+  const [circuitData, setCircuitData] = useState<CircuitSchemaProps | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const params = useParams();
+  const circuitKey = params?.key as string | undefined;
+
+  useEffect(() => {
+    const fetchCircuit = async () => {
+      if (!circuitKey) {
+        setError('No existing circuit');
+        setLoading(false);
+        return;
+      }
+
+      try {
+        setLoading(true);
+        const response = await fetch('/api/circuit/data', {
+          cache: 'no-store',
+        });
+
+        if (!response.ok) {
+          throw new Error(`Error: ${response.statusText}`);
+        }
+
+        const data = await response.json();
+
+        if (data.error || !Array.isArray(data.circuits)) {
+          throw new Error(data.error || 'Invalid response from API');
+        }
+
+        const { circuits } = data;
+        const circuitMap = buildCircuitMap(circuits);
+        const matchingCircuit = circuitMap.get(circuitKey);
+
+        if (!matchingCircuit) {
+          throw new Error(`Circuit with key ${circuitKey} not found!`);
+        }
+
+        setCircuitData(matchingCircuit);
+      } catch (er) {
+        setError(
+          er instanceof Error ? er.message : 'An error occurred while fetching the circuit data'
+        );
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchCircuit();
+  }, [circuitKey]);
+
+  if (loading) {
+    return (
+      <div className="relative flex h-[50vh] w-full items-center justify-center text-lg font-normal text-primary-9">
+        Loading...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="relative flex h-[50vh] w-full items-center justify-center text-lg font-normal text-red-600">
+        {error}
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative flex w-full flex-col">
+      {circuitData && <div>Future detail view private name</div>}
+    </div>
+  );
+}

src/components/explore-section/Circuit/utils/circuits-map.ts

@@ -0,0 +1,14 @@
+import { CircuitSchemaProps } from '../type';
+
+export const buildCircuitMap = (
+  circuits: CircuitSchemaProps[],
+  map: Map<string, CircuitSchemaProps> = new Map()
+): Map<string, CircuitSchemaProps> => {
+  for (const circuit of circuits) {
+    map.set(circuit.key, circuit);
+    if (circuit.subcircuits && circuit.subcircuits.length > 0) {
+      buildCircuitMap(circuit.subcircuits, map);
+    }
+  }
+  return map;
+};