Skip to content

Commit fdd6c20

Browse files
brett-websterbrett-webster
committed
changed component name from Annotation to DeleteButton across 6 files, changed interface name to DeleteButtons
1 parent 41ca1ec commit fdd6c20

File tree

6 files changed

+93
-73
lines changed

6 files changed

+93
-73
lines changed

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React, { useRef, useState, useContext, useEffect } from 'react';
2-
import { Annotations } from '../../interfaces/Interfaces';
2+
import { DeleteButtons } from '../../interfaces/Interfaces';
33
import Modal from '@material-ui/core/Modal';
44
import StateContext from '../../context/context';
55

6-
function Annotation({ id, name }: Annotations) {
6+
function DeleteButton({ id, name }: DeleteButtons) {
77
const [state, dispatch] = useContext(StateContext);
88

99
// -------------------------------- NEW CODE for DELETE BUTTONS, REPLACING ANNOTATIONS ---------------------------------------
@@ -24,12 +24,11 @@ function Annotation({ id, name }: Annotations) {
2424
event.stopPropagation();
2525
deleteHTMLtype(id);
2626
}}
27-
// ref={ref}
2827
>
2928
x
3029
</button>
3130
</div>
3231
);
3332
}
3433

35-
export default Annotation;
34+
export default DeleteButton;

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

Lines changed: 20 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
1-
import React, { useContext, } from 'react';
2-
import {
3-
Component,
4-
ChildElement
5-
} from '../../interfaces/Interfaces';
1+
import React, { useContext } from 'react';
2+
import { Component, ChildElement } from '../../interfaces/Interfaces';
63
import { useDrag } from 'react-dnd';
74
import { ItemTypes } from '../../constants/ItemTypes';
85
import StateContext from '../../context/context';
9-
import Annotation from './Annotation'
6+
import DeleteButton from './Annotation';
107
import { combineStyles } from '../../helperFunctions/combineStyles';
118
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
129

