add data to redux form

Co-authored-by: Sal Saluga [email protected]
Co-authored-by: Ken Bains [email protected]
Co-authored-by: Huy Pham [email protected]

Author: Bianca Picasso

app/src/components/ContextAPIManager/CreatorComponent/ContextCreator.tsx

@@ -1,15 +1,19 @@
 import { Typography } from '@material-ui/core';
-import React from 'react';
+import React, {useEffect, useState } from 'react';
 import { useStore } from 'react-redux'
 
 import CreatorForm  from './CreatorForm';
 
 const ContextCreator = () => {
   const store = useStore();
-  console.log(store.getState())
+  const [state, setState] = useState([]);
+  
+  useEffect(() => {
+    setState(store.getState().contextSlice)
+  }, [])
   return (
     <>
-      <CreatorForm />
+      <CreatorForm contextStore={state}/>
     </>
   )
 };

app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx

@@ -1,7 +1,8 @@
 //context stored in an object
-//it will have another object within to hold the key value pairs
+//it will have another object within to hold the key contextInput pairs
 
-import React, { Fragment } from 'react';
+import React, { Fragment, useState, useEffect } from 'react';
+import { useDispatch } from 'react-redux'
 import TextField from '@mui/material/TextField';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import Button from '@mui/material/Button';
@@ -13,6 +14,7 @@ import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
 import { styled } from '@mui/material/styles';
 import TableCell, { tableCellClasses } from '@mui/material/TableCell';
+import Box from '@mui/material/Box';
 
 import ContextTable from './ContextTable';
 
@@ -22,23 +24,23 @@ const filter = createFilterOptions();
 const contextArr = [
   {
     name : 'theme',
-    values: [
-      {key: 'dark', value: 'black'},
-      {key: 'light', value: 'white'},
-      {key: 'darker', value: 'darkest'}
+    contextInputs: [
+      {key: 'dark', contextInput: 'black'},
+      {key: 'light', contextInput: 'white'}    
     ]
 
   },
 
   {
     name : 'mood',
-    values : [
-      {key: 'happy', value: 'rainbow'},
-      {key: 'sad', value: 'blue'},
+    contextInputs : [
+      {key: 'happy', contextInput: 'rainbow'},
+      {key: 'sad', contextInput: 'blue'},
     ]
   }
 ]
 
+//START - Table styling 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
   [`&.${tableCellClasses.head}`]: {
     backgroundColor: theme.palette.common.black,
@@ -58,34 +60,55 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
     border: 0
   }
 }));
+//END - table styling
+
+
+
+const CreatorForm = ({contextStore}) => {
+  // const [contextInput, setContextInput] = useState('');
+
+  //array storing all contexts
+  const {allContext} = contextStore
+  
+  const [contextInput, setContextInput] = React.useState(null);
+
+
+  const dispatch = useDispatch()
+
+  const handleClickSelectContext = () => {
+    console.log(document.getElementById("autoCompleteContextField"))
+    console.log('COMING FROM CLICK EVENT', contextInput);
+
+    // dispatch({type: })
+  }
 
-const CreatorForm = () => {
-  // const arr = [1,2,3,4]
-  const [value, setValue] = React.useState(null);
 
   return (
     <Fragment>
+      <Box
+      sx={{ display: 'flex'}} >
     <Autocomplete
-      value={value}
+      id="autoCompleteContextField"
+      value={contextInput}
       onChange={(event, newValue) => {
         if (typeof newValue === 'string') {
-          setValue({
+          setContextInput({
             name: newValue,
           });
         } else if (newValue && newValue.inputValue) {
-          // Create a new value from the user input
-          setValue({
+          // Create a new contextInput from the user input
+          setContextInput({
             name: newValue.inputValue,
           });
         } else {
-          setValue(newValue);
+          setContextInput(newValue);
         }
       }}
       filterOptions={(options, params) => {
         const filtered = filter(options, params);
 
         const { inputValue } = params;
-        // Suggest the creation of a new value
+        // Suggest the creation of a new contextInput
         const isExisting = options.some((option) => inputValue === option.name);
         if (inputValue !== '' && !isExisting) {
           filtered.push({
@@ -100,7 +123,7 @@ const CreatorForm = () => {
       clearOnBlur
       handleHomeEndKeys
       id="free-solo-with-text-demo"
-      options={contextArr}
+      options={allContext || []}
       getOptionLabel={(option) => {
         // Value selected with enter, right from the input
         if (typeof option === 'string') {
@@ -120,7 +143,11 @@ const CreatorForm = () => {
         <TextField {...params} label="Free solo with text demo" />
       )}
     />
-    <ContextTable target={contextArr[0].values}/>
+    <Button variant="contained" onClick={handleClickSelectContext}>Select/Create</Button>
+    {/* <Button variant="contained">Delete</Button> */}
+    </Box>
+    <ContextTable target={contextArr[0].contextInputs}/>
+    
     </Fragment> 
   );
 }

app/src/redux/reducers/slice/contextReducer.js

@@ -1,7 +1,16 @@
 import * as types from '../../constants/actionTypes';
 
 const initialState = {
-  allContext: []
+  allContext: [
+    {
+      name: "MainContext1",
+      values: [{key : "testKey1", value: 'testValue1'}, {key: "testKey2", value: "testValue2"}]
+    },
+    {
+      name: "MainContext3",
+      values: [{key : "testKey3", value: 'testValue3'}, {key: "testKey33", value: "testValue33"}]
+    }
+  ]
 }
 
 const contextReducer = (state = initialState, action) => {