Merge branch 'display' of https://github.com/oslabs-beta/ReacType into assignTab

Author: huypham048

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

@@ -1,50 +1,47 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useStore } from 'react-redux';
 import { Chart } from 'react-google-charts';
+import Grid from '@mui/material/Grid';
 
 const DisplayContainer = () => {
   const store = useStore();
+  const { allContext } = store.getState().contextSlice;
+  const [contextData, setContextData] = useState([]);
 
   useEffect(() => {
-    console.log(store.getState().contextSlice);
+    transformData(allContext);
   }, []);
 
+  const transformData = contexts => {
+    const formattedData = contexts
+      .map(el => {
+        return el.components.map(component => {
+          return [`App ${el.name} ${component}`];
+        });
+      })
+      .flat();
+    setContextData([['Phrases'], ...formattedData]);
+  };
 
-  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',
-    },
+      word: 'App'
+    }
   };
+  console.log(contextData);
   return (
-    <Chart
-    chartType='WordTree'
-    width='100%'
-    height='400px'
-    data={data}
-    options={options}
-  />
+    <Grid container display="flex" justifyContent="center">
+      <Grid item>
+      <Chart
+        chartType="WordTree"
+        width="100%"
+        height="500px"
+        data={contextData}
+        options={options}
+      />
+      </Grid>
+    </Grid>
   );
 };
-export default DisplayContainer;
+export default DisplayContainer;

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

@@ -8,15 +8,15 @@ const initialState = {
         { key: 'testKey1', value: 'testValue1' },
         { key: 'testKey2', value: 'testValue2' }
       ],
-      components: []
+      components: ['MainContainer', 'SubmitForm']
     },
     {
       name: 'MainContext3',
       values: [
         { key: 'testKey3', value: 'testValue3' },
         { key: 'testKey33', value: 'testValue33' }
       ],
-      components: []
+      components: ['MainContainer', 'EditForm', 'TableContainer']
     }
   ]
 };