Skip to content

Commit 600582e

Browse files
Bianca PicassoBianca Picasso
Bianca Picasso
authored and
Bianca Picasso
committed
connect to redux store
Co-authored-by: Sal Saluga [email protected] Co-authored-by: Ken Bains [email protected] Co-authored-by: Huy Pham [email protected]
1 parent 0cc13ea commit 600582e

File tree

14 files changed

+270
-19
lines changed

14 files changed

+270
-19
lines changed

‎app/src/components/ContextAPIManager/AssignerComponents/ComponentTable.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export default function ContextTable() {
6262
<StyledTableCell component="th" scope="row">
6363
{row.name}
6464
</StyledTableCell>
65-
<StyledTableCell align="right">{row.component}</StyledTableCell>
65+
{/* <StyledTableCell align="right">{row.component}</StyledTableCell> */}
6666
<StyledTableCell align="right">{row.fat}</StyledTableCell>
6767
<StyledTableCell align="right">{row.carbs}</StyledTableCell>
6868
<StyledTableCell align="right">{row.protein}</StyledTableCell>

‎app/src/components/ContextAPIManager/ContextAssigner.tsx renamed to ‎app/src/components/ContextAPIManager/AssignerComponents/ContextAssigner.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Typography } from '@material-ui/core';
22
import React from 'react';
3-
import ContextTable from './AssignerComponents/ContextTable';
3+
import ContextTable from './ContextTable';
44

