Skip to content

Commit eddd88d

Browse files
diegovazqueznydiegovazquezny
authored
Merge pull request #13 from jinsoolim/customel
Customel
2 parents 9aa1b9f + c3e7a7b commit eddd88d

25 files changed

+76
-64
lines changed

‎app/src/components/App.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import '../public/styles/style.css';
33
import { DndProvider } from 'react-dnd';
44
import { HTML5Backend } from 'react-dnd-html5-backend';
55
import AppContainer from '../containers/AppContainer';
6-
import { stateContext } from '../context/context';
6+
import { StateContext } from '../context/context';
77
import initialState from '../context/initialState';
88
import reducer from '../reducers/componentReducer';
99
import localforage from 'localforage';
@@ -13,7 +13,6 @@ import Cookies from 'js-cookie';
1313
// Intermediary component to wrap main App component with higher order provider components
1414
export const App = (): JSX.Element => {
1515
const [state, dispatch] = useReducer(reducer, initialState);
16-
1716
// checks if user is signed in as guest or actual user and changes loggedIn boolean accordingly
1817
if (window.localStorage.getItem('ssid') !== 'guest') {
1918
state.isLoggedIn = true;
@@ -81,9 +80,9 @@ export const App = (): JSX.Element => {
8180
>
8281
ReacType
8382
</header>
84-
<stateContext.Provider value={[state, dispatch]}>
83+
<StateContext.Provider value={[state, dispatch]}>
8584
<AppContainer />
86-
</stateContext.Provider>
85+
</StateContext.Provider>
8786
</DndProvider>
8887
</div>
8988
);

‎app/src/components/bottom/BottomPanel.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useContext } from 'react';
2-
import { stateContext } from '../../context/context';
2+
// import { StateContext } from '../../context/context';
33
import BottomTabs from './BottomTabs';
44
import { Resizable } from 're-resizable';
55

@@ -11,6 +11,7 @@ const BottomPanel = () => {
1111
enable={{
1212
top: true
1313
}}
14+
minHeight={'25%'}
1415
>
1516
<div className="bottom-panel">
1617
<BottomTabs />

‎app/src/components/bottom/BottomTabs.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, useContext } from 'react';
22
import { makeStyles } from '@material-ui/core/styles';
3-
import { stateContext } from '../../context/context';
3+
import { StateContext } from '../../context/context';
44
import Tabs from '@material-ui/core/Tabs';
55
import Tab from '@material-ui/core/Tab';
66
import CodePreview from './CodePreview';
@@ -12,7 +12,7 @@ import FormControl from '@material-ui/core/FormControl';
1212

1313
const BottomTabs = () => {
1414
// state that controls which tab the user is on
15-
const [state, dispatch] = useContext(stateContext);
15+
const [state, dispatch] = useContext(StateContext);
1616
const [tab, setTab] = useState(0);
1717
const classes = useStyles();
1818
treeWrapper: HTMLDivElement;

‎app/src/components/bottom/CodePreview.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useContext, useState } from 'react';
2-
import { stateContext } from '../../context/context';
2+
import { StateContext } from '../../context/context';
33
import AceEditor from 'react-ace';
44
import { makeStyles } from '@material-ui/core/styles';
55
import 'ace-builds/src-noconflict/mode-javascript';
@@ -23,7 +23,7 @@ import { Component } from '../../interfaces/Interfaces';
2323
// const optionColor = '#252526';
2424

2525
const CodePreview = ({ theme, setTheme }) => {
26-
const [state, dispatch] = useContext(stateContext);
26+
const [state, dispatch] = useContext(StateContext);
2727
// const classes = useStyles();
2828
const currentComponent = state.components.find(
2929
(elem: Component) => elem.id === state.canvasFocus.componentId

‎app/src/components/left/ComponentPanel.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useContext } from 'react';
2-
import { stateContext } from '../../context/context';
2+
import { StateContext } from '../../context/context';
33
import Grid from '@material-ui/core/Grid';
44
import ComponentPanelItem from './ComponentPanelItem';
55
import ComponentPanelRoutingItem from './ComponentPanelRoutingItem';
@@ -14,7 +14,7 @@ import { makeStyles } from '@material-ui/core/styles';
1414
// The component panel section of the left panel displays all components and has the ability to add new components
1515
const ComponentPanel = (): JSX.Element => {
1616
const classes = useStyles();
17-
const [state, dispatch] = useContext(stateContext);
17+
const [state, dispatch] = useContext(StateContext);
1818

1919
//state hooks for inputted component name, component id and array of components
2020
const [errorStatus, setErrorStatus] = useState(false);

‎app/src/components/left/ComponentPanelItem.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useContext } from 'react';
22
import Grid from '@material-ui/core/Grid';
33
import { makeStyles } from '@material-ui/core/styles';
4-
import { stateContext } from '../../context/context';
4+
import { StateContext } from '../../context/context';
55
import { useDrag } from 'react-dnd';
66
import { ItemTypes } from '../../constants/ItemTypes';
77

@@ -13,7 +13,8 @@ const ComponentPanelItem: React.FC<{
1313
isFocus: boolean;
1414
}> = ({ name, id, root, isFocus }) => {
1515
const classes = useStyles();
16-
const [state, dispatch] = useContext(stateContext);
16+
const [state, dispatch] = useContext(StateContext);
17+
1718
// useDrag hook allows components in left panel to be drag source
1819
const [{ isDragging }, drag] = useDrag({
1920
item: {

‎app/src/components/left/ComponentPanelRoutingItem.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useContext, useState } from 'react';
22
import Grid from '@material-ui/core/Grid';
33
import { makeStyles } from '@material-ui/core/styles';
4-
import { stateContext } from '../../context/context';
4+
import { StateContext } from '../../context/context';
55
import { useDrag } from 'react-dnd';
66
import { ItemTypes } from '../../constants/ItemTypes';
77
import MenuItem from '@material-ui/core/MenuItem';
@@ -10,7 +10,7 @@ import Select from '@material-ui/core/Select';
1010
// a component panel routing item is a Next.js component that allows the user to navigate between pages
1111
const ComponentPanelRoutingItem: React.FC<{}> = () => {
1212
const classes = useStyles();
13-
const [state, dispatch] = useContext(stateContext);
13+
const [state, dispatch] = useContext(StateContext);
1414

1515
// find the root components that can be associated with a route
1616
// These will be the components that are displayed in the dropdown

‎app/src/components/left/HTMLItem.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const HTMLItem: React.FC<{
5656
marginLeft: '5px'
5757
}}
5858
>
59-
{Icon && <Icon />}
59+
{/* {Icon && <Icon />} */}
6060
</span>
6161
</div>
6262
</Grid>

‎app/src/components/left/HTMLPanel.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, useContext } from 'react';
22
import Grid from '@material-ui/core/Grid';
3-
import { stateContext } from '../../context/context';
3+
import { StateContext } from '../../context/context';
44
import HTMLItem from './HTMLItem';
55
import { makeStyles } from '@material-ui/core/styles';
66

@@ -10,7 +10,7 @@ const HTMLPanel = (): JSX.Element => {
1010
const [tag, setTag] = useState('');
1111
const [name, setName] = useState('');
1212
const [currentID, setCurrentID] = useState(12);
13-
const [state, dispatch] = useContext(stateContext);
13+
const [state, dispatch] = useContext(StateContext);
1414
const [errorMsg, setErrorMsg] = useState('');
1515
const [errorStatus, setErrorStatus] = useState(false);
1616

@@ -79,7 +79,8 @@ const HTMLPanel = (): JSX.Element => {
7979
type: 'ADD ELEMENT',
8080
payload: newElement
8181
});
82-
setCurrentID(currentID + 1);
82+
const nextID = currentID + 1;
83+
setCurrentID(nextID);
8384
setTag('');
8485
setName('');
8586
};

‎app/src/components/main/Canvas.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React, { useContext } from 'react';
22
import { useDrop, DropTargetMonitor } from 'react-dnd';
33
import { ItemTypes } from '../../constants/ItemTypes';
4-
import { stateContext } from '../../context/context';
4+
import { StateContext } from '../../context/context';
55
import { Component, DragItem } from '../../interfaces/Interfaces';
66
import { combineStyles } from '../../helperFunctions/combineStyles';
77
import renderChildren from '../../helperFunctions/renderChildren';
88

99
function Canvas() {
10-
const [state, dispatch] = useContext(stateContext);
10+
const [state, dispatch] = useContext(StateContext);
1111

1212
// find the current component to render on the canvas
1313
const currentComponent: Component = state.components.find(

‎app/src/components/main/DirectChildComponent.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ import {
77
} from '../../interfaces/Interfaces';
88
import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
99
import { ItemTypes } from '../../constants/ItemTypes';
10-
import { stateContext } from '../../context/context';
10+
import { StateContext } from '../../context/context';
1111
import { combineStyles } from '../../helperFunctions/combineStyles';
1212
import IndirectChild from './IndirectChild';
1313
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
1414

1515
function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
16-
const [state, dispatch] = useContext(stateContext);
16+
const [state, dispatch] = useContext(StateContext);
1717
const ref = useRef(null);
1818

1919
// find the top-level component corresponding to this instance of the component
@@ -98,15 +98,15 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
9898
</IndirectChild>
9999
);
100100
} else if (child.type === 'HTML Element') {
101-
// if indirect chidl is an HTML element, render an IndirectChild component with no children
101+
// if indirect child is an HTML element, render an IndirectChild component with no children
102102
// if the HTML element has children, then also render its children
103103
// get the default style/placeholder value for that type of HTML element
104104
// combine the default style of that HTML element and combine in with the custom styles applied to that element
105105
const HTMLType: HTMLType = state.HTMLTypes.find(
106106
(type: HTMLType) => type.id === child.typeId
107107
);
108108
const HTMLDefaultStyle = HTMLType.style;
109-
const HTMLDefaultPlacholder = HTMLType.placeHolderShort;
109+
const HTMLDefaultPlaceholder = HTMLType.placeHolderShort;
110110
const combinedStyle = combineStyles(HTMLDefaultStyle, child.style);
111111
return (
112112
<React.Fragment
@@ -119,7 +119,7 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
119119
{child.children.length === 0 ? (
120120
<IndirectChild
121121
style={combinedStyle}
122-
placeHolder={HTMLDefaultPlacholder}
122+
placeHolder={HTMLDefaultPlaceholder}
123123
linkId={null}
124124
key={
125125
'indChild' +
@@ -132,7 +132,7 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
132132
) : (
133133
<IndirectChild
134134
style={combinedStyle}
135-
placeHolder={HTMLDefaultPlacholder}
135+
placeHolder={HTMLDefaultPlaceholder}
136136
linkId={null}
137137
key={
138138
'indChild' +

‎app/src/components/main/DirectChildHTML.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
} from '../../interfaces/Interfaces';
88
import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
99
import { ItemTypes } from '../../constants/ItemTypes';
10-
import { stateContext } from '../../context/context';
10+
import { StateContext } from '../../context/context';
1111
import { combineStyles } from '../../helperFunctions/combineStyles';
1212
import IndirectChild from './IndirectChild';
1313
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
@@ -18,7 +18,7 @@ function DirectChildHTML({
1818
typeId,
1919
style,
2020
}: ChildElement) {
21-
const [state, dispatch] = useContext(stateContext);
21+
const [state, dispatch] = useContext(StateContext);
2222
const ref = useRef(null);
2323

2424
// find the HTML element corresponding with this instance of an HTML element
@@ -66,7 +66,6 @@ function DirectChildHTML({
6666
combineStyles(combineStyles(globalDefaultStyle, HTMLType.style), style),
6767
interactiveStyle
6868
);
69-
7069
return (
7170
<div onClick={onClickHandler} style={combinedStyle} ref={drag}>
7271
{HTMLType.placeHolderShort}

‎app/src/components/main/DirectChildHTMLNestable.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useContext, useRef } from 'react';
22
import { ChildElement, HTMLType } from '../../interfaces/Interfaces';
33
import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
44
import { ItemTypes } from '../../constants/ItemTypes';
5-
import { stateContext } from '../../context/context';
5+
import { StateContext } from '../../context/context';
66
import { combineStyles } from '../../helperFunctions/combineStyles';
77
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
88
import renderChildren from '../../helperFunctions/renderChildren';
@@ -14,7 +14,7 @@ function DirectChildHTMLNestable({
1414
style,
1515
children
1616
}: ChildElement) {
17-
const [state, dispatch] = useContext(stateContext);
17+
const [state, dispatch] = useContext(StateContext);
1818
const ref = useRef(null);
1919

2020
// find the HTML element corresponding with this instance of an HTML element

‎app/src/components/main/IndirectChild.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React, { useContext } from 'react';
22
import { combineStyles } from '../../helperFunctions/combineStyles';
33
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
4-
import { stateContext } from '../../context/context';
4+
import { StateContext } from '../../context/context';
55
import { Component } from '../../interfaces/Interfaces';
66

77
function IndirectChild({ style, children, placeHolder, linkId }) {
8-
const [state, dispatch] = useContext(stateContext);
8+
const [state, dispatch] = useContext(StateContext);
99
let combinedStyle = combineStyles(globalDefaultStyle, style);
1010

1111
// when a user clicks a link, the focus should change to that component

‎app/src/components/main/RouteLink.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import React, { useContext, useRef } from 'react';
22
import { Component, ChildElement } from '../../interfaces/Interfaces';
33
import { useDrag } from 'react-dnd';
44
import { ItemTypes } from '../../constants/ItemTypes';
5-
import { stateContext } from '../../context/context';
5+
import { StateContext } from '../../context/context';
66
import { combineStyles } from '../../helperFunctions/combineStyles';
77
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
88

99
function RouteLink({ childId, type, typeId, style }: ChildElement) {
10-
const [state, dispatch] = useContext(stateContext);
10+
const [state, dispatch] = useContext(StateContext);
1111
const ref = useRef(null);
1212

1313
// find the name of the Component corresponding with this link

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
deleteProject
1717
} from '../../helperFunctions/projectGetSaveDel';
1818
import localforage from 'localforage';
19-
import { stateContext } from '../../context/context';
19+
import { StateContext } from '../../context/context';
2020
import initialState from '../../context/initialState';
2121

2222
export interface ProjectDialogProps {
@@ -29,7 +29,7 @@ export interface ProjectDialogProps {
2929
function ProjectsDialog(props: ProjectDialogProps) {
3030
const classes = useStyles();
3131
const { onClose, open, projects } = props;
32-
const [state, dispatch] = useContext(stateContext);
32+
const [state, dispatch] = useContext(StateContext);
3333

3434
// If no projects selected, keep the name of the current displayed
3535
const handleClose = () => {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React, { useContext } from 'react';
2-
import { stateContext } from '../../context/context';
2+
import { StateContext } from '../../context/context';
33
import Button from '@material-ui/core/Button';
44
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
55
import { useHistory } from 'react-router-dom';
66
import { makeStyles } from '@material-ui/core/styles';
77

88
export default function LoginButton() {
99
let history = useHistory();
10-
const [state, dispatch] = useContext(stateContext);
10+
const [state, dispatch] = useContext(StateContext);
1111

1212
const classes = useStyles();
1313

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import AddIcon from '@material-ui/icons/Add';
1313
import { blue } from '@material-ui/core/colors';
1414

1515
import { getProjects } from '../../helperFunctions/projectGetSaveDel';
16-
import { stateContext } from '../../context/context';
16+
import { StateContext } from '../../context/context';
1717

1818
export interface ProjectDialogProps {
1919
open: boolean;
@@ -25,8 +25,7 @@ export interface ProjectDialogProps {
2525
function ProjectsDialog(props: ProjectDialogProps) {
2626
const classes = useStyles();
2727
const { onClose, open, projects } = props;
28-
const [_, dispatch] = useContext(stateContext);
29-
28+
const [_, dispatch] = useContext(StateContext);
3029
// If no projects selected, keep the name of the current displayed
3130
const handleClose = () => {
3231
// onClose(selectedValue);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useContext } from 'react';
2-
import { stateContext } from '../../context/context';
2+
import { StateContext } from '../../context/context';
33

44
import { makeStyles } from '@material-ui/core/styles';
55
import List from '@material-ui/core/List';
@@ -27,7 +27,7 @@ import { styleContext } from '../../containers/AppContainer';
2727
const ProjectManager = () => {
2828
// state to keep track of whether a modal should display
2929
const [modal, setModal] = useState(null);
30-
const [state, dispatch] = useContext(stateContext);
30+
const [state, dispatch] = useContext(StateContext);
3131

3232
const classes = useStyles();
3333

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useContext } from 'react';
2-
import { stateContext } from '../../context/context';
2+
import { StateContext } from '../../context/context';
33

44
import { makeStyles } from '@material-ui/core/styles';
55
import Button from '@material-ui/core/Button';
@@ -13,7 +13,7 @@ import { saveProject } from '../../helperFunctions/projectGetSaveDel';
1313

1414
export default function FormDialog() {
1515
const [open, setOpen] = useState(false);
16-
const [state, dispatch] = useContext(stateContext);
16+
const [state, dispatch] = useContext(StateContext);
1717

1818
const [projectName, setProjectName] = useState('');
1919
const [invalidProjectName, setInvalidProjectName] = useState(false);

0 commit comments

Comments
 (0)