Skip to content

Commit 5d9edde

Browse files
huypham048huypham048
committed
added context to redux store
Co-authored-by: Sal Saluga [email protected] Co-authored-by: Ken Bains [email protected] Co-authored-by: Bianca Picasso [email protected]
1 parent 904f870 commit 5d9edde

File tree

5 files changed

+220
-133
lines changed

5 files changed

+220
-133
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ import ContextAssigner from './AssignerComponents/ContextAssigner';
7979
import ContextTree from './Display/ContextTree';
8080

8181
export default function LabTabs() {
82-
const [value, setValue] = React.useState('1');
82+
const [value, setValue] = React.useState<string>('1');
8383

8484
const handleChange = (event: React.SyntheticEvent, newValue: string) => {
8585
setValue(newValue);

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

Lines changed: 40 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,52 @@
11
import { Typography } from '@material-ui/core';
2-
import React, {useEffect, useState } from 'react';
3-
import { useStore } from 'react-redux'
2+
import React, { useEffect, useState } from 'react';
3+
import { useStore } from 'react-redux';
4+
import { useDispatch } from 'react-redux';
45

5-
import CreatorForm from './CreatorForm';
6+
import CreatorForm from './CreatorForm';
7+
import * as actions from '../../../redux/actions/actions';
68

79
const ContextCreator = () => {
810
const store = useStore();
9-
const [state, setState] = useState([]);
10-
11+
const [state, setState] = useState(null);
12+
const [isReady, setIsReady] = useState(false);
13+
1114
useEffect(() => {
12-
setState(store.getState().contextSlice)
13-
}, [])
15+
setState(store.getState().contextSlice);
16+
setIsReady(true);
17+
}, []);
18+
19+
const dispatch = useDispatch();
20+
21+
const handleClickSelectContext = contextInput => {
22+
// console.log(document.getElementById('autoCompleteContextField'));
23+
24+
dispatch(actions.addContextActionCreator(contextInput));
25+
setState(prevState => {
26+
return {
27+
...prevState,
28+
allContext: [...prevState.allContext, contextInput]
29+
};
30+
});
31+
};
32+
33+
const handleClickInputData = ({ name }, { inputKey, inputValue }) => {
34+
dispatch(
35+
actions.addContextValuesActionCreator({ name, inputKey, inputValue })
36+
);
37+
};
38+
1439
return (
1540
<>
16-
<CreatorForm contextStore={state}/>
41+
{isReady && (
42+
<CreatorForm
43+
contextStore={state}
44+
handleClickSelectContext={handleClickSelectContext}
45+
handleClickInputData={handleClickInputData}
46+
/>
47+
)}
1748
</>
18-
)
49+
);
1950
};
2051

2152
export default ContextCreator;

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

Lines changed: 149 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
//it will have another object within to hold the key contextInput pairs
33

44
import React, { Fragment, useState, useEffect } from 'react';
5-
import { useDispatch } from 'react-redux'
5+
66
import TextField from '@mui/material/TextField';
77
import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
88
import Button from '@mui/material/Button';
@@ -17,30 +17,29 @@ import TableCell, { tableCellClasses } from '@mui/material/TableCell';
1717
import Box from '@mui/material/Box';
1818

1919
import ContextTable from './ContextTable';
20-
20+
import { Typography } from '@mui/material';
2121

2222
const filter = createFilterOptions();
2323

