DO NOT MERGE Match Component Prototype

frontend/package.json

@@ -41,6 +41,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "^5.0.1",
     "react-table": "^7.7.0",
+    "reactflow": "^11.11.4",
     "styled-components": "^6.1.11",
     "tailwind-merge": "^2.3.0",
     "typescript": "^4.1.2",

frontend/src/components/common/grid/GridElement.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect } from "react";
-import BaseModule from "../../course_authoring/BaseModule";
+import BaseModule from "../../course_authoring/BaseComponent";
 
 interface MouseEventLike {
   clientX: number;
@@ -8,7 +8,7 @@ interface MouseEventLike {
 
 interface GridElementProps {
   temp?: boolean;
-  index: string;
+  elementLayoutManifest: { i: string; w: number; h: number };
   componentType?: string;
   mouseEvent?: MouseEventLike;
   activeComponent: string;
@@ -59,7 +59,7 @@ const createDragStartEvent = (
 
 const GridElement: React.FC<GridElementProps> = ({
   temp,
-  index,
+  elementLayoutManifest,
   activeComponent,
   setActiveComponent,
   data,
@@ -96,7 +96,7 @@ const GridElement: React.FC<GridElementProps> = ({
       style={{ height: "100%", ...style }}
       className={className}
       onMouseDown={(e) => {
-        setActiveComponent(activeComponent === index ? "10000" : index);
+        setActiveComponent(elementLayoutManifest.i);
         if (onMouseDown) onMouseDown(e);
       }}
       onMouseUp={onMouseUp}
@@ -106,7 +106,7 @@ const GridElement: React.FC<GridElementProps> = ({
       <BaseModule
         name={componentType || ""}
         activeComponent={activeComponent}
-        index={index}
+        elementLayoutManifest={elementLayoutManifest}
         data={data}
         setData={setData}
       />

frontend/src/components/course_authoring/BaseComponent.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import TextComponent from "./TextComponent";
+import MatchComponent from "./MatchComponent";
+import TextPanel from "./TextPanel";
+import MatchPanel from "./MatchPanel";
+
+interface BasePrototypeProps {
+  name: string;
+  activeComponent: string;
+  elementLayoutManifest?: { i: string; w: number; h: number };
+  data: Map<string, object>;
+  setData: (data: Map<string, object>) => void;
+}
+
+const BaseComponent: React.FC<BasePrototypeProps> = ({
+  name,
+  data,
+  setData,
+  activeComponent,
+  elementLayoutManifest = { i: "", w: 0, h: 0 },
+}) => {
+  switch (name) {
+    case "TextComponent":
+      return (
+        <TextComponent componentData={data.get(elementLayoutManifest.i)} />
+      );
+    case "MatchComponent":
+      return (
+        <MatchComponent
+          componentData={data}
+          setComponentData={setData}
+          i={elementLayoutManifest.i}
+          w={elementLayoutManifest.w}
+          h={elementLayoutManifest.h}
+        />
+      );
+    case "EditTextComponent":
+      return (
+        <TextPanel
+          componentData={data}
+          setComponentData={setData}
+          index={activeComponent}
+        />
+      );
+    case "EditMatchComponent":
+      return (
+        <MatchPanel
+          componentData={data}
+          setComponentData={setData}
+          index={activeComponent}
+        />
+      );
+    default:
+      return null;
+  }
+};
+
+export default BaseComponent;