Merge pull request #5 from oslabs-beta/feature/RDTK

mdunnmon · web-flow · commit b73ed63d2bda · 2023-03-11T09:10:04.000-08:00
Feature/rdtk
diff --git a/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx b/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx
@@ -1,15 +1,16 @@
 import React, { useContext, useState, Fragment, useEffect } from 'react';
 import DataTable from '../CreateTab/components/DataTable';
-import { useStore, useDispatch } from 'react-redux';
 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 * as actions from '../../../redux/actions/actions';
+// import * as actions from '../../../redux/actions/actions';
 import StateContext from '../../../context/context';
+import {addComponentToContext}  from '../../../redux/reducers/slice/contextReducer'
+import {useSelector, useDispatch , useStore,} from 'react-redux';
 
 const AssignContainer = () => {
   const store = useStore();
@@ -22,11 +23,12 @@ const AssignContainer = () => {
   const [componentInput, setComponentInput] = React.useState(null);
   const [componentTable, setComponentTable] = useState([]);
   const [stateContext, dispatchContext] = useContext(StateContext);
+  const allContext = useSelector(state => state.contextSlice);
 
   //fetching data from redux store
   useEffect(() => {
-    setState(store.getState().contextSlice);
-  }, []);
+    setState(allContext);
+  }, [allContext]);
 
   const renderTable = targetContext => {
     if (targetContext === null || !targetContext.values) {
@@ -65,7 +67,7 @@ const AssignContainer = () => {
     )
       return;
     dispatch(
-      actions.addComponentToContext({
+    addComponentToContext({
         context: contextInput,
         component: componentInput
       })
@@ -76,7 +78,7 @@ const AssignContainer = () => {
       payload: 'FAKE_ID'
     });
 
-    setState(store.getState().contextSlice);
+    // setState(allContext);
     renderComponentTable(componentInput);
   };
 
diff --git a/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx b/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx
@@ -1,29 +1,36 @@
 import React, { useEffect, useState, useContext } from 'react';
 import { useStore } from 'react-redux';
-import { useDispatch } from 'react-redux';
 import Divider from '@mui/material/Divider';
 import Grid from '@mui/material/Grid';
 import DataTable from './components/DataTable';
 import AddDataForm from './components/AddDataForm';
 import AddContextForm from './components/AddContextForm';
-import * as actions from '../../../redux/actions/actions';
+// import * as actions from '../../../redux/actions/actions';
 import { Typography } from '@mui/material';
 import StateContext from '../../../context/context';
+import { addContext, addContextValues, deleteContext, getAllContext,  addComponentToContext} from '../../../redux/reducers/slice/contextReducer';
+import {useSelector, useDispatch } from 'react-redux';
 
 const CreateContainer = () => {
   const defaultTableData = [{ key: 'Enter Key', value: 'Enter value' }];
+  const allContext = useSelector(state => state.contextSlice);
+ 
   const store = useStore();
   const [state, setState] = useState([]);
   const [tableState, setTableState] = React.useState(defaultTableData);
   const [contextInput, setContextInput] = React.useState(null);
   const [stateContext, dispatchContext] = useContext(StateContext);
+  const dispatch = useDispatch();
 
   //pulling data from redux store
   useEffect(() => {
-    setState(store.getState().contextSlice);
-  }, []);
+    console.log('allcon',allContext)
+   setState(allContext)
+    // setState(store.getState().contextSlice);
+
+  }, [allContext]);
+
 
-  const dispatch = useDispatch();
 
   //update data store when user adds a new context
   const handleClickSelectContext = () => {
@@ -34,23 +41,24 @@ const CreateContainer = () => {
       }
     }
     setContextInput('');
-    dispatch(actions.addContextActionCreator(contextInput));
-    setState(store.getState().contextSlice);
+    dispatch(addContext(contextInput));
+ 
+    // setState(allContext);
   };
 
   //update data store when user add new key-value pair to context
   const handleClickInputData = ({ name }, { inputKey, inputValue }) => {
     dispatch(
-      actions.addContextValuesActionCreator({ name, inputKey, inputValue })
+      addContext({ name, inputKey, inputValue })
     );
-    setState(store.getState().contextSlice);
+    // setState(allContext);
   };
 
   //update data store when user deletes context
   const handleDeleteContextClick = () => {
-    dispatch(actions.deleteContext(contextInput));
+    dispatch(deleteContext(contextInput));
     setContextInput('');
-    setState(store.getState().contextSlice);
+    // setState(allContext);
     setTableState(defaultTableData);
     dispatchContext({
       type: 'DELETE ELEMENT',
diff --git a/app/src/components/bottom/CodePreview.tsx b/app/src/components/bottom/CodePreview.tsx
@@ -15,6 +15,8 @@ import { unpkgPathPlugin } from '../../plugins/unpkg-path-plugin';
 import { fetchPlugin } from '../../plugins/fetch-plugin';
 import * as esbuild from 'esbuild-wasm';
 import store from '../../redux/store';
+import {codePreviewSave, codePreviewInput} from "../../redux/reducers/slice/codePreviewSlice";
+import { useDispatch } from 'react-redux';
 // import { store } from './../../index';
 const CodePreview: React.FC<{
   theme: string | null;
@@ -31,6 +33,7 @@ const CodePreview: React.FC<{
       wasmURL: 'https://unpkg.com/esbuild-wasm@0.8.27/esbuild.wasm'
     });
   };
+  const dispatch = useDispatch();
 
   const wrapper = useRef();
   const dimensions = useResizeObserver(wrapper);
@@ -54,10 +57,11 @@ const CodePreview: React.FC<{
 
   useEffect(() => {
     setInput(currentComponent.code);
-    store.dispatch({
-      type: 'CODE_PREVIEW_INPUT',
-      payload: currentComponent.code
-    });
+    dispatch(codePreviewInput(currentComponent.code));
+    // store.dispatch({
+    //   type: 'CODE_PREVIEW_INPUT',
+    //   payload: currentComponent.code
+    // });
   }, [currentComponent, state.components]);
 
   /**
@@ -67,7 +71,8 @@ const CodePreview: React.FC<{
   const handleChange = async (data) => {
     // console.log('changed');
     setInput(data);
-    store.dispatch({ type: 'CODE_PREVIEW_INPUT', payload: data });
+    dispatch(codePreviewInput(data));
+    // store.dispatch({ type: 'CODE_PREVIEW_INPUT', payload: data });
     if (!ref.current) {
       return;
     }
@@ -83,10 +88,11 @@ const CodePreview: React.FC<{
         global: 'window'
       }
     });
-    store.dispatch({
-      type: 'CODE_PREVIEW_SAVE',
-      payload: result.outputFiles[0].text
-    });
+    dispatch(codePreviewSave(result.outputFiles[0].text))
+    // store.dispatch({
+    //   type: 'CODE_PREVIEW_SAVE',
+    //   payload: result.outputFiles[0].text
+    // });
   };
 
   return (
diff --git a/app/src/redux/actions/actions.js b/app/src/redux/actions/actions.js
@@ -5,26 +5,26 @@ import * as types from '../constants/actionTypes';
 // });
 
 //actions for context slice
-export const addContextActionCreator = (contextName) => ({
-  type: types.ADD_CONTEXT,
-  payload: contextName
-});
+// export const addContextActionCreator = (contextName) => ({
+//   type: types.ADD_CONTEXT,
+//   payload: contextName
+// });
 
-export const addContextValuesActionCreator = (newEntry) => ({
-  type: types.ADD_CONTEXT_VALUES,
-  payload: newEntry
-});
+// export const addContextValuesActionCreator = (newEntry) => ({
+//   type: types.ADD_CONTEXT_VALUES,
+//   payload: newEntry
+// });
 
-export const addComponentToContext = (newEntry) => ({
-  type: types.ADD_COMPONENT_TO_CONTEXT,
-  payload: newEntry
-});
+// export const addComponentToContext = (newEntry) => ({
+//   type: types.ADD_COMPONENT_TO_CONTEXT,
+//   payload: newEntry
+// });
 
-export const deleteContext = (contextInput) => ({
-  type: types.DELETE_CONTEXT,
-  payload: contextInput
-});
+// export const deleteContext = (contextInput) => ({
+//   type: types.DELETE_CONTEXT,
+//   payload: contextInput
+// });
 
-export const getAllContext = () => ({
-  type: types.GET_ALL_CONTEXT
-});
+// export const getAllContext = () => ({
+//   type: types.GET_ALL_CONTEXT
+// });
diff --git a/app/src/redux/constants/actionTypes.js b/app/src/redux/constants/actionTypes.js
@@ -1,9 +1,9 @@
 // save all action as constants here
 // export const DARK_MODE_TOGGLE = 'DARK_MODE_TOGGLE';
-export const CODE_PREVIEW_SAVE = 'CODE_PREVIEW_SAVE';
-export const CODE_PREVIEW_INPUT = 'CODE_PREVIEW_INPUT';
-export const ADD_CONTEXT = 'ADD_CONTEXT';
-export const ADD_CONTEXT_VALUES = 'ADD_CONTEXT_VALUES';
-export const ADD_COMPONENT_TO_CONTEXT = 'ADD_COMPONENT_TO_CONTEXT';
-export const DELETE_CONTEXT = 'DELETE_CONTEXT';
-export const GET_ALL_CONTEXT = 'GET_ALL_CONTEXT';
+// export const CODE_PREVIEW_SAVE = 'CODE_PREVIEW_SAVE';
+// export const CODE_PREVIEW_INPUT = 'CODE_PREVIEW_INPUT';
+// export const ADD_CONTEXT = 'ADD_CONTEXT';
+// export const ADD_CONTEXT_VALUES = 'ADD_CONTEXT_VALUES';
+// export const ADD_COMPONENT_TO_CONTEXT = 'ADD_COMPONENT_TO_CONTEXT';
+// export const DELETE_CONTEXT = 'DELETE_CONTEXT';
+// export const GET_ALL_CONTEXT = 'GET_ALL_CONTEXT';
diff --git a/app/src/redux/reducers/slice/codePreviewSlice.js b/app/src/redux/reducers/slice/codePreviewSlice.js
@@ -1,25 +1,49 @@
-import * as types from '../../constants/actionTypes';
+import { createSlice } from '@reduxjs/toolkit';
 
 const initialState = {
   code: ``,
   input: ``
 };
 
-const codePreviewReducer = (state = initialState, action) => {
-  switch (action.type) {
-    case types.CODE_PREVIEW_SAVE:
-      return {
-        ...state,
-        code: action.payload
-      };
-    case types.CODE_PREVIEW_INPUT:
-      return {
-        ...state,
-        input: action.payload
-      };
-    default:
-      return state;
+const codePreviewSlice = createSlice({
+  name: 'codePreview',
+  initialState,
+  reducers: {
+    codePreviewSave: (state,action) => {
+      state.code = action.payload
+    },
+    codePreviewInput: (state, action) => {
+      state.input = action.payload
+    }
   }
-};
+})
+
+
+export const { codePreviewSave, codePreviewInput } = codePreviewSlice.actions;
+
+export default codePreviewSlice.reducer;
+// import * as types from '../../constants/actionTypes';
+
+// const initialState = {
+//   code: ``,
+//   input: ``
+// };
+
+// const codePreviewReducer = (state = initialState, action) => {
+//   switch (action.type) {
+//     case types.CODE_PREVIEW_SAVE:
+//       return {
+//         ...state,
+//         code: action.payload
+//       };
+//     case types.CODE_PREVIEW_INPUT:
+//       return {
+//         ...state,
+//         input: action.payload
+//       };
+//     default:
+//       return state;
+//   }
+// };
 
-export default codePreviewReducer;
+// export default codePreviewReducer;
diff --git a/app/src/redux/reducers/slice/contextReducer.js b/app/src/redux/reducers/slice/contextReducer.js