24-
const contextArr = [
25-
{
26-
name : 'theme',
27-
contextInputs: [
28-
{key: 'dark', contextInput: 'black'},
29-
{key: 'light', contextInput: 'white'}
30-
]
31-
32-
},
33-
34-
{
35-
name : 'mood',
36-
contextInputs : [
37-
{key: 'happy', contextInput: 'rainbow'},
38-
{key: 'sad', contextInput: 'blue'},
39-
]
40-
}
41-
]
42-
43-
//START - Table styling
24+
// const contextArr = [
25+
// {
26+
// name: 'theme',
27+
// contextInputs: [
28+
// { key: 'dark', contextInput: 'black' },
29+
// { key: 'light', contextInput: 'white' }
30+
// ]
31+
// },
32+
33+
// {
34+
// name: 'mood',
35+
// contextInputs: [
36+
// { key: 'happy', contextInput: 'rainbow' },
37+
// { key: 'sad', contextInput: 'blue' }
38+
// ]
39+
// }
40+
// ];
41+
42+
//START - Table styling
4443
const StyledTableCell = styled(TableCell)(({ theme }) => ({
4544
[`&.${tableCellClasses.head}`]: {
4645
backgroundColor: theme.palette.common.black,
@@ -62,95 +61,139 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
6261
}));
6362
//END - table styling
6463

65-
66-
67-
const CreatorForm = ({contextStore}) => {
68-
// const [contextInput, setContextInput] = useState('');
69-
64+
const CreatorForm = ({
65+
contextStore,
66+
handleClickSelectContext,
67+
handleClickInputData
68+
}) => {
7069
//array storing all contexts
71-
const {allContext} = contextStore
72-
73-
const [contextInput, setContextInput] = React.useState(null);
74-
75-
76-
const dispatch = useDispatch()
77-
78-
const handleClickSelectContext = () => {
79-
console.log(document.getElementById("autoCompleteContextField"))
80-
console.log('COMING FROM CLICK EVENT', contextInput);
81-
82-
// dispatch({type: })
83-
}
70+
const { allContext } = contextStore;
8471

72+
const [contextInput, setContextInput] = React.useState(null);
73+
const [dataContext, setDataContext] = React.useState({
74+
inputKey: '',
75+
inputValue: ''
76+
});
77+
78+
const handleChange = e => {
79+
setDataContext(prevDataContext => {
80+
return {
81+
...prevDataContext,
82+
[e.target.name]: e.target.value
83+
};
84+
});
85+
};
86+
87+
const handleClick = () => {
88+
if (contextInput === '' || contextInput === null) return;
89+
const temp = contextInput;
90+
setContextInput('');
91+
handleClickSelectContext(temp);
92+
};
8593

8694
return (
8795
<Fragment>
88-
<Box
89-
sx={{ display: 'flex'}} >
90-
<Autocomplete
91-
id="autoCompleteContextField"
92-
value={contextInput}
93-
onChange={(event, newValue) => {
94-
if (typeof newValue === 'string') {
95-
setContextInput({
96-
name: newValue,
97-
});
98-
} else if (newValue && newValue.inputValue) {
99-
// Create a new contextInput from the user input
100-
setContextInput({
101-
name: newValue.inputValue,
102-
});
103-
} else {
104-
setContextInput(newValue);
105-
}
106-
}}
107-
filterOptions={(options, params) => {
108-
const filtered = filter(options, params);
109-
110-
const { inputValue } = params;
111-
// Suggest the creation of a new contextInput
112-
const isExisting = options.some((option) => inputValue === option.name);
113-
if (inputValue !== '' && !isExisting) {
114-
filtered.push({
115-
inputValue,
116-
name: `Add "${inputValue}"`,
117-
});
118-
}
119-
120-
return filtered;
121-
}}
122-
selectOnFocus
123-
clearOnBlur
124-
handleHomeEndKeys
125-
id="free-solo-with-text-demo"
126-
options={allContext || []}
127-
getOptionLabel={(option) => {
128-
// Value selected with enter, right from the input
129-
if (typeof option === 'string') {
130-
return option;
131-
}
132-
// Add "xxx" option created dynamically
133-
if (option.inputValue) {
134-
return option.inputValue;
135-
}
136-
// Regular option
137-
return option.name;
138-
}}
139-
renderOption={(props, option) => <li {...props}>{option.name}</li>}
140-
sx={{ width: 300 }}
141-
freeSolo
142-
renderInput={(params) => (
143-
<TextField {...params} label="Free solo with text demo" />
144-
)}
145-
/>
146-
<Button variant="contained" onClick={handleClickSelectContext}>Select/Create</Button>
147-
{/* <Button variant="contained">Delete</Button> */}
148-
</Box>
149-
<ContextTable target={contextArr[0].contextInputs}/>
150-
151-
</Fragment>
96+
{/* Input box for context */}
97+
<Typography style={{ color: 'black' }} variant="h6" gutterBottom={true}>
98+
Context Input
99+
</Typography>
100+
<Box sx={{ display: 'flex', gap: 2, mb: 4 }}>
101+
<Autocomplete
102+
id="autoCompleteContextField"
103+
value={contextInput}
104+
onChange={(event, newValue) => {
105+
if (typeof newValue === 'string') {
106+
setContextInput({
107+
name: newValue
108+
});
109+
} else if (newValue && newValue.inputValue) {
110+
// Create a new contextInput from the user input
111+
setContextInput({
112+
name: newValue.inputValue
113+
});
114+
} else {
115+
setContextInput(newValue);
116+
}
117+
}}
118+
filterOptions={(options, params) => {
119+
const filtered = filter(options, params);
120+
121+
const { inputValue } = params;
122+
// Suggest the creation of a new contextInput
123+
const isExisting = options.some(
124+
option => inputValue === option.name
125+
);
126+
if (inputValue !== '' && !isExisting) {
127+
filtered.push({
128+
inputValue,
129+
name: `Add "${inputValue}"`
130+
});
131+
}
132+
133+
return filtered;
134+
}}
135+
selectOnFocus
136+
clearOnBlur
137+
handleHomeEndKeys
138+
id="free-solo-with-text-demo"
139+
options={allContext || []}
140+
getOptionLabel={option => {
141+
// Value selected with enter, right from the input
142+
if (typeof option === 'string') {
143+
return option;
144+
}
145+
// Add "xxx" option created dynamically
146+
if (option.inputValue) {
147+
return option.inputValue;
148+
}
149+
// Regular option
150+
return option.name;
151+
}}
152+
renderOption={(props, option) => <li {...props}>{option.name}</li>}
153+
sx={{ width: 300 }}
154+
freeSolo
155+
renderInput={params => (
156+
<TextField {...params} label="Create/Select Context" />
157+
)}
158+
/>
159+
<Button variant="contained" onClick={handleClick}>
160+
Create
161+
</Button>
162+
{/* <Button variant="contained">Delete</Button> */}
163+
</Box>
164+
165+
{/* Input box for context data */}
166+
<Typography style={{ color: 'black' }} variant="h6" gutterBottom={true}>
167+
Add context data
168+
</Typography>
169+
<Box sx={{ display: 'flex', gap: 2 }}>
170+
<TextField
171+
id="outlined-basic"
172+
label="Key"
173+
variant="outlined"
174+
value={dataContext.inputKey}
175+
name="inputKey"
176+
onChange={e => handleChange(e)}
177+
/>
178+
<TextField
179+
id="outlined-basic"
180+
label="Value"
181+
variant="outlined"
182+
value={dataContext.inputValue}
183+
name="inputValue"
184+
onChange={e => handleChange(e)}
185+
/>
186+
<Button
187+
variant="contained"
188+
onClick={() => handleClickInputData(contextInput, dataContext)}
189+
>
190+
Save
191+
</Button>
192+
</Box>
193+
194+
{/* <ContextTable target={contextArr[0].contextInputs}/> */}
195+
</Fragment>
152196
);
153-
}
197+
};
154198

155199
export default CreatorForm;
156-

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ export const darkModeToggle = () => ({
44
type: types.DARK_MODE_TOGGLE
55
});
66

7-
export const addContextActionCreator = (contextName) => ({
7+
export const addContextActionCreator = contextName => ({
88
type: types.ADD_CONTEXT,
9-
payload: contextName,
10-
})
9+
payload: contextName
10+
});
1111

12-
export const addContextValuesActionCreator = (newEntry) => ({
12+
export const addContextValuesActionCreator = newEntry => ({
1313
type: types.ADD_CONTEXT_VALUES,
1414
payload: newEntry
15-
})
15+
});

0 commit comments

Comments
 (0)