From d46036817d67409edbc57a91922462757959d5ec Mon Sep 17 00:00:00 2001 From: Bianca Picasso Date: Tue, 24 May 2022 12:33:47 -0700 Subject: [PATCH 01/27] context manager tab Co-authored-by: Huy Pham huypham048@gmail.com Co-authored-by: Sal Saluga SalSaluga@gmail.com Co-authored-by: Ken Bains nkbain10@gmail.com --- app/src/components/bottom/BottomTabs.tsx | 7 ++++ app/src/components/bottom/ContexManager.tsx | 19 ++++++++++ app/src/components/bottom/CreationPanel.tsx | 1 + .../components/right/ComponentDropDown.tsx | 37 +++++++++++++++++++ 4 files changed, 64 insertions(+) create mode 100644 app/src/components/bottom/ContexManager.tsx create mode 100644 app/src/components/right/ComponentDropDown.tsx diff --git a/app/src/components/bottom/BottomTabs.tsx b/app/src/components/bottom/BottomTabs.tsx index a392b3225..de6fdb9b5 100644 --- a/app/src/components/bottom/BottomTabs.tsx +++ b/app/src/components/bottom/BottomTabs.tsx @@ -7,6 +7,7 @@ import CodePreview from './CodePreview'; import StylesEditor from './StylesEditor'; import CustomizationPanel from '../../containers/CustomizationPanel' import CreationPanel from './CreationPanel' +import ContextManager from './ContexManager' import Box from '@material-ui/core/Box'; import Tree from '../../tree/TreeChart'; import FormControl from '@material-ui/core/FormControl'; @@ -78,6 +79,11 @@ const BottomTabs = (props): JSX.Element => { classes={{ root: classes.tabRoot, selected: classes.tabSelected }} label="Component Tree" /> +
@@ -101,6 +107,7 @@ const BottomTabs = (props): JSX.Element => { {tab === 2 && } {tab === 3 && } {tab === 4 && } + {tab === 5 && }
); }; diff --git a/app/src/components/bottom/ContexManager.tsx b/app/src/components/bottom/ContexManager.tsx new file mode 100644 index 000000000..687b57f5d --- /dev/null +++ b/app/src/components/bottom/ContexManager.tsx @@ -0,0 +1,19 @@ +import React, { useContext } from 'react'; +import ComponentPanel from '../right/ComponentPanel' +import ComponentDropDown from '../right/ComponentDropDown' +import HTMLPanel from '../left/HTMLPanel' +import { styleContext } from '../../containers/AppContainer'; + + +const ContextManager= (props): JSX.Element => { + const {style} = useContext(styleContext); + return ( +
+ {/* */} + {/* */} + +
+ ); +}; + +export default ContextManager; \ No newline at end of file diff --git a/app/src/components/bottom/CreationPanel.tsx b/app/src/components/bottom/CreationPanel.tsx index 6b5c55bd8..bd1547edb 100644 --- a/app/src/components/bottom/CreationPanel.tsx +++ b/app/src/components/bottom/CreationPanel.tsx @@ -10,6 +10,7 @@ const CreationPanel = (props): JSX.Element => { const {style} = useContext(styleContext); return (
+ diff --git a/app/src/components/right/ComponentDropDown.tsx b/app/src/components/right/ComponentDropDown.tsx new file mode 100644 index 000000000..9aafb4f1d --- /dev/null +++ b/app/src/components/right/ComponentDropDown.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import Select, { SelectChangeEvent } from '@mui/material/Select'; +import StateContext from '../../context/context'; + +export default function ComponentDropDown() { + const [age, setAge] = React.useState(''); + const [componentList, dispatch] = React.useContext(StateContext); + + console.log(componentList); + const handleChange = (event: SelectChangeEvent) => { + setAge(event.target.value as string); + }; + + return ( + + + Age + + + + ); +} + From 933d7d5d848aead1dfc18926799df13bff059c1c Mon Sep 17 00:00:00 2001 From: Bianca Picasso Date: Tue, 24 May 2022 20:12:11 -0700 Subject: [PATCH 02/27] component boxes Co-authored-by: Huy Pham huypham048@gmail.com Co-authored-by: Sal Saluga SalSaluga@gmail.com Co-authored-by: Ken Bains nkbain10@gmail.com --- app/src/components/bottom/BottomTabs.tsx | 2 +- app/src/components/bottom/ContexManager.tsx | 19 --------- app/src/components/bottom/ContextInput.tsx | 1 + app/src/components/bottom/ContextManager.tsx | 40 +++++++++++++++++++ ...ponentDropDown.tsx => ContextAssigner.tsx} | 16 ++++---- app/src/components/right/ContextMenu.tsx | 14 +++++++ app/src/components/right/ContextTree.tsx | 9 +++++ 7 files changed, 73 insertions(+), 28 deletions(-) delete mode 100644 app/src/components/bottom/ContexManager.tsx create mode 100644 app/src/components/bottom/ContextInput.tsx create mode 100644 app/src/components/bottom/ContextManager.tsx rename app/src/components/right/{ComponentDropDown.tsx => ContextAssigner.tsx} (73%) create mode 100644 app/src/components/right/ContextMenu.tsx create mode 100644 app/src/components/right/ContextTree.tsx diff --git a/app/src/components/bottom/BottomTabs.tsx b/app/src/components/bottom/BottomTabs.tsx index de6fdb9b5..c8d5a32ed 100644 --- a/app/src/components/bottom/BottomTabs.tsx +++ b/app/src/components/bottom/BottomTabs.tsx @@ -7,7 +7,7 @@ import CodePreview from './CodePreview'; import StylesEditor from './StylesEditor'; import CustomizationPanel from '../../containers/CustomizationPanel' import CreationPanel from './CreationPanel' -import ContextManager from './ContexManager' +import ContextManager from './ContextManager' import Box from '@material-ui/core/Box'; import Tree from '../../tree/TreeChart'; import FormControl from '@material-ui/core/FormControl'; diff --git a/app/src/components/bottom/ContexManager.tsx b/app/src/components/bottom/ContexManager.tsx deleted file mode 100644 index 687b57f5d..000000000 --- a/app/src/components/bottom/ContexManager.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React, { useContext } from 'react'; -import ComponentPanel from '../right/ComponentPanel' -import ComponentDropDown from '../right/ComponentDropDown' -import HTMLPanel from '../left/HTMLPanel' -import { styleContext } from '../../containers/AppContainer'; - - -const ContextManager= (props): JSX.Element => { - const {style} = useContext(styleContext); - return ( -
- {/* */} - {/* */} - -
- ); -}; - -export default ContextManager; \ No newline at end of file diff --git a/app/src/components/bottom/ContextInput.tsx b/app/src/components/bottom/ContextInput.tsx new file mode 100644 index 000000000..56cc485b1 --- /dev/null +++ b/app/src/components/bottom/ContextInput.tsx @@ -0,0 +1 @@ +import ContextAssigner from 'app/src/components/right/ContextAssigner.tsx'; \ No newline at end of file diff --git a/app/src/components/bottom/ContextManager.tsx b/app/src/components/bottom/ContextManager.tsx new file mode 100644 index 000000000..5993ff399 --- /dev/null +++ b/app/src/components/bottom/ContextManager.tsx @@ -0,0 +1,40 @@ +import React, { useContext } from 'react'; +import ComponentPanel from '../right/ComponentPanel'; +import ContextAssigner from '../right/ContextAssigner'; +import ContextMenu from '../right/ContextMenu'; +import ContextTree from '../right/ContextTree'; +import HTMLPanel from '../left/HTMLPanel'; +import { styleContext } from '../../containers/AppContainer'; +import CssBaseline from '@mui/material/CssBaseline'; +import Box from '@mui/material/Box'; +import Container from '@mui/material/Container'; +import { styled } from '@mui/material/styles'; + + + +const ContextManager= (props): JSX.Element => { + // const {style} = useContext(styleContext); + return ( + + {/* */} + + + + + + + + + + + + + + + + + + ); +}; + +export default ContextManager; \ No newline at end of file diff --git a/app/src/components/right/ComponentDropDown.tsx b/app/src/components/right/ContextAssigner.tsx similarity index 73% rename from app/src/components/right/ComponentDropDown.tsx rename to app/src/components/right/ContextAssigner.tsx index 9aafb4f1d..40869a263 100644 --- a/app/src/components/right/ComponentDropDown.tsx +++ b/app/src/components/right/ContextAssigner.tsx @@ -6,7 +6,7 @@ import FormControl from '@mui/material/FormControl'; import Select, { SelectChangeEvent } from '@mui/material/Select'; import StateContext from '../../context/context'; -export default function ComponentDropDown() { +export default function ContextAssigner() { const [age, setAge] = React.useState(''); const [componentList, dispatch] = React.useContext(StateContext); @@ -16,9 +16,10 @@ export default function ComponentDropDown() { }; return ( - + + - Age + Select Component ); -} - +} \ No newline at end of file diff --git a/app/src/components/right/ContextMenu.tsx b/app/src/components/right/ContextMenu.tsx new file mode 100644 index 000000000..8ff22d78c --- /dev/null +++ b/app/src/components/right/ContextMenu.tsx @@ -0,0 +1,14 @@ +/* imput component +input component +button component +*/ +import React from 'react'; + + +const ContextMenu = () => { + return ( +

This is from context menu

+ ) +} + +export default ContextMenu; \ No newline at end of file diff --git a/app/src/components/right/ContextTree.tsx b/app/src/components/right/ContextTree.tsx new file mode 100644 index 000000000..06b83a765 --- /dev/null +++ b/app/src/components/right/ContextTree.tsx @@ -0,0 +1,9 @@ +import React from 'react'; + +const ContextTree = () => { + return ( +

Our beautiful tree is here

+ ) +} + +export default ContextTree; \ No newline at end of file From d81e5776803221228284b3cf9b0c1dd331f62bf5 Mon Sep 17 00:00:00 2001 From: huypham048 Date: Wed, 25 May 2022 15:35:00 -0700 Subject: [PATCH 03/27] Co-authored-by: Sal Saluga SalSaluga@gmail.com Co-authored-by: Ken Bains nkbain10@gmail.com Co-authored-by: Bianca Picasso bianca.picasso@gmail.com --- .../ContextAPIManager/ContextAssigner.tsx | 8 ++ .../ContextAPIManager/ContextCreator.tsx | 8 ++ .../ContextAPIManager/ContextManager.tsx | 45 ++++++++ .../ContextAPIManager/ContextTab.tsx | 100 ++++++++++++++++++ .../ContextAPIManager/ContextTree.tsx | 12 +++ app/src/components/bottom/BottomTabs.tsx | 45 +++++--- app/src/components/bottom/ContextInput.tsx | 1 - app/src/components/bottom/ContextManager.tsx | 40 ------- app/src/components/right/ContextAssigner.tsx | 37 ------- app/src/components/right/ContextTree.tsx | 9 -- 10 files changed, 202 insertions(+), 103 deletions(-) create mode 100644 app/src/components/ContextAPIManager/ContextAssigner.tsx create mode 100644 app/src/components/ContextAPIManager/ContextCreator.tsx create mode 100644 app/src/components/ContextAPIManager/ContextManager.tsx create mode 100644 app/src/components/ContextAPIManager/ContextTab.tsx create mode 100644 app/src/components/ContextAPIManager/ContextTree.tsx delete mode 100644 app/src/components/bottom/ContextInput.tsx delete mode 100644 app/src/components/bottom/ContextManager.tsx delete mode 100644 app/src/components/right/ContextAssigner.tsx delete mode 100644 app/src/components/right/ContextTree.tsx diff --git a/app/src/components/ContextAPIManager/ContextAssigner.tsx b/app/src/components/ContextAPIManager/ContextAssigner.tsx new file mode 100644 index 000000000..095bba7bf --- /dev/null +++ b/app/src/components/ContextAPIManager/ContextAssigner.tsx @@ -0,0 +1,8 @@ +import { Typography } from '@material-ui/core'; +import React from 'react'; + +const ContextAssigner = () => { + return Context Assigner; +}; + +export default ContextAssigner; diff --git a/app/src/components/ContextAPIManager/ContextCreator.tsx b/app/src/components/ContextAPIManager/ContextCreator.tsx new file mode 100644 index 000000000..86fd8968d --- /dev/null +++ b/app/src/components/ContextAPIManager/ContextCreator.tsx @@ -0,0 +1,8 @@ +import { Typography } from '@material-ui/core'; +import React from 'react'; + +const ContextCreator = () => { + return Context Creator; +}; + +export default ContextCreator; diff --git a/app/src/components/ContextAPIManager/ContextManager.tsx b/app/src/components/ContextAPIManager/ContextManager.tsx new file mode 100644 index 000000000..92e8410f5 --- /dev/null +++ b/app/src/components/ContextAPIManager/ContextManager.tsx @@ -0,0 +1,45 @@ +import React, { useContext } from 'react'; +import ContextTab from './ContextTab'; +import ContextTree from './ContextTree'; +import { makeStyles } from '@material-ui/styles'; + +const useStyles = makeStyles({ + contextContainer: { + backgroundColor: 'white', + display: 'grid', + border: '1px solid red', + gridTemplateColumns: '25% 75%', + height: '100%' + }, + + leftContext: { + display: 'flex', + flexDirection: 'column', + border: '1px solid blue' + }, + + childContext: { + flex: '1', + border: '1px solid blue' + } +}); +const ContextManager = (props): JSX.Element => { + const classes = useStyles(); + + return ( + +
+
+
+ +
+
+
+ +
+
+ + ); +}; + +export default ContextManager; diff --git a/app/src/components/ContextAPIManager/ContextTab.tsx b/app/src/components/ContextAPIManager/ContextTab.tsx new file mode 100644 index 000000000..356dc2895 --- /dev/null +++ b/app/src/components/ContextAPIManager/ContextTab.tsx @@ -0,0 +1,100 @@ +// import * as React from 'react'; +// import Box from '@mui/material/Box'; +// import InputLabel from '@mui/material/InputLabel'; +// import MenuItem from '@mui/material/MenuItem'; +// import FormControl from '@mui/material/FormControl'; +// import Select, { SelectChangeEvent } from '@mui/material/Select'; +// import StateContext from '../../context/context'; + +// export default function ContextAssigner() { +// const [age, setAge] = React.useState(''); +// const [componentList, dispatch] = React.useContext(StateContext); + +// console.log(componentList); +// const handleChange = (event: SelectChangeEvent) => { +// setAge(event.target.value as string); +// }; + +// return ( + +// // +// // +// // Select Component +// // +// // +// // +// ); +// } + +// import * as React from 'react'; +// import ToggleButton from '@mui/material/ToggleButton'; +// import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; +// import ContextAssigner from './ContextAssigner'; +// import ContextCreator from './ContextCreator'; + +// export default function ColorToggleButton() { +// const [alignment, setAlignment] = React.useState('web'); + +// const handleChange = ( +// event: React.MouseEvent, +// newAlignment: string +// ) => { +// setAlignment(newAlignment); +// }; + +// return ( +// +// Create/Edit + +// Assign +// +// ); +// } + +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Tab from '@mui/material/Tab'; +import TabContext from '@mui/lab/TabContext'; +import TabList from '@mui/lab/TabList'; +import TabPanel from '@mui/lab/TabPanel'; + +export default function LabTabs() { + const [value, setValue] = React.useState('1'); + + const handleChange = (event: React.SyntheticEvent, newValue: string) => { + setValue(newValue); + }; + + return ( + + + + + + + + + + Item One + Item Two + Item Three + + + ); +} diff --git a/app/src/components/ContextAPIManager/ContextTree.tsx b/app/src/components/ContextAPIManager/ContextTree.tsx new file mode 100644 index 000000000..853511f99 --- /dev/null +++ b/app/src/components/ContextAPIManager/ContextTree.tsx @@ -0,0 +1,12 @@ +import { Typography } from '@material-ui/core'; +import React from 'react'; + +const ContextTree = () => { + return ( + + Beautiful Tree + + ); +}; + +export default ContextTree; diff --git a/app/src/components/bottom/BottomTabs.tsx b/app/src/components/bottom/BottomTabs.tsx index c8d5a32ed..005b3ee8c 100644 --- a/app/src/components/bottom/BottomTabs.tsx +++ b/app/src/components/bottom/BottomTabs.tsx @@ -5,9 +5,9 @@ import Tabs from '@material-ui/core/Tabs'; import Tab from '@material-ui/core/Tab'; import CodePreview from './CodePreview'; import StylesEditor from './StylesEditor'; -import CustomizationPanel from '../../containers/CustomizationPanel' -import CreationPanel from './CreationPanel' -import ContextManager from './ContextManager' +import CustomizationPanel from '../../containers/CustomizationPanel'; +import CreationPanel from './CreationPanel'; +import ContextManager from '../ContextAPIManager/ContextManager'; import Box from '@material-ui/core/Box'; import Tree from '../../tree/TreeChart'; import FormControl from '@material-ui/core/FormControl'; @@ -44,8 +44,17 @@ const BottomTabs = (props): JSX.Element => { Arrow.renderArrow(state.canvasFocus.childId); return ( -
- +
+ { label="Context Manager" /> -
- +
+
@@ -117,8 +132,7 @@ const useStyles = makeStyles(theme => ({ flexGrow: 1, height: '100%', color: '#E8E8E8', - boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)', - + boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)' }, rootLight: { backgroundColor: '#003366' @@ -133,7 +147,7 @@ const useStyles = makeStyles(theme => ({ minHeight: '50%' }, tabsIndicator: { - backgroundColor: 'white', + backgroundColor: 'white' }, tabRoot: { textTransform: 'initial', @@ -162,7 +176,7 @@ const useStyles = makeStyles(theme => ({ fontWeight: theme.typography.fontWeightMedium }, '&:focus': { - color: 'white', + color: 'white' } }, tabSelected: {}, @@ -175,7 +189,7 @@ const useStyles = makeStyles(theme => ({ switch: { marginRight: '10px', marginTop: '2px' - }, + }, projectTypeWrapper: { marginTop: '10px', marginBotton: '10px' @@ -187,4 +201,3 @@ const useStyles = makeStyles(theme => ({ })); export default BottomTabs; - diff --git a/app/src/components/bottom/ContextInput.tsx b/app/src/components/bottom/ContextInput.tsx deleted file mode 100644 index 56cc485b1..000000000 --- a/app/src/components/bottom/ContextInput.tsx +++ /dev/null @@ -1 +0,0 @@ -import ContextAssigner from 'app/src/components/right/ContextAssigner.tsx'; \ No newline at end of file diff --git a/app/src/components/bottom/ContextManager.tsx b/app/src/components/bottom/ContextManager.tsx deleted file mode 100644 index 5993ff399..000000000 --- a/app/src/components/bottom/ContextManager.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React, { useContext } from 'react'; -import ComponentPanel from '../right/ComponentPanel'; -import ContextAssigner from '../right/ContextAssigner'; -import ContextMenu from '../right/ContextMenu'; -import ContextTree from '../right/ContextTree'; -import HTMLPanel from '../left/HTMLPanel'; -import { styleContext } from '../../containers/AppContainer'; -import CssBaseline from '@mui/material/CssBaseline'; -import Box from '@mui/material/Box'; -import Container from '@mui/material/Container'; -import { styled } from '@mui/material/styles'; - - - -const ContextManager= (props): JSX.Element => { - // const {style} = useContext(styleContext); - return ( - - {/* */} - - - - - - - - - - - - - - - - - - ); -}; - -export default ContextManager; \ No newline at end of file diff --git a/app/src/components/right/ContextAssigner.tsx b/app/src/components/right/ContextAssigner.tsx deleted file mode 100644 index 40869a263..000000000 --- a/app/src/components/right/ContextAssigner.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import InputLabel from '@mui/material/InputLabel'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; -import StateContext from '../../context/context'; - -export default function ContextAssigner() { - const [age, setAge] = React.useState(''); - const [componentList, dispatch] = React.useContext(StateContext); - - console.log(componentList); - const handleChange = (event: SelectChangeEvent) => { - setAge(event.target.value as string); - }; - - return ( - - - - Select Component - - - - ); -} \ No newline at end of file diff --git a/app/src/components/right/ContextTree.tsx b/app/src/components/right/ContextTree.tsx deleted file mode 100644 index 06b83a765..000000000 --- a/app/src/components/right/ContextTree.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -const ContextTree = () => { - return ( -

Our beautiful tree is here

- ) -} - -export default ContextTree; \ No newline at end of file From 62211d02aac22a6ac2027ef5e472dab29afa9505 Mon Sep 17 00:00:00 2001 From: huypham048 Date: Thu, 26 May 2022 10:05:18 -0700 Subject: [PATCH 04/27] finished creating layout for 3 tabs Co-authored-by: Sal Saluga SalSaluga@gmail.com Co-authored-by: Ken Bains nkbain10@gmail.com Co-authored-by: Bianca Picasso bianca.picasso@gmail.com --- .../AssignerComponents/ComponentTable.tsx | 75 +++++++++++++++++++ .../AssignerComponents/ContextTable.tsx | 72 ++++++++++++++++++ .../ContextAPIManager/ContextAssigner.tsx | 3 +- .../ContextAPIManager/ContextManager.tsx | 34 ++++----- .../ContextAPIManager/ContextTab.tsx | 29 +++++-- package.json | 7 +- 6 files changed, 188 insertions(+), 32 deletions(-) create mode 100644 app/src/components/ContextAPIManager/AssignerComponents/ComponentTable.tsx create mode 100644 app/src/components/ContextAPIManager/AssignerComponents/ContextTable.tsx diff --git a/app/src/components/ContextAPIManager/AssignerComponents/ComponentTable.tsx b/app/src/components/ContextAPIManager/AssignerComponents/ComponentTable.tsx new file mode 100644 index 000000000..0dcc98d43 --- /dev/null +++ b/app/src/components/ContextAPIManager/AssignerComponents/ComponentTable.tsx @@ -0,0 +1,75 @@ +import * as React from 'react'; +import { styled } from '@mui/material/styles'; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableCell, { tableCellClasses } from '@mui/material/TableCell'; +import TableContainer from '@mui/material/TableContainer'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; +import Paper from '@mui/material/Paper'; + +const StyledTableCell = styled(TableCell)(({ theme }) => ({ + [`&.${tableCellClasses.head}`]: { + backgroundColor: theme.palette.common.black, + color: theme.palette.common.white + }, + [`&.${tableCellClasses.body}`]: { + fontSize: 14 + } +})); + +const StyledTableRow = styled(TableRow)(({ theme }) => ({ + '&:nth-of-type(odd)': { + backgroundColor: theme.palette.action.hover + }, + // hide last border + '&:last-child td, &:last-child th': { + border: 0 + } +})); + +function createData( + name: string, + calories: number, + fat: number, + carbs: number, + protein: number +) { + return { name, calories, fat, carbs, protein }; +} + +const rows = [ + createData('Frozen yoghurt', 159, 6.0, 24, 4.0), + createData('Ice cream sandwich', 237, 9.0, 37, 4.3), + createData('Eclair', 262, 16.0, 24, 6.0), + createData('Cupcake', 305, 3.7, 67, 4.3), + createData('Gingerbread', 356, 16.0, 49, 3.9) +]; + +export default function ContextTable() { + return ( + + + + + Component + Context + + + + {rows.map(row => ( + + + {row.name} + + {row.component} + {row.fat} + {row.carbs} + {row.protein} + + ))} + +
+ + ); +} diff --git a/app/src/components/ContextAPIManager/AssignerComponents/ContextTable.tsx b/app/src/components/ContextAPIManager/AssignerComponents/ContextTable.tsx new file mode 100644 index 000000000..3bf01c6b9 --- /dev/null +++ b/app/src/components/ContextAPIManager/AssignerComponents/ContextTable.tsx @@ -0,0 +1,72 @@ +import * as React from 'react'; +import { styled } from '@mui/material/styles'; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableCell, { tableCellClasses } from '@mui/material/TableCell'; +import TableContainer from '@mui/material/TableContainer'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; +import Paper from '@mui/material/Paper'; + +const StyledTableCell = styled(TableCell)(({ theme }) => ({ + [`&.${tableCellClasses.head}`]: { + backgroundColor: theme.palette.common.black, + color: theme.palette.common.white + }, + [`&.${tableCellClasses.body}`]: { + fontSize: 14 + } +})); + +const StyledTableRow = styled(TableRow)(({ theme }) => ({ + '&:nth-of-type(odd)': { + backgroundColor: theme.palette.action.hover + }, + // hide last border + '&:last-child td, &:last-child th': { + border: 0 + } +})); + +function createData( + name: string, + calories: number, + fat: number, + carbs: number, + protein: number +) { + return { name, calories, fat, carbs, protein }; +} + +const rows = [ + createData('Frozen yoghurt', 159, 6.0, 24, 4.0), + createData('Ice cream sandwich', 237, 9.0, 37, 4.3), + createData('Eclair', 262, 16.0, 24, 6.0), + createData('Cupcake', 305, 3.7, 67, 4.3), + createData('Gingerbread', 356, 16.0, 49, 3.9) +]; + +export default function ContextTable() { + return ( + + + + + Dessert (100g serving) + Calories + + + + {rows.map(row => ( + + + {row.name} + + {row.calories} + + ))} + +
+ + ); +} diff --git a/app/src/components/ContextAPIManager/ContextAssigner.tsx b/app/src/components/ContextAPIManager/ContextAssigner.tsx index 095bba7bf..7a6a2f698 100644 --- a/app/src/components/ContextAPIManager/ContextAssigner.tsx +++ b/app/src/components/ContextAPIManager/ContextAssigner.tsx @@ -1,8 +1,9 @@ import { Typography } from '@material-ui/core'; import React from 'react'; +import ContextTable from './AssignerComponents/ContextTable'; const ContextAssigner = () => { - return Context Assigner; + return ; }; export default ContextAssigner; diff --git a/app/src/components/ContextAPIManager/ContextManager.tsx b/app/src/components/ContextAPIManager/ContextManager.tsx index 92e8410f5..90f2dad64 100644 --- a/app/src/components/ContextAPIManager/ContextManager.tsx +++ b/app/src/components/ContextAPIManager/ContextManager.tsx @@ -6,22 +6,21 @@ import { makeStyles } from '@material-ui/styles'; const useStyles = makeStyles({ contextContainer: { backgroundColor: 'white', - display: 'grid', - border: '1px solid red', - gridTemplateColumns: '25% 75%', + // display: 'grid', + // gridTemplateColumns: '100%', height: '100%' - }, + } - leftContext: { - display: 'flex', - flexDirection: 'column', - border: '1px solid blue' - }, + // leftContext: { + // display: 'flex', + // // flexDirection: 'column', + // border: '1px solid blue' + // } - childContext: { - flex: '1', - border: '1px solid blue' - } + // childContext: { + // flex: '1', + // border: '1px solid blue' + // } }); const ContextManager = (props): JSX.Element => { const classes = useStyles(); @@ -29,14 +28,7 @@ const ContextManager = (props): JSX.Element => { return (
-
-
- -
-
-
- -
+
); diff --git a/app/src/components/ContextAPIManager/ContextTab.tsx b/app/src/components/ContextAPIManager/ContextTab.tsx index 356dc2895..73f41877e 100644 --- a/app/src/components/ContextAPIManager/ContextTab.tsx +++ b/app/src/components/ContextAPIManager/ContextTab.tsx @@ -73,6 +73,9 @@ import Tab from '@mui/material/Tab'; import TabContext from '@mui/lab/TabContext'; import TabList from '@mui/lab/TabList'; import TabPanel from '@mui/lab/TabPanel'; +import ContextCreator from './ContextCreator'; +import ContextAssigner from './ContextAssigner'; +import ContextTree from './ContextTree'; export default function LabTabs() { const [value, setValue] = React.useState('1'); @@ -85,15 +88,27 @@ export default function LabTabs() { - - - - + + + + - Item One - Item Two - Item Three + + + + + + + + + ); diff --git a/package.json b/package.json index 384a784cc..61fb64d71 100644 --- a/package.json +++ b/package.json @@ -117,6 +117,7 @@ "@apollo/client": "^3.3.11", "@babel/cli": "^7.10.4", "@babel/register": "^7.10.4", + "@mui/lab": "^5.0.0-alpha.83", "@types/js-cookie": "^2.2.6", "@types/node": "^14.0.20", "@types/prettier": "^1.19.0", @@ -171,11 +172,11 @@ "@babel/preset-env": "^7.16.0", "@babel/preset-react": "^7.16.0", "@babel/preset-typescript": "^7.16.0", - "@emotion/react": "^11.7.1", - "@emotion/styled": "^11.6.0", + "@emotion/react": "^11.9.0", + "@emotion/styled": "^11.8.1", "@material-ui/core": "^4.12.3", "@material-ui/icons": "^4.11.2", - "@mui/material": "^5.2.8", + "@mui/material": "^5.8.1", "@mui/styled-engine-sc": "^5.1.0", "@mui/x-data-grid": "^5.2.1", "@testing-library/jest-dom": "^5.11.5", From 600582e72a284816b4d4bd513a548971fbc2edec Mon Sep 17 00:00:00 2001 From: Bianca Picasso Date: Thu, 26 May 2022 17:33:18 -0700 Subject: [PATCH 05/27] connect to redux store Co-authored-by: Sal Saluga SalSaluga@gmail.com Co-authored-by: Ken Bains nkbain10@gmail.com Co-authored-by: Huy Pham huypham048@gmail.com --- .../AssignerComponents/ComponentTable.tsx | 2 +- .../ContextAssigner.tsx | 2 +- .../AssignerComponents/ContextTable.tsx | 8 +- .../ContextAPIManager/ContextCreator.tsx | 8 -- .../ContextAPIManager/ContextManager.tsx | 2 +- .../ContextAPIManager/ContextTab.tsx | 7 +- .../CreatorComponent/ContextCreator.tsx | 17 +++ .../CreatorComponent/ContextTable.tsx | 73 ++++++++++ .../CreatorComponent/CreatorForm.tsx | 129 ++++++++++++++++++ .../{ => Display}/ContextTree.tsx | 0 app/src/redux/actions/actions.js | 10 ++ app/src/redux/constants/actionTypes.js | 2 + app/src/redux/reducers/rootReducer.js | 4 +- .../redux/reducers/slice/contextReducer.js | 25 ++++ 14 files changed, 270 insertions(+), 19 deletions(-) rename app/src/components/ContextAPIManager/{ => AssignerComponents}/ContextAssigner.tsx (73%) delete mode 100644 app/src/components/ContextAPIManager/ContextCreator.tsx create mode 100644 app/src/components/ContextAPIManager/CreatorComponent/ContextCreator.tsx create mode 100644 app/src/components/ContextAPIManager/CreatorComponent/ContextTable.tsx create mode 100644 app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx rename app/src/components/ContextAPIManager/{ => Display}/ContextTree.tsx (100%) create mode 100644 app/src/redux/reducers/slice/contextReducer.js diff --git a/app/src/components/ContextAPIManager/AssignerComponents/ComponentTable.tsx b/app/src/components/ContextAPIManager/AssignerComponents/ComponentTable.tsx index 0dcc98d43..bb56264f3 100644 --- a/app/src/components/ContextAPIManager/AssignerComponents/ComponentTable.tsx +++ b/app/src/components/ContextAPIManager/AssignerComponents/ComponentTable.tsx @@ -62,7 +62,7 @@ export default function ContextTable() { {row.name} - {row.component} + {/* {row.component} */} {row.fat} {row.carbs} {row.protein} diff --git a/app/src/components/ContextAPIManager/ContextAssigner.tsx b/app/src/components/ContextAPIManager/AssignerComponents/ContextAssigner.tsx similarity index 73% rename from app/src/components/ContextAPIManager/ContextAssigner.tsx rename to app/src/components/ContextAPIManager/AssignerComponents/ContextAssigner.tsx index 7a6a2f698..21992cf47 100644 --- a/app/src/components/ContextAPIManager/ContextAssigner.tsx +++ b/app/src/components/ContextAPIManager/AssignerComponents/ContextAssigner.tsx @@ -1,6 +1,6 @@ import { Typography } from '@material-ui/core'; import React from 'react'; -import ContextTable from './AssignerComponents/ContextTable'; +import ContextTable from './ContextTable'; const ContextAssigner = () => { return ; diff --git a/app/src/components/ContextAPIManager/AssignerComponents/ContextTable.tsx b/app/src/components/ContextAPIManager/AssignerComponents/ContextTable.tsx index 3bf01c6b9..9c306de08 100644 --- a/app/src/components/ContextAPIManager/AssignerComponents/ContextTable.tsx +++ b/app/src/components/ContextAPIManager/AssignerComponents/ContextTable.tsx @@ -45,15 +45,15 @@ const rows = [ createData('Cupcake', 305, 3.7, 67, 4.3), createData('Gingerbread', 356, 16.0, 49, 3.9) ]; - +{/*
*/} export default function ContextTable() { return ( - +
- Dessert (100g serving) - Calories + Context + Component diff --git a/app/src/components/ContextAPIManager/ContextCreator.tsx b/app/src/components/ContextAPIManager/ContextCreator.tsx deleted file mode 100644 index 86fd8968d..000000000 --- a/app/src/components/ContextAPIManager/ContextCreator.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { Typography } from '@material-ui/core'; -import React from 'react'; - -const ContextCreator = () => { - return Context Creator; -}; - -export default ContextCreator; diff --git a/app/src/components/ContextAPIManager/ContextManager.tsx b/app/src/components/ContextAPIManager/ContextManager.tsx index 90f2dad64..b00b9bb8f 100644 --- a/app/src/components/ContextAPIManager/ContextManager.tsx +++ b/app/src/components/ContextAPIManager/ContextManager.tsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; import ContextTab from './ContextTab'; -import ContextTree from './ContextTree'; +import ContextTree from './Display/ContextTree'; import { makeStyles } from '@material-ui/styles'; const useStyles = makeStyles({ diff --git a/app/src/components/ContextAPIManager/ContextTab.tsx b/app/src/components/ContextAPIManager/ContextTab.tsx index 73f41877e..98c2b80d7 100644 --- a/app/src/components/ContextAPIManager/ContextTab.tsx +++ b/app/src/components/ContextAPIManager/ContextTab.tsx @@ -73,9 +73,10 @@ import Tab from '@mui/material/Tab'; import TabContext from '@mui/lab/TabContext'; import TabList from '@mui/lab/TabList'; import TabPanel from '@mui/lab/TabPanel'; -import ContextCreator from './ContextCreator'; -import ContextAssigner from './ContextAssigner'; -import ContextTree from './ContextTree'; + +import ContextCreator from './CreatorComponent/ContextCreator'; +import ContextAssigner from './AssignerComponents/ContextAssigner'; +import ContextTree from './Display/ContextTree'; export default function LabTabs() { const [value, setValue] = React.useState('1'); diff --git a/app/src/components/ContextAPIManager/CreatorComponent/ContextCreator.tsx b/app/src/components/ContextAPIManager/CreatorComponent/ContextCreator.tsx new file mode 100644 index 000000000..a3635b70a --- /dev/null +++ b/app/src/components/ContextAPIManager/CreatorComponent/ContextCreator.tsx @@ -0,0 +1,17 @@ +import { Typography } from '@material-ui/core'; +import React from 'react'; +import { useStore } from 'react-redux' + +import CreatorForm from './CreatorForm'; + +const ContextCreator = () => { + const store = useStore(); + console.log(store.getState()) + return ( + <> + + + ) +}; + +export default ContextCreator; diff --git a/app/src/components/ContextAPIManager/CreatorComponent/ContextTable.tsx b/app/src/components/ContextAPIManager/CreatorComponent/ContextTable.tsx new file mode 100644 index 000000000..9f77eb26a --- /dev/null +++ b/app/src/components/ContextAPIManager/CreatorComponent/ContextTable.tsx @@ -0,0 +1,73 @@ +import React from 'react'; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableContainer from '@mui/material/TableContainer'; +import TableHead from '@mui/material/TableHead'; +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'; + +const StyledTableCell = styled(TableCell)(({ theme }) => ({ + [`&.${tableCellClasses.head}`]: { + backgroundColor: theme.palette.common.black, + color: theme.palette.common.white + }, + [`&.${tableCellClasses.body}`]: { + fontSize: 14 + } +})); + +const StyledTableRow = styled(TableRow)(({ theme }) => ({ + '&:nth-of-type(odd)': { + backgroundColor: theme.palette.action.hover + }, + // hide last border + '&:last-child td, &:last-child th': { + border: 0 + } +})); + +function createData( + name: string, + calories: number, + fat: number, + carbs: number, + protein: number +) { + return { name, calories, fat, carbs, protein }; +} + +const rows = [ + createData('Frozen yoghurt', 159, 6.0, 24, 4.0), + createData('Ice cream sandwich', 237, 9.0, 37, 4.3), + createData('Eclair', 262, 16.0, 24, 6.0), + createData('Cupcake', 305, 3.7, 67, 4.3), + createData('Gingerbread', 356, 16.0, 49, 3.9) +]; +/*
*/ +// sx={{ width: '40%' }} +export default function ContextTable({target}) { + return ( + + + + + Context + Component + + + + {target.map((data, index) => ( + + + {data.key} + + {data.value} + + ))} + +
+ + ); +} \ No newline at end of file diff --git a/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx b/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx new file mode 100644 index 000000000..9bc3256fd --- /dev/null +++ b/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx @@ -0,0 +1,129 @@ +//context stored in an object +//it will have another object within to hold the key value pairs + +import React, { Fragment } from 'react'; +import TextField from '@mui/material/TextField'; +import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete'; +import Button from '@mui/material/Button'; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableContainer from '@mui/material/TableContainer'; +import TableHead from '@mui/material/TableHead'; +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 ContextTable from './ContextTable'; + + +const filter = createFilterOptions(); + +const contextArr = [ + { + name : 'theme', + values: [ + {key: 'dark', value: 'black'}, + {key: 'light', value: 'white'}, + {key: 'darker', value: 'darkest'} + ] + + }, + + { + name : 'mood', + values : [ + {key: 'happy', value: 'rainbow'}, + {key: 'sad', value: 'blue'}, + ] + } +] + +const StyledTableCell = styled(TableCell)(({ theme }) => ({ + [`&.${tableCellClasses.head}`]: { + backgroundColor: theme.palette.common.black, + color: theme.palette.common.white + }, + [`&.${tableCellClasses.body}`]: { + fontSize: 14 + } +})); + +const StyledTableRow = styled(TableRow)(({ theme }) => ({ + '&:nth-of-type(odd)': { + backgroundColor: theme.palette.action.hover + }, + // hide last border + '&:last-child td, &:last-child th': { + border: 0 + } +})); + +const CreatorForm = () => { + // const arr = [1,2,3,4] + const [value, setValue] = React.useState(null); + + return ( + + { + if (typeof newValue === 'string') { + setValue({ + name: newValue, + }); + } else if (newValue && newValue.inputValue) { + // Create a new value from the user input + setValue({ + name: newValue.inputValue, + }); + } else { + setValue(newValue); + } + }} + filterOptions={(options, params) => { + const filtered = filter(options, params); + + const { inputValue } = params; + // Suggest the creation of a new value + const isExisting = options.some((option) => inputValue === option.name); + if (inputValue !== '' && !isExisting) { + filtered.push({ + inputValue, + name: `Add "${inputValue}"`, + }); + } + + return filtered; + }} + selectOnFocus + clearOnBlur + handleHomeEndKeys + id="free-solo-with-text-demo" + options={contextArr} + getOptionLabel={(option) => { + // Value selected with enter, right from the input + if (typeof option === 'string') { + return option; + } + // Add "xxx" option created dynamically + if (option.inputValue) { + return option.inputValue; + } + // Regular option + return option.name; + }} + renderOption={(props, option) =>
  • {option.name}
    • } + sx={{ width: 300 }} + freeSolo + renderInput={(params) => ( + + )} + /> + +     + ); +} + +export default CreatorForm; + diff --git a/app/src/components/ContextAPIManager/ContextTree.tsx b/app/src/components/ContextAPIManager/Display/ContextTree.tsx similarity index 100% rename from app/src/components/ContextAPIManager/ContextTree.tsx rename to app/src/components/ContextAPIManager/Display/ContextTree.tsx diff --git a/app/src/redux/actions/actions.js b/app/src/redux/actions/actions.js index 5ecd38acf..d3ee7870c 100644 --- a/app/src/redux/actions/actions.js +++ b/app/src/redux/actions/actions.js @@ -3,3 +3,13 @@ import * as types from '../constants/actionTypes'; export const darkModeToggle = () => ({ type: types.DARK_MODE_TOGGLE }); + +export const addContextActionCreator = (contextName) => ({ + type: types.ADD_CONTEXT, + payload: contextName, +}) + +export const addContextValuesActionCreator = (newEntry) => ({ + type: types.ADD_CONTEXT_VALUES, + payload: newEntry +}) diff --git a/app/src/redux/constants/actionTypes.js b/app/src/redux/constants/actionTypes.js index fcfaba3f7..5b1a0a68a 100644 --- a/app/src/redux/constants/actionTypes.js +++ b/app/src/redux/constants/actionTypes.js @@ -2,3 +2,5 @@ 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'; diff --git a/app/src/redux/reducers/rootReducer.js b/app/src/redux/reducers/rootReducer.js index 275e9591a..dcb46eac9 100644 --- a/app/src/redux/reducers/rootReducer.js +++ b/app/src/redux/reducers/rootReducer.js @@ -2,11 +2,13 @@ import { combineReducers } from 'redux'; import darkModeReducer from './slice/darkModeSlice'; import codePreviewReducer from './slice/codePreviewSlice'; +import contextReducer from './slice/contextReducer'; const rootReducer = combineReducers({ darkModeSlice: darkModeReducer, - codePreviewSlice: codePreviewReducer + codePreviewSlice: codePreviewReducer, // add the rest of your slice imports here + contextSlice: contextReducer, }); export default rootReducer; diff --git a/app/src/redux/reducers/slice/contextReducer.js b/app/src/redux/reducers/slice/contextReducer.js new file mode 100644 index 000000000..342477652 --- /dev/null +++ b/app/src/redux/reducers/slice/contextReducer.js @@ -0,0 +1,25 @@ +import * as types from '../../constants/actionTypes'; + +const initialState = { + allContext: [] +} + +const contextReducer = (state = initialState, action) => { + switch (action.type) { + case types.ADD_CONTEXT: + const newContext = { + name: action.payload.trim(), + values: [], + } + + return { + ...state, + allContext: [...allContext, newContext] + } + default: { + return state; + } + } +} + +export default contextReducer; \ No newline at end of file From 904f87002f28dd5a5998724f4ca273ff9121d535 Mon Sep 17 00:00:00 2001 From: Bianca Picasso Date: Thu, 26 May 2022 19:58:56 -0700 Subject: [PATCH 06/27] add data to redux form Co-authored-by: Sal Saluga SalSaluga@gmail.com Co-authored-by: Ken Bains nkbain10@gmail.com Co-authored-by: Huy Pham huypham048@gmail.com --- .../CreatorComponent/ContextCreator.tsx | 10 ++- .../CreatorComponent/CreatorForm.tsx | 67 +++++++++++++------ .../redux/reducers/slice/contextReducer.js | 11 ++- 3 files changed, 64 insertions(+), 24 deletions(-) diff --git a/app/src/components/ContextAPIManager/CreatorComponent/ContextCreator.tsx b/app/src/components/ContextAPIManager/CreatorComponent/ContextCreator.tsx index a3635b70a..1ae695f41 100644 --- a/app/src/components/ContextAPIManager/CreatorComponent/ContextCreator.tsx +++ b/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 ( <> - + ) }; diff --git a/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx b/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx index 9bc3256fd..ddee2c2de 100644 --- a/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx +++ b/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 ( + { 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 = () => { )} /> - + + {/* */} + + + ); } diff --git a/app/src/redux/reducers/slice/contextReducer.js b/app/src/redux/reducers/slice/contextReducer.js index 342477652..bdb991eeb 100644 --- a/app/src/redux/reducers/slice/contextReducer.js +++ b/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) => { From 5d9edde8da812923070184017d22734629b57b5d Mon Sep 17 00:00:00 2001 From: huypham048 Date: Sat, 28 May 2022 10:07:39 -0700 Subject: [PATCH 07/27] added context to redux store Co-authored-by: Sal Saluga SalSaluga@gmail.com Co-authored-by: Ken Bains nkbain10@gmail.com Co-authored-by: Bianca Picasso bianca.picasso@gmail.com --- .../ContextAPIManager/ContextTab.tsx | 2 +- .../CreatorComponent/ContextCreator.tsx | 49 +++- .../CreatorComponent/CreatorForm.tsx | 255 ++++++++++-------- app/src/redux/actions/actions.js | 10 +- .../redux/reducers/slice/contextReducer.js | 37 ++- 5 files changed, 220 insertions(+), 133 deletions(-) diff --git a/app/src/components/ContextAPIManager/ContextTab.tsx b/app/src/components/ContextAPIManager/ContextTab.tsx index 98c2b80d7..94bf98142 100644 --- a/app/src/components/ContextAPIManager/ContextTab.tsx +++ b/app/src/components/ContextAPIManager/ContextTab.tsx @@ -79,7 +79,7 @@ import ContextAssigner from './AssignerComponents/ContextAssigner'; import ContextTree from './Display/ContextTree'; export default function LabTabs() { - const [value, setValue] = React.useState('1'); + const [value, setValue] = React.useState('1'); const handleChange = (event: React.SyntheticEvent, newValue: string) => { setValue(newValue); diff --git a/app/src/components/ContextAPIManager/CreatorComponent/ContextCreator.tsx b/app/src/components/ContextAPIManager/CreatorComponent/ContextCreator.tsx index 1ae695f41..ca0e3714c 100644 --- a/app/src/components/ContextAPIManager/CreatorComponent/ContextCreator.tsx +++ b/app/src/components/ContextAPIManager/CreatorComponent/ContextCreator.tsx @@ -1,21 +1,52 @@ import { Typography } from '@material-ui/core'; -import React, {useEffect, useState } from 'react'; -import { useStore } from 'react-redux' +import React, { useEffect, useState } from 'react'; +import { useStore } from 'react-redux'; +import { useDispatch } from 'react-redux'; -import CreatorForm from './CreatorForm'; +import CreatorForm from './CreatorForm'; +import * as actions from '../../../redux/actions/actions'; const ContextCreator = () => { const store = useStore(); - const [state, setState] = useState([]); - + const [state, setState] = useState(null); + const [isReady, setIsReady] = useState(false); + useEffect(() => { - setState(store.getState().contextSlice) - }, []) + setState(store.getState().contextSlice); + setIsReady(true); + }, []); + + const dispatch = useDispatch(); + + const handleClickSelectContext = contextInput => { + // console.log(document.getElementById('autoCompleteContextField')); + + dispatch(actions.addContextActionCreator(contextInput)); + setState(prevState => { + return { + ...prevState, + allContext: [...prevState.allContext, contextInput] + }; + }); + }; + + const handleClickInputData = ({ name }, { inputKey, inputValue }) => { + dispatch( + actions.addContextValuesActionCreator({ name, inputKey, inputValue }) + ); + }; + return ( <> - + {isReady && ( + + )} - ) + ); }; export default ContextCreator; diff --git a/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx b/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx index ddee2c2de..a34b0169c 100644 --- a/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx +++ b/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx @@ -2,7 +2,7 @@ //it will have another object within to hold the key contextInput pairs 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'; @@ -17,30 +17,29 @@ import TableCell, { tableCellClasses } from '@mui/material/TableCell'; import Box from '@mui/material/Box'; import ContextTable from './ContextTable'; - +import { Typography } from '@mui/material'; const filter = createFilterOptions(); -const contextArr = [ - { - name : 'theme', - contextInputs: [ - {key: 'dark', contextInput: 'black'}, - {key: 'light', contextInput: 'white'} - ] - - }, - - { - name : 'mood', - contextInputs : [ - {key: 'happy', contextInput: 'rainbow'}, - {key: 'sad', contextInput: 'blue'}, - ] - } -] - -//START - Table styling +// const contextArr = [ +// { +// name: 'theme', +// contextInputs: [ +// { key: 'dark', contextInput: 'black' }, +// { key: 'light', contextInput: 'white' } +// ] +// }, + +// { +// name: 'mood', +// contextInputs: [ +// { key: 'happy', contextInput: 'rainbow' }, +// { key: 'sad', contextInput: 'blue' } +// ] +// } +// ]; + +//START - Table styling const StyledTableCell = styled(TableCell)(({ theme }) => ({ [`&.${tableCellClasses.head}`]: { backgroundColor: theme.palette.common.black, @@ -62,95 +61,139 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({ })); //END - table styling - - -const CreatorForm = ({contextStore}) => { - // const [contextInput, setContextInput] = useState(''); - +const CreatorForm = ({ + contextStore, + handleClickSelectContext, + handleClickInputData +}) => { //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 { allContext } = contextStore; + const [contextInput, setContextInput] = React.useState(null); + const [dataContext, setDataContext] = React.useState({ + inputKey: '', + inputValue: '' + }); + + const handleChange = e => { + setDataContext(prevDataContext => { + return { + ...prevDataContext, + [e.target.name]: e.target.value + }; + }); + }; + + const handleClick = () => { + if (contextInput === '' || contextInput === null) return; + const temp = contextInput; + setContextInput(''); + handleClickSelectContext(temp); + }; return ( - - { - if (typeof newValue === 'string') { - setContextInput({ - name: newValue, - }); - } else if (newValue && newValue.inputValue) { - // Create a new contextInput from the user input - setContextInput({ - name: newValue.inputValue, - }); - } else { - setContextInput(newValue); - } - }} - filterOptions={(options, params) => { - const filtered = filter(options, params); - - const { inputValue } = params; - // Suggest the creation of a new contextInput - const isExisting = options.some((option) => inputValue === option.name); - if (inputValue !== '' && !isExisting) { - filtered.push({ - inputValue, - name: `Add "${inputValue}"`, - }); - } - - return filtered; - }} - selectOnFocus - clearOnBlur - handleHomeEndKeys - id="free-solo-with-text-demo" - options={allContext || []} - getOptionLabel={(option) => { - // Value selected with enter, right from the input - if (typeof option === 'string') { - return option; - } - // Add "xxx" option created dynamically - if (option.inputValue) { - return option.inputValue; - } - // Regular option - return option.name; - }} - renderOption={(props, option) =>
  • {option.name}
    • } - sx={{ width: 300 }} - freeSolo - renderInput={(params) => ( - - )} - /> - - {/* */} -     - - -     + {/* Input box for context */} + + Context Input + + + { + if (typeof newValue === 'string') { + setContextInput({ + name: newValue + }); + } else if (newValue && newValue.inputValue) { + // Create a new contextInput from the user input + setContextInput({ + name: newValue.inputValue + }); + } else { + setContextInput(newValue); + } + }} + filterOptions={(options, params) => { + const filtered = filter(options, params); + + const { inputValue } = params; + // Suggest the creation of a new contextInput + const isExisting = options.some( + option => inputValue === option.name + ); + if (inputValue !== '' && !isExisting) { + filtered.push({ + inputValue, + name: `Add "${inputValue}"` + }); + } + + return filtered; + }} + selectOnFocus + clearOnBlur + handleHomeEndKeys + id="free-solo-with-text-demo" + options={allContext || []} + getOptionLabel={option => { + // Value selected with enter, right from the input + if (typeof option === 'string') { + return option; + } + // Add "xxx" option created dynamically + if (option.inputValue) { + return option.inputValue; + } + // Regular option + return option.name; + }} + renderOption={(props, option) =>
  • {option.name}
    • } + sx={{ width: 300 }} + freeSolo + renderInput={params => ( + + )} + /> + + {/* */} +     + + {/* Input box for context data */} + + Add context data + + + handleChange(e)} + /> + handleChange(e)} + /> + + + + {/* */} + ); -} +}; export default CreatorForm; - diff --git a/app/src/redux/actions/actions.js b/app/src/redux/actions/actions.js index d3ee7870c..a4ed1a160 100644 --- a/app/src/redux/actions/actions.js +++ b/app/src/redux/actions/actions.js @@ -4,12 +4,12 @@ export const darkModeToggle = () => ({ type: types.DARK_MODE_TOGGLE }); -export const addContextActionCreator = (contextName) => ({ +export const addContextActionCreator = contextName => ({ type: types.ADD_CONTEXT, - payload: contextName, -}) + payload: contextName +}); -export const addContextValuesActionCreator = (newEntry) => ({ +export const addContextValuesActionCreator = newEntry => ({ type: types.ADD_CONTEXT_VALUES, payload: newEntry -}) +}); diff --git a/app/src/redux/reducers/slice/contextReducer.js b/app/src/redux/reducers/slice/contextReducer.js index bdb991eeb..6e27d50d5 100644 --- a/app/src/redux/reducers/slice/contextReducer.js +++ b/app/src/redux/reducers/slice/contextReducer.js @@ -3,32 +3,45 @@ import * as types from '../../constants/actionTypes'; const initialState = { allContext: [ { - name: "MainContext1", - values: [{key : "testKey1", value: 'testValue1'}, {key: "testKey2", value: "testValue2"}] + name: 'MainContext1', + values: [ + { key: 'testKey1', value: 'testValue1' }, + { key: 'testKey2', value: 'testValue2' } + ] }, { - name: "MainContext3", - values: [{key : "testKey3", value: 'testValue3'}, {key: "testKey33", value: "testValue33"}] + name: 'MainContext3', + values: [ + { key: 'testKey3', value: 'testValue3' }, + { key: 'testKey33', value: 'testValue33' } + ] } ] -} +}; const contextReducer = (state = initialState, action) => { switch (action.type) { case types.ADD_CONTEXT: const newContext = { - name: action.payload.trim(), - values: [], - } + name: action.payload.name.trim(), + values: [] + }; return { ...state, - allContext: [...allContext, newContext] - } + allContext: [...state.allContext, newContext] + }; + + case types.ADD_CONTEXT_VALUES: + console.log('payload is', action.payload); + + return { + ...state + }; default: { return state; } } -} +}; -export default contextReducer; \ No newline at end of file +export default contextReducer; From 1b0da98e4769d4af6d167451f2906e6847b9c059 Mon Sep 17 00:00:00 2001 From: Bianca Picasso Date: Sat, 28 May 2022 11:30:03 -0700 Subject: [PATCH 08/27] context dropdown and key pair Co-authored-by: Sal Saluga SalSaluga@gmail.com Co-authored-by: Ken Bains nkbain10@gmail.com Co-authored-by: Huy Pham huypham048@gmail.com --- .../CreatorComponent/ContextCreator.tsx | 2 ++ .../CreatorComponent/ContextTable.tsx | 3 +-- .../CreatorComponent/CreatorForm.tsx | 4 +++- app/src/redux/reducers/slice/contextReducer.js | 17 ++++++++++++++--- 4 files changed, 20 insertions(+), 6 deletions(-) diff --git a/app/src/components/ContextAPIManager/CreatorComponent/ContextCreator.tsx b/app/src/components/ContextAPIManager/CreatorComponent/ContextCreator.tsx index ca0e3714c..8f6e02b10 100644 --- a/app/src/components/ContextAPIManager/CreatorComponent/ContextCreator.tsx +++ b/app/src/components/ContextAPIManager/CreatorComponent/ContextCreator.tsx @@ -16,6 +16,7 @@ const ContextCreator = () => { setIsReady(true); }, []); + const dispatch = useDispatch(); const handleClickSelectContext = contextInput => { @@ -34,6 +35,7 @@ const ContextCreator = () => { dispatch( actions.addContextValuesActionCreator({ name, inputKey, inputValue }) ); + setState(store.getState().contextSlice); }; return ( diff --git a/app/src/components/ContextAPIManager/CreatorComponent/ContextTable.tsx b/app/src/components/ContextAPIManager/CreatorComponent/ContextTable.tsx index 9f77eb26a..981198bfe 100644 --- a/app/src/components/ContextAPIManager/CreatorComponent/ContextTable.tsx +++ b/app/src/components/ContextAPIManager/CreatorComponent/ContextTable.tsx @@ -45,8 +45,7 @@ const rows = [ createData('Cupcake', 305, 3.7, 67, 4.3), createData('Gingerbread', 356, 16.0, 49, 3.9) ]; -/*
    */ -// sx={{ width: '40%' }} + export default function ContextTable({target}) { return ( diff --git a/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx b/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx index a34b0169c..9e8118f7b 100644 --- a/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx +++ b/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx @@ -113,6 +113,7 @@ const CreatorForm = ({ }); } else { setContextInput(newValue); + console.log('selected from drop down', contextInput) } }} filterOptions={(options, params) => { @@ -121,7 +122,8 @@ const CreatorForm = ({ const { inputValue } = params; // Suggest the creation of a new contextInput const isExisting = options.some( - option => inputValue === option.name + option => inputValue === option.name + // console.log(inputValue) ); if (inputValue !== '' && !isExisting) { filtered.push({ diff --git a/app/src/redux/reducers/slice/contextReducer.js b/app/src/redux/reducers/slice/contextReducer.js index 6e27d50d5..7ab4f8550 100644 --- a/app/src/redux/reducers/slice/contextReducer.js +++ b/app/src/redux/reducers/slice/contextReducer.js @@ -31,12 +31,23 @@ const contextReducer = (state = initialState, action) => { ...state, allContext: [...state.allContext, newContext] }; - + case types.ADD_CONTEXT_VALUES: - console.log('payload is', action.payload); + // console.log('payload is', action.payload); + + const newAllContext = [...state.allContext]; + + for (let i = 0; i < newAllContext.length; i += 1) { + if (newAllContext[i].name === action.payload.name) { + newAllContext[i].values.push({ key : action.payload.inputKey , value : action.payload.inputValue}) + } + } return { - ...state + ...state, + allContext: newAllContext + + }; default: { return state; From dcfb38b8207cce695b7b70099047e133694eeab4 Mon Sep 17 00:00:00 2001 From: huypham048 Date: Sat, 28 May 2022 12:31:27 -0700 Subject: [PATCH 09/27] finished tab 1 Co-authored-by: Sal Saluga SalSaluga@gmail.com Co-authored-by: Ken Bains nkbain10@gmail.com Co-authored-by: Bianca Picasso bianca.picasso@gmail.com --- .../CreatorComponent/CreatorForm.tsx | 43 +++++++++---------- .../redux/reducers/slice/contextReducer.js | 11 ++--- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx b/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx index 9e8118f7b..96647c4fd 100644 --- a/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx +++ b/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx @@ -21,24 +21,6 @@ import { Typography } from '@mui/material'; const filter = createFilterOptions(); -// const contextArr = [ -// { -// name: 'theme', -// contextInputs: [ -// { key: 'dark', contextInput: 'black' }, -// { key: 'light', contextInput: 'white' } -// ] -// }, - -// { -// name: 'mood', -// contextInputs: [ -// { key: 'happy', contextInput: 'rainbow' }, -// { key: 'sad', contextInput: 'blue' } -// ] -// } -// ]; - //START - Table styling const StyledTableCell = styled(TableCell)(({ theme }) => ({ [`&.${tableCellClasses.head}`]: { @@ -69,12 +51,24 @@ const CreatorForm = ({ //array storing all contexts const { allContext } = contextStore; + //a state to keep track of data in table + const [tableState, setTableState] = React.useState([ + { + key: 'Enter key', + value: 'Enter value' + } + ]); + const [contextInput, setContextInput] = React.useState(null); const [dataContext, setDataContext] = React.useState({ inputKey: '', inputValue: '' }); + const renderTable = targetContext => { + setTableState(targetContext.values); + }; + const handleChange = e => { setDataContext(prevDataContext => { return { @@ -113,7 +107,7 @@ const CreatorForm = ({ }); } else { setContextInput(newValue); - console.log('selected from drop down', contextInput) + renderTable(newValue); } }} filterOptions={(options, params) => { @@ -122,8 +116,8 @@ const CreatorForm = ({ const { inputValue } = params; // Suggest the creation of a new contextInput const isExisting = options.some( - option => inputValue === option.name - // console.log(inputValue) + option => inputValue === option.name + // console.log(inputValue) ); if (inputValue !== '' && !isExisting) { filtered.push({ @@ -156,6 +150,11 @@ const CreatorForm = ({ freeSolo renderInput={params => ( + // console.log(params.inputProps.value)} + // /> )} /> - {/* */} + ); }; diff --git a/app/src/redux/reducers/slice/contextReducer.js b/app/src/redux/reducers/slice/contextReducer.js index 7ab4f8550..cecf5e6a8 100644 --- a/app/src/redux/reducers/slice/contextReducer.js +++ b/app/src/redux/reducers/slice/contextReducer.js @@ -31,7 +31,7 @@ const contextReducer = (state = initialState, action) => { ...state, allContext: [...state.allContext, newContext] }; - + case types.ADD_CONTEXT_VALUES: // console.log('payload is', action.payload); @@ -39,15 +39,16 @@ const contextReducer = (state = initialState, action) => { for (let i = 0; i < newAllContext.length; i += 1) { if (newAllContext[i].name === action.payload.name) { - newAllContext[i].values.push({ key : action.payload.inputKey , value : action.payload.inputValue}) - } + newAllContext[i].values.push({ + key: action.payload.inputKey, + value: action.payload.inputValue + }); + } } return { ...state, allContext: newAllContext - - }; default: { return state; From 32887bec45b72cf07f2166838d09e0c03b40e135 Mon Sep 17 00:00:00 2001 From: KB Date: Sat, 28 May 2022 13:14:58 -0700 Subject: [PATCH 10/27] code cleanup and refactoring --- .../CreatorComponent/CreatorForm.tsx | 114 +++++++++--------- app/src/components/login/FBPassWord.tsx | 2 +- app/src/components/login/SignUp.tsx | 2 +- app/src/components/right/ComponentDrag.tsx | 6 +- 4 files changed, 65 insertions(+), 59 deletions(-) diff --git a/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx b/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx index 96647c4fd..789a77803 100644 --- a/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx +++ b/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx @@ -21,7 +21,7 @@ import { Typography } from '@mui/material'; const filter = createFilterOptions(); -//START - Table styling +//START - Table styling ------------ const StyledTableCell = styled(TableCell)(({ theme }) => ({ [`&.${tableCellClasses.head}`]: { backgroundColor: theme.palette.common.black, @@ -41,7 +41,7 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({ border: 0 } })); -//END - table styling +//END - table styling -------------------------- const CreatorForm = ({ contextStore, @@ -69,6 +69,7 @@ const CreatorForm = ({ setTableState(targetContext.values); }; + // START - autocomplete functionality ---------------- const handleChange = e => { setDataContext(prevDataContext => { return { @@ -85,6 +86,59 @@ const CreatorForm = ({ handleClickSelectContext(temp); }; + const autoOnChange = (event, newValue) => { + if (typeof newValue === 'string') { + setContextInput({ + name: newValue + }); + } else if (newValue && newValue.inputValue) { + // Create a new contextInput from the user input + setContextInput({ + name: newValue.inputValue + }); + } else { + setContextInput(newValue); + renderTable(newValue); + } + }; + + const autoFitler = (options, params) => { + const filtered = filter(options, params); + + const { inputValue } = params; + // Suggest the creation of a new contextInput + const isExisting = options.some( + option => inputValue === option.name + // console.log(inputValue) + ); + if (inputValue !== '' && !isExisting) { + filtered.push({ + inputValue, + name: `Add "${inputValue}"` + }); + } + + return filtered; + }; + + const autoGetOptions = option => { + // Value selected with enter, right from the input + if (typeof option === 'string') { + return option; + } + // Add "xxx" option created dynamically + if (option.inputValue) { + return option.inputValue; + } + // Regular option + return option.name; + }; + + const autoRenderOptions = (props, option) => ( +
  • {option.name}
    • + ); + // END - autocomplete -------------------------- + return ( {/* Input box for context */} @@ -95,66 +149,18 @@ const CreatorForm = ({ { - if (typeof newValue === 'string') { - setContextInput({ - name: newValue - }); - } else if (newValue && newValue.inputValue) { - // Create a new contextInput from the user input - setContextInput({ - name: newValue.inputValue - }); - } else { - setContextInput(newValue); - renderTable(newValue); - } - }} - filterOptions={(options, params) => { - const filtered = filter(options, params); - - const { inputValue } = params; - // Suggest the creation of a new contextInput - const isExisting = options.some( - option => inputValue === option.name - // console.log(inputValue) - ); - if (inputValue !== '' && !isExisting) { - filtered.push({ - inputValue, - name: `Add "${inputValue}"` - }); - } - - return filtered; - }} + onChange={autoOnChange} + filterOptions={autoFitler} selectOnFocus clearOnBlur handleHomeEndKeys - id="free-solo-with-text-demo" options={allContext || []} - getOptionLabel={option => { - // Value selected with enter, right from the input - if (typeof option === 'string') { - return option; - } - // Add "xxx" option created dynamically - if (option.inputValue) { - return option.inputValue; - } - // Regular option - return option.name; - }} - renderOption={(props, option) =>
  • {option.name}
    • } + getOptionLabel={autoGetOptions} + renderOption={autoRenderOptions} sx={{ width: 300 }} freeSolo renderInput={params => ( - // console.log(params.inputProps.value)} - // /> )} /> + - + Already have an account? Sign In diff --git a/app/src/components/login/SignUp.tsx b/app/src/components/login/SignUp.tsx index f0de334aa..ef657e855 100644 --- a/app/src/components/login/SignUp.tsx +++ b/app/src/components/login/SignUp.tsx @@ -310,7 +310,7 @@ const SignUp: React.FC = props => { > Sign Up - + Already have an account? Sign In diff --git a/app/src/components/right/ComponentDrag.tsx b/app/src/components/right/ComponentDrag.tsx index 5326d4503..f87ddc105 100644 --- a/app/src/components/right/ComponentDrag.tsx +++ b/app/src/components/right/ComponentDrag.tsx @@ -19,7 +19,7 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
    {/* Heading just below ADD button */}

    {state.projectType === 'Next.js' || state.projectType === 'Gatsby.js' ? 'Pages' : 'Root Components'}

    - + {state.components .filter(comp => state.rootComponents.includes(comp.id)) .map(comp => { @@ -38,7 +38,7 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => { {/* Display all reusable components */}

    Reusable Components

    - + {state.components .filter(comp => !state.rootComponents.includes(comp.id)) .map(comp => { @@ -61,7 +61,7 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => { From 9c854519c3e65a59eac5956a1bba7cc27ea15d0b Mon Sep 17 00:00:00 2001 From: Bianca Picasso Date: Sat, 28 May 2022 16:24:35 -0700 Subject: [PATCH 11/27] polished context creator Co-authored-by: Huy Pham huypham048@gmail.com dquote> Co-authored-by: Sal Saluga SalSaluga@gmail.com Co-authored-by: Ken Bains nkbain10@gmail.com --- .../CreatorComponent/ContextCreator.tsx | 7 +- .../CreatorComponent/ContextTable.tsx | 24 +------ .../CreatorComponent/CreatorForm.tsx | 66 ++++++++----------- .../ContextAPIManager/Display/ContextTree.tsx | 2 + 4 files changed, 32 insertions(+), 67 deletions(-) diff --git a/app/src/components/ContextAPIManager/CreatorComponent/ContextCreator.tsx b/app/src/components/ContextAPIManager/CreatorComponent/ContextCreator.tsx index 8f6e02b10..d86008a23 100644 --- a/app/src/components/ContextAPIManager/CreatorComponent/ContextCreator.tsx +++ b/app/src/components/ContextAPIManager/CreatorComponent/ContextCreator.tsx @@ -23,12 +23,7 @@ const ContextCreator = () => { // console.log(document.getElementById('autoCompleteContextField')); dispatch(actions.addContextActionCreator(contextInput)); - setState(prevState => { - return { - ...prevState, - allContext: [...prevState.allContext, contextInput] - }; - }); + setState(store.getState().contextSlice); }; const handleClickInputData = ({ name }, { inputKey, inputValue }) => { diff --git a/app/src/components/ContextAPIManager/CreatorComponent/ContextTable.tsx b/app/src/components/ContextAPIManager/CreatorComponent/ContextTable.tsx index 981198bfe..b776ee636 100644 --- a/app/src/components/ContextAPIManager/CreatorComponent/ContextTable.tsx +++ b/app/src/components/ContextAPIManager/CreatorComponent/ContextTable.tsx @@ -28,32 +28,14 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({ } })); -function createData( - name: string, - calories: number, - fat: number, - carbs: number, - protein: number -) { - return { name, calories, fat, carbs, protein }; -} - -const rows = [ - createData('Frozen yoghurt', 159, 6.0, 24, 4.0), - createData('Ice cream sandwich', 237, 9.0, 37, 4.3), - createData('Eclair', 262, 16.0, 24, 6.0), - createData('Cupcake', 305, 3.7, 67, 4.3), - createData('Gingerbread', 356, 16.0, 49, 3.9) -]; - export default function ContextTable({target}) { return ( - +
    - Context - Component + Key + Value diff --git a/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx b/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx index 789a77803..a8e4052ca 100644 --- a/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx +++ b/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx @@ -1,47 +1,15 @@ -//context stored in an object -//it will have another object within to hold the key contextInput pairs - import React, { Fragment, useState, useEffect } from 'react'; - import TextField from '@mui/material/TextField'; import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete'; import Button from '@mui/material/Button'; -import Table from '@mui/material/Table'; -import TableBody from '@mui/material/TableBody'; -import TableContainer from '@mui/material/TableContainer'; -import TableHead from '@mui/material/TableHead'; -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 Grid from '@mui/material/Grid'; import ContextTable from './ContextTable'; import { Typography } from '@mui/material'; +import Divider from '@mui/material/Divider'; -const filter = createFilterOptions(); -//START - Table styling ------------ -const StyledTableCell = styled(TableCell)(({ theme }) => ({ - [`&.${tableCellClasses.head}`]: { - backgroundColor: theme.palette.common.black, - color: theme.palette.common.white - }, - [`&.${tableCellClasses.body}`]: { - fontSize: 14 - } -})); - -const StyledTableRow = styled(TableRow)(({ theme }) => ({ - '&:nth-of-type(odd)': { - backgroundColor: theme.palette.action.hover - }, - // hide last border - '&:last-child td, &:last-child th': { - border: 0 - } -})); -//END - table styling -------------------------- +const filter = createFilterOptions(); const CreatorForm = ({ contextStore, @@ -54,11 +22,12 @@ const CreatorForm = ({ //a state to keep track of data in table const [tableState, setTableState] = React.useState([ { - key: 'Enter key', + key: 'Enter Key', value: 'Enter value' } ]); + const [contextInput, setContextInput] = React.useState(null); const [dataContext, setDataContext] = React.useState({ inputKey: '', @@ -66,7 +35,16 @@ const CreatorForm = ({ }); const renderTable = targetContext => { - setTableState(targetContext.values); + if (!targetContext.values) { + setTableState([ + { + key: 'Enter Key', + value: 'Enter value' + } + ]) + } else { + setTableState(targetContext.values); + } }; // START - autocomplete functionality ---------------- @@ -141,8 +119,10 @@ const CreatorForm = ({ return ( + + {/* Input box for context */} - + Context Input @@ -157,7 +137,7 @@ const CreatorForm = ({ options={allContext || []} getOptionLabel={autoGetOptions} renderOption={autoRenderOptions} - sx={{ width: 300 }} + sx={{ width: 425 }} freeSolo renderInput={params => ( @@ -169,6 +149,8 @@ const CreatorForm = ({ {/* */} + + {/* Input box for context data */} Add context data @@ -197,8 +179,12 @@ const CreatorForm = ({ Save + - + + + + ); }; diff --git a/app/src/components/ContextAPIManager/Display/ContextTree.tsx b/app/src/components/ContextAPIManager/Display/ContextTree.tsx index 853511f99..b85d4aae6 100644 --- a/app/src/components/ContextAPIManager/Display/ContextTree.tsx +++ b/app/src/components/ContextAPIManager/Display/ContextTree.tsx @@ -9,4 +9,6 @@ const ContextTree = () => { ); }; + + export default ContextTree; From fc1eb42d4e71ddd83d12f3adfce586e7eb2fde35 Mon Sep 17 00:00:00 2001 From: KB Date: Sun, 29 May 2022 09:58:10 -0700 Subject: [PATCH 12/27] refactoring code for contextApi. moved and renamed all files. deleted and merged obsolete components. functionality working same as before refactor. --- .../AssignContainer.tsx} | 2 +- .../components}/ComponentTable.tsx | 0 .../components}/ContextTable.tsx | 0 .../ContextAPIManager/ContextManager.tsx | 57 ++++++--- .../ContextAPIManager/ContextTab.tsx | 116 ------------------ .../CreateTab/CreateContainer.tsx | 71 +++++++++++ .../components/AddContextForm.tsx} | 96 ++------------- .../CreateTab/components/AddDataForm.tsx | 56 +++++++++ .../components/DataTable.tsx} | 0 .../CreatorComponent/ContextCreator.tsx | 49 -------- .../DisplayContainer.tsx} | 0 11 files changed, 176 insertions(+), 271 deletions(-) rename app/src/components/ContextAPIManager/{AssignerComponents/ContextAssigner.tsx => AssignTab/AssignContainer.tsx} (76%) rename app/src/components/ContextAPIManager/{AssignerComponents => AssignTab/components}/ComponentTable.tsx (100%) rename app/src/components/ContextAPIManager/{AssignerComponents => AssignTab/components}/ContextTable.tsx (100%) delete mode 100644 app/src/components/ContextAPIManager/ContextTab.tsx create mode 100644 app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx rename app/src/components/ContextAPIManager/{CreatorComponent/CreatorForm.tsx => CreateTab/components/AddContextForm.tsx} (55%) create mode 100644 app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx rename app/src/components/ContextAPIManager/{CreatorComponent/ContextTable.tsx => CreateTab/components/DataTable.tsx} (100%) delete mode 100644 app/src/components/ContextAPIManager/CreatorComponent/ContextCreator.tsx rename app/src/components/ContextAPIManager/{Display/ContextTree.tsx => DisplayTab/DisplayContainer.tsx} (100%) diff --git a/app/src/components/ContextAPIManager/AssignerComponents/ContextAssigner.tsx b/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx similarity index 76% rename from app/src/components/ContextAPIManager/AssignerComponents/ContextAssigner.tsx rename to app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx index 21992cf47..66680a134 100644 --- a/app/src/components/ContextAPIManager/AssignerComponents/ContextAssigner.tsx +++ b/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx @@ -1,6 +1,6 @@ import { Typography } from '@material-ui/core'; import React from 'react'; -import ContextTable from './ContextTable'; +import ContextTable from './components/ContextTable'; const ContextAssigner = () => { return ; diff --git a/app/src/components/ContextAPIManager/AssignerComponents/ComponentTable.tsx b/app/src/components/ContextAPIManager/AssignTab/components/ComponentTable.tsx similarity index 100% rename from app/src/components/ContextAPIManager/AssignerComponents/ComponentTable.tsx rename to app/src/components/ContextAPIManager/AssignTab/components/ComponentTable.tsx diff --git a/app/src/components/ContextAPIManager/AssignerComponents/ContextTable.tsx b/app/src/components/ContextAPIManager/AssignTab/components/ContextTable.tsx similarity index 100% rename from app/src/components/ContextAPIManager/AssignerComponents/ContextTable.tsx rename to app/src/components/ContextAPIManager/AssignTab/components/ContextTable.tsx diff --git a/app/src/components/ContextAPIManager/ContextManager.tsx b/app/src/components/ContextAPIManager/ContextManager.tsx index b00b9bb8f..f330818ef 100644 --- a/app/src/components/ContextAPIManager/ContextManager.tsx +++ b/app/src/components/ContextAPIManager/ContextManager.tsx @@ -1,34 +1,59 @@ import React, { useContext } from 'react'; -import ContextTab from './ContextTab'; -import ContextTree from './Display/ContextTree'; import { makeStyles } from '@material-ui/styles'; +import Box from '@mui/material/Box'; +import Tab from '@mui/material/Tab'; +import TabContext from '@mui/lab/TabContext'; +import TabList from '@mui/lab/TabList'; +import TabPanel from '@mui/lab/TabPanel'; + +import CreateContainer from './CreateTab/CreateContainer'; +import AssignContainer from './AssignTab/AssignContainer'; +import DisplayContainer from './DisplayTab/DisplayContainer'; const useStyles = makeStyles({ contextContainer: { backgroundColor: 'white', - // display: 'grid', - // gridTemplateColumns: '100%', height: '100%' } - - // leftContext: { - // display: 'flex', - // // flexDirection: 'column', - // border: '1px solid blue' - // } - - // childContext: { - // flex: '1', - // border: '1px solid blue' - // } }); + const ContextManager = (props): JSX.Element => { const classes = useStyles(); + const [value, setValue] = React.useState('1'); + + const handleChange = (event: React.SyntheticEvent, newValue: string) => { + setValue(newValue); + }; return (
    - + + + + + + + + + + + + + + + + + + + +
    ); diff --git a/app/src/components/ContextAPIManager/ContextTab.tsx b/app/src/components/ContextAPIManager/ContextTab.tsx deleted file mode 100644 index 94bf98142..000000000 --- a/app/src/components/ContextAPIManager/ContextTab.tsx +++ /dev/null @@ -1,116 +0,0 @@ -// import * as React from 'react'; -// import Box from '@mui/material/Box'; -// import InputLabel from '@mui/material/InputLabel'; -// import MenuItem from '@mui/material/MenuItem'; -// import FormControl from '@mui/material/FormControl'; -// import Select, { SelectChangeEvent } from '@mui/material/Select'; -// import StateContext from '../../context/context'; - -// export default function ContextAssigner() { -// const [age, setAge] = React.useState(''); -// const [componentList, dispatch] = React.useContext(StateContext); - -// console.log(componentList); -// const handleChange = (event: SelectChangeEvent) => { -// setAge(event.target.value as string); -// }; - -// return ( - -// // -// // -// // Select Component -// // -// // -// // -// ); -// } - -// import * as React from 'react'; -// import ToggleButton from '@mui/material/ToggleButton'; -// import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -// import ContextAssigner from './ContextAssigner'; -// import ContextCreator from './ContextCreator'; - -// export default function ColorToggleButton() { -// const [alignment, setAlignment] = React.useState('web'); - -// const handleChange = ( -// event: React.MouseEvent, -// newAlignment: string -// ) => { -// setAlignment(newAlignment); -// }; - -// return ( -// -// Create/Edit - -// Assign -// -// ); -// } - -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Tab from '@mui/material/Tab'; -import TabContext from '@mui/lab/TabContext'; -import TabList from '@mui/lab/TabList'; -import TabPanel from '@mui/lab/TabPanel'; - -import ContextCreator from './CreatorComponent/ContextCreator'; -import ContextAssigner from './AssignerComponents/ContextAssigner'; -import ContextTree from './Display/ContextTree'; - -export default function LabTabs() { - const [value, setValue] = React.useState('1'); - - const handleChange = (event: React.SyntheticEvent, newValue: string) => { - setValue(newValue); - }; - - return ( - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx b/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx new file mode 100644 index 000000000..14a757609 --- /dev/null +++ b/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx @@ -0,0 +1,71 @@ +import React, { useEffect, useState } 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'; + +const ContextContainer = () => { + const defaultTableData = [{key: 'Enter Key', value: 'Enter value'}] + const store = useStore(); + const [state, setState] = useState([]); + const [tableState, setTableState] = React.useState(defaultTableData); + const [contextInput, setContextInput] = React.useState(null); + + useEffect(() => { + setState(store.getState().contextSlice); + }, []); + + const dispatch = useDispatch(); + + const handleClickSelectContext = contextInput => { + dispatch(actions.addContextActionCreator(contextInput)); + setState(store.getState().contextSlice); + }; + + const handleClickInputData = ({ name }, { inputKey, inputValue }) => { + dispatch(actions.addContextValuesActionCreator({ name, inputKey, inputValue })); + setState(store.getState().contextSlice); + }; + + const renderTable = targetContext => { + if (!targetContext.values[0]) { + setTableState(defaultTableData); + } else { + setTableState(targetContext.values); + } + }; + return ( + <> + + + + + + + + + + + + + ); +}; + +export default ContextContainer; diff --git a/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx b/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx similarity index 55% rename from app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx rename to app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx index a8e4052ca..517f3226d 100644 --- a/app/src/components/ContextAPIManager/CreatorComponent/CreatorForm.tsx +++ b/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx @@ -3,60 +3,19 @@ import TextField from '@mui/material/TextField'; import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete'; import Button from '@mui/material/Button'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid'; -import ContextTable from './ContextTable'; import { Typography } from '@mui/material'; -import Divider from '@mui/material/Divider'; - const filter = createFilterOptions(); -const CreatorForm = ({ +const AddContextForm = ({ contextStore, handleClickSelectContext, - handleClickInputData + renderTable, + contextInput, + setContextInput }) => { - //array storing all contexts const { allContext } = contextStore; - - //a state to keep track of data in table - const [tableState, setTableState] = React.useState([ - { - key: 'Enter Key', - value: 'Enter value' - } - ]); - - - const [contextInput, setContextInput] = React.useState(null); - const [dataContext, setDataContext] = React.useState({ - inputKey: '', - inputValue: '' - }); - - const renderTable = targetContext => { - if (!targetContext.values) { - setTableState([ - { - key: 'Enter Key', - value: 'Enter value' - } - ]) - } else { - setTableState(targetContext.values); - } - }; - - // START - autocomplete functionality ---------------- - const handleChange = e => { - setDataContext(prevDataContext => { - return { - ...prevDataContext, - [e.target.name]: e.target.value - }; - }); - }; - + const handleClick = () => { if (contextInput === '' || contextInput === null) return; const temp = contextInput; @@ -115,14 +74,10 @@ const CreatorForm = ({ const autoRenderOptions = (props, option) => (
  • {option.name}
    • ); - // END - autocomplete -------------------------- return ( - - - {/* Input box for context */} - + Context Input @@ -148,45 +103,8 @@ const CreatorForm = ({ {/* */} - - - - {/* Input box for context data */} - - Add context data - - - handleChange(e)} - /> - handleChange(e)} - /> - - - - - - - - ); }; -export default CreatorForm; +export default AddContextForm; diff --git a/app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx b/app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx new file mode 100644 index 000000000..40b4680d4 --- /dev/null +++ b/app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx @@ -0,0 +1,56 @@ +import React, { Fragment, useState, useEffect } from 'react'; +import TextField from '@mui/material/TextField'; +import Button from '@mui/material/Button'; +import Box from '@mui/material/Box'; +import { Typography } from '@mui/material'; + +const AddDataForm = ({ handleClickInputData, contextInput }) => { + //const [contextInput, setContextInput] = React.useState(null); + const [dataContext, setDataContext] = React.useState({ + inputKey: '', + inputValue: '' + }); + + const handleChange = e => { + setDataContext(prevDataContext => { + return { + ...prevDataContext, + [e.target.name]: e.target.value + }; + }); + }; + + return ( + + + Add context data + + + handleChange(e)} + /> + handleChange(e)} + /> + + + + ); +}; + +export default AddDataForm; diff --git a/app/src/components/ContextAPIManager/CreatorComponent/ContextTable.tsx b/app/src/components/ContextAPIManager/CreateTab/components/DataTable.tsx similarity index 100% rename from app/src/components/ContextAPIManager/CreatorComponent/ContextTable.tsx rename to app/src/components/ContextAPIManager/CreateTab/components/DataTable.tsx diff --git a/app/src/components/ContextAPIManager/CreatorComponent/ContextCreator.tsx b/app/src/components/ContextAPIManager/CreatorComponent/ContextCreator.tsx deleted file mode 100644 index d86008a23..000000000 --- a/app/src/components/ContextAPIManager/CreatorComponent/ContextCreator.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { Typography } from '@material-ui/core'; -import React, { useEffect, useState } from 'react'; -import { useStore } from 'react-redux'; -import { useDispatch } from 'react-redux'; - -import CreatorForm from './CreatorForm'; -import * as actions from '../../../redux/actions/actions'; - -const ContextCreator = () => { - const store = useStore(); - const [state, setState] = useState(null); - const [isReady, setIsReady] = useState(false); - - useEffect(() => { - setState(store.getState().contextSlice); - setIsReady(true); - }, []); - - - const dispatch = useDispatch(); - - const handleClickSelectContext = contextInput => { - // console.log(document.getElementById('autoCompleteContextField')); - - dispatch(actions.addContextActionCreator(contextInput)); - setState(store.getState().contextSlice); - }; - - const handleClickInputData = ({ name }, { inputKey, inputValue }) => { - dispatch( - actions.addContextValuesActionCreator({ name, inputKey, inputValue }) - ); - setState(store.getState().contextSlice); - }; - - return ( - <> - {isReady && ( - - )} - - ); -}; - -export default ContextCreator; diff --git a/app/src/components/ContextAPIManager/Display/ContextTree.tsx b/app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx similarity index 100% rename from app/src/components/ContextAPIManager/Display/ContextTree.tsx rename to app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx From 380fdc8eaf3ca1edcfd5b7b7f9789e8394dc1f43 Mon Sep 17 00:00:00 2001 From: KB Date: Mon, 30 May 2022 10:32:43 -0700 Subject: [PATCH 13/27] file renaming --- .../ContextAPIManager/AssignTab/AssignContainer.tsx | 4 ++-- .../ContextAPIManager/AssignTab/components/ComponentTable.tsx | 2 +- .../ContextAPIManager/CreateTab/CreateContainer.tsx | 4 ++-- .../ContextAPIManager/CreateTab/components/DataTable.tsx | 2 +- .../ContextAPIManager/DisplayTab/DisplayContainer.tsx | 4 ++-- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx b/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx index 66680a134..22856aea4 100644 --- a/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx +++ b/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx @@ -2,8 +2,8 @@ import { Typography } from '@material-ui/core'; import React from 'react'; import ContextTable from './components/ContextTable'; -const ContextAssigner = () => { +const AssignContainer = () => { return ; }; -export default ContextAssigner; +export default AssignContainer; diff --git a/app/src/components/ContextAPIManager/AssignTab/components/ComponentTable.tsx b/app/src/components/ContextAPIManager/AssignTab/components/ComponentTable.tsx index bb56264f3..256b69dad 100644 --- a/app/src/components/ContextAPIManager/AssignTab/components/ComponentTable.tsx +++ b/app/src/components/ContextAPIManager/AssignTab/components/ComponentTable.tsx @@ -46,7 +46,7 @@ const rows = [ createData('Gingerbread', 356, 16.0, 49, 3.9) ]; -export default function ContextTable() { +export default function ComponentTable() { return (
    diff --git a/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx b/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx index 14a757609..7ae446a65 100644 --- a/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx +++ b/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx @@ -8,7 +8,7 @@ import AddDataForm from './components/AddDataForm'; import AddContextForm from './components/AddContextForm'; import * as actions from '../../../redux/actions/actions'; -const ContextContainer = () => { +const CreateContainer = () => { const defaultTableData = [{key: 'Enter Key', value: 'Enter value'}] const store = useStore(); const [state, setState] = useState([]); @@ -68,4 +68,4 @@ const ContextContainer = () => { ); }; -export default ContextContainer; +export default CreateContainer; diff --git a/app/src/components/ContextAPIManager/CreateTab/components/DataTable.tsx b/app/src/components/ContextAPIManager/CreateTab/components/DataTable.tsx index b776ee636..e12ce4fe5 100644 --- a/app/src/components/ContextAPIManager/CreateTab/components/DataTable.tsx +++ b/app/src/components/ContextAPIManager/CreateTab/components/DataTable.tsx @@ -28,7 +28,7 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({ } })); -export default function ContextTable({target}) { +export default function DataTable({target}) { return (
    diff --git a/app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx b/app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx index b85d4aae6..ddc7d7d50 100644 --- a/app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx +++ b/app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx @@ -1,7 +1,7 @@ import { Typography } from '@material-ui/core'; import React from 'react'; -const ContextTree = () => { +const DisplayContainer = () => { return ( Beautiful Tree @@ -11,4 +11,4 @@ const ContextTree = () => { -export default ContextTree; +export default DisplayContainer; From aba81bc7a550b868b5d564a77f89d3677096c65e Mon Sep 17 00:00:00 2001 From: KB Date: Mon, 30 May 2022 22:25:05 -0700 Subject: [PATCH 14/27] css refractoring on create context form. Also clearing existing errors. --- .../CreateTab/CreateContainer.tsx | 59 +++++++++++-------- .../CreateTab/components/AddContextForm.tsx | 39 +++++++----- .../CreateTab/components/AddDataForm.tsx | 2 +- 3 files changed, 60 insertions(+), 40 deletions(-) diff --git a/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx b/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx index 7ae446a65..c4b93032b 100644 --- a/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx +++ b/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx @@ -9,7 +9,7 @@ import AddContextForm from './components/AddContextForm'; import * as actions from '../../../redux/actions/actions'; const CreateContainer = () => { - const defaultTableData = [{key: 'Enter Key', value: 'Enter value'}] + const defaultTableData = [{ key: 'Enter Key', value: 'Enter value' }]; const store = useStore(); const [state, setState] = useState([]); const [tableState, setTableState] = React.useState(defaultTableData); @@ -27,12 +27,15 @@ const CreateContainer = () => { }; const handleClickInputData = ({ name }, { inputKey, inputValue }) => { - dispatch(actions.addContextValuesActionCreator({ name, inputKey, inputValue })); + dispatch( + actions.addContextValuesActionCreator({ name, inputKey, inputValue }) + ); setState(store.getState().contextSlice); }; const renderTable = targetContext => { - if (!targetContext.values[0]) { + console.log(targetContext) + if (!targetContext.values) { setTableState(defaultTableData); } else { setTableState(targetContext.values); @@ -40,27 +43,37 @@ const CreateContainer = () => { }; return ( <> - - - - - - + + + + + + - + + + + + + + + diff --git a/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx b/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx index 517f3226d..82bf91b02 100644 --- a/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx +++ b/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx @@ -15,7 +15,7 @@ const AddContextForm = ({ setContextInput }) => { const { allContext } = contextStore; - + const [btnDisabled, setBtnDisabled] = useState(false); const handleClick = () => { if (contextInput === '' || contextInput === null) return; const temp = contextInput; @@ -23,42 +23,45 @@ const AddContextForm = ({ handleClickSelectContext(temp); }; - const autoOnChange = (event, newValue) => { + const onChange = (event, newValue) => { if (typeof newValue === 'string') { setContextInput({ name: newValue }); } else if (newValue && newValue.inputValue) { // Create a new contextInput from the user input + //console.log(newValue,newValue.inputValue) setContextInput({ - name: newValue.inputValue + name: newValue.inputValue, + values: [] }); + renderTable(newValue); + } else { setContextInput(newValue); renderTable(newValue); } }; - const autoFitler = (options, params) => { + const filterOptions = (options, params) => { + // setBtnDisabled(true); const filtered = filter(options, params); - const { inputValue } = params; // Suggest the creation of a new contextInput - const isExisting = options.some( - option => inputValue === option.name - // console.log(inputValue) - ); + const isExisting = options.some(option => inputValue === option.name); if (inputValue !== '' && !isExisting) { filtered.push({ inputValue, name: `Add "${inputValue}"` }); + + // setBtnDisabled(false); } return filtered; }; - const autoGetOptions = option => { + const getOptionLabel = option => { // Value selected with enter, right from the input if (typeof option === 'string') { return option; @@ -71,7 +74,7 @@ const AddContextForm = ({ return option.name; }; - const autoRenderOptions = (props, option) => ( + const renderOption = (props, option) => (
  • {option.name}
    • ); @@ -84,21 +87,25 @@ const AddContextForm = ({ ( )} /> - {/* */} diff --git a/app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx b/app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx index 40b4680d4..88bcb426d 100644 --- a/app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx +++ b/app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx @@ -19,7 +19,7 @@ const AddDataForm = ({ handleClickInputData, contextInput }) => { }; }); }; - +console.log(contextInput) return ( From 6065fa017d58087456c798233b25cffda9bbabc6 Mon Sep 17 00:00:00 2001 From: KB Date: Tue, 31 May 2022 15:27:57 -0700 Subject: [PATCH 15/27] display tree frameworks working. added google charts dependancy to package.json. Added redux functionality for assigning context Co-authored-by: Sal Saluga SalSaluga@gmail.com Co-authored-by: Bianca Picasso bianca.picasso@gmail.com Co-authored-by: Huy Pham huypham048@gmail.com --- .../DisplayTab/DisplayContainer.tsx | 54 +++++++++++++++---- app/src/redux/actions/actions.js | 5 ++ app/src/redux/constants/actionTypes.js | 1 + .../redux/reducers/slice/contextReducer.js | 22 ++++++-- package.json | 1 + 5 files changed, 71 insertions(+), 12 deletions(-) diff --git a/app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx b/app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx index ddc7d7d50..ca3572029 100644 --- a/app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx +++ b/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 ( - - Beautiful Tree - - ); -}; + 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 ( + + ); +}; +export default DisplayContainer; \ No newline at end of file diff --git a/app/src/redux/actions/actions.js b/app/src/redux/actions/actions.js index a4ed1a160..bda251e91 100644 --- a/app/src/redux/actions/actions.js +++ b/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 +}); diff --git a/app/src/redux/constants/actionTypes.js b/app/src/redux/constants/actionTypes.js index 5b1a0a68a..51ea0b3b4 100644 --- a/app/src/redux/constants/actionTypes.js +++ b/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'; diff --git a/app/src/redux/reducers/slice/contextReducer.js b/app/src/redux/reducers/slice/contextReducer.js index cecf5e6a8..67625e015 100644 --- a/app/src/redux/reducers/slice/contextReducer.js +++ b/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; } diff --git a/package.json b/package.json index 61fb64d71..f3de61c69 100644 --- a/package.json +++ b/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", From 8db4e7cafde16b93d18125b9277348dbd28075ea Mon Sep 17 00:00:00 2001 From: huypham048 Date: Tue, 31 May 2022 15:30:29 -0700 Subject: [PATCH 16/27] added context dropdown for assignment tab Co-authored-by: Sal Saluga SalSaluga@gmail.com Co-authored-by: Ken Bains nkbain10@gmail.com Co-authored-by: Bianca Picasso bianca.picasso@gmail.com --- .../AssignTab/AssignContainer.tsx | 26 ++++++++++++- .../AssignTab/components/ContextDropDown.tsx | 37 +++++++++++++++++++ .../CreateTab/CreateContainer.tsx | 10 ++--- 3 files changed, 66 insertions(+), 7 deletions(-) create mode 100644 app/src/components/ContextAPIManager/AssignTab/components/ContextDropDown.tsx diff --git a/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx b/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx index 22856aea4..c02f8b411 100644 --- a/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx +++ b/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx @@ -1,9 +1,31 @@ import { Typography } from '@material-ui/core'; -import React from 'react'; +import React, { useContext, useState, Fragment, useEffect } from 'react'; import ContextTable from './components/ContextTable'; +import { useStore } from 'react-redux'; +import StateContext from '../../../context/context'; +import ContextDropDown from './components/ContextDropDown'; const AssignContainer = () => { - return ; + const [state, setState] = useState(null); + + useEffect(() => { + setState(store.getState().contextSlice); + }, []); + + // const [componentList, setComponentList] = useContext(StateContext); + + const store = useStore(); + + console.log(componentList); + + //create an onclick for assign + + return ( + + + + + ); }; export default AssignContainer; diff --git a/app/src/components/ContextAPIManager/AssignTab/components/ContextDropDown.tsx b/app/src/components/ContextAPIManager/AssignTab/components/ContextDropDown.tsx new file mode 100644 index 000000000..8f8edcc19 --- /dev/null +++ b/app/src/components/ContextAPIManager/AssignTab/components/ContextDropDown.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import Select, { SelectChangeEvent } from '@mui/material/Select'; + +export default function ContextDropDown({ contextList }) { + // const [context] + console.log(contextList); + const [currentContext, setCurrentContext] = React.useState(''); + + const handleChange = (event: SelectChangeEvent) => { + setCurrentContext(event.target.value as string); + }; + + return ( + + + Context + + + + ); +} diff --git a/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx b/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx index c4b93032b..4565d5090 100644 --- a/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx +++ b/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx @@ -34,7 +34,7 @@ const CreateContainer = () => { }; const renderTable = targetContext => { - console.log(targetContext) + console.log(targetContext); if (!targetContext.values) { setTableState(defaultTableData); } else { @@ -43,8 +43,8 @@ const CreateContainer = () => { }; return ( <> - - + + { justifyContent="center" alignItems="center" > - + { - + Date: Tue, 31 May 2022 16:59:50 -0700 Subject: [PATCH 17/27] Display tab fully functioning. Co-authored-by: Sal Saluga SalSaluga@gmail.com Co-authored-by: Bianca Picasso bianca.picasso@gmail.com Co-authored-by: Huy Pham huypham048@gmail.com --- .../DisplayTab/DisplayContainer.tsx | 63 +++++++++---------- .../redux/reducers/slice/contextReducer.js | 4 +- 2 files changed, 32 insertions(+), 35 deletions(-) diff --git a/app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx b/app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx index ca3572029..41e9960d3 100644 --- a/app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx +++ b/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 ( - + + + + + ); }; -export default DisplayContainer; \ No newline at end of file +export default DisplayContainer; diff --git a/app/src/redux/reducers/slice/contextReducer.js b/app/src/redux/reducers/slice/contextReducer.js index 67625e015..9c86eff0c 100644 --- a/app/src/redux/reducers/slice/contextReducer.js +++ b/app/src/redux/reducers/slice/contextReducer.js @@ -8,7 +8,7 @@ const initialState = { { key: 'testKey1', value: 'testValue1' }, { key: 'testKey2', value: 'testValue2' } ], - components: [] + components: ['MainContainer', 'SubmitForm'] }, { name: 'MainContext3', @@ -16,7 +16,7 @@ const initialState = { { key: 'testKey3', value: 'testValue3' }, { key: 'testKey33', value: 'testValue33' } ], - components: [] + components: ['MainContainer', 'EditForm', 'TableContainer'] } ] }; From 3e059effe95dd2603b24ea121decba81bf3e3c36 Mon Sep 17 00:00:00 2001 From: huypham048 Date: Tue, 31 May 2022 20:03:26 -0700 Subject: [PATCH 18/27] added component table Co-authored-by: Sal Saluga SalSaluga@gmail.com Co-authored-by: Ken Bains nkbain10@gmail.com --- .../AssignTab/AssignContainer.tsx | 105 +++++++++++++-- .../components/ComponentDropDrown.tsx | 96 ++++++++++++++ .../AssignTab/components/ComponentTable.tsx | 41 ++---- .../AssignTab/components/ContextDropDown.tsx | 122 +++++++++++++----- .../DisplayTab/DisplayContainer.tsx | 15 +-- package.json | 1 + 6 files changed, 296 insertions(+), 84 deletions(-) create mode 100644 app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx diff --git a/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx b/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx index c02f8b411..f85b73161 100644 --- a/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx +++ b/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx @@ -1,29 +1,110 @@ -import { Typography } from '@material-ui/core'; import React, { useContext, useState, Fragment, useEffect } from 'react'; -import ContextTable from './components/ContextTable'; +import DataTable from '../CreateTab/components/DataTable'; import { useStore } from 'react-redux'; -import StateContext from '../../../context/context'; 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'; const AssignContainer = () => { - const [state, setState] = useState(null); + const [state, setState] = useState([]); + const defaultTableData = [{ key: 'Key', value: 'Value' }]; + const [tableState, setTableState] = React.useState(defaultTableData); + const store = useStore(); + const [contextInput, setContextInput] = React.useState(null); + const [componentInput, setComponentInput] = React.useState(null); + const [componentTable, setComponentTable] = useState([]); useEffect(() => { setState(store.getState().contextSlice); }, []); - // const [componentList, setComponentList] = useContext(StateContext); - - const store = useStore(); - - console.log(componentList); + const renderTable = targetContext => { + if (!targetContext.values) { + setTableState(defaultTableData); + } else { + setTableState(targetContext.values); + } + }; - //create an onclick for assign + const renderComponentTable = targetContext => { + console.log('current component is', targetContext); + if (!targetContext.values) { + const listOfContexts = []; + if (!Array.isArray(state)) { + state.allContext.forEach(context => { + console.log('each context is', context); + if (context.components.includes(targetContext)) + listOfContexts.push(context.name); + }); + } + // setComponentTable(defaultTableData); + setComponentTable(listOfContexts); + } else { + setComponentTable(targetContext.values); + } + }; return ( - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); }; diff --git a/app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx b/app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx new file mode 100644 index 000000000..e25bcdff4 --- /dev/null +++ b/app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx @@ -0,0 +1,96 @@ +import React, { Fragment, useState, useEffect, useContext } from 'react'; +import TextField from '@mui/material/TextField'; +import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete'; +import Box from '@mui/material/Box'; +import StateContext from '../../../../context/context'; + +const filter = createFilterOptions(); + +const ComponentDropDown = ({ + contextStore, + renderComponentTable, + componentInput, + setComponentInput +}) => { + const { allContext } = contextStore; + const [componentList, dispatch] = useContext(StateContext); + + console.log('list of components', componentList); + const onChange = (event, newValue) => { + if (typeof newValue === 'string') { + setComponentInput({ + name: newValue + }); + } else if (newValue && newValue.inputValue) { + // Create a new contextInput from the user input + //console.log(newValue,newValue.inputValue) + setComponentInput({ + name: newValue.inputValue, + values: [] + }); + renderComponentTable(newValue); + } else { + setComponentInput(newValue); + renderComponentTable(newValue); + } + }; + + const filterOptions = (options, params) => { + // setBtnDisabled(true); + const filtered = filter(options, params); + const { inputValue } = params; + // Suggest the creation of a new contextInput + const isExisting = options.some(option => inputValue === option.name); + if (inputValue !== '' && !isExisting) { + filtered.push({ + inputValue, + name: `Add "${inputValue}"` + }); + + // setBtnDisabled(false); + } + + return filtered; + }; + + const getOptionLabel = option => { + // Value selected with enter, right from the input + if (typeof option === 'string') { + return option; + } + // Add "xxx" option created dynamically + if (option.inputValue) { + return option.inputValue; + } + // Regular option + return option.name; + }; + + const renderOption = (props, option) =>
  • {option.name}
    • ; + + return ( + + + ( + + )} + /> + + + ); +}; + +export default ComponentDropDown; diff --git a/app/src/components/ContextAPIManager/AssignTab/components/ComponentTable.tsx b/app/src/components/ContextAPIManager/AssignTab/components/ComponentTable.tsx index 256b69dad..9728fb287 100644 --- a/app/src/components/ContextAPIManager/AssignTab/components/ComponentTable.tsx +++ b/app/src/components/ContextAPIManager/AssignTab/components/ComponentTable.tsx @@ -1,12 +1,12 @@ -import * as React from 'react'; -import { styled } from '@mui/material/styles'; +import React from 'react'; import Table from '@mui/material/Table'; import TableBody from '@mui/material/TableBody'; -import TableCell, { tableCellClasses } from '@mui/material/TableCell'; import TableContainer from '@mui/material/TableContainer'; import TableHead from '@mui/material/TableHead'; 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'; const StyledTableCell = styled(TableCell)(({ theme }) => ({ [`&.${tableCellClasses.head}`]: { @@ -28,44 +28,21 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({ } })); -function createData( - name: string, - calories: number, - fat: number, - carbs: number, - protein: number -) { - return { name, calories, fat, carbs, protein }; -} - -const rows = [ - createData('Frozen yoghurt', 159, 6.0, 24, 4.0), - createData('Ice cream sandwich', 237, 9.0, 37, 4.3), - createData('Eclair', 262, 16.0, 24, 6.0), - createData('Cupcake', 305, 3.7, 67, 4.3), - createData('Gingerbread', 356, 16.0, 49, 3.9) -]; - -export default function ComponentTable() { +export default function DataTable({ target }) { return ( -
    +
    - Component - Context + Key - {rows.map(row => ( - + {target.map((data, index) => ( + - {row.name} + {data} - {/* {row.component} */} - {row.fat} - {row.carbs} - {row.protein} ))} diff --git a/app/src/components/ContextAPIManager/AssignTab/components/ContextDropDown.tsx b/app/src/components/ContextAPIManager/AssignTab/components/ContextDropDown.tsx index 8f8edcc19..bb4e8f70a 100644 --- a/app/src/components/ContextAPIManager/AssignTab/components/ContextDropDown.tsx +++ b/app/src/components/ContextAPIManager/AssignTab/components/ContextDropDown.tsx @@ -1,37 +1,95 @@ -import * as React from 'react'; +import React, { Fragment, useState, useEffect } from 'react'; +import TextField from '@mui/material/TextField'; +import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete'; +import Button from '@mui/material/Button'; import Box from '@mui/material/Box'; -import InputLabel from '@mui/material/InputLabel'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; - -export default function ContextDropDown({ contextList }) { - // const [context] - console.log(contextList); - const [currentContext, setCurrentContext] = React.useState(''); - - const handleChange = (event: SelectChangeEvent) => { - setCurrentContext(event.target.value as string); +import { Typography } from '@mui/material'; + +const filter = createFilterOptions(); + +const ContextDropDown = ({ + contextStore, + renderTable, + contextInput, + setContextInput +}) => { + const { allContext } = contextStore; + + const onChange = (event, newValue) => { + if (typeof newValue === 'string') { + setContextInput({ + name: newValue + }); + } else if (newValue && newValue.inputValue) { + // Create a new contextInput from the user input + //console.log(newValue,newValue.inputValue) + setContextInput({ + name: newValue.inputValue, + values: [] + }); + renderTable(newValue); + } else { + setContextInput(newValue); + renderTable(newValue); + } }; + const filterOptions = (options, params) => { + // setBtnDisabled(true); + const filtered = filter(options, params); + const { inputValue } = params; + // Suggest the creation of a new contextInput + const isExisting = options.some(option => inputValue === option.name); + if (inputValue !== '' && !isExisting) { + filtered.push({ + inputValue, + name: `Add "${inputValue}"` + }); + + // setBtnDisabled(false); + } + + return filtered; + }; + + const getOptionLabel = option => { + // Value selected with enter, right from the input + if (typeof option === 'string') { + return option; + } + // Add "xxx" option created dynamically + if (option.inputValue) { + return option.inputValue; + } + // Regular option + return option.name; + }; + + const renderOption = (props, option) =>
  • {option.name}
    • ; + return ( - - - Context - - - + + + ( + + )} + /> + + ); -} +}; + +export default ContextDropDown; diff --git a/app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx b/app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx index 41e9960d3..033300fde 100644 --- a/app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx +++ b/app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx @@ -29,17 +29,16 @@ const DisplayContainer = () => { word: 'App' } }; - console.log(contextData); return ( - + ); diff --git a/package.json b/package.json index f3de61c69..be3380d79 100644 --- a/package.json +++ b/package.json @@ -117,6 +117,7 @@ "@apollo/client": "^3.3.11", "@babel/cli": "^7.10.4", "@babel/register": "^7.10.4", + "@mui/icons-material": "^5.8.2", "@mui/lab": "^5.0.0-alpha.83", "@types/js-cookie": "^2.2.6", "@types/node": "^14.0.20", From 6eeaa01e4cd77a84a03dabe15931e063ecce7fa0 Mon Sep 17 00:00:00 2001 From: huypham048 Date: Wed, 1 Jun 2022 17:12:29 -0700 Subject: [PATCH 19/27] finished mvp Co-authored-by: Sal Saluga SalSaluga@gmail.com Co-authored-by: Ken Bains nkbain10@gmail.com Co-authored-by: Bianca Picasso bianca.picasso@gmail.com --- .../AssignTab/AssignContainer.tsx | 45 ++++++++++++------- .../components/ComponentDropDrown.tsx | 3 +- .../AssignTab/components/ComponentTable.tsx | 2 +- .../CreateTab/CreateContainer.tsx | 1 - .../CreateTab/components/AddDataForm.tsx | 2 +- .../redux/reducers/slice/contextReducer.js | 8 ++-- 6 files changed, 34 insertions(+), 27 deletions(-) diff --git a/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx b/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx index f85b73161..9b8937912 100644 --- a/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx +++ b/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx @@ -1,6 +1,6 @@ import React, { useContext, useState, Fragment, useEffect } from 'react'; import DataTable from '../CreateTab/components/DataTable'; -import { useStore } from 'react-redux'; +import { useStore, useDispatch } from 'react-redux'; import ContextDropDown from './components/ContextDropDown'; import ComponentDropDown from './components/ComponentDropDrown'; import Divider from '@mui/material/Divider'; @@ -8,12 +8,15 @@ 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'; const AssignContainer = () => { + const store = useStore(); + const dispatch = useDispatch(); + const [state, setState] = useState([]); const defaultTableData = [{ key: 'Key', value: 'Value' }]; const [tableState, setTableState] = React.useState(defaultTableData); - const store = useStore(); const [contextInput, setContextInput] = React.useState(null); const [componentInput, setComponentInput] = React.useState(null); const [componentTable, setComponentTable] = useState([]); @@ -29,25 +32,33 @@ const AssignContainer = () => { setTableState(targetContext.values); } }; + //checks if state is no longer an array, thus an object and will eventually render out the fetched + const renderComponentTable = targetComponent => { + //target Component is main - const renderComponentTable = targetContext => { - console.log('current component is', targetContext); - if (!targetContext.values) { - const listOfContexts = []; - if (!Array.isArray(state)) { - state.allContext.forEach(context => { - console.log('each context is', context); - if (context.components.includes(targetContext)) - listOfContexts.push(context.name); - }); - } - // setComponentTable(defaultTableData); + const listOfContexts = []; + if (!Array.isArray(state)) { + state.allContext.forEach(context => { + if (context.components.includes(targetComponent.name)) { + listOfContexts.push(context.name); + } + }); setComponentTable(listOfContexts); - } else { - setComponentTable(targetContext.values); } }; + const handleAssignment = () => { + dispatch( + actions.addComponentToContext({ + context: contextInput, + component: componentInput + }) + ); + + setState(store.getState().contextSlice); + renderComponentTable(componentInput); + }; + return ( @@ -75,7 +86,7 @@ const AssignContainer = () => { - diff --git a/app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx b/app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx index e25bcdff4..dd251ea3b 100644 --- a/app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx +++ b/app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx @@ -13,9 +13,8 @@ const ComponentDropDown = ({ setComponentInput }) => { const { allContext } = contextStore; - const [componentList, dispatch] = useContext(StateContext); + const [componentList] = useContext(StateContext); - console.log('list of components', componentList); const onChange = (event, newValue) => { if (typeof newValue === 'string') { setComponentInput({ diff --git a/app/src/components/ContextAPIManager/AssignTab/components/ComponentTable.tsx b/app/src/components/ContextAPIManager/AssignTab/components/ComponentTable.tsx index 9728fb287..4ad3ec0b0 100644 --- a/app/src/components/ContextAPIManager/AssignTab/components/ComponentTable.tsx +++ b/app/src/components/ContextAPIManager/AssignTab/components/ComponentTable.tsx @@ -34,7 +34,7 @@ export default function DataTable({ target }) {
    - Key + Contexts Consumed diff --git a/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx b/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx index 4565d5090..542614e51 100644 --- a/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx +++ b/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx @@ -34,7 +34,6 @@ const CreateContainer = () => { }; const renderTable = targetContext => { - console.log(targetContext); if (!targetContext.values) { setTableState(defaultTableData); } else { diff --git a/app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx b/app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx index 88bcb426d..40b4680d4 100644 --- a/app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx +++ b/app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx @@ -19,7 +19,7 @@ const AddDataForm = ({ handleClickInputData, contextInput }) => { }; }); }; -console.log(contextInput) + return ( diff --git a/app/src/redux/reducers/slice/contextReducer.js b/app/src/redux/reducers/slice/contextReducer.js index 9c86eff0c..5002ab826 100644 --- a/app/src/redux/reducers/slice/contextReducer.js +++ b/app/src/redux/reducers/slice/contextReducer.js @@ -36,8 +36,6 @@ const contextReducer = (state = initialState, action) => { }; case types.ADD_CONTEXT_VALUES: - // console.log('payload is', action.payload); - const newAllContext = [...state.allContext]; for (let i = 0; i < newAllContext.length; i += 1) { @@ -53,12 +51,12 @@ const contextReducer = (state = initialState, action) => { ...state, allContext: newAllContext }; - case types.ADD_COMPONENT_TO_CONTEXT: + 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); + if (newTempState[i].name === action.payload.context.name) { + newTempState[i].components.push(action.payload.component.name); } } From c8a1241373370ec2e2413b7764c2607bca1211ee Mon Sep 17 00:00:00 2001 From: KB Date: Thu, 2 Jun 2022 10:29:38 -0700 Subject: [PATCH 20/27] minor bug fixes on create tab. Created data table heading. Co-authored-by: Sal Saluga SalSaluga@gmail.com Co-authored-by: Bianca Picasso bianca.picasso@gmail.com Co-authored-by: Huy Pham huypham048@gmail.com --- .../CreateTab/CreateContainer.tsx | 10 +++- .../CreateTab/components/AddContextForm.tsx | 2 +- .../CreateTab/components/AddDataForm.tsx | 15 +++-- .../CreateTab/components/DataTable.tsx | 56 ++++++++++++------- 4 files changed, 54 insertions(+), 29 deletions(-) diff --git a/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx b/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx index 542614e51..2f9b6f3f2 100644 --- a/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx +++ b/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx @@ -7,6 +7,7 @@ import DataTable from './components/DataTable'; import AddDataForm from './components/AddDataForm'; import AddContextForm from './components/AddContextForm'; import * as actions from '../../../redux/actions/actions'; +import { Typography } from '@mui/material'; const CreateContainer = () => { const defaultTableData = [{ key: 'Enter Key', value: 'Enter value' }]; @@ -73,7 +74,14 @@ const CreateContainer = () => { - + + Context Data Table + + diff --git a/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx b/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx index 82bf91b02..52bfc4d3c 100644 --- a/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx +++ b/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx @@ -104,7 +104,7 @@ const AddContextForm = ({ diff --git a/app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx b/app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx index 40b4680d4..b21439053 100644 --- a/app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx +++ b/app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx @@ -6,10 +6,13 @@ import { Typography } from '@mui/material'; const AddDataForm = ({ handleClickInputData, contextInput }) => { //const [contextInput, setContextInput] = React.useState(null); - const [dataContext, setDataContext] = React.useState({ - inputKey: '', - inputValue: '' - }); + const defaultInputData = {inputKey: '', inputValue: ''}; + const [dataContext, setDataContext] = React.useState(defaultInputData); + + const saveData = () => { + setDataContext(defaultInputData); + handleClickInputData(contextInput, dataContext) + } const handleChange = e => { setDataContext(prevDataContext => { @@ -23,7 +26,7 @@ const AddDataForm = ({ handleClickInputData, contextInput }) => { return ( - Add context data + Add context data { /> diff --git a/app/src/components/ContextAPIManager/CreateTab/components/DataTable.tsx b/app/src/components/ContextAPIManager/CreateTab/components/DataTable.tsx index e12ce4fe5..790c9fd30 100644 --- a/app/src/components/ContextAPIManager/CreateTab/components/DataTable.tsx +++ b/app/src/components/ContextAPIManager/CreateTab/components/DataTable.tsx @@ -7,6 +7,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 TableFooter from '@mui/material/TableFooter'; const StyledTableCell = styled(TableCell)(({ theme }) => ({ [`&.${tableCellClasses.head}`]: { @@ -28,27 +29,40 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({ } })); -export default function DataTable({target}) { +export default function DataTable({ target, contextInput }) { return ( - -
    - - - Key - Value - - - - {target.map((data, index) => ( - - - {data.key} + <> + +
    + + + {/* Key */} + + {contextInput ? contextInput.name : 'Context Name'} - {data.value} - - ))} - -
    -     + + + + {target.map((data, index) => ( + + + {data.key} + + {data.value} + + ))} + + {/* + + {contextInput ? contextInput.name : 'Context Name'} + + */} + + + ); -} \ No newline at end of file +} From ccf3ca4627fbb169920f048a7ddb7a8a56944690 Mon Sep 17 00:00:00 2001 From: Bianca Picasso Date: Thu, 9 Jun 2022 10:46:55 -0700 Subject: [PATCH 21/27] delete context Co-authored-by: Sal Saluga SalSaluga@gmail.com Co-authored-by: Ken Bains nkbain10@gmail.com Co-authored-by: Huy Pham huypham048@gmail.com --- .../AssignTab/components/ComponentDropDrown.tsx | 2 +- .../AssignTab/components/ContextDropDown.tsx | 2 +- .../CreateTab/CreateContainer.tsx | 16 +++++++++++++++- .../CreateTab/components/AddContextForm.tsx | 13 ++++++++++--- app/src/redux/actions/actions.js | 5 +++++ app/src/redux/constants/actionTypes.js | 1 + app/src/redux/reducers/slice/contextReducer.js | 7 +++++++ 7 files changed, 40 insertions(+), 6 deletions(-) diff --git a/app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx b/app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx index dd251ea3b..00bd3922a 100644 --- a/app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx +++ b/app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx @@ -84,7 +84,7 @@ const ComponentDropDown = ({ sx={{ width: 425 }} freeSolo renderInput={params => ( - + )} /> diff --git a/app/src/components/ContextAPIManager/AssignTab/components/ContextDropDown.tsx b/app/src/components/ContextAPIManager/AssignTab/components/ContextDropDown.tsx index bb4e8f70a..37459a45f 100644 --- a/app/src/components/ContextAPIManager/AssignTab/components/ContextDropDown.tsx +++ b/app/src/components/ContextAPIManager/AssignTab/components/ContextDropDown.tsx @@ -84,7 +84,7 @@ const ContextDropDown = ({ sx={{ width: 425 }} freeSolo renderInput={params => ( - + )} /> diff --git a/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx b/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx index 2f9b6f3f2..9692ae685 100644 --- a/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx +++ b/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx @@ -22,9 +22,16 @@ const CreateContainer = () => { const dispatch = useDispatch(); - const handleClickSelectContext = contextInput => { + const handleClickSelectContext = () => { + //prevent user from adding duplicate context + for (let i = 0; i < state.allContext.length; i += 1) { + if (state.allContext[i].name === contextInput.name) { + return; + } + } dispatch(actions.addContextActionCreator(contextInput)); setState(store.getState().contextSlice); + }; const handleClickInputData = ({ name }, { inputKey, inputValue }) => { @@ -34,6 +41,12 @@ const CreateContainer = () => { setState(store.getState().contextSlice); }; + const handleDeleteContextClick = () => { + dispatch(actions.deleteContext(contextInput)); + setContextInput(''); + setState(store.getState().contextSlice); + }; + const renderTable = targetContext => { if (!targetContext.values) { setTableState(defaultTableData); @@ -57,6 +70,7 @@ const CreateContainer = () => { { const { allContext } = contextStore; const [btnDisabled, setBtnDisabled] = useState(false); + const handleClick = () => { if (contextInput === '' || contextInput === null) return; - const temp = contextInput; - setContextInput(''); - handleClickSelectContext(temp); + handleClickSelectContext(); }; const onChange = (event, newValue) => { @@ -108,6 +108,13 @@ const AddContextForm = ({ > Create + {/* */} diff --git a/app/src/redux/actions/actions.js b/app/src/redux/actions/actions.js index bda251e91..ec9ec950f 100644 --- a/app/src/redux/actions/actions.js +++ b/app/src/redux/actions/actions.js @@ -18,3 +18,8 @@ export const addComponentToContext = newEntry => ({ type: types.ADD_COMPONENT_TO_CONTEXT, payload: newEntry }); + +export const deleteContext = (contextInput) => ({ + type: types.DELETE_CONTEXT, + payload: contextInput +}) diff --git a/app/src/redux/constants/actionTypes.js b/app/src/redux/constants/actionTypes.js index 51ea0b3b4..0ddf53e47 100644 --- a/app/src/redux/constants/actionTypes.js +++ b/app/src/redux/constants/actionTypes.js @@ -5,3 +5,4 @@ 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;' diff --git a/app/src/redux/reducers/slice/contextReducer.js b/app/src/redux/reducers/slice/contextReducer.js index 5002ab826..5a5b31771 100644 --- a/app/src/redux/reducers/slice/contextReducer.js +++ b/app/src/redux/reducers/slice/contextReducer.js @@ -51,6 +51,13 @@ const contextReducer = (state = initialState, action) => { ...state, allContext: newAllContext }; + case types.DELETE_CONTEXT: + const remains = state.allContext.filter((el) => el.name !== action.payload.name) + return { + ...state, + allContext : remains + } + case types.ADD_COMPONENT_TO_CONTEXT: const newTempState = [...state.allContext]; From 70f8c65bccc85612a405dd4f06b35bff401fc4e5 Mon Sep 17 00:00:00 2001 From: huypham048 Date: Fri, 10 Jun 2022 14:18:10 -0700 Subject: [PATCH 22/27] adding delete context functionality --- .../ContextAPIManager/AssignTab/AssignContainer.tsx | 2 +- .../AssignTab/components/ComponentTable.tsx | 2 +- .../CreateTab/components/AddContextForm.tsx | 9 +++------ app/src/redux/reducers/slice/contextReducer.js | 5 +++-- 4 files changed, 8 insertions(+), 10 deletions(-) diff --git a/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx b/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx index 9b8937912..521cfe57a 100644 --- a/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx +++ b/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx @@ -81,7 +81,7 @@ const AssignContainer = () => {     - +     diff --git a/app/src/components/ContextAPIManager/AssignTab/components/ComponentTable.tsx b/app/src/components/ContextAPIManager/AssignTab/components/ComponentTable.tsx index 4ad3ec0b0..e436fc0fd 100644 --- a/app/src/components/ContextAPIManager/AssignTab/components/ComponentTable.tsx +++ b/app/src/components/ContextAPIManager/AssignTab/components/ComponentTable.tsx @@ -34,7 +34,7 @@ export default function DataTable({ target }) { - Contexts Consumed + Contexts Consumed diff --git a/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx b/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx index 52bfc4d3c..987d62a41 100644 --- a/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx +++ b/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx @@ -36,7 +36,6 @@ const AddContextForm = ({ values: [] }); renderTable(newValue); - } else { setContextInput(newValue); renderTable(newValue); @@ -44,7 +43,7 @@ const AddContextForm = ({ }; const filterOptions = (options, params) => { - // setBtnDisabled(true); + // setBtnDisabled(true); const filtered = filter(options, params); const { inputValue } = params; // Suggest the creation of a new contextInput @@ -55,7 +54,7 @@ const AddContextForm = ({ name: `Add "${inputValue}"` }); - // setBtnDisabled(false); + // setBtnDisabled(false); } return filtered; @@ -74,9 +73,7 @@ const AddContextForm = ({ return option.name; }; - const renderOption = (props, option) => ( -
  • {option.name}
    • - ); + const renderOption = (props, option) =>
  • {option.name}
    • ; return ( diff --git a/app/src/redux/reducers/slice/contextReducer.js b/app/src/redux/reducers/slice/contextReducer.js index 5002ab826..95fd902e6 100644 --- a/app/src/redux/reducers/slice/contextReducer.js +++ b/app/src/redux/reducers/slice/contextReducer.js @@ -3,7 +3,7 @@ import * as types from '../../constants/actionTypes'; const initialState = { allContext: [ { - name: 'MainContext1', + name: 'ContextExample1', values: [ { key: 'testKey1', value: 'testValue1' }, { key: 'testKey2', value: 'testValue2' } @@ -11,7 +11,7 @@ const initialState = { components: ['MainContainer', 'SubmitForm'] }, { - name: 'MainContext3', + name: 'ContextExample2', values: [ { key: 'testKey3', value: 'testValue3' }, { key: 'testKey33', value: 'testValue33' } @@ -19,6 +19,7 @@ const initialState = { components: ['MainContainer', 'EditForm', 'TableContainer'] } ] + // allContext: [] }; const contextReducer = (state = initialState, action) => { From fb568b54d9356c3cdcdd40ad0657e8722d458845 Mon Sep 17 00:00:00 2001 From: huypham048 Date: Sat, 11 Jun 2022 15:37:22 -0700 Subject: [PATCH 23/27] added Jest testing for context slice --- __tests__/contextReducer.test.js | 165 ++++++++++++++++++ app/src/redux/actions/actions.js | 5 +- app/src/redux/constants/actionTypes.js | 2 +- .../redux/reducers/slice/contextReducer.js | 41 +++-- package.json | 3 +- 5 files changed, 193 insertions(+), 23 deletions(-) create mode 100644 __tests__/contextReducer.test.js diff --git a/__tests__/contextReducer.test.js b/__tests__/contextReducer.test.js new file mode 100644 index 000000000..9a2f11dd4 --- /dev/null +++ b/__tests__/contextReducer.test.js @@ -0,0 +1,165 @@ +import subject from '../app/src/redux/reducers/slice/contextReducer'; + +describe('Context Reducer', () => { + let state; + + beforeEach(() => { + state = { + allContext: [] + }; + }); + + describe('default state', () => { + it('should return a default state when given an undefined input', () => { + expect(subject(undefined, { type: undefined })).toEqual(state); + }); + }); + + describe('unrecognized action types', () => { + it('should return the original state without any duplication', () => { + expect(subject(state, { type: 'REMOVE_STATE' })).toBe(state); + }); + }); + + describe('ADD_CONTEXT', () => { + const action = { + type: 'ADD_CONTEXT', + payload: { + name: 'Theme Context' + } + }; + + it('adds a context', () => { + const { allContext } = subject(state, action); + expect(allContext[0]).toEqual({ + name: 'Theme Context', + values: [], + components: [] + }); + }); + + it('returns a state object not strictly equal to the original', () => { + const newState = subject(state, action); + expect(newState).not.toBe(state); + }); + + it('should immutably update the nested state object', () => { + const { allContext } = subject(state, action); + expect(allContext).not.toBe(state.allContext); + }); + }); + + describe('ADD_CONTEXT_VALUES', () => { + beforeEach(() => { + state = { + allContext: [ + { + name: 'Theme Context', + values: [], + components: [] + } + ] + }; + }); + + const action = { + type: 'ADD_CONTEXT_VALUES', + payload: { + name: 'Theme Context', + inputKey: 'Theme Color', + inputValue: 'Dark' + } + }; + + it('adds a key-value pair to values array of the specified context', () => { + const { allContext } = subject(state, action); + expect(allContext[0].values.length).toEqual(1); + expect(allContext[0].values[0].key).toEqual('Theme Color'); + expect(allContext[0].values[0].value).toEqual('Dark'); + }); + + it('includes an allContext not strictly equal to the original', () => { + const { allContext } = subject(state, action); + + expect(allContext).not.toBe(state.allContext); + }); + }); + + describe('DELETE CONTEXT', () => { + let action; + beforeEach(() => { + state = { + allContext: [ + { + name: 'Theme Context', + values: [], + components: [] + }, + { + name: 'To be deleted', + values: [], + components: [] + } + ] + }; + + action = { + type: 'DELETE_CONTEXT', + payload: { + name: 'Theme Context' + } + }; + }); + + it('removes specified context from the state', () => { + const { allContext } = subject(state, action); + + expect(allContext.length).toEqual(1); + }); + + it('includes an allContext not strictly equal to the original', () => { + const { allContext } = subject(state, action); + + expect(allContext).not.toBe(state.allContext); + }); + }); + + describe('ADD_COMPONENT_TO_CONTEXT', () => { + beforeEach(() => { + state = { + allContext: [ + { + name: 'Theme Context', + values: [], + components: [] + } + ] + }; + }); + + const action = { + type: 'ADD_COMPONENT_TO_CONTEXT', + payload: { + context: { + name: 'Theme Context' + }, + component: { + name: 'Main Component' + } + } + }; + + it('adds a new component to the specified context', () => { + const { allContext } = subject(state, action); + + expect(allContext[0].components.length).toEqual(1); + expect(allContext[0].components[0]).toEqual('Main Component'); + }); + + it('includes an allContext not strictly equal to the original', () => { + const { allContext } = subject(state, action); + + expect(allContext).not.toBe(state.allContext); + }); + }); +}); diff --git a/app/src/redux/actions/actions.js b/app/src/redux/actions/actions.js index ec9ec950f..91988386b 100644 --- a/app/src/redux/actions/actions.js +++ b/app/src/redux/actions/actions.js @@ -4,6 +4,7 @@ export const darkModeToggle = () => ({ type: types.DARK_MODE_TOGGLE }); +//actions for context slice export const addContextActionCreator = contextName => ({ type: types.ADD_CONTEXT, payload: contextName @@ -19,7 +20,7 @@ export const addComponentToContext = newEntry => ({ payload: newEntry }); -export const deleteContext = (contextInput) => ({ +export const deleteContext = contextInput => ({ type: types.DELETE_CONTEXT, payload: contextInput -}) +}); diff --git a/app/src/redux/constants/actionTypes.js b/app/src/redux/constants/actionTypes.js index 0ddf53e47..4216363b6 100644 --- a/app/src/redux/constants/actionTypes.js +++ b/app/src/redux/constants/actionTypes.js @@ -5,4 +5,4 @@ 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 DELETE_CONTEXT = 'DELETE_CONTEXT'; diff --git a/app/src/redux/reducers/slice/contextReducer.js b/app/src/redux/reducers/slice/contextReducer.js index 10f9f91d0..715e911ff 100644 --- a/app/src/redux/reducers/slice/contextReducer.js +++ b/app/src/redux/reducers/slice/contextReducer.js @@ -2,22 +2,22 @@ import * as types from '../../constants/actionTypes'; const initialState = { allContext: [ - { - name: 'ContextExample1', - values: [ - { key: 'testKey1', value: 'testValue1' }, - { key: 'testKey2', value: 'testValue2' } - ], - components: ['MainContainer', 'SubmitForm'] - }, - { - name: 'ContextExample2', - values: [ - { key: 'testKey3', value: 'testValue3' }, - { key: 'testKey33', value: 'testValue33' } - ], - components: ['MainContainer', 'EditForm', 'TableContainer'] - } + // { + // name: 'ContextExample1', + // values: [ + // { key: 'testKey1', value: 'testValue1' }, + // { key: 'testKey2', value: 'testValue2' } + // ], + // components: ['MainContainer', 'SubmitForm'] + // }, + // { + // name: 'ContextExample2', + // values: [ + // { key: 'testKey3', value: 'testValue3' }, + // { key: 'testKey33', value: 'testValue33' } + // ], + // components: ['MainContainer', 'EditForm', 'TableContainer'] + // } ] // allContext: [] }; @@ -52,12 +52,15 @@ const contextReducer = (state = initialState, action) => { ...state, allContext: newAllContext }; + case types.DELETE_CONTEXT: - const remains = state.allContext.filter((el) => el.name !== action.payload.name) + const tempState = [...state.allContext]; + const remains = tempState.filter(el => el.name !== action.payload.name); + return { ...state, - allContext : remains - } + allContext: remains + }; case types.ADD_COMPONENT_TO_CONTEXT: const newTempState = [...state.allContext]; diff --git a/package.json b/package.json index be3380d79..7eb3a8173 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ "dist-linux": "electron-builder --linux", "dist-windows": "electron-builder --windows", "dist-all": "npm run prod-build && electron-builder --mac --linux --windows", - "test": "concurrently \"npm run dev-server\" \"cross-env NODE_ENV=test jest --verbose \"", + "test": "jest --verbose", "server": "cross-env NODE_ENV=development nodemon server/server.js" }, "repository": { @@ -139,6 +139,7 @@ "electron-debug": "^3.2.0", "electron-devtools-installer": "^3.2.0", "electron-window-manager": "^1.0.6", + "enzyme": "^3.11.0", "esbuild-wasm": "^0.8.27", "eslint-plugin-react-hooks": "^4.2.0", "express-graphql": "^0.12.0", From 387a1d7512e265563111be9a9495e97f9c203022 Mon Sep 17 00:00:00 2001 From: huypham048 Date: Mon, 13 Jun 2022 10:37:56 -0700 Subject: [PATCH 24/27] modified test scritp Co-authored-by: Sal Saluga SalSaluga@gmail.com Co-authored-by: Ken Bains nkbain10@gmail.com Co-authored-by: Bianca Picasso bianca.picasso@gmail.com --- __tests__/contextReducer.test.ts | 165 ++++++++++++++++++ .../ContextAPIManager/ContextManager.tsx | 8 +- package.json | 2 +- 3 files changed, 167 insertions(+), 8 deletions(-) create mode 100644 __tests__/contextReducer.test.ts diff --git a/__tests__/contextReducer.test.ts b/__tests__/contextReducer.test.ts new file mode 100644 index 000000000..9a2f11dd4 --- /dev/null +++ b/__tests__/contextReducer.test.ts @@ -0,0 +1,165 @@ +import subject from '../app/src/redux/reducers/slice/contextReducer'; + +describe('Context Reducer', () => { + let state; + + beforeEach(() => { + state = { + allContext: [] + }; + }); + + describe('default state', () => { + it('should return a default state when given an undefined input', () => { + expect(subject(undefined, { type: undefined })).toEqual(state); + }); + }); + + describe('unrecognized action types', () => { + it('should return the original state without any duplication', () => { + expect(subject(state, { type: 'REMOVE_STATE' })).toBe(state); + }); + }); + + describe('ADD_CONTEXT', () => { + const action = { + type: 'ADD_CONTEXT', + payload: { + name: 'Theme Context' + } + }; + + it('adds a context', () => { + const { allContext } = subject(state, action); + expect(allContext[0]).toEqual({ + name: 'Theme Context', + values: [], + components: [] + }); + }); + + it('returns a state object not strictly equal to the original', () => { + const newState = subject(state, action); + expect(newState).not.toBe(state); + }); + + it('should immutably update the nested state object', () => { + const { allContext } = subject(state, action); + expect(allContext).not.toBe(state.allContext); + }); + }); + + describe('ADD_CONTEXT_VALUES', () => { + beforeEach(() => { + state = { + allContext: [ + { + name: 'Theme Context', + values: [], + components: [] + } + ] + }; + }); + + const action = { + type: 'ADD_CONTEXT_VALUES', + payload: { + name: 'Theme Context', + inputKey: 'Theme Color', + inputValue: 'Dark' + } + }; + + it('adds a key-value pair to values array of the specified context', () => { + const { allContext } = subject(state, action); + expect(allContext[0].values.length).toEqual(1); + expect(allContext[0].values[0].key).toEqual('Theme Color'); + expect(allContext[0].values[0].value).toEqual('Dark'); + }); + + it('includes an allContext not strictly equal to the original', () => { + const { allContext } = subject(state, action); + + expect(allContext).not.toBe(state.allContext); + }); + }); + + describe('DELETE CONTEXT', () => { + let action; + beforeEach(() => { + state = { + allContext: [ + { + name: 'Theme Context', + values: [], + components: [] + }, + { + name: 'To be deleted', + values: [], + components: [] + } + ] + }; + + action = { + type: 'DELETE_CONTEXT', + payload: { + name: 'Theme Context' + } + }; + }); + + it('removes specified context from the state', () => { + const { allContext } = subject(state, action); + + expect(allContext.length).toEqual(1); + }); + + it('includes an allContext not strictly equal to the original', () => { + const { allContext } = subject(state, action); + + expect(allContext).not.toBe(state.allContext); + }); + }); + + describe('ADD_COMPONENT_TO_CONTEXT', () => { + beforeEach(() => { + state = { + allContext: [ + { + name: 'Theme Context', + values: [], + components: [] + } + ] + }; + }); + + const action = { + type: 'ADD_COMPONENT_TO_CONTEXT', + payload: { + context: { + name: 'Theme Context' + }, + component: { + name: 'Main Component' + } + } + }; + + it('adds a new component to the specified context', () => { + const { allContext } = subject(state, action); + + expect(allContext[0].components.length).toEqual(1); + expect(allContext[0].components[0]).toEqual('Main Component'); + }); + + it('includes an allContext not strictly equal to the original', () => { + const { allContext } = subject(state, action); + + expect(allContext).not.toBe(state.allContext); + }); + }); +}); diff --git a/app/src/components/ContextAPIManager/ContextManager.tsx b/app/src/components/ContextAPIManager/ContextManager.tsx index f330818ef..958112c8a 100644 --- a/app/src/components/ContextAPIManager/ContextManager.tsx +++ b/app/src/components/ContextAPIManager/ContextManager.tsx @@ -31,13 +31,7 @@ const ContextManager = (props): JSX.Element => { - + diff --git a/package.json b/package.json index 7eb3a8173..09d666365 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ "dist-linux": "electron-builder --linux", "dist-windows": "electron-builder --windows", "dist-all": "npm run prod-build && electron-builder --mac --linux --windows", - "test": "jest --verbose", + "test": "concurrently \"npm run dev-server\" \"cross-env NODE_ENV=test jest --verbose \"", "server": "cross-env NODE_ENV=development nodemon server/server.js" }, "repository": { From d6bb8915dbcb6e8980d017d98c4dfb22be9a9d94 Mon Sep 17 00:00:00 2001 From: huypham048 Date: Tue, 14 Jun 2022 20:03:09 -0700 Subject: [PATCH 25/27] integrated code preview functionality for adding context Co-authored-by: Sal Saluga SalSaluga@gmail.com Co-authored-by: Ken Bains nkbain10@gmail.com Co-authored-by: Bianca Picasso bianca.picasso@gmail.com --- app/src/components/App.tsx | 16 +- .../AssignTab/AssignContainer.tsx | 9 +- .../CreateTab/CreateContainer.tsx | 10 +- .../CreateTab/components/AddContextForm.tsx | 10 +- app/src/components/bottom/CodePreview.tsx | 70 +++-- app/src/components/right/ExportButton.tsx | 36 +-- app/src/helperFunctions/generateCode.ts | 265 ++++++++++++------ app/src/redux/actions/actions.js | 4 + app/src/redux/constants/actionTypes.js | 1 + .../redux/reducers/slice/contextReducer.js | 45 +-- app/src/utils/createApplication.util.ts | 72 ++++- 11 files changed, 358 insertions(+), 180 deletions(-) diff --git a/app/src/components/App.tsx b/app/src/components/App.tsx index d1e0467da..119950398 100644 --- a/app/src/components/App.tsx +++ b/app/src/components/App.tsx @@ -49,16 +49,16 @@ export const App = (): JSX.Element => { } else { console.log( 'No user project found in localforage, setting initial state blank' - ); - } - }); - } - }, []); + ); + } + }); + } + }, []); useEffect(() => { // provide config properties to legacy projects so new edits can be auto saved if (state.config === undefined) { - state.config = {saveFlag:true, saveTimer:false}; - }; + state.config = { saveFlag: true, saveTimer: false }; + } // New project save configuration to optimize server load and minimize Ajax requests if (state.config.saveFlag) { state.config.saveFlag = false; @@ -82,7 +82,7 @@ export const App = (): JSX.Element => { state.config.saveFlag = true; }, 15000); } - }, [state]) + }, [state]); return (
    diff --git a/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx b/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx index 521cfe57a..a5c180fa3 100644 --- a/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx +++ b/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx @@ -26,7 +26,7 @@ const AssignContainer = () => { }, []); const renderTable = targetContext => { - if (!targetContext.values) { + if (targetContext === null || !targetContext.values) { setTableState(defaultTableData); } else { setTableState(targetContext.values); @@ -37,12 +37,17 @@ const AssignContainer = () => { //target Component is main const listOfContexts = []; - if (!Array.isArray(state)) { + if ( + !Array.isArray(state) && + targetComponent !== null && + targetComponent.name + ) { state.allContext.forEach(context => { if (context.components.includes(targetComponent.name)) { listOfContexts.push(context.name); } }); + console.log('setting component table with ', listOfContexts); setComponentTable(listOfContexts); } }; diff --git a/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx b/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx index 9692ae685..71efeaca8 100644 --- a/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx +++ b/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx @@ -27,11 +27,10 @@ const CreateContainer = () => { for (let i = 0; i < state.allContext.length; i += 1) { if (state.allContext[i].name === contextInput.name) { return; - } + } } dispatch(actions.addContextActionCreator(contextInput)); setState(store.getState().contextSlice); - }; const handleClickInputData = ({ name }, { inputKey, inputValue }) => { @@ -48,7 +47,12 @@ const CreateContainer = () => { }; const renderTable = targetContext => { - if (!targetContext.values) { + if ( + targetContext === null || + targetContext === undefined || + !targetContext.values + ) { + // if (targetContext === null || targetContext === undefined) { setTableState(defaultTableData); } else { setTableState(targetContext.values); diff --git a/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx b/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx index ade21a804..4bba060ac 100644 --- a/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx +++ b/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx @@ -1,9 +1,10 @@ -import React, { Fragment, useState, useEffect } from 'react'; +import React, { Fragment, useState, useEffect, useContext } from 'react'; import TextField from '@mui/material/TextField'; import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete'; import Button from '@mui/material/Button'; import Box from '@mui/material/Box'; import { Typography } from '@mui/material'; +import StateContext from '../../../../context/context'; const filter = createFilterOptions(); @@ -17,10 +18,17 @@ const AddContextForm = ({ }) => { const { allContext } = contextStore; const [btnDisabled, setBtnDisabled] = useState(false); + const [state, dispatch] = useContext(StateContext); const handleClick = () => { if (contextInput === '' || contextInput === null) return; handleClickSelectContext(); + + //need to trigger the generate code functionality to update the code preview tab. Sending dummy data to trigger with a DELELTE ELEMENT dispatch method + dispatch({ + type: 'DELETE ELEMENT', + payload: 'FAKE_ID' + }); }; const onChange = (event, newValue) => { diff --git a/app/src/components/bottom/CodePreview.tsx b/app/src/components/bottom/CodePreview.tsx index 458f01460..c917d2bcb 100644 --- a/app/src/components/bottom/CodePreview.tsx +++ b/app/src/components/bottom/CodePreview.tsx @@ -19,27 +19,24 @@ import store from '../../redux/store'; const CodePreview: React.FC<{ theme: string | null; setTheme: any | null; - }> = ({ theme, setTheme }) => { - - +}> = ({ theme, setTheme }) => { const ref = useRef(); - + /** - * Starts the Web Assembly service. - */ + * Starts the Web Assembly service. + */ const startService = async () => { ref.current = await esbuild.startService({ worker: true, - wasmURL: 'https://unpkg.com/esbuild-wasm@0.8.27/esbuild.wasm', - }) - } + wasmURL: 'https://unpkg.com/esbuild-wasm@0.8.27/esbuild.wasm' + }); + }; const wrapper = useRef(); const dimensions = useResizeObserver(wrapper); - const {height } = - dimensions || 0; + const { height } = dimensions || 0; - const [state,] = useContext(StateContext); + const [state] = useContext(StateContext); const [, setDivHeight] = useState(0); let currentComponent = state.components.find( (elem: Component) => elem.id === state.canvasFocus.componentId @@ -53,49 +50,51 @@ const CodePreview: React.FC<{ useEffect(() => { setDivHeight(height); - }, [height]) + }, [height]); useEffect(() => { - - setInput(currentComponent.code); - store.dispatch({type: "CODE_PREVIEW_INPUT", payload: currentComponent.code}); - }, [state.components]) + setInput(currentComponent.code); + store.dispatch({ + type: 'CODE_PREVIEW_INPUT', + payload: currentComponent.code + }); + }, [state.components]); /** - * Handler thats listens to changes in code editor - * @param {string} data - Code entered by the user - */ - const handleChange = async (data) => { + * Handler thats listens to changes in code editor + * @param {string} data - Code entered by the user + */ + const handleChange = async data => { setInput(data); - store.dispatch({type: "CODE_PREVIEW_INPUT", payload: data}); - if(!ref.current) { + store.dispatch({ type: 'CODE_PREVIEW_INPUT', payload: data }); + if (!ref.current) { return; } let result = await ref.current.build({ entryPoints: ['index.js'], bundle: true, write: false, - incremental:true, + incremental: true, minify: true, - plugins: [ - unpkgPathPlugin(), - fetchPlugin(data) - ], + plugins: [unpkgPathPlugin(), fetchPlugin(data)], define: { 'process.env.NODE_ENV': '"production"', global: 'window' } - }) - store.dispatch({type: "CODE_PREVIEW_SAVE", payload: result.outputFiles[0].text}); - } + }); + store.dispatch({ + type: 'CODE_PREVIEW_SAVE', + payload: result.outputFiles[0].text + }); + }; return (
    -
    ); }; export default CodePreview; - - - - diff --git a/app/src/components/right/ExportButton.tsx b/app/src/components/right/ExportButton.tsx index 879bbcc22..ddc3f4e1a 100644 --- a/app/src/components/right/ExportButton.tsx +++ b/app/src/components/right/ExportButton.tsx @@ -1,4 +1,3 @@ - import React, { useState, useContext, useCallback, useEffect } from 'react'; import StateContext from '../../context/context'; import List from '@material-ui/core/List'; @@ -11,7 +10,7 @@ import createModal from './createModal'; import { styleContext } from '../../containers/AppContainer'; export default function ExportButton() { const [modal, setModal] = useState(null); - const [state,] = useContext(StateContext); + const [state] = useContext(StateContext); const genOptions: string[] = [ 'Export components', @@ -22,7 +21,6 @@ export default function ExportButton() { // Closes out the open modal const closeModal = () => setModal(''); - const showGenerateAppModal = () => { const children = ( @@ -92,29 +90,31 @@ export default function ExportButton() { ); }; - const exportKeyBind = useCallback((e) => { + const exportKeyBind = useCallback(e => { //Export Project - (e.key === 'e' && e.metaKey || e.key === 'e' && e.ctrlKey ) ? showGenerateAppModal() : ''; + (e.key === 'e' && e.metaKey) || (e.key === 'e' && e.ctrlKey) + ? showGenerateAppModal() + : ''; }, []); useEffect(() => { document.addEventListener('keydown', exportKeyBind); return () => { - document.removeEventListener('keydown', exportKeyBind) - } + document.removeEventListener('keydown', exportKeyBind); + }; }, []); return (
    - - {modal} + + {modal}
    ); -}; \ No newline at end of file +} diff --git a/app/src/helperFunctions/generateCode.ts b/app/src/helperFunctions/generateCode.ts index 9104330a7..b7e58d8fb 100644 --- a/app/src/helperFunctions/generateCode.ts +++ b/app/src/helperFunctions/generateCode.ts @@ -1,4 +1,5 @@ import { element } from 'prop-types'; +import store from '../redux/store.js'; import { Component, State, @@ -85,12 +86,13 @@ const generateUnformattedCode = ( } // when we see a Switch or LinkTo, import React Router - if ((referencedHTML.tag === 'Switch' || referencedHTML.tag === 'Route') && projectType === 'Classic React') + if ( + (referencedHTML.tag === 'Switch' || referencedHTML.tag === 'Route') && + projectType === 'Classic React' + ) importReactRouter = true; - else if(referencedHTML.tag === 'Link') - links = true; - if(referencedHTML.tag === 'Image') - images = true; + else if (referencedHTML.tag === 'Link') links = true; + if (referencedHTML.tag === 'Image') images = true; return child; } else if (child.type === 'Route Link') { links = true; @@ -118,25 +120,28 @@ const generateUnformattedCode = ( }; // function to dynamically add classes, ids, and styles to an element if it exists. const elementTagDetails = (childElement: object) => { - let customizationDetails = ""; - if (childElement.childId && childElement.tag !== 'Route') customizationDetails += (' ' + `id="${+childElement.childId}"`); + let customizationDetails = ''; + if (childElement.childId && childElement.tag !== 'Route') + customizationDetails += ' ' + `id="${+childElement.childId}"`; if (childElement.attributes && childElement.attributes.cssClasses) { - customizationDetails += (' ' + `className="${childElement.attributes.cssClasses}"`); + customizationDetails += + ' ' + `className="${childElement.attributes.cssClasses}"`; } - if (childElement.style && Object.keys(childElement.style).length > 0) customizationDetails += (' ' + formatStyles(childElement)); + if (childElement.style && Object.keys(childElement.style).length > 0) + customizationDetails += ' ' + formatStyles(childElement); return customizationDetails; }; // function to fix the spacing of the ace editor for new lines of added content. This was breaking on nested components, leaving everything right justified. const tabSpacer = (level: number) => { - let tabs = ' ' + let tabs = ' '; for (let i = 0; i < level; i++) tabs += ' '; return tabs; - } + }; // function to dynamically generate the appropriate levels for the code preview const levelSpacer = (level: number, spaces: number) => { if (level === 2) return `\n${tabSpacer(spaces)}`; - else return '' - } + else return ''; + }; // function to dynamically generate a complete html (& also other library type) elements const elementGenerator = (childElement: object, level: number = 2) => { let innerText = ''; @@ -155,7 +160,8 @@ const generateUnformattedCode = ( activeLink = '"' + childElement.attributes.compLink + '"'; } } - const nestable = childElement.tag === 'div' || + const nestable = + childElement.tag === 'div' || childElement.tag === 'form' || childElement.tag === 'ol' || childElement.tag === 'ul' || @@ -165,34 +171,72 @@ const generateUnformattedCode = ( childElement.tag === 'Route'; if (childElement.tag === 'img') { - return `${levelSpacer(level, 5)}<${childElement.tag} src=${activeLink} ${elementTagDetails(childElement)}/>${levelSpacer(2, (3 + level))}`; + return `${levelSpacer(level, 5)}<${ + childElement.tag + } src=${activeLink} ${elementTagDetails(childElement)}/>${levelSpacer( + 2, + 3 + level + )}`; } else if (childElement.tag === 'a') { - return `${levelSpacer(level, 5)}<${childElement.tag} href=${activeLink} ${elementTagDetails(childElement)}>${innerText}${levelSpacer(2, (3 + level))}`; + return `${levelSpacer(level, 5)}<${ + childElement.tag + } href=${activeLink} ${elementTagDetails(childElement)}>${innerText}${levelSpacer(2, 3 + level)}`; } else if (childElement.tag === 'input') { - return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails(childElement)}>${levelSpacer(2, (3 + level))}`; + return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails( + childElement + )}>${levelSpacer(2, 3 + level)}`; } else if (childElement.tag === 'Link' && projectType === 'Classic React') { - return `${levelSpacer(level, 5)} - ${tabSpacer(level)}${writeNestedElements(childElement.children, level + 1)}${innerText} - ${tabSpacer(level - 1)}${levelSpacer(2, (3 + level))}`; + return `${levelSpacer(level, 5)} + ${tabSpacer(level)}${writeNestedElements( + childElement.children, + level + 1 + )}${innerText} + ${tabSpacer(level - 1)}${levelSpacer(2, 3 + level)}`; } else if (childElement.tag === 'Link' && projectType === 'Next.js') { - return `${levelSpacer(level, 5)} - ${tabSpacer(level)}${innerText}${writeNestedElements(childElement.children, level + 1)} - ${tabSpacer(level - 1)}${levelSpacer(2, (3 + level))}`; + return `${levelSpacer( + level, + 5 + )} + ${tabSpacer(level)}${innerText}${writeNestedElements( + childElement.children, + level + 1 + )} + ${tabSpacer(level - 1)}${levelSpacer(2, 3 + level)}`; } else if (childElement.tag === 'Image') { - return `${levelSpacer(level, 5)}<${childElement.tag} src=${activeLink} ${elementTagDetails(childElement)}/>`; + return `${levelSpacer(level, 5)}<${ + childElement.tag + } src=${activeLink} ${elementTagDetails(childElement)}/>`; } else if (nestable) { - if((childElement.tag === 'Route' || childElement.tag === 'Switch') && projectType === 'Next.js') { + if ( + (childElement.tag === 'Route' || childElement.tag === 'Switch') && + projectType === 'Next.js' + ) { return `${writeNestedElements(childElement.children, level)}`; - } - const routePath = (childElement.tag === 'Route') ? (' ' + 'exact path=' + activeLink) : ''; - return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails(childElement)}${routePath}> + } + const routePath = + childElement.tag === 'Route' ? ' ' + 'exact path=' + activeLink : ''; + return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails( + childElement + )}${routePath}> ${tabSpacer(level)}${innerText} - ${tabSpacer(level)}${writeNestedElements(childElement.children, level + 1)} - ${tabSpacer(level - 1)}${levelSpacer(2, (3 + level))}`; + ${tabSpacer(level)}${writeNestedElements( + childElement.children, + level + 1 + )} + ${tabSpacer(level - 1)}${levelSpacer( + 2, + 3 + level + )}`; } else if (childElement.tag !== 'separator') { - return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails(childElement)}>${innerText}${levelSpacer(2, (3 + level))}`; + return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails( + childElement + )}>${innerText}${levelSpacer(2, 3 + level)}`; } - } + }; // write all code that will be under the "return" of the component const writeNestedElements = (enrichedChildren: any, level: number = 2) => { return `${enrichedChildren @@ -206,50 +250,53 @@ const generateUnformattedCode = ( else if (child.type === 'Route Link') { if (projectType === 'Next.js') { // if route link points to index, to go endpoint / rather than /index - if (child.name === 'index') return ``; - else return ``; + if (child.name === 'index') + return ``; + else + return ``; } else if (projectType === 'Gatsby.js') { - if (child.name === 'index') return `
    ${child.name}
    `; - else return `
    ${child.name}
    `; - } else return `` + if (child.name === 'index') + return `
    ${child.name}
    `; + else + return `
    ${child.name}
    `; + } else return ``; } }) .filter(element => !!element) - .join('') - }`; + .join('')}`; }; // function to properly incorporate the user created state that is stored in the application state const writeStateProps = (stateArray: any) => { let stateToRender = ''; for (const element of stateArray) { - stateToRender += levelSpacer(2, 2) + element + ';' + stateToRender += levelSpacer(2, 2) + element + ';'; } - return stateToRender - } + return stateToRender; + }; const enrichedChildren: any = getEnrichedChildren(currComponent); // import statements differ between root (pages) and regular components (components) const importsMapped = projectType === 'Next.js' || projectType === 'Gatsby.js' ? imports - .map((comp: string) => { - return isRoot - ? `import ${comp} from '../components/${comp}'` - : `import ${comp} from './${comp}'`; - }) - .join('\n') + .map((comp: string) => { + return isRoot + ? `import ${comp} from '../components/${comp}'` + : `import ${comp} from './${comp}'`; + }) + .join('\n') : imports - .map((comp: string) => { - return `import ${comp} from './${comp}'`; - }) - .join('\n'); - const createState = (stateProps) => { + .map((comp: string) => { + return `import ${comp} from './${comp}'`; + }) + .join('\n'); + const createState = stateProps => { let state = '{'; - stateProps.forEach((ele) => { + stateProps.forEach(ele => { state += ele.key + ':' + JSON.stringify(ele.value) + ', '; }); state = state.substring(0, state.length - 2) + '}'; return state; - } + }; // Generate import let importContext = ''; if (currComponent.useContext) { @@ -260,9 +307,15 @@ const generateUnformattedCode = ( } if (currComponent.useContext) { for (const providerId of Object.keys(currComponent.useContext)) { - const statesFromProvider = currComponent.useContext[parseInt(providerId)].statesFromProvider; //{1: {Set, compLink, compText}, 2 : {}...} + const statesFromProvider = + currComponent.useContext[parseInt(providerId)].statesFromProvider; //{1: {Set, compLink, compText}, 2 : {}...} const providerComponent = components[parseInt(providerId) - 1]; - providers += 'const ' + providerComponent.name.toLowerCase() + 'Context = useContext(' + providerComponent.name + 'Context);\n \t\t'; + providers += + 'const ' + + providerComponent.name.toLowerCase() + + 'Context = useContext(' + + providerComponent.name + + 'Context);\n \t\t'; for (let i = 0; i < providerComponent.stateProps.length; i++) { if (statesFromProvider.has(providerComponent.stateProps[i].id)) { context += @@ -280,27 +333,75 @@ const generateUnformattedCode = ( // create final component code. component code differs between classic react, next.js, gatsby.js // classic react code if (projectType === 'Classic React') { + let contextImports = ''; + + const { allContext } = store.getState().contextSlice; + for (const context of allContext) { + contextImports += `import ${context.name}Provider from '../contexts/${context.name}Provider.js'\n\t\t`; + } + + const createRender = () => { + let result = `${writeNestedElements(enrichedChildren)}`; + if (importReactRouter) result = `\n ${result}\n `; + if (allContext.length < 1) return result; + + if (currComponent.name === 'App') { + allContext.reverse().forEach((el, i) => { + let tabs = `\t\t\t`; + if (i === allContext.length - 1) { + tabs = `\t\t\t\t`; + } + result = `${tabs.repeat(allContext.length - i)}<${ + el.name + }Provider>\n ${result}\n ${tabs.repeat(allContext.length - i)}`; + }); + } + return result; + }; + + // ${ + // !importReactRouter + // ? ` return ( + // <> + // \t${writeNestedElements(enrichedChildren)} + // + // );` + // : ` return ( + // + // \t${writeNestedElements(enrichedChildren)} + // + // );` + // } return ` ${`import React, { useState, useEffect} from 'react';`} ${`import ReactDOM from 'react-dom';`} - ${importReactRouter ? `import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';` : ``} + ${currComponent.name === 'App' ? contextImports : ''} + ${ + importReactRouter + ? `import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';` + : `` + } ${importsMapped} ${`const ${currComponent.name} = (props) => {`} - ${` const [value, setValue] = useState("");${writeStateProps(currComponent.useStateCodes)}`} - ${!importReactRouter - ? ` return ( - <> - \t${writeNestedElements(enrichedChildren)} - - );` - : ` return ( - - \t${writeNestedElements(enrichedChildren)} - - );`} + ${` const [value, setValue] = useState("");${writeStateProps( + currComponent.useStateCodes + )}`} + return(\n${createRender()}\n\t\t\t) ${`}\n`} - ReactDOM.render(<${currComponent.name} />, document.querySelector('#app')); + export default ${currComponent.name} `; + + //lcreate function to create render string + // create a inital string with children components + //if router exist then wrap initial string with router + //loop though context + //create template literal for current iteration begining text + //inject inital string + // + //end template + //then save new intial string } // next.js component code else if (projectType === 'Next.js') { @@ -311,22 +412,25 @@ const generateUnformattedCode = ( ${links ? `import Link from 'next/link'` : ``} ${images ? `import Image from 'next/image'` : ``} - const ${currComponent.name[0].toUpperCase() + currComponent.name.slice(1)} = (props): JSX.Element => { + const ${currComponent.name[0].toUpperCase() + + currComponent.name.slice(1)} = (props): JSX.Element => { const [value, setValue] = useState("INITIAL VALUE"); return ( <> - ${isRoot - ? ` + ${ + isRoot + ? ` ${currComponent.name} ` - : `` + : `` } ${writeNestedElements(enrichedChildren)} ); } - export default ${currComponent.name[0].toUpperCase() + currComponent.name.slice(1)}; + export default ${currComponent.name[0].toUpperCase() + + currComponent.name.slice(1)}; `; } else { // gatsby component code @@ -339,12 +443,13 @@ const generateUnformattedCode = ( const[value, setValue] = useState("INITIAL VALUE"); return ( <> - ${isRoot - ? ` + ${ + isRoot + ? ` ${currComponent.name} ` - : `` - } + : `` + }
    ${writeNestedElements(enrichedChildren)}
    diff --git a/app/src/redux/actions/actions.js b/app/src/redux/actions/actions.js index 91988386b..2a25b0e96 100644 --- a/app/src/redux/actions/actions.js +++ b/app/src/redux/actions/actions.js @@ -24,3 +24,7 @@ export const deleteContext = contextInput => ({ type: types.DELETE_CONTEXT, payload: contextInput }); + +export const getAllContext = () => ({ + type: types.GET_ALL_CONTEXT +}); diff --git a/app/src/redux/constants/actionTypes.js b/app/src/redux/constants/actionTypes.js index 4216363b6..391beeb92 100644 --- a/app/src/redux/constants/actionTypes.js +++ b/app/src/redux/constants/actionTypes.js @@ -6,3 +6,4 @@ 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/contextReducer.js b/app/src/redux/reducers/slice/contextReducer.js index 715e911ff..78defa1dc 100644 --- a/app/src/redux/reducers/slice/contextReducer.js +++ b/app/src/redux/reducers/slice/contextReducer.js @@ -2,22 +2,22 @@ import * as types from '../../constants/actionTypes'; const initialState = { allContext: [ - // { - // name: 'ContextExample1', - // values: [ - // { key: 'testKey1', value: 'testValue1' }, - // { key: 'testKey2', value: 'testValue2' } - // ], - // components: ['MainContainer', 'SubmitForm'] - // }, - // { - // name: 'ContextExample2', - // values: [ - // { key: 'testKey3', value: 'testValue3' }, - // { key: 'testKey33', value: 'testValue33' } - // ], - // components: ['MainContainer', 'EditForm', 'TableContainer'] - // } + { + name: 'ContextExample1', + values: [ + { key: 'theme', value: 'testValue1' }, + { key: 'navbar', value: 'testValue2' } + ], + components: ['MainContainer', 'SubmitForm'] + }, + { + name: 'ContextExample2', + values: [ + { key: 'header', value: 'testValue3' }, + { key: 'footer ', value: 'testValue33' } + ], + components: ['MainContainer', 'EditForm', 'TableContainer'] + } ] // allContext: [] }; @@ -25,8 +25,14 @@ const initialState = { const contextReducer = (state = initialState, action) => { switch (action.type) { case types.ADD_CONTEXT: + //MainContext + ainContext + let newName = + action.payload.name + .trim() + .charAt(0) + .toUpperCase() + action.payload.name.slice(1); const newContext = { - name: action.payload.name.trim(), + name: newName, values: [], components: [] }; @@ -75,6 +81,11 @@ const contextReducer = (state = initialState, action) => { ...state, allContext: newTempState }; + + case types.GET_ALL_CONTEXT: + return { + ...state + }; default: { return state; } diff --git a/app/src/utils/createApplication.util.ts b/app/src/utils/createApplication.util.ts index 9fa22cd5a..270a18f4a 100644 --- a/app/src/utils/createApplication.util.ts +++ b/app/src/utils/createApplication.util.ts @@ -1,8 +1,10 @@ // Create all files necessary to run a classic react application import createFiles from './createFiles.util'; -import { Component} from '../interfaces/Interfaces'; -import createTestSuiteClassic from './createTestSuiteClassic.util' -const camelToKebab= (camel:string) => { +import { Component } from '../interfaces/Interfaces'; +import createTestSuiteClassic from './createTestSuiteClassic.util'; +import store from '../redux/store.js'; + +const camelToKebab = (camel: string) => { return camel.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase(); }; const compToCSS = (component: Component) => { @@ -15,16 +17,17 @@ const compToCSS = (component: Component) => { let cssStyle = `${camelToKebab(property)}: ${styleObj[property]}; `; cssClass += cssStyle; - }) + }); cssClass += `} `; return cssClass; -} +}; function createIndexHtml(path, appName) { let dir = path; let dirSrc; let dirServer; let dirComponent; + let dirContext; if (!dir.match(/`${appName}`|\*$/)) { dir = `${dir}/${appName}`; if (!window.api.existsSync(dir)) { @@ -35,6 +38,9 @@ function createIndexHtml(path, appName) { window.api.mkdirSync(dirServer); dirComponent = `${dirSrc}/components`; window.api.mkdirSync(dirComponent); + //create directory for contexts + dirContext = `${dirSrc}/contexts`; + window.api.mkdirSync(dirContext); } } const filePath: string = `${dir}/index.html`; @@ -90,7 +96,7 @@ export const createDefaultCSS = (path, appName, components) => { `; components.forEach(comp => { data += compToCSS(comp); - }) + }); window.api.writeFile(filePath, data, err => { if (err) { console.log('default.css error:', err.message); @@ -101,7 +107,7 @@ export const createDefaultCSS = (path, appName, components) => { }; export const createPackage = (path, appName, test) => { const filePath = `${path}/${appName}/package.json`; - let tsjest = `, + let tsjest = `, "@types/enzyme": "^3.10.9", "@types/jest": "^27.0.1", "babel-jest": "^27.2.0", @@ -121,8 +127,11 @@ export const createPackage = (path, appName, test) => { "start": "node server/server.js", "build": "cross-env NODE_ENV=production webpack", "dev": "cross-env NODE_ENV=development webpack-dev-server"${ - test ? `, - "test": "jest"`: '' } + test + ? `, + "test": "jest"` + : '' + } }, "nodemonConfig": { "ignore": [ @@ -163,8 +172,7 @@ export const createPackage = (path, appName, test) => { "typescript": "^3.8.3", "webpack": "^4.29.6", "webpack-cli": "^3.3.0", - "webpack-dev-server": "^3.2.1"${ - test ? tsjest : '' } + "webpack-dev-server": "^3.2.1"${test ? tsjest : ''} } } `; @@ -329,11 +337,48 @@ app.listen(8080, () => { } }); }; + +export const createContext = (path, appName) => { + // const store = useStore(); + const { allContext } = store.getState().contextSlice; + + for (const context of allContext) { + const cached = {}; + for (const ele of context.values) { + cached[ele.key] = ele.value; + } + const filePath = `${path}/${appName}/src/contexts/${context.name}Provider.js`; + const data = ` + import {createContext, useState} from 'react' + const ${context.name} = createContext(); + + const ${context.name}Provider = (props) => { + const [${context.name}State] = useState({ + ${JSON.stringify(cached)} + }) + } + + reuturn ( + <${context.name}.Provider value={${context.name}State}> + {props.children} + + ); + export default ${context.name}Provider + `; + window.api.writeFileSync(filePath, data, err => { + if (err) { + console.log('server file error:', err.message); + } else { + console.log('server file written successfully'); + } + }); + } +}; async function createApplicationUtil({ path, appName, components, - testchecked, + testchecked }: { path: string; appName: string; @@ -349,8 +394,9 @@ async function createApplicationUtil({ await createTsConfig(path, appName); await createTsLint(path, appName); await createServer(path, appName); + await createContext(path, appName); if (testchecked) { - await createTestSuiteClassic({path, appName, components, testchecked}); + await createTestSuiteClassic({ path, appName, components, testchecked }); } await createFiles(components, path, appName, true); } From 625c60961cbf8432b7dc039be03a52cb0ad8dccc Mon Sep 17 00:00:00 2001 From: huypham048 Date: Wed, 15 Jun 2022 15:00:33 -0700 Subject: [PATCH 26/27] finshed OSP, ready for launch Co-authored-by: Sal Saluga SalSaluga@gmail.com Co-authored-by: Ken Bains nkbain10@gmail.com Co-authored-by: Bianca Picasso bianca.picasso@gmail.com --- .../AssignTab/AssignContainer.tsx | 20 ++- .../CreateTab/CreateContainer.tsx | 15 +- .../DisplayTab/DisplayContainer.tsx | 1 + app/src/components/main/DemoRender.tsx | 129 ++++++++++++++---- app/src/helperFunctions/generateCode.ts | 66 +++++---- .../redux/reducers/slice/contextReducer.js | 42 +++--- app/src/utils/createApplication.util.ts | 11 +- 7 files changed, 202 insertions(+), 82 deletions(-) diff --git a/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx b/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx index a5c180fa3..993dfa7e2 100644 --- a/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx +++ b/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx @@ -9,6 +9,7 @@ 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 StateContext from '../../../context/context'; const AssignContainer = () => { const store = useStore(); @@ -20,7 +21,9 @@ const AssignContainer = () => { const [contextInput, setContextInput] = React.useState(null); const [componentInput, setComponentInput] = React.useState(null); const [componentTable, setComponentTable] = useState([]); + const [stateContext, dispatchContext] = useContext(StateContext); + //fetching data from redux store useEffect(() => { setState(store.getState().contextSlice); }, []); @@ -32,7 +35,8 @@ const AssignContainer = () => { setTableState(targetContext.values); } }; - //checks if state is no longer an array, thus an object and will eventually render out the fetched + + //construct data for table displaying component table const renderComponentTable = targetComponent => { //target Component is main @@ -47,18 +51,30 @@ const AssignContainer = () => { listOfContexts.push(context.name); } }); - console.log('setting component table with ', listOfContexts); setComponentTable(listOfContexts); } }; + //handling assignment of contexts to components const handleAssignment = () => { + if ( + contextInput === '' || + contextInput === null || + componentInput === '' || + componentInput === null + ) + return; dispatch( actions.addComponentToContext({ context: contextInput, component: componentInput }) ); + //trigger generateCode(), update code preview tab + dispatchContext({ + type: 'DELETE ELEMENT', + payload: 'FAKE_ID' + }); setState(store.getState().contextSlice); renderComponentTable(componentInput); diff --git a/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx b/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx index 71efeaca8..7353526d7 100644 --- a/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx +++ b/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useContext } from 'react'; import { useStore } from 'react-redux'; import { useDispatch } from 'react-redux'; import Divider from '@mui/material/Divider'; @@ -8,6 +8,7 @@ import AddDataForm from './components/AddDataForm'; import AddContextForm from './components/AddContextForm'; import * as actions from '../../../redux/actions/actions'; import { Typography } from '@mui/material'; +import StateContext from '../../../context/context'; const CreateContainer = () => { const defaultTableData = [{ key: 'Enter Key', value: 'Enter value' }]; @@ -15,13 +16,16 @@ const CreateContainer = () => { const [state, setState] = useState([]); const [tableState, setTableState] = React.useState(defaultTableData); const [contextInput, setContextInput] = React.useState(null); + const [stateContext, dispatchContext] = useContext(StateContext); + //pulling data from redux store useEffect(() => { setState(store.getState().contextSlice); }, []); const dispatch = useDispatch(); + //update data store when user adds a new context const handleClickSelectContext = () => { //prevent user from adding duplicate context for (let i = 0; i < state.allContext.length; i += 1) { @@ -29,10 +33,12 @@ const CreateContainer = () => { return; } } + setContextInput(''); dispatch(actions.addContextActionCreator(contextInput)); setState(store.getState().contextSlice); }; + //update data store when user add new key-value pair to context const handleClickInputData = ({ name }, { inputKey, inputValue }) => { dispatch( actions.addContextValuesActionCreator({ name, inputKey, inputValue }) @@ -40,12 +46,19 @@ const CreateContainer = () => { setState(store.getState().contextSlice); }; + //update data store when user deletes context const handleDeleteContextClick = () => { dispatch(actions.deleteContext(contextInput)); setContextInput(''); setState(store.getState().contextSlice); + setTableState(defaultTableData); + dispatchContext({ + type: 'DELETE ELEMENT', + payload: 'FAKE_ID' + }); }; + //re-render data table when there's new changes const renderTable = targetContext => { if ( targetContext === null || diff --git a/app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx b/app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx index 033300fde..c28cd1016 100644 --- a/app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx +++ b/app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx @@ -8,6 +8,7 @@ const DisplayContainer = () => { const { allContext } = store.getState().contextSlice; const [contextData, setContextData] = useState([]); + //build data for Google charts, tree rendering useEffect(() => { transformData(allContext); }, []); diff --git a/app/src/components/main/DemoRender.tsx b/app/src/components/main/DemoRender.tsx index 3635215a2..4df4bcd49 100644 --- a/app/src/components/main/DemoRender.tsx +++ b/app/src/components/main/DemoRender.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect, useRef, useContext } from 'react'; -import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; +import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'; import Box from '@material-ui/core/Box'; import cssRefresher from '../../helperFunctions/cssRefresh'; import { useSelector } from 'react-redux'; @@ -17,12 +17,12 @@ const DemoRender = (): JSX.Element => { (elem: Component) => elem.id === state.canvasFocus.componentId ); - // Create React ref to inject transpiled code in inframe + // Create React ref to inject transpiled code in inframe const iframe = useRef(); const demoContainerStyle = { width: '100%', backgroundColor: '#FBFBFB', - border: '2px Solid grey', + border: '2px Solid grey' }; const html = ` @@ -55,14 +55,19 @@ const DemoRender = (): JSX.Element => { `; //Switch between components when clicking on a link in the live render - window.onmessage = (event) => { - if(event.data === undefined) return; - const component:string = event.data?.split('/').at(-1); - const componentId = component && state.components?.find((el) => { - return el.name.toLowerCase() === component.toLowerCase(); - }).id; - componentId && dispatch({ type: 'CHANGE FOCUS', payload: {componentId, childId: null}}) - + window.onmessage = event => { + if (event.data === undefined) return; + const component: string = event.data?.split('/').at(-1); + const componentId = + component && + state.components?.find(el => { + return el.name.toLowerCase() === component.toLowerCase(); + }).id; + componentId && + dispatch({ + type: 'CHANGE FOCUS', + payload: { componentId, childId: null } + }); }; // This function is the heart of DemoRender it will take the array of components stored in state and dynamically construct the desired React component for the live demo @@ -78,17 +83,81 @@ const DemoRender = (): JSX.Element => { const classRender = element.attributes.cssClasses; const activeLink = element.attributes.compLink; let renderedChildren; - if (elementType !== 'input' && elementType !== 'img' && elementType !== 'Image' && element.children.length > 0) { + if ( + elementType !== 'input' && + elementType !== 'img' && + elementType !== 'Image' && + element.children.length > 0 + ) { renderedChildren = componentBuilder(element.children); } - if (elementType === 'input') componentsToRender.push(); - else if (elementType === 'img') componentsToRender.push(); - else if (elementType === 'Image') componentsToRender.push(); - else if (elementType === 'a' || elementType === 'Link') componentsToRender.push({innerText}{renderedChildren}); - else if (elementType === 'Switch') componentsToRender.push({renderedChildren}); - else if (elementType === 'Route') componentsToRender.push({renderedChildren}); - else componentsToRender.push({innerText}{renderedChildren} - ); + if (elementType === 'input') + componentsToRender.push( + + ); + else if (elementType === 'img') + componentsToRender.push( + + ); + else if (elementType === 'Image') + componentsToRender.push( + + ); + else if (elementType === 'a' || elementType === 'Link') + componentsToRender.push( + + {innerText} + {renderedChildren} + + ); + else if (elementType === 'Switch') + componentsToRender.push({renderedChildren}); + else if (elementType === 'Route') + componentsToRender.push( + + {renderedChildren} + + ); + else + componentsToRender.push( + + {innerText} + {renderedChildren} + + ); key += 1; } } @@ -96,10 +165,12 @@ const DemoRender = (): JSX.Element => { }; let code = ''; - const currComponent = state.components.find(element => element.id === state.canvasFocus.componentId); + const currComponent = state.components.find( + element => element.id === state.canvasFocus.componentId + ); componentBuilder(currComponent.children).forEach(element => { - try{ + try { code += ReactDOMServer.renderToString(element); } catch { return; @@ -108,17 +179,23 @@ const DemoRender = (): JSX.Element => { useEffect(() => { cssRefresher(); - }, []) + }, []); useEffect(() => { iframe.current.contentWindow.postMessage(code, '*'); - }, [code]) + }, [code]); return (
    -