merge resolved

app/src/components/App.tsx

@@ -1,24 +1,40 @@
-import '../public/styles/style.css';
-
-import React, { useEffect } from 'react';
-import { toggleLoggedIn } from '../redux/reducers/slice/appStateSlice';
-import { useDispatch } from 'react-redux';
-
-import AppContainer from '../containers/AppContainer';
-
-export const App: React.FC = (): JSX.Element => {
-  const dispatch = useDispatch();
-  useEffect(() => {
-    if (window.localStorage.getItem('ssid') !== 'guest') {
-      dispatch(toggleLoggedIn(true));
-    }
-  }, []);
-
-  return (
-    <div className="app">
-      <AppContainer />
-    </div>
-  );
-};
-
-export default App;
+import '../public/styles/style.css';
+
+import React, { useEffect } from 'react';
+import { toggleLoggedIn } from '../redux/reducers/slice/appStateSlice';
+import { useDispatch } from 'react-redux';
+
+import AppContainer from '../containers/AppContainer';
+
+/**
+ * The `App` component is the root component of the React application. It performs an initial check
+ * to determine if a user is logged in (not a 'guest') by inspecting local storage, and updates the
+ * application's state accordingly using Redux. It then renders the `AppContainer`, which serves as
+ * the main container for the application's user interface.
+ *
+ * The `useEffect` hook is used to perform the login check once on component mount, ensuring that
+ * the login state is correctly set based on the presence of a specific item in local storage.
+ *
+ * @returns {JSX.Element} Renders the `AppContainer` wrapped within a div with a class of 'app', 
+ *                        serving as the root of the user interface.
+ *
+ * This component interacts with Redux by dispatching actions to modify the global state, particularly
+ * the logged-in status of the user. This is central for managing conditional rendering and access
+ * throughout the application based on user authentication status.
+ */
+export const App: React.FC = (): JSX.Element => {
+  const dispatch = useDispatch();
+  useEffect(() => {
+    if (window.localStorage.getItem('ssid') !== 'guest') {
+      dispatch(toggleLoggedIn(true));
+    }
+  }, []);
+
+  return (
+    <div className="app">
+      <AppContainer />
+    </div>
+  );
+};
+
+export default App;

app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx

