fixes the display issue when assigning context to a component

Author: GarrettHutson

app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx

@@ -8,7 +8,7 @@ import AddContextForm from './components/AddContextForm';
 // import * as actions from '../../../redux/actions/actions';
 import { Typography } from '@mui/material';
 import StateContext from '../../../context/context';
-import { addContext, deleteContext } from '../../../redux/reducers/slice/contextReducer';
+import { addContext, deleteContext, addContextValues } from '../../../redux/reducers/slice/contextReducer';
 import { useSelector, useDispatch } from 'react-redux';
 import { deleteElement } from '../../../redux/reducers/slice/appStateSlice';
 
@@ -50,7 +50,7 @@ const CreateContainer = () => {
   //update data store when user add new key-value pair to context
   const handleClickInputData = ({ name }, { inputKey, inputValue }) => {
     dispatch(
-      addContext({ name, inputKey, inputValue })
+      addContextValues({ name, inputKey, inputValue })
     );
     // setState(allContext);
   };

app/src/helperFunctions/generateCode.ts

@@ -383,7 +383,7 @@ const generateUnformattedCode = (
 
   const { allContext } = contextParam;
 
-  
+ 
 
     for (const context of allContext) {
       contextImports += `import ${context.name}Provider from '../contexts/${context.name}.js'\n`;
@@ -460,7 +460,7 @@ const generateUnformattedCode = (
     };
 
     let generatedCode = "import React, { useState, useEffect, useContext} from 'react';\n\n";
-    generatedCode += currComponent.name === 'APP' ? contextImports : '';
+    generatedCode += currComponent.name === 'App' ? contextImports : '';
     generatedCode += importReactRouter ? `import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';\n` : ``;
     generatedCode += createContextImport() ? `${createContextImport()}\n` : '';
     generatedCode += importsMapped ? `${importsMapped}\n` : '';