Skip to content

Commit 8ff9f39

Browse files
committed
Merge branch 'dev' of https://github.com/oslabs-beta/ReacType into dev
2 parents f207b8a + 2029bb1 commit 8ff9f39

File tree

6 files changed

+37
-15
lines changed

6 files changed

+37
-15
lines changed

app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -255,9 +255,10 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
255255
Save
256256
</MyButton>
257257
<br></br>
258+
258259
</FormControl>
259260
</div>
260-
<br></br>
261+
<br></br>
261262
<div style={{display: 'flex', overflowX: 'scroll', width: '1700px'}}>
262263
<div style={{display: 'flex', flexDirection: 'column'}}>
263264
<h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
@@ -284,9 +285,6 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
284285
</h4>
285286
<TablePassedInProps canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
286287
</div>
287-
288-
289-
290288
</div>
291289
</div>
292290
);

app/src/components/StateManagement/CreateTab/components/TableParentProps.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ const TableParentProps = props => {
100100
//let rows = parentProps;
101101
let rows;
102102

103-
if (currentComponent.name === 'App') {rows = []}
103+
if (currentComponent.name === 'App' || currentComponent.name === 'index') {rows = []}
104104
else {
105105
if (parentProps) {
106106
rows = parentProps;

app/src/components/StateManagement/CreateTab/components/TablePassedInProps.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ const TablePassedInProps = props => {
1818
const [gridColumns, setGridColumns] = useState([]);
1919
const currentId = state.canvasFocus.componentId;
2020
const currentComponent = state.components[currentId - 1];
21-
const passedInProps = currentComponent.name !== 'App' ? currentComponent.passedInProps : '';
22-
21+
const passedInProps = (currentComponent.name !== 'App' && currentComponent.name !== 'index')? currentComponent.passedInProps : '';
22+
2323
const columnTabs = [
2424
{
2525
field: 'id',

app/src/components/StateManagement/DisplayTab/DisplayContainer.tsx

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,28 @@
1-
import React, {useState} from 'react';
1+
import React, {useState, useContext} from 'react';
22
import Tree from './Tree';
33
import Divider from '@mui/material/Divider';
44
import Grid from '@mui/material/Grid';
55
import DataTable from './DataTable';
66
import { Typography } from '@mui/material';
7+
import StateContext from '../../../context/context';
78

89
function DisplayContainer({data, props}) { // "data" is referring to components from state - passed in from StateManagement
910

1011
//grabbing intialized state from App using the UseContext to put in lines 16 and 17
1112
const [currComponentState, setCurrComponentState] = useState([]);
1213
const [parentProps, setParentProps] = useState([]);
13-
const [clickedComp, setClickedComp] = useState('App');
14+
const [state, dispatch] = useContext(StateContext);
1415

16+
17+
// check projectType. If it's 'Classic React', title should read 'App'. Otherwise it's Next.js or Gatsby which uses 'index'
18+
let root;
19+
if (state.projectType === "Classic React") {
20+
root = 'App';
21+
} else {
22+
root = 'index';
23+
}
24+
const [clickedComp, setClickedComp] = useState(root);
25+
1526
return (
1627
<div style={{display: 'flex'}}>
1728
{<Tree data = {data} currComponentState={currComponentState} setCurrComponentState ={setCurrComponentState} parentProps={parentProps} setParentProps={setParentProps} setClickedComp={setClickedComp} />}

app/src/components/right/ComponentPanel.tsx

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
3434
setErrorMsg('Component name must start with a letter.');
3535
} else if (type === 'symbolsDetected') {
3636
setErrorMsg('Component name must not contain symbols.');
37+
} else if (type === 'rootDupe') {
38+
setErrorMsg('Component name cannot be root component name.');
3739
}
3840
};
3941

@@ -47,19 +49,27 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
4749
};
4850

4951
// check if name of new component is the same as an existing component
50-
const checkNameDupe = (inputName: String) => {
52+
const checkNameDupe = (inputName: String): boolean => {
5153
let checkList = state.components.slice(); // makes copy of components array
54+
let dupe = false;
5255

5356
// checks to see if inputted comp name already exists
54-
let dupe = false;
5557
checkList.forEach(comp => {
56-
if (comp.name.toLowerCase() === inputName.toLowerCase()) {
57-
dupe = true;
58-
}
58+
if (comp.name.toLowerCase() === inputName.toLowerCase()) dupe = true
5959
});
60+
6061
return dupe;
6162
};
6263

64+
const checkIfRoot = (inputName: String): boolean => {
65+
let rootDupe = false;
66+
// checks to see if inputted comp name is equal to root component name. Want to prevent that
67+
if (inputName.toLowerCase() === 'index'|| inputName.toLowerCase() === 'app') {
68+
rootDupe = true;
69+
}
70+
return rootDupe;
71+
}
72+
6373
// "Root" components are not draggable into the main canvas
6474
// If next.js or Gatsby.js mode is on, root components will be separate pages
6575
const toggleRootStatus = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -105,6 +115,9 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
105115
} else if (checkNameDupe(compName)) {
106116
triggerError('dupe');
107117
return;
118+
} else if (checkIfRoot(compName)) {
119+
triggerError('rootDupe');
120+
return;
108121
}
109122
createOption(compName);
110123
resetError();

app/src/reducers/componentReducer.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -825,7 +825,7 @@ const reducer = (state: State, action: Action) => {
825825
//find all instances of state within child elements and delete state
826826

827827

828-
if (component.name !== 'App') {
828+
if (component.name !== 'App' && component.name !== 'index') {
829829
component.passedInProps.forEach((prop, i) => {
830830
if(prop.id === action.payload.rowId) {
831831
component.passedInProps.splice(i,1);

0 commit comments

Comments
 (0)