55
const ContextAssigner = () => {
66
return <ContextTable />;

‎app/src/components/ContextAPIManager/AssignerComponents/ContextTable.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,15 +45,15 @@ const rows = [
4545
createData('Cupcake', 305, 3.7, 67, 4.3),
4646
createData('Gingerbread', 356, 16.0, 49, 3.9)
4747
];
48-
48+
{/* <Table style={{ width: 400, margin: 'auto' }}></Table> */}
4949
export default function ContextTable() {
5050
return (
5151
<TableContainer component={Paper}>
52-
<Table sx={{ width: '100%' }} aria-label="customized table">
52+
<Table sx={{ width: '50%'}} aria-label="customized table">
5353
<TableHead>
5454
<TableRow>
55-
<StyledTableCell>Dessert (100g serving)</StyledTableCell>
56-
<StyledTableCell align="right">Calories</StyledTableCell>
55+
<StyledTableCell>Context</StyledTableCell>
56+
<StyledTableCell align="right">Component</StyledTableCell>
5757
</TableRow>
5858
</TableHead>
5959
<TableBody>

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

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎app/src/components/ContextAPIManager/ContextManager.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useContext } from 'react';
22
import ContextTab from './ContextTab';
3-
import ContextTree from './ContextTree';
3+
import ContextTree from './Display/ContextTree';
44
import { makeStyles } from '@material-ui/styles';
55

66
const useStyles = makeStyles({

‎app/src/components/ContextAPIManager/ContextTab.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,10 @@ import Tab from '@mui/material/Tab';
7373
import TabContext from '@mui/lab/TabContext';
7474
import TabList from '@mui/lab/TabList';
7575
import TabPanel from '@mui/lab/TabPanel';
76-
import ContextCreator from './ContextCreator';
77-
import ContextAssigner from './ContextAssigner';
78-
import ContextTree from './ContextTree';
76+
77+
import ContextCreator from './CreatorComponent/ContextCreator';
78+
import ContextAssigner from './AssignerComponents/ContextAssigner';
79+
import ContextTree from './Display/ContextTree';
7980

8081
export default function LabTabs() {
8182
const [value, setValue] = React.useState('1');

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Typography } from '@material-ui/core';
2+
import React from 'react';
3+
import { useStore } from 'react-redux'
4+
5+
import CreatorForm from './CreatorForm';
6+
7+
const ContextCreator = () => {
8+
const store = useStore();
9+
console.log(store.getState())
10+
return (
11+
<>
12+
<CreatorForm />
13+
</>
14+
)
15+
};
16+
17+
export default ContextCreator;

‎app/src/components/ContextAPIManager/CreatorComponent/ContextTable.tsx

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React from 'react';
2+
import Table from '@mui/material/Table';
3+
import TableBody from '@mui/material/TableBody';
4+
import TableContainer from '@mui/material/TableContainer';
5+
import TableHead from '@mui/material/TableHead';
6+
import TableRow from '@mui/material/TableRow';
7+
import Paper from '@mui/material/Paper';
8+
import { styled } from '@mui/material/styles';
9+
import TableCell, { tableCellClasses } from '@mui/material/TableCell';
10+
11+
const StyledTableCell = styled(TableCell)(({ theme }) => ({
12+
[`&.${tableCellClasses.head}`]: {
13+
backgroundColor: theme.palette.common.black,
14+
color: theme.palette.common.white
15+
},
16+
[`&.${tableCellClasses.body}`]: {
17+
fontSize: 14
18+
}
19+
}));
20+
21+
const StyledTableRow = styled(TableRow)(({ theme }) => ({
22+
'&:nth-of-type(odd)': {
23+
backgroundColor: theme.palette.action.hover
24+
},
25+
// hide last border
26+
'&:last-child td, &:last-child th': {
27+
border: 0
28+
}
29+
}));
30+
31+
function createData(
32+
name: string,
33+
calories: number,
34+
fat: number,
35+
carbs: number,
36+
protein: number
37+
) {
38+
return { name, calories, fat, carbs, protein };
39+
}
40+
41+
const rows = [
42+
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
43+
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
44+
createData('Eclair', 262, 16.0, 24, 6.0),
45+
createData('Cupcake', 305, 3.7, 67, 4.3),
46+
createData('Gingerbread', 356, 16.0, 49, 3.9)
47+
];
48+
/* <Table style={{ width: 400, margin: 'auto' }}></Table> */
49+
// sx={{ width: '40%' }}
50+
export default function ContextTable({target}) {
51+
return (
52+
<TableContainer component={Paper}>
53+
<Table sx={{ width: '40%' }} aria-label="customized table">
54+
<TableHead>
55+
<TableRow>
56+
<StyledTableCell>Context</StyledTableCell>
57+
<StyledTableCell align="right">Component</StyledTableCell>
58+
</TableRow>
59+
</TableHead>
60+
<TableBody>
61+
{target.map((data, index) => (
62+
<StyledTableRow key={index}>
63+
<StyledTableCell component="th" scope="row">
64+
{data.key}
65+
</StyledTableCell>
66+
<StyledTableCell align="right">{data.value}</StyledTableCell>
67+
</StyledTableRow>
68+
))}
69+
</TableBody>
70+
</Table>
71+
</TableContainer>
72+
);
73+
}

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

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
//context stored in an object
2+
//it will have another object within to hold the key value pairs
3+
4+
import React, { Fragment } from 'react';
5+
import TextField from '@mui/material/TextField';
6+
import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
7+
import Button from '@mui/material/Button';
8+
import Table from '@mui/material/Table';
9+
import TableBody from '@mui/material/TableBody';
10+
import TableContainer from '@mui/material/TableContainer';
11+
import TableHead from '@mui/material/TableHead';
12+
import TableRow from '@mui/material/TableRow';
13+
import Paper from '@mui/material/Paper';
14+
import { styled } from '@mui/material/styles';
15+
import TableCell, { tableCellClasses } from '@mui/material/TableCell';
16+
17+
import ContextTable from './ContextTable';
18+
19+
20+
const filter = createFilterOptions();
21+
22+
const contextArr = [
23+
{
24+
name : 'theme',
25+
values: [
26+
{key: 'dark', value: 'black'},
27+
{key: 'light', value: 'white'},
28+
{key: 'darker', value: 'darkest'}
29+
]
30+
31+
},
32+
33+
{
34+
name : 'mood',
35+
values : [
36+
{key: 'happy', value: 'rainbow'},
37+
{key: 'sad', value: 'blue'},
38+
]
39+
}
40+
]
41+
42+
const StyledTableCell = styled(TableCell)(({ theme }) => ({
43+
[`&.${tableCellClasses.head}`]: {
44+
backgroundColor: theme.palette.common.black,
45+
color: theme.palette.common.white
46+
},
47+
[`&.${tableCellClasses.body}`]: {
48+
fontSize: 14
49+
}
50+
}));
51+
52+
const StyledTableRow = styled(TableRow)(({ theme }) => ({
53+
'&:nth-of-type(odd)': {
54+
backgroundColor: theme.palette.action.hover
55+
},
56+
// hide last border
57+
'&:last-child td, &:last-child th': {
58+
border: 0
59+
}
60+
}));
61+
62+
const CreatorForm = () => {
63+
// const arr = [1,2,3,4]
64+
const [value, setValue] = React.useState(null);
65+
66+
return (
67+
<Fragment>
68+
<Autocomplete
69+
value={value}
70+
onChange={(event, newValue) => {
71+
if (typeof newValue === 'string') {
72+
setValue({
73+
name: newValue,
74+
});
75+
} else if (newValue && newValue.inputValue) {
76+
// Create a new value from the user input
77+
setValue({
78+
name: newValue.inputValue,
79+
});
80+
} else {
81+
setValue(newValue);
82+
}
83+
}}
84+
filterOptions={(options, params) => {
85+
const filtered = filter(options, params);
86+
87+
const { inputValue } = params;
88+
// Suggest the creation of a new value
89+
const isExisting = options.some((option) => inputValue === option.name);
90+
if (inputValue !== '' && !isExisting) {
91+
filtered.push({
92+
inputValue,
93+
name: `Add "${inputValue}"`,
94+
});
95+
}
96+
97+
return filtered;
98+
}}
99+
selectOnFocus
100+
clearOnBlur
101+
handleHomeEndKeys
102+
id="free-solo-with-text-demo"
103+
options={contextArr}
104+
getOptionLabel={(option) => {
105+
// Value selected with enter, right from the input
106+
if (typeof option === 'string') {
107+
return option;
108+
}
109+
// Add "xxx" option created dynamically
110+
if (option.inputValue) {
111+
return option.inputValue;
112+
}
113+
// Regular option
114+
return option.name;
115+
}}
116+
renderOption={(props, option) => <li {...props}>{option.name}</li>}
117+
sx={{ width: 300 }}
118+
freeSolo
119+
renderInput={(params) => (
120+
<TextField {...params} label="Free solo with text demo" />
121+
)}
122+
/>
123+
<ContextTable target={contextArr[0].values}/>
124+
</Fragment>
125+
);
126+
}
127+
128+
export default CreatorForm;
129+

‎app/src/components/ContextAPIManager/ContextTree.tsx renamed to ‎app/src/components/ContextAPIManager/Display/ContextTree.tsx

File renamed without changes.

‎app/src/redux/actions/actions.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,13 @@ import * as types from '../constants/actionTypes';
33
export const darkModeToggle = () => ({
44
type: types.DARK_MODE_TOGGLE
55
});
6+
7+
export const addContextActionCreator = (contextName) => ({
8+
type: types.ADD_CONTEXT,
9+
payload: contextName,
10+
})
11+
12+
export const addContextValuesActionCreator = (newEntry) => ({
13+
type: types.ADD_CONTEXT_VALUES,
14+
payload: newEntry
15+
})

‎app/src/redux/constants/actionTypes.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,5 @@
22
export const DARK_MODE_TOGGLE = 'DARK_MODE_TOGGLE';
33
export const CODE_PREVIEW_SAVE = 'CODE_PREVIEW_SAVE';
44
export const CODE_PREVIEW_INPUT = 'CODE_PREVIEW_INPUT';
5+
export const ADD_CONTEXT = 'ADD_CONTEXT';
6+
export const ADD_CONTEXT_VALUES = 'ADD_CONTEXT_VALUES';

‎app/src/redux/reducers/rootReducer.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ import { combineReducers } from 'redux';
22

33
import darkModeReducer from './slice/darkModeSlice';
44
import codePreviewReducer from './slice/codePreviewSlice';
5+
import contextReducer from './slice/contextReducer';
56

67
const rootReducer = combineReducers({
78
darkModeSlice: darkModeReducer,
8-
codePreviewSlice: codePreviewReducer
9+
codePreviewSlice: codePreviewReducer,
910
// add the rest of your slice imports here
11+
contextSlice: contextReducer,
1012
});
1113

1214
export default rootReducer;

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import * as types from '../../constants/actionTypes';
2+
3+
const initialState = {
4+
allContext: []
5+
}
6+
7+
const contextReducer = (state = initialState, action) => {
8+
switch (action.type) {
9+
case types.ADD_CONTEXT:
10+
const newContext = {
11+
name: action.payload.trim(),
12+
values: [],
13+
}
14+
15+
return {
16+
...state,
17+
allContext: [...allContext, newContext]
18+
}
19+
default: {
20+
return state;
21+
}
22+
}
23+
}
24+
25+
export default contextReducer;

0 commit comments

Comments
 (0)