Skip to content

Commit 32887be

Browse files
ken-Bainsken-Bains
committed
code cleanup and refactoring
1 parent dcfb38b commit 32887be

File tree

4 files changed

+65
-59
lines changed

4 files changed

+65
-59
lines changed

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

Lines changed: 60 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { Typography } from '@mui/material';
2121

2222
const filter = createFilterOptions();
2323

24-
//START - Table styling
24+
//START - Table styling ------------
2525
const StyledTableCell = styled(TableCell)(({ theme }) => ({
2626
[`&.${tableCellClasses.head}`]: {
2727
backgroundColor: theme.palette.common.black,
@@ -41,7 +41,7 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
4141
border: 0
4242
}
4343
}));
44-
//END - table styling
44+
//END - table styling --------------------------
4545

4646
const CreatorForm = ({
4747
contextStore,
@@ -69,6 +69,7 @@ const CreatorForm = ({
6969
setTableState(targetContext.values);
7070
};
7171

72+
// START - autocomplete functionality ----------------
7273
const handleChange = e => {
7374
setDataContext(prevDataContext => {
7475
return {
@@ -85,6 +86,59 @@ const CreatorForm = ({
8586
handleClickSelectContext(temp);
8687
};
8788

89+
const autoOnChange = (event, newValue) => {
90+
if (typeof newValue === 'string') {
91+
setContextInput({
92+
name: newValue
93+
});
94+
} else if (newValue && newValue.inputValue) {
95+
// Create a new contextInput from the user input
96+
setContextInput({
97+
name: newValue.inputValue
98+
});
99+
} else {
100+
setContextInput(newValue);
101+
renderTable(newValue);
102+
}
103+
};
104+
105+
const autoFitler = (options, params) => {
106+
const filtered = filter(options, params);
107+
108+
const { inputValue } = params;
109+
// Suggest the creation of a new contextInput
110+
const isExisting = options.some(
111+
option => inputValue === option.name
112+
// console.log(inputValue)
113+
);
114+
if (inputValue !== '' && !isExisting) {
115+
filtered.push({
116+
inputValue,
117+
name: `Add "${inputValue}"`
118+
});
119+
}
120+
121+
return filtered;
122+
};
123+
124+
const autoGetOptions = option => {
125+
// Value selected with enter, right from the input
126+
if (typeof option === 'string') {
127+
return option;
128+
}
129+
// Add "xxx" option created dynamically
130+
if (option.inputValue) {
131+
return option.inputValue;
132+
}
133+
// Regular option
134+
return option.name;
135+
};
136+
137+
const autoRenderOptions = (props, option) => (
138+
<li {...props}>{option.name}</li>
139+
);
140+
// END - autocomplete --------------------------
141+
88142
return (
89143
<Fragment>
90144
{/* Input box for context */}
@@ -95,66 +149,18 @@ const CreatorForm = ({
95149
<Autocomplete
96150
id="autoCompleteContextField"
97151
value={contextInput}
98-
onChange={(event, newValue) => {
99-
if (typeof newValue === 'string') {
100-
setContextInput({
101-
name: newValue
102-
});
103-
} else if (newValue && newValue.inputValue) {
104-
// Create a new contextInput from the user input
105-
setContextInput({
106-
name: newValue.inputValue
107-
});
108-
} else {
109-
setContextInput(newValue);
110-
renderTable(newValue);
111-
}
112-
}}
113-
filterOptions={(options, params) => {
114-
const filtered = filter(options, params);
115-
116-
const { inputValue } = params;
117-
// Suggest the creation of a new contextInput
118-
const isExisting = options.some(
119-
option => inputValue === option.name
120-
// console.log(inputValue)
121-
);
122-
if (inputValue !== '' && !isExisting) {
123-
filtered.push({
124-
inputValue,
125-
name: `Add "${inputValue}"`
126-
});
127-
}
128-
129-
return filtered;
130-
}}
152+
onChange={autoOnChange}
153+
filterOptions={autoFitler}
131154
selectOnFocus
132155
clearOnBlur
133156
handleHomeEndKeys
134-
id="free-solo-with-text-demo"
135157
options={allContext || []}
136-
getOptionLabel={option => {
137-
// Value selected with enter, right from the input
138-
if (typeof option === 'string') {
139-
return option;
140-
}
141-
// Add "xxx" option created dynamically
142-
if (option.inputValue) {
143-
return option.inputValue;
144-
}
145-
// Regular option
146-
return option.name;
147-
}}
148-
renderOption={(props, option) => <li {...props}>{option.name}</li>}
158+
getOptionLabel={autoGetOptions}
159+
renderOption={autoRenderOptions}
149160
sx={{ width: 300 }}
150161
freeSolo
151162
renderInput={params => (
152163
<TextField {...params} label="Create/Select Context" />
153-
// <TextField
154-
// {...params}
155-
// label="Free solo with text demo"
156-
// onKeyUp={() => console.log(params.inputProps.value)}
157-
// />
158164
)}
159165
/>
160166
<Button variant="contained" onClick={handleClick}>

‎app/src/components/login/FBPassWord.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,7 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = props => {
195195
>
196196
Sign Up
197197
</Button>+
198-
<Grid container justify="flex-end">
198+
<Grid container justifyContent="flex-end">
199199
<Grid item>
200200
<RouteLink to={`/login`} className="nav_link">
201201
Already have an account? Sign In

‎app/src/components/login/SignUp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -310,7 +310,7 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = props => {
310310
>
311311
Sign Up
312312
</Button>
313-
<Grid container justify="flex-end">
313+
<Grid container justifyContent="flex-end">
314314
<Grid item>
315315
<RouteLink style={{color: props.darkMode ? '#aaaaaa' : 'black'}} to={`/login`} className="nav_link">
316316
Already have an account? Sign In

‎app/src/components/right/ComponentDrag.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
1919
<div className={classes.panelWrapperList}>
2020
{/* Heading just below ADD button */}
2121
<h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>{state.projectType === 'Next.js' || state.projectType === 'Gatsby.js' ? 'Pages' : 'Root Components'}</h4>
22-
<Grid container direction="row" justify="center" alignItems="center">
22+
<Grid container direction="row" justifyContent="center" alignItems="center">
2323
{state.components
2424
.filter(comp => state.rootComponents.includes(comp.id))
2525
.map(comp => {
@@ -38,7 +38,7 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
3838
</Grid>
3939
{/* Display all reusable components */}
4040
<h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>Reusable Components</h4>
41-
<Grid container direction="row" justify="center" alignItems="center">
41+
<Grid container direction="row" justifyContent="center" alignItems="center">
4242
{state.components
4343
.filter(comp => !state.rootComponents.includes(comp.id))
4444
.map(comp => {
@@ -61,7 +61,7 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
6161
<Grid
6262
container
6363
direction="row"
64-
justify="center"
64+
justifyContent="center"
6565
alignItems="center"
6666
>
6767
<ComponentPanelRoutingItem key={'premadecomp-1'} />

0 commit comments

Comments
 (0)