Skip to content

Commit 03b344f

Browse files
authored
Merge pull request #14 from oslabs-beta/Brett/AnnotationCleanup
Brett/annotation cleanup
2 parents 50b3ac8 + 8fcfbee commit 03b344f

File tree

11 files changed

+276
-200
lines changed

11 files changed

+276
-200
lines changed
Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
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

9-
// -------------------------------- NEW CODE for DELETE BUTTONS, REPLACING ANNOTATIONS ---------------------------------------
10-
119
const deleteHTMLtype = (id: number) => {
1210
dispatch({
1311
type: 'DELETE CHILD',
@@ -18,18 +16,17 @@ function Annotation({ id, name }: Annotations) {
1816
return (
1917
<div style={{ padding: '1px', float: 'right' }}>
2018
<button
21-
className="annotate-button-empty" // NOTE: This className no longer accurate --> to update to delete button, same w/ Annotation export throughout
19+
className="delete-button-empty"
2220
id={'btn' + id}
2321
onClick={(event) => {
2422
event.stopPropagation();
2523
deleteHTMLtype(id);
2624
}}
27-
// ref={ref}
2825
>
2926
x
3027
</button>
3128
</div>
3229
);
3330
}
3431

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

app/src/components/main/DirectChildComponent.tsx

Lines changed: 16 additions & 24 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 './DeleteButton';
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,29 +57,18 @@ 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-
<span>
71-
<strong>{name}</strong>
72-
73-
<Annotation
74-
id={childId}
75-
name={name}
76-
// annotations={annotations}
77-
/>
78-
</span>
7967

68+
return (
69+
<div onClick={onClickHandler} style={combinedStyle} ref={drag}>
70+
<strong>{name}</strong>
71+
<DeleteButton id={childId} name={name} />
8072
</div>
8173
);
8274
}

app/src/components/main/DirectChildHTML.tsx

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,11 @@ 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 './DeleteButton';
99

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

12-
function DirectChildHTML({
13-
childId,
14-
name,
15-
type,
16-
typeId,
17-
style,
18-
annotations
19-
}: ChildElement) {
12+
function DirectChildHTML({ childId, name, type, typeId, style }: ChildElement) {
2013
const [state, dispatch] = useContext(StateContext);
2114
const { isThemeLight } = useContext(styleContext);
2215

@@ -95,10 +88,9 @@ function DirectChildHTML({
9588
<strong style={{ color: isThemeLight ? 'black' : 'white' }}>
9689
{HTMLType.placeHolderShort}
9790
</strong>
98-
<Annotation
91+
<DeleteButton
9992
id={childId}
10093
name={name[0].toLowerCase() + name.slice(1)}
101-
annotations={annotations}
10294
/>
10395
</span>
10496
</div>

app/src/components/main/DirectChildHTMLNestable.tsx

Lines changed: 35 additions & 17 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 './DeleteButton';
11+
import validateNewParent from '../../helperFunctions/changePositionValidation';
12+
import componentNest from '../../helperFunctions/componentNestValidation';
1313
import AddRoute from './AddRoute';
1414
import AddLink from './AddLink';
1515

@@ -22,7 +22,6 @@ function DirectChildHTMLNestable({
2222
style,
2323
children,
2424
name,
25-
annotations,
2625
attributes
2726
}: ChildElement) {
2827
const [state, dispatch] = useContext(StateContext);
@@ -36,7 +35,9 @@ function DirectChildHTMLNestable({
3635
const deepCopiedState = JSON.parse(JSON.stringify(state));
3736
const focusIndex = state.canvasFocus.componentId - 1;
3837
//pushes the last user action on the canvas into the past array of Component
39-
state.components[focusIndex].past.push(deepCopiedState.components[focusIndex].children);
38+
state.components[focusIndex].past.push(
39+
deepCopiedState.components[focusIndex].children
40+
);
4041
};
4142

4243
// find the HTML element corresponding with this instance of an HTML element
@@ -78,13 +79,20 @@ function DirectChildHTMLNestable({
7879
// updates state with new instance
7980
// if item dropped is going to be a new instance (i.e. it came from the left panel), then create a new child component
8081
if (item.newInstance) {
81-
if ((item.instanceType === 'Component' && componentNest(state.components[item.instanceTypeId - 1].children, childId)) || item.instanceType !== 'Component') {
82+
if (
83+
(item.instanceType === 'Component' &&
84+
componentNest(
85+
state.components[item.instanceTypeId - 1].children,
86+
childId
87+
)) ||
88+
item.instanceType !== 'Component'
89+
) {
8290
dispatch({
8391
type: 'ADD CHILD',
8492
payload: {
8593
type: item.instanceType,
8694
typeId: item.instanceTypeId,
87-
childId: childId,
95+
childId: childId
8896
}
8997
});
9098
}
@@ -97,7 +105,7 @@ function DirectChildHTMLNestable({
97105
type: 'CHANGE POSITION',
98106
payload: {
99107
currentChildId: item.childId,
100-
newParentChildId: childId,
108+
newParentChildId: childId
101109
}
102110
});
103111
}
@@ -128,9 +136,9 @@ function DirectChildHTMLNestable({
128136
border:
129137
state.canvasFocus.childId === childId
130138
? '3px solid #186BB4'
131-
: '1px solid grey',
139+
: '1px solid grey'
132140
};
133-
141+
134142
// interactive style to change color when nested element is hovered over
135143
if (isOver) defaultNestableStyle['yellow'];
136144
defaultNestableStyle['backgroundColor'] = isOver ? 'yellow' : defaultNestableStyle['backgroundColor'];
@@ -147,20 +155,30 @@ function DirectChildHTMLNestable({
147155
routeButton.push(<AddRoute id={childId} name={name} />);
148156
}
149157
if (typeId === 19) {
150-
routeButton.push(<AddLink id={childId} onClickHandler={onClickHandler} name={name} linkDisplayed={attributes && attributes.compLink ? `${attributes.compLink}` : null} />);
158+
routeButton.push(
159+
<AddLink
160+
id={childId}
161+
onClickHandler={onClickHandler}
162+
name={name}
163+
linkDisplayed={
164+
attributes && attributes.compLink ? `${attributes.compLink}` : null
165+
}
166+
/>
167+
);
151168
}
152169

153170
return (
154-
<div onClick={onClickHandler} style={combinedStyle} ref={ref} id={`canv${childId}`}>
171+
<div
172+
onClick={onClickHandler}
173+
style={combinedStyle}
174+
ref={ref}
175+
id={`canv${childId}`}
176+
>
155177
<span>
156178
<strong style={ {color: isThemeLight ? 'black' : 'white'} }>{HTMLType.placeHolderShort}</strong>
157179
<strong style={{ color: "#0099E6" }}>{attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}</strong>
158180
{routeButton}
159-
<Annotation
160-
id={childId}
161-
name={name}
162-
annotations={annotations}
163-
/>
181+
<DeleteButton id={childId} name={name} />
164182
</span>
165183
{renderChildren(children)}
166184
</div>

app/src/components/main/IndirectChild.tsx

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,16 @@ 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 './DeleteButton';
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+
}) {
916
const [state, dispatch] = useContext(StateContext);
1017
let combinedStyle = combineStyles(globalDefaultStyle, style);
1118
// when a user clicks a link, the focus should change to that component
@@ -20,21 +27,17 @@ function IndirectChild({ style, children, placeHolder, linkId, childId, name, an
2027
let linkName: string;
2128
// if there's a link in this component, then include a link
2229
if (linkId) {
23-
linkName = state.components.find((comp: Component) => comp.id === linkId)
24-
.name;
30+
linkName = state.components.find(
31+
(comp: Component) => comp.id === linkId
32+
).name;
2533
combinedStyle = combineStyles(combinedStyle, { color: 'blue' });
2634
}
2735

28-
2936
return (
3037
<div style={combinedStyle}>
3138
{` ( ${childId} )`}
3239
<span>
33-
<Annotation
34-
id={childId}
35-
name={name}
36-
annotations={annotations}
37-
/>
40+
<DeleteButton id={childId} name={name} />
3841
</span>
3942
{linkId ? (
4043
<div onClick={onClickHandlerRoute}>{linkName}</div>

0 commit comments

Comments
 (0)