Skip to content

Commit 929d529

Browse files
jujuprojujupro
committed
add comments
1 parent 0960757 commit 929d529

File tree

5 files changed

+42
-36
lines changed

5 files changed

+42
-36
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ Hook state:
2020
// Extracted the drag and drop functionality from HTMLPanel to make a modular component that can hang wherever the future designers may choose.
2121
const DragDropPanel = (props): JSX.Element => {
2222
const dispatch = useDispatch();
23+
2324
const state = useSelector((store: RootState) => store.appState);
2425
const contextParam = useSelector((store: RootState) => store.contextSlice);
2526

@@ -34,6 +35,7 @@ const DragDropPanel = (props): JSX.Element => {
3435
<div className={'HTMLItems'}>
3536
<div id="HTMLItemsTopHalf">
3637
<h3 style={{ color: '#ffffff' }}> &lt; HTML Elements &gt; </h3>
38+
3739
<Grid
3840
container
3941
spacing={{ xs: 0.5, md: 0.5 }}
@@ -60,6 +62,7 @@ const DragDropPanel = (props): JSX.Element => {
6062
}
6163
})}
6264
</Grid>
65+
6366
{state.projectType === 'Classic React' ? (
6467
<h3 style={{ color: '#C6C6C6' }}>React Router</h3>
6568
) : null}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import DragDropPanel from './DragDropPanel';
88
import { deleteChild } from '../../redux/reducers/slice/appStateSlice';
99
import { RootState } from '../../redux/store';
1010

