Skip to content

Commit

Permalink
Merge pull request #9 from oslabs-beta/ron-william-changes
Browse files Browse the repository at this point in the history 
Fixed delete state, indentation problems, context being replaced, link and switch separators in tree
  • Loading branch information
@crlim
crlim authored Nov 20, 2021
2 parents f04de67 + 5ede225 commit d66a08d
Show file tree
Hide file tree
Showing 7 changed files with 252 additions and 191 deletions.
11 changes: 5 additions & 6 deletions app/src/components/bottom/UseStateModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,16 @@ import Modal from '@material-ui/core/Modal';
import StateContext from '../../context/context';
import TableStateProps from '../right/TableStateProps';


function UseStateModal({ updateAttributeWithState, attributeToChange, childId }) {
const [state, dispatch] = useContext(StateContext);
const [open, setOpen] = useState(false);
const [displayObject, setDisplayObject] = useState(null)
const [stateKey, setStateKey] = useState('');
const [statePropsId, setStatePropsId] = useState(-1);
const [componentProviderId, setComponentProviderId] = useState(1);

// make buttons to choose which component to get state from
const [componentProviderId, setComponentProviderId] = useState(1) // for now set to App
const components = [];
// make tabs to choose which component to get state from
const componentTabs = [];
for (let i = 0; i < state.components.length; i ++) {
components.push(<button
onClick={() => {
Expand Down Expand Up @@ -43,11 +42,12 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
</div>
<div className="useState-window">
<div className="useState-dropdown">
{components}
{componentTabs}
</div>
<div className="useState-stateDisplay">
<TableStateProps
providerId = {componentProviderId}
canDeleteState = {false}
displayObject = {displayObject}
selectHandler={(table) => {
if (statePropsId < 0) setStatePropsId(table.row.id);
Expand All @@ -67,7 +67,6 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
setOpen(false);
}
}}
deleteHandler={() => func()}
isThemeLight={true}
/>
</div>
Expand Down
40 changes: 21 additions & 19 deletions app/src/components/right/StatePropsPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,8 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
const [inputKey, setInputKey] = useState("");
const [inputValue, setInputValue] = useState("");
const [inputType, setInputType] = useState("");

const [stateProps, setStateProps] = useState([]);

const [errorStatus, setErrorStatus] = useState(false);
const [errorMsg, setErrorMsg] = useState('');
// get currentComponent by using currently focused component's id
const currentId = state.canvasFocus.componentId;
const currentComponent = state.components[currentId - 1];
Expand Down Expand Up @@ -67,11 +66,25 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
setInputValue("");
setInputType("");
};
//reset error warning
const resetError = () => {
setErrorStatus(false);
};

// submit new stateProps entries to state context
let currKey;
const submitNewState = (e) => {
e.preventDefault();
const statesArray = currentComponent.stateProps;
//loop though array, access each obj at key property
let keyToInt = parseInt(inputKey[0]);
if(!isNaN(keyToInt)) {
setErrorStatus(true);
setErrorMsg('Key name can not start with int.');
return;
}

//return alert('key can not start with number');
const newState = {
// check if array is not empty => true find last elem in array. get id and increment by 1 || else 1
id: statesArray.length > 0 ? statesArray[statesArray.length-1].id + 1 : 1,
Expand All @@ -83,7 +96,8 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
dispatch({
type: 'ADD STATE',
payload: {newState: newState}
});
});
resetError();
clearForm();
};

Expand All @@ -102,20 +116,7 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
setInputValue(table.row.value);
} else clearForm();
};

// find & delete table row using its id
const handlerRowDelete = (id:any) => {
// iterate and filter out stateProps with matching row id
const filtered = currentComponent.stateProps.filter(element => element.id !== id);

dispatch({
type: 'DELETE STATE',
payload: {stateProps: filtered}
});

setStateProps(filtered);
};


return (
<div className={'state-panel'}>
<div>
Expand All @@ -126,6 +127,7 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
label="key:"
variant="outlined"
value={inputKey}
error={errorStatus}
onChange={(e) => setInputKey(e.target.value)}
className={isThemeLight ? `${classes.rootLight} ${classes.inputTextLight}` : `${classes.rootDark} ${classes.inputTextDark}`}
/>
Expand Down Expand Up @@ -196,7 +198,7 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
<h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
Current State Name: {state.components[state.canvasFocus.componentId - 1].name}
</h4>
<TableStateProps selectHandler={handlerRowSelect} deleteHandler={handlerRowDelete} isThemeLight={isThemeLight} />
<TableStateProps canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} />
</div>
</div>
);
Expand Down
149 changes: 88 additions & 61 deletions app/src/components/right/TableStateProps.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,72 +8,63 @@ import Button from '@material-ui/core/Button';
import ClearIcon from '@material-ui/icons/Clear';
import StateContext from '../../context/context';
import { makeStyles } from '@material-ui/core/styles';

import { StatePropsPanelProps } from '../../interfaces/Interfaces';

const getColumns = (props) => {
const { deleteHandler } : StatePropsPanelProps = props;
return [
{
field: 'id',
headerName: 'ID',
width: 70,
editable: false,
},
{
field: 'key',
headerName: 'Key',
width: 90,
editable: true,
},
{
field: 'value',
headerName: 'Value',
width: 90,
editable: true,
},
{
field: 'type',
headerName: 'Type',
width: 90,
editable: false,
},
{
field: 'delete',
headerName: 'X',
width: 70,
editable: false,
renderCell: function renderCell(params:any) {
const getIdRow = () => {
const { api } = params;
return params.id;

// return params.getValue(fields[0]);
};
return (
<Button style={{width:`${3}px`}}
onClick={() => {
deleteHandler(getIdRow());
}}>
<ClearIcon style={{width:`${15}px`}}/>
</Button>
);
},
},
];
};