@@ -1,140 +1,157 @@
-import React, { useState, Fragment } from 'react';
-import DataTable from '../CreateTab/components/DataTable';
-import ContextDropDown from './components/ContextDropDown';
-import ComponentDropDown from './components/ComponentDropDrown';
-import Divider from '@mui/material/Divider';
-import Grid from '@mui/material/Grid';
-import ComponentTable from './components/ComponentTable';
-import { Button } from '@mui/material';
-import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
-import { addComponentToContext } from '../../../redux/reducers/slice/contextReducer';
-import { useSelector, useDispatch } from 'react-redux';
-import { deleteElement } from '../../../redux/reducers/slice/appStateSlice';
-import { RootState } from '../../../redux/store';
-import { emitEvent } from '../../../../src/helperFunctions/socket';
-
-const AssignContainer = () => {
-  const dispatch = useDispatch();
-  const defaultTableData = [{ key: 'Key', value: 'Value' }];
-  const [tableState, setTableState] = React.useState(defaultTableData);
-  const [contextInput, setContextInput] = React.useState(null);
-  const [componentInput, setComponentInput] = React.useState(null);
-  const [componentTable, setComponentTable] = useState([]);
-  const { state, contextParam } = useSelector((store: RootState) => ({
-    state: store.appState,
-    contextParam: store.contextSlice
-  }));
-  const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
-
-  //sets table data if it exists
-  const renderTable = (targetContext) => {
-    targetContext?.values && setTableState(targetContext.values);
-  };
-
-  //construct data for table displaying component table
-  const renderComponentTable = (targetComponent) => {
-    //target Component is main
-    const listOfContexts = [];
-    if (!Array.isArray(state) && targetComponent?.name) {
-      contextParam.allContext.forEach((context) => {
-        if (context.components.includes(targetComponent.name)) {
-          listOfContexts.push(context.name);
-        }
-      });
-      setComponentTable(listOfContexts);
-    }
-  };
-
-  //handling assignment of contexts to components
-  const handleAssignment = () => {
-    if (
-      contextInput === '' ||
-      contextInput === null ||
-      componentInput === '' ||
-      componentInput === null
-    )
-      return;
-
-    dispatch(
-      addComponentToContext({
-        context: contextInput,
-        component: componentInput
-      })
-    );
-    //trigger generateCode(), update code preview tab
-    dispatch(deleteElement({ id: 'FAKE_ID', contextParam: contextParam }));
-
-    if (roomCode) {
-      emitEvent('assignContextActions', roomCode, {
-        context: contextInput,
-        component: componentInput,
-        id: 'FAKE_ID',
-        contextParam: contextParam
-      });
-    }
-
-    renderComponentTable(componentInput);
-  };
-
-  return (
-    <Fragment>
-      <Grid container display="flex" justifyContent="space-evenly">
-        <Grid item>
-          <Grid
-            container
-            spacing={2}
-            display="flex"
-            direction="column"
-            justifyContent="center"
-            alignItems="center"
-          >
-            <Grid item>
-              <ContextDropDown
-                contextStore={contextParam}
-                renderTable={renderTable}
-                contextInput={contextInput}
-                setContextInput={setContextInput}
-              />
-            </Grid>
-
-            <Grid item>
-              <DataTable target={tableState} contextInput={contextInput} />
-            </Grid>
-          </Grid>
-        </Grid>
-        <Divider orientation="vertical" variant="middle" flexItem>
-          <Button onClick={handleAssignment}>
-            <DoubleArrowIcon fontSize="large" color="primary" />
-          </Button>
-        </Divider>
-        <Grid item>
-          <Grid item>
-            <Grid
-              container
-              spacing={2}
-              display="flex"
-              direction="column"
-              justifyContent="center"
-              alignItems="center"
-            >
-              <Grid item>
-                <ComponentDropDown
-                  contextStore={contextParam}
-                  renderComponentTable={renderComponentTable}
-                  componentInput={componentInput}
-                  setComponentInput={setComponentInput}
-                />
-              </Grid>
-
-              <Grid item>
-                <ComponentTable target={componentTable} />
-              </Grid>
-            </Grid>
-          </Grid>
-        </Grid>
-      </Grid>
-    </Fragment>
-  );
-};
-
-export default AssignContainer;
+import React, { useState, Fragment } from 'react';
+import DataTable from '../CreateTab/components/DataTable';
+import ContextDropDown from './components/ContextDropDown';
+import ComponentDropDown from './components/ComponentDropDrown';
+import Divider from '@mui/material/Divider';
+import Grid from '@mui/material/Grid';
+import ComponentTable from './components/ComponentTable';
+import { Button } from '@mui/material';
+import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
+import { addComponentToContext } from '../../../redux/reducers/slice/contextReducer';
+import { useSelector, useDispatch } from 'react-redux';
+import { deleteElement } from '../../../redux/reducers/slice/appStateSlice';
+import { RootState } from '../../../redux/store';
+import { emitEvent } from '../../../../src/helperFunctions/socket';
+
+/**
+ * Provides an interface for assigning components to contexts within an application.
+ * The component allows the selection of contexts and components through dropdown menus,
+ * displays related data in tables, and permits the assignment of components to selected contexts.
+ * It leverages Redux for state management and may trigger socket events for real-time updates across sessions.
+ *
+ * This component integrates several subcomponents:
+ * - `ContextDropDown` for selecting contexts which triggers updates to the data table.
+ * - `DataTable` for displaying key-value pairs related to the selected context.
+ * - `ComponentDropDown` for selecting components which triggers updates to the component table.
+ * - `ComponentTable` for displaying a list of contexts associated with a selected component.
+ * - A button for assigning the selected component to the selected context, potentially emitting socket events if a room code is present.
+ *
+ * The state management involves interaction with the Redux store to fetch state information and dispatch actions related to context and component management.
+ *
+ * @returns {JSX.Element} A React component structured with a Grid layout, integrating forms and tables for managing and viewing context and component assignments.
+ */
+const AssignContainer = (): JSX.Element => {
+  const dispatch = useDispatch();
+  const defaultTableData = [{ key: 'Key', value: 'Value' }];
+  const [tableState, setTableState] = React.useState(defaultTableData);
+  const [contextInput, setContextInput] = React.useState(null);
+  const [componentInput, setComponentInput] = React.useState(null);
+  const [componentTable, setComponentTable] = useState([]);
+  const { state, contextParam } = useSelector((store: RootState) => ({
+    state: store.appState,
+    contextParam: store.contextSlice
+  }));
+  const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
+
+  //sets table data if it exists
+  const renderTable = (targetContext) => {
+    targetContext?.values && setTableState(targetContext.values);
+  };
+
+  //construct data for table displaying component table
+  const renderComponentTable = (targetComponent) => {
+    //target Component is main
+    const listOfContexts = [];
+    if (!Array.isArray(state) && targetComponent?.name) {
+      contextParam.allContext.forEach((context) => {
+        if (context.components.includes(targetComponent.name)) {
+          listOfContexts.push(context.name);
+        }
+      });
+      setComponentTable(listOfContexts);
+    }
+  };
+
+  //handling assignment of contexts to components
+  const handleAssignment = () => {
+    if (
+      contextInput === '' ||
+      contextInput === null ||
+      componentInput === '' ||
+      componentInput === null
+    )
+      return;
+
+    dispatch(
+      addComponentToContext({
+        context: contextInput,
+        component: componentInput
+      })
+    );
+    //trigger generateCode(), update code preview tab
+    dispatch(deleteElement({ id: 'FAKE_ID', contextParam: contextParam }));
+
+    if (roomCode) {
+      emitEvent('assignContextActions', roomCode, {
+        context: contextInput,
+        component: componentInput,
+        id: 'FAKE_ID',
+        contextParam: contextParam
+      });
+    }
+
+    renderComponentTable(componentInput);
+  };
+
+  return (
+    <Fragment>
+      <Grid container display="flex" justifyContent="space-evenly">
+        <Grid item>
+          <Grid
+            container
+            spacing={2}
+            display="flex"
+            direction="column"
+            justifyContent="center"
+            alignItems="center"
+          >
+            <Grid item>
+              <ContextDropDown
+                contextStore={contextParam}
+                renderTable={renderTable}
+                contextInput={contextInput}
+                setContextInput={setContextInput}
+              />
+            </Grid>
+
+            <Grid item>
+              <DataTable target={tableState} contextInput={contextInput} />
+            </Grid>
+          </Grid>
+        </Grid>
+        <Divider orientation="vertical" variant="middle" flexItem>
+          <Button onClick={handleAssignment}>
+            <DoubleArrowIcon fontSize="large" color="primary" />
+          </Button>
+        </Divider>
+        <Grid item>
+          <Grid item>
+            <Grid
+              container
+              spacing={2}
+              display="flex"
+              direction="column"
+              justifyContent="center"
+              alignItems="center"
+            >
+              <Grid item>
+                <ComponentDropDown
+                  contextStore={contextParam}
+                  renderComponentTable={renderComponentTable}
+                  componentInput={componentInput}
+                  setComponentInput={setComponentInput}
+                />
+              </Grid>
+
+              <Grid item>
+                <ComponentTable target={componentTable} />
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Grid>
+    </Fragment>
+  );
+};
+
+export default AssignContainer;