11-
// Left-hand portion of the app, where component options are displayed
11+
// Left-hand portion of the app, where predefined component options are displayed
1212
const ElementsContainer = (props): JSX.Element => {
1313
const contextParam = useSelector((store: RootState) => store.contextSlice);
1414

@@ -17,6 +17,7 @@ const ElementsContainer = (props): JSX.Element => {
1717
const handleDelete = () => {
1818
dispatch(deleteChild({ id: {}, contextParam: contextParam }));
1919
};
20+
2021
const keyBindedFunc = useCallback((e) => {
2122
if (
2223
e.key === 'Backspace' &&
@@ -25,6 +26,7 @@ const ElementsContainer = (props): JSX.Element => {
2526
)
2627
handleDelete();
2728
}, []);
29+
2830
useEffect(() => {
2931
document.addEventListener('keydown', keyBindedFunc);
3032
return () => {

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ function Canvas(props: {}): JSX.Element {
2222
const dispatch = useDispatch();
2323

2424
Arrow.deleteLines();
25-
// find the current component to render on the canvas
25+
26+
// find the current component based on the canvasFocus component ID in the state
2627
const currentComponent: Component = state.components.find(
2728
(elem: Component) => elem.id === state.canvasFocus.componentId
2829
);
@@ -34,6 +35,7 @@ function Canvas(props: {}): JSX.Element {
3435
) => {
3536
dispatch(changeFocus({ componentId, childId }));
3637
};
38+
3739
// onClickHandler is responsible for changing the focused component and child component
3840
function onClickHandler(event: React.MouseEvent) {
3941
event.stopPropagation();
@@ -116,7 +118,7 @@ function Canvas(props: {}): JSX.Element {
116118
}
117119
},
118120
collect: (monitor) => ({
119-
isOver: !!monitor.isOver(),
121+
isOver: !!monitor.isOver()
120122
})
121123
});
122124

@@ -131,7 +133,7 @@ function Canvas(props: {}): JSX.Element {
131133
};
132134

133135
// Combine the default styles of the canvas with the custom styles set by the user for that component
134-
// The render children function renders all direct children of a given component
136+
// The renderChildren function renders all direct children of a given component
135137
// Direct children are draggable/clickable
136138

137139
const canvasStyle: React.CSSProperties = combineStyles(

‎app/src/redux/HTMLTypes.ts

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@ import HeaderIcon from '@mui/icons-material/TextFormat';
55
import ButtonIcon from '@mui/icons-material/EditAttributes';
66
import LinkIcon from '@mui/icons-material/Link';
77
import ListIcon from '@mui/icons-material/List';
8-
import {
9-
HTMLType
10-
} from '../interfaces/Interfaces';
8+
import { HTMLType } from '../interfaces/Interfaces';
119

1210
//properties for all HTML components
1311

@@ -21,7 +19,7 @@ const HTMLTypes: HTMLType[] = [
2119
placeHolderLong: '',
2220
// icon: HeaderIcon,
2321
framework: 'reactClassic',
24-
nestable: true,
22+
nestable: true
2523
},
2624
// do not move this separator element out of index 1 in this array
2725
// in componentReducer.ts, separator is referenced as 'initialState.HTMLTypes[1]'
@@ -34,7 +32,7 @@ const HTMLTypes: HTMLType[] = [
3432
placeHolderLong: '',
3533
icon: '',
3634
framework: '',
37-
nestable: true,
35+
nestable: true
3836
},
3937
{
4038
id: 1,
@@ -45,7 +43,7 @@ const HTMLTypes: HTMLType[] = [
4543
placeHolderLong: '',
4644
icon: ImageIcon,
4745
framework: 'reactClassic',
48-
nestable: false,
46+
nestable: false
4947
},
5048
{
5149
id: 2,
@@ -56,7 +54,7 @@ const HTMLTypes: HTMLType[] = [
5654
placeHolderLong: '',
5755
icon: FormIcon,
5856
framework: 'reactClassic',
59-
nestable: true,
57+
nestable: true
6058
},
6159
{
6260
id: 4,
@@ -67,7 +65,7 @@ const HTMLTypes: HTMLType[] = [
6765
placeHolderLong: '',
6866
icon: ButtonIcon,
6967
framework: 'reactClassic',
70-
nestable: false,
68+
nestable: false
7169
},
7270
{
7371
id: 6,
@@ -78,7 +76,7 @@ const HTMLTypes: HTMLType[] = [
7876
placeHolderLong: '',
7977
icon: LinkIcon,
8078
framework: 'reactClassic',
81-
nestable: false,
79+
nestable: false
8280
},
8381
{
8482
id: 8,
@@ -89,7 +87,7 @@ const HTMLTypes: HTMLType[] = [
8987
placeHolderLong: '',
9088
icon: ParagraphIcon,
9189
framework: 'reactClassic',
92-
nestable: false,
90+
nestable: false
9391
},
9492
{
9593
id: 9,
@@ -100,7 +98,7 @@ const HTMLTypes: HTMLType[] = [
10098
placeHolderLong: '',
10199
icon: HeaderIcon,
102100
framework: 'reactClassic',
103-
nestable: false,
101+
nestable: false
104102
},
105103
{
106104
id: 10,
@@ -111,7 +109,7 @@ const HTMLTypes: HTMLType[] = [
111109
placeHolderLong: '',
112110
icon: HeaderIcon,
113111
framework: 'reactClassic',
114-
nestable: false,
112+
nestable: false
115113
},
116114
{
117115
id: 5,
@@ -122,7 +120,7 @@ const HTMLTypes: HTMLType[] = [
122120
placeHolderLong: '',
123121
icon: HeaderIcon,
124122
framework: 'reactClassic',
125-
nestable: false,
123+
nestable: false
126124
},
127125
{
128126
id: 12,
@@ -133,7 +131,7 @@ const HTMLTypes: HTMLType[] = [
133131
placeHolderLong: '',
134132
icon: HeaderIcon,
135133
framework: 'reactClassic',
136-
nestable: false,
134+
nestable: false
137135
},
138136
{
139137
id: 13,
@@ -144,7 +142,7 @@ const HTMLTypes: HTMLType[] = [
144142
placeHolderLong: '',
145143
icon: HeaderIcon,
146144
framework: 'reactClassic',
147-
nestable: false,
145+
nestable: false
148146
},
149147
{
150148
id: 14,
@@ -155,7 +153,7 @@ const HTMLTypes: HTMLType[] = [
155153
placeHolderLong: '',
156154
icon: ListIcon,
157155
framework: 'reactClassic',
158-
nestable: true,
156+
nestable: true
159157
},
160158
{
161159
id: 15,
@@ -166,7 +164,7 @@ const HTMLTypes: HTMLType[] = [
166164
placeHolderLong: '',
167165
icon: ListIcon,
168166
framework: 'reactClassic',
169-
nestable: true,
167+
nestable: true
170168
},
171169
{
172170
id: 16,
@@ -177,7 +175,7 @@ const HTMLTypes: HTMLType[] = [
177175
placeHolderLong: '',
178176
icon: ListIcon,
179177
framework: 'reactClassic',
180-
nestable: true,
178+
nestable: true
181179
},
182180
{
183181
id: 3,
@@ -188,7 +186,7 @@ const HTMLTypes: HTMLType[] = [
188186
placeHolderLong: '',
189187
icon: ListIcon,
190188
framework: 'reactClassic',
191-
nestable: true,
189+
nestable: true
192190
},
193191
{
194192
id: 17,
@@ -199,7 +197,7 @@ const HTMLTypes: HTMLType[] = [
199197
placeHolderLong: '',
200198
icon: ListIcon,
201199
framework: 'reactClassic',
202-
nestable: true,
200+
nestable: true
203201
},
204202
{
205203
id: -1,
@@ -210,7 +208,7 @@ const HTMLTypes: HTMLType[] = [
210208
placeHolderLong: '',
211209
icon: LinkIcon,
212210
framework: 'reactClassic',
213-
nestable: true,
211+
nestable: true
214212
},
215213
{
216214
id: 18,
@@ -221,7 +219,7 @@ const HTMLTypes: HTMLType[] = [
221219
placeHolderLong: '',
222220
icon: ListIcon,
223221
framework: 'reactClassic',
224-
nestable: true,
222+
nestable: true
225223
},
226224
{
227225
id: 19,
@@ -232,7 +230,7 @@ const HTMLTypes: HTMLType[] = [
232230
placeHolderLong: '',
233231
icon: ListIcon,
234232
framework: 'nextjs',
235-
nestable: true,
233+
nestable: true
236234
},
237235
{
238236
id: 20,
@@ -243,7 +241,7 @@ const HTMLTypes: HTMLType[] = [
243241
placeHolderLong: '',
244242
icon: ListIcon,
245243
framework: 'nextjs',
246-
nestable: false,
247-
},
244+
nestable: false
245+
}
248246
];
249247
export default HTMLTypes;

‎app/src/redux/reducers/slice/appStateSlice.ts

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ const updateAllIds = (comp: Component[] | ChildElement[]) => {
128128
// put components' names and ids into an obj
129129
const obj = { spr: 1000, others: 1 };
130130
// for each of the components, if it has children, iterate through that children array
131-
comp.forEach((el:Component | ChildElement) => {
131+
comp.forEach((el: Component | ChildElement) => {
132132
if (el.children.length > 0) {
133133
for (let i = 0; i < el.children.length; i++) {
134134
// update each child's childId
@@ -180,7 +180,7 @@ const deleteById = (id: number, name: string, state: State): Component[] => {
180180
const checkChildren = (child: Component[] | ChildElement[]) => {
181181
// for each of the components in the passed in components array, if the child
182182
// component has a children array, iterate through the array of children
183-
child.forEach((el:Component | ChildElement) => {
183+
child.forEach((el: Component | ChildElement) => {
184184
if (el.children.length) {
185185
const arr: ChildElement[] = [];
186186
for (let i = 0; i < el.children.length; i++) {
@@ -417,9 +417,10 @@ const appStateSlice = createSlice({
417417
state.tailwind = action.payload;
418418
},
419419
changeFocus: (state, action) => {
420-
const { componentId, childId} = action.payload;
420+
const { componentId, childId } = action.payload;
421+
// makes separators not selectable
421422
if (childId < 1000) {
422-
// makes separators not selectable
423+
//update componentId and childId in the state
423424
state.canvasFocus = { ...state.canvasFocus, componentId, childId };
424425
//makes it so the code preview will update when clicking on a new component
425426
state.components = state.components.map((element) => {
@@ -1046,8 +1047,8 @@ const appStateSlice = createSlice({
10461047
}
10471048

10481049
//deletes all instances of passedInProps from the children arrays of the current Component
1049-
const deletePassedInPropsChildren = (currComponent:Component) => {
1050-
const innerFunc = (currChild:Component|ChildElement) => {
1050+
const deletePassedInPropsChildren = (currComponent: Component) => {
1051+
const innerFunc = (currChild: Component | ChildElement) => {
10511052
// when there are no children, return up a level
10521053
if (
10531054
currChild.children.filter((el) => el.type === 'Component')
@@ -1080,7 +1081,7 @@ const appStateSlice = createSlice({
10801081
);
10811082
};
10821083
//delete from the components passedInProps array
1083-
const deletePassedInProps = (myComponent:Component) => {
1084+
const deletePassedInProps = (myComponent: Component) => {
10841085
if (
10851086
myComponent.children.filter((el) => el.type === 'Component')
10861087
.length === 0

0 commit comments

Comments
 (0)