13-
function DirectChildComponent({ childId, type, typeId, style, name }: ChildElement) {
10+
function DirectChildComponent({
11+
childId,
12+
type,
13+
typeId,
14+
style,
15+
name
16+
}: ChildElement) {
1417
const [state, dispatch] = useContext(StateContext);
1518

1619
// find the top-level component corresponding to this instance of the component
@@ -29,7 +32,7 @@ function DirectChildComponent({ childId, type, typeId, style, name }: ChildEleme
2932
instanceType: type,
3033
instanceTypeId: typeId
3134
},
32-
collect: monitor => ({
35+
collect: (monitor) => ({
3336
isDragging: !!monitor.isDragging()
3437
})
3538
});
@@ -54,27 +57,21 @@ function DirectChildComponent({ childId, type, typeId, style, name }: ChildEleme
5457

5558
const combinedStyle = combineStyles(
5659
combineStyles(
57-
combineStyles(globalDefaultStyle, referencedComponent.style),
60+
combineStyles(globalDefaultStyle, referencedComponent.style)
5861
// style
5962
),
6063
interactiveStyle
6164
);
6265
// Renders name and not children of subcomponents to clean up Canvas view when dragging components
6366
// into the main canvas. To render html elements on canvas, import and invoke renderChildren
64-
return (
65-
<div
66-
onClick={onClickHandler}
67-
style={combinedStyle}
68-
ref={drag}
69-
>
70-
71-
<strong>{name + ' cupcake'}</strong>
72-
<Annotation
73-
id={childId}
74-
name={name}
75-
// annotations={annotations}
76-
/>
77-
67+
return (
68+
<div onClick={onClickHandler} style={combinedStyle} ref={drag}>
69+
<strong>{name}</strong>
70+
<DeleteButton
71+
id={childId}
72+
name={name}
73+
// annotations={annotations}
74+
/>
7875
</div>
7976
);
8077
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { ItemTypes } from '../../constants/ItemTypes';
55
import StateContext from '../../context/context';
66
import { combineStyles } from '../../helperFunctions/combineStyles';
77
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
8-
import Annotation from './Annotation';
8+
import DeleteButton from './Annotation';
99

1010
import { styleContext } from '../../containers/AppContainer';
1111

@@ -95,7 +95,7 @@ function DirectChildHTML({
9595
<strong style={{ color: isThemeLight ? 'black' : 'white' }}>
9696
{HTMLType.placeHolderShort + ' nonNestable'}
9797
</strong>
98-
<Annotation
98+
<DeleteButton
9999
id={childId}
100100
name={name[0].toLowerCase() + name.slice(1)}
101101
annotations={annotations}

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

Lines changed: 53 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ import { combineStyles } from '../../helperFunctions/combineStyles';
77
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
88
import renderChildren from '../../helperFunctions/renderChildren';
99
import adjustComponentColor from '../../helperFunctions/adjustComponentColor';
10-
import Annotation from './Annotation'
11-
import validateNewParent from '../../helperFunctions/changePositionValidation'
12-
import componentNest from '../../helperFunctions/componentNestValidation'
10+
import DeleteButton from './Annotation';
11+
import validateNewParent from '../../helperFunctions/changePositionValidation';
12+
import componentNest from '../../helperFunctions/componentNestValidation';
1313
import AddRoute from './AddRoute';
1414
import AddLink from './AddLink';
1515

@@ -36,7 +36,9 @@ function DirectChildHTMLNestable({
3636
const deepCopiedState = JSON.parse(JSON.stringify(state));
3737
const focusIndex = state.canvasFocus.componentId - 1;
3838
//pushes the last user action on the canvas into the past array of Component
39-
state.components[focusIndex].past.push(deepCopiedState.components[focusIndex].children);
39+
state.components[focusIndex].past.push(
40+
deepCopiedState.components[focusIndex].children
41+
);
4042
};
4143

4244
// find the HTML element corresponding with this instance of an HTML element
@@ -78,13 +80,20 @@ function DirectChildHTMLNestable({
7880
// updates state with new instance
7981
// if item dropped is going to be a new instance (i.e. it came from the left panel), then create a new child component
8082
if (item.newInstance) {
81-
if ((item.instanceType === 'Component' && componentNest(state.components[item.instanceTypeId - 1].children, childId)) || item.instanceType !== 'Component') {
83+
if (
84+
(item.instanceType === 'Component' &&
85+
componentNest(
86+
state.components[item.instanceTypeId - 1].children,
87+
childId
88+
)) ||
89+
item.instanceType !== 'Component'
90+
) {
8291
dispatch({
8392
type: 'ADD CHILD',
8493
payload: {
8594
type: item.instanceType,
8695
typeId: item.instanceTypeId,
87-
childId: childId,
96+
childId: childId
8897
}
8998
});
9099
}
@@ -97,7 +106,7 @@ function DirectChildHTMLNestable({
97106
type: 'CHANGE POSITION',
98107
payload: {
99108
currentChildId: item.childId,
100-
newParentChildId: childId,
109+
newParentChildId: childId
101110
}
102111
});
103112
}
@@ -128,7 +137,7 @@ function DirectChildHTMLNestable({
128137
border:
129138
state.canvasFocus.childId === childId
130139
? '3px solid #186BB4'
131-
: '1px solid grey',
140+
: '1px solid grey'
132141
};
133142

134143
// incoporated this logic into my nesting check below caused i new error
@@ -138,28 +147,26 @@ function DirectChildHTMLNestable({
138147
// if component is not in APP children array, it's a nested component, and should have a differend background color
139148
// defaultNestableStyle['backgroundColor'] = state.components[0].children.includes(childId) ? 'blue' : globalDefaultStyle['backgroundColor'];
140149

141-
142150
// console.log('APP DIRECT KIDS: ', state.components[0].children);
143151

144152
const combinedStyle = combineStyles(
145153
combineStyles(combineStyles(defaultNestableStyle, HTMLType.style), style),
146154
interactiveStyle
147155
);
148156

149-
// WHAT THE CHILDREN ARRAY LOOKS LIKE - LW
150-
// ARRAY OF OBJS
151-
// {type: 'HTML Element', typeId: 1000, name: 'separator', childId: 1000, style: {…}, …}
152-
// tried adding a conditional to only run this reassignment if state.components[0]['name'] === 'App' DON'T WORK
153-
154-
// state.components[0].children?.forEach(obj => {
155-
// // console.log('childId : ', obj['childId'], 'childId : ', childId);
156-
// if (obj['childId'] === childId) {
157-
// combinedStyle['backgroundColor'] = isOver ? 'yellow' : 'grey';
158-
// } else {
159-
// combinedStyle['backgroundColor'] = isOver ? 'yellow' : globalDefaultStyle['backgroundColor'];
160-
// }
161-
// });
157+
// WHAT THE CHILDREN ARRAY LOOKS LIKE - LW
158+
// ARRAY OF OBJS
159+
// {type: 'HTML Element', typeId: 1000, name: 'separator', childId: 1000, style: {…}, …}
160+
// tried adding a conditional to only run this reassignment if state.components[0]['name'] === 'App' DON'T WORK
162161

162+
// state.components[0].children?.forEach(obj => {
163+
// // console.log('childId : ', obj['childId'], 'childId : ', childId);
164+
// if (obj['childId'] === childId) {
165+
// combinedStyle['backgroundColor'] = isOver ? 'yellow' : 'grey';
166+
// } else {
167+
// combinedStyle['backgroundColor'] = isOver ? 'yellow' : globalDefaultStyle['backgroundColor'];
168+
// }
169+
// });
163170

164171
// trying to render components with diff background colors based on how deeply nested they were - doesnt' work as on now
165172
// state.components.forEach(component => {
@@ -177,7 +184,6 @@ function DirectChildHTMLNestable({
177184
// })
178185
// });
179186

180-
181187
// console.log('state: ', state);
182188
// helper func i created below does not work now because it cannot reference combined style from its file. - LW
183189
// adjustComponentColor(children, childId, state);
@@ -191,20 +197,34 @@ function DirectChildHTMLNestable({
191197
routeButton.push(<AddRoute id={childId} name={name} />);
192198
}
193199
if (typeId === 19) {
194-
routeButton.push(<AddLink id={childId} onClickHandler={onClickHandler} name={name} linkDisplayed={attributes && attributes.compLink ? `${attributes.compLink}` : null} />);
200+
routeButton.push(
201+
<AddLink
202+
id={childId}
203+
onClickHandler={onClickHandler}
204+
name={name}
205+
linkDisplayed={
206+
attributes && attributes.compLink ? `${attributes.compLink}` : null
207+
}
208+
/>
209+
);
195210
}
196-
211+
197212
return (
198-
<div onClick={onClickHandler} style={combinedStyle} ref={ref} id={`canv${childId}`}>
213+
<div
214+
onClick={onClickHandler}
215+
style={combinedStyle}
216+
ref={ref}
217+
id={`canv${childId}`}
218+
>
199219
<span>
200-
<strong style={ {color: isThemeLight ? 'black' : 'white'} }>{HTMLType.placeHolderShort + ' nestable'}</strong>
201-
<strong style={{ color: "#0099E6" }}>{attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}</strong>
220+
<strong style={{ color: isThemeLight ? 'black' : 'white' }}>
221+
{HTMLType.placeHolderShort + ' nestable'}
222+
</strong>
223+
<strong style={{ color: '#0099E6' }}>
224+
{attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}
225+
</strong>
202226
{routeButton}
203-
<Annotation
204-
id={childId}
205-
name={name}
206-
annotations={annotations}
207-
/>
227+
<DeleteButton id={childId} name={name} annotations={annotations} />
208228
</span>
209229
{renderChildren(children)}
210230
</div>

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

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,17 @@ import { combineStyles } from '../../helperFunctions/combineStyles';
33
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
44
import StateContext from '../../context/context';
55
import { Component } from '../../interfaces/Interfaces';
6-
import Annotation from './Annotation'
6+
import DeleteButton from './Annotation';
77

8-
function IndirectChild({ style, children, placeHolder, linkId, childId, name, annotations }) {
8+
function IndirectChild({
9+
style,
10+
children,
11+
placeHolder,
12+
linkId,
13+
childId,
14+
name,
15+
annotations
16+
}) {
917
const [state, dispatch] = useContext(StateContext);
1018
let combinedStyle = combineStyles(globalDefaultStyle, style);
1119
// when a user clicks a link, the focus should change to that component
@@ -20,20 +28,16 @@ function IndirectChild({ style, children, placeHolder, linkId, childId, name, an
2028
let linkName: string;
2129
// if there's a link in this component, then include a link
2230
if (linkId) {
23-
linkName = state.components.find((comp: Component) => comp.id === linkId)
24-
.name;
31+
linkName = state.components.find(
32+
(comp: Component) => comp.id === linkId
33+
).name;
2534
combinedStyle = combineStyles(combinedStyle, { color: 'blue' });
2635
}
2736

28-
2937
return (
3038
<div style={combinedStyle}>
3139
{` ( ${childId} )`}
32-
<Annotation
33-
id={childId}
34-
name={name}
35-
annotations={annotations}
36-
/>
40+
<DeleteButton id={childId} name={name} annotations={annotations} />
3741
{linkId ? (
3842
<div onClick={onClickHandlerRoute}>{linkName}</div>
3943
) : (

‎app/src/interfaces/Interfaces.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export interface LoginInt {
9393
isLoggedIn: boolean;
9494
}
9595
// Annotations TO BE REMOVED
96-
export interface Annotations {
96+
export interface DeleteButtons {
9797
id: number;
9898
name: string;
9999
annotations?: string;

0 commit comments

Comments
 (0)