const TableStateProps = (props) => {
const [state, dispatch] = useContext(StateContext);
const classes = useStyles();
const [state] = useContext(StateContext);
const [editRowsModel] = useState <GridEditRowsModel> ({});
const [gridColumns, setGridColumns] = useState([]);

const [rows, setRows] = useState([]);

const columnTabs = [
{
field: 'id',
headerName: 'ID',
width: 70,
editable: false,
},
{
field: 'key',
headerName: 'Key',
width: 90,
editable: true,
},
{
field: 'value',
headerName: 'Value',
width: 90,
editable: true,
},
{
field: 'type',
headerName: 'Type',
width: 90,
editable: false,
},
{
field: 'delete',
headerName: 'X',
width: 70,
editable: false,
renderCell: function renderCell(params:any) {
return (
<Button style={{width:`${3}px`}} onClick={() => {
deleteState(params.id)
}}>
<ClearIcon style={{width:`${15}px`}}/>
</Button>
);
},
},
];


useEffect(() => {
setGridColumns(getColumns(props));
}, [props.isThemeLight])
// get currentComponent by using currently focused component's id
const deleteState = (selectedId) => {
// get the current focused component
// remove the state that the button is clicked
// send a dispatch to rerender the table
const currentId = state.canvasFocus.componentId;
const currentComponent = state.components[currentId - 1];

Expand All @@ -97,13 +88,48 @@ const TableStateProps = (props) => {
}
}

const filtered = currentComponent.stateProps.filter(element => element.id !== selectedId);
dispatch({
type: 'DELETE STATE',
payload: {stateProps: filtered, rowId: selectedId}
});
}


useEffect(() => {
setGridColumns(columnTabs);
}, [props.isThemeLight])


const { selectHandler } : StatePropsPanelProps = props;

// when component gets mounted, sets the gridColumn

// the delete button needs to be updated to remove
// the states from the current focused component
useEffect(() => {
setGridColumns(getColumns(props));
}, []);
if(props.canDeleteState) {
setGridColumns(columnTabs);
}
else {
setGridColumns(columnTabs.slice(0, gridColumns.length - 1));
}
}, [state.canvasFocus.componentId]);

// when we switch between tabs in our modal or focus of our current
// component, we need to update the states displayed in our table
// we also need to update the table when the state is changed by
// deleting and adding component state
useEffect(() => {
if (!props.providerId) {
const currentId = state.canvasFocus.componentId;
const currentComponent = state.components[currentId - 1];
setRows(currentComponent.stateProps.slice());
} else {
const providerComponent = state.components[props.providerId - 1];
setRows(providerComponent.stateProps.slice());
}
}, [props.providerId, state]);

return (
<div className={'state-prop-grid'}>
<DataGrid
Expand All @@ -119,6 +145,7 @@ const TableStateProps = (props) => {
};



const useStyles = makeStyles({
themeLight: {
color: 'rgba(0,0,0,0.54)',
Expand Down
53 changes: 36 additions & 17 deletions app/src/containers/CustomizationPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,34 +207,52 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
};

// function to pass into UseStateModal to use state to update attribute
// const updateAttributeWithState = (attributeName, componentProviderId, statePropsId) => {
// // get the stateProps of the componentProvider
// const currentComponent = state.components[state.canvasFocus.componentId - 1];
// const providerComponent = state.components[componentProviderId - 1];
// const providerStates = providerComponent.stateProps;
// const newInput = providerStates[statePropsId - 1].value;
// let newContextObj = {...currentComponent.useContext};

// if(!newContextObj) {
// newContextObj = {};
// }

// if (!newContextObj[componentProviderId]) {
// newContextObj[componentProviderId] = {statesFromProvider : new Set()};
// }

// newContextObj[componentProviderId].statesFromProvider.add(statePropsId);
// }

const updateAttributeWithState = (attributeName, componentProviderId, statePropsId, statePropsRow, stateKey='') => {
const newInput = statePropsRow.value;

if (attributeName === 'compText') {
const newContextObj = useContextObj;
if (!newContextObj[componentProviderId]) {
newContextObj[componentProviderId] = {};
}
newContextObj[componentProviderId].compText = statePropsId;

// update/create stateUsed.compText
setStateUsedObj(Object.assign(stateUsedObj, {compText: stateKey}));
setCompText(newInput);
setUseContextObj(newContextObj);
dispatch({
type: 'UPDATE USE CONTEXT',
payload: { useContextObj: newContextObj}
});
// setUseContextObj(newContextObj);
}

if (attributeName === 'compLink') {
const newContextObj = useContextObj;
if (!newContextObj[componentProviderId]) {
newContextObj[componentProviderId] = {};
}
newContextObj[componentProviderId].compLink = statePropsId;
newContextObj[componentProviderId].compLink = statePropsId;

// update/create stateUsed.compLink
setStateUsedObj(Object.assign(stateUsedObj, {compLink: stateKey}));
setCompLink(newInput);
setUseContextObj(newContextObj);
dispatch({
type: 'UPDATE USE CONTEXT',
payload: { useContextObj: newContextObj}
});
// setUseContextObj(newContextObj);
}

}

const handleSave = (): Object => {
Expand All @@ -257,10 +275,11 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
payload: {stateUsedObj: stateUsedObj}
})

dispatch({
type: 'UPDATE USE CONTEXT',
payload: { useContextObj: useContextObj}
})
// console.log("useContextObj to be dispatched", useContextObj);
// dispatch({
// type: 'UPDATE USE CONTEXT',
// payload: { useContextObj: useContextObj}
// })

dispatch({
type: 'UPDATE CSS',
Expand Down
Loading

0 comments on commit d66a08d

Please sign in to comment.