display tree frameworks working. added google charts dependancy to package.json. Added redux functionality for assigning context

Co-authored-by: Sal Saluga [email protected]
Co-authored-by: Bianca Picasso [email protected]
Co-authored-by: Huy Pham [email protected]

Author: ken-Bains

app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx

@@ -1,14 +1,50 @@
-import { Typography } from '@material-ui/core';
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useStore } from 'react-redux';
+import { Chart } from 'react-google-charts';
 
 const DisplayContainer = () => {
-  return (
-    <Typography variant="h1" align="center">
-      Beautiful Tree
-    </Typography>
-  );
-};
+  const store = useStore();
 
+  useEffect(() => {
+    console.log(store.getState().contextSlice);
+  }, []);
 
 
-export default DisplayContainer;
+  const data = [
+    ['Phrases'],
+    ['cats are better than dogs'],
+    ['cats eat kibble'],
+    ['cats are better than hamsters'],
+    ['cats are awesome'],
+    ['cats are people too'],
+    ['cats eat mice'],
+    ['cats meowing'],
+    ['cats in the cradle'],
+    ['cats eat mice'],
+    ['cats in the cradle lyrics'],
+    ['cats eat kibble'],
+    ['cats for adoption'],
+    ['cats are family'],
+    ['cats eat mice'],
+    ['cats are better than kittens'],
+    ['cats are evil'],
+    ['cats are weird'],
+    ['cats eat mice'],
+  ];
+  const options = {
+    wordtree: {
+      format: 'implicit',
+      word: 'cats',
+    },
+  };
+  return (
+    <Chart
+    chartType='WordTree'
+    width='100%'
+    height='400px'
+    data={data}
+    options={options}
+  />
+  );
+};
+export default DisplayContainer;

app/src/redux/actions/actions.js

@@ -13,3 +13,8 @@ export const addContextValuesActionCreator = newEntry => ({
   type: types.ADD_CONTEXT_VALUES,
   payload: newEntry
 });
+
+export const addComponentToContext = newEntry => ({
+  type: types.ADD_COMPONENT_TO_CONTEXT,
+  payload: newEntry
+});

app/src/redux/constants/actionTypes.js

@@ -4,3 +4,4 @@ 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';

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

@@ -7,14 +7,16 @@ const initialState = {
       values: [
         { key: 'testKey1', value: 'testValue1' },
         { key: 'testKey2', value: 'testValue2' }
-      ]
+      ],
+      components: []
     },
     {
       name: 'MainContext3',
       values: [
         { key: 'testKey3', value: 'testValue3' },
         { key: 'testKey33', value: 'testValue33' }
-      ]
+      ],
+      components: []
     }
   ]
 };
@@ -24,7 +26,8 @@ const contextReducer = (state = initialState, action) => {
     case types.ADD_CONTEXT:
       const newContext = {
         name: action.payload.name.trim(),
-        values: []
+        values: [],
+        components: []
       };
 
       return {
@@ -50,6 +53,19 @@ const contextReducer = (state = initialState, action) => {
         ...state,
         allContext: newAllContext
       };
+    case types.ADD_COMPONENT_TO_CONTEXT: 
+      const newTempState = [...state.allContext];
+
+      for (let i = 0; i < newTempState.length; i += 1) {
+        if (newTempState[i].name === action.payload.context) {
+          newTempState[i].components.push(action.payload.component);
+        }
+      }
+
+      return {
+        ...state,
+        allContext: newTempState
+      };
     default: {
       return state;
     }

package.json

@@ -155,6 +155,7 @@
     "re-resizable": "^6.7.0",
     "react-dnd": "^11.1.3",
     "react-dnd-html5-backend": "^11.1.3",
+    "react-google-charts": "^4.0.0",
     "react-google-login": "^5.1.22",
     "react-router-dom": "^5.2.0",
     "redux-devtools-extension": "^2.13.9",