Skip to content

Commit ee7985b

Browse files
wang9huwang9hu
authored
Merge pull request #10 from oslabs-beta/Brett/AnnotationToDeleteBtnCleanUp
cleaned up Annotation.tsx file, now used for element deletion on click
2 parents 0a6f450 + a2357fb commit ee7985b

File tree

2 files changed

+5
-133
lines changed

2 files changed

+5
-133
lines changed

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

Lines changed: 2 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -5,154 +5,25 @@ import StateContext from '../../context/context';
55

66
function Annotation({ id, name, annotations }: Annotations) {
77
const [state, dispatch] = useContext(StateContext);
8-
// const [annotation, setAnnotations] = useState(annotations);
9-
// React hook setting the annotation button modal open/close state
10-
// const [open, setOpen] = React.useState(false);
11-
// const ref = useRef(null);
128

13-
// focusIndex and childrenArray are used to find the array of all elements on the canvas
14-
const focusIndex = state.canvasFocus.componentId - 1;
15-
const childrenArray = state.components[focusIndex].children; // ADDING SLICE HERE CAUSES STATE to NOT CHANGE...
9+
// -------------------------------- NEW CODE for DELETE BUTTONS, REPLACING ANNOTATIONS ---------------------------------------
1610

17-
// ---------------------------------------------- NEW CODE for DELETE BUTTONS (start) ---------------------------------------
1811
const deleteHTMLtype = (id: number) => {
1912
dispatch({
2013
type: 'DELETE CHILD',
2114
payload: { id }
2215
});
23-
24-
// console.log(id, childrenArray);
25-
// let arrIndex: number = -1;
26-
// let arrOfAllChildIDs: number[] = [];
27-
// recurseAllChildren(childrenArray);
28-
// function recurseAllChildren(childArray) {
29-
// // console.log('Full Array: ', childArray, arrOfAllChildIDs);
30-
// for (let index in childArray) {
31-
// // console.log(index);
32-
// if (childArray[index].children.length) {
33-
// // console.log('In Recurse - non-endpoint: ', childArray[index].childId);
34-
// arrOfAllChildIDs.push(childArray[index].childId); // Use this only to pull all non-endpoint childIds, document out breaks
35-
// if (childArray[index].childId === id) {
36-
// arrIndex = Number(index);
37-
// // Remove BOTH element & preceding separator spacing objects from array if NOT nested
38-
// childArray.splice(arrIndex - 1, 2);
39-
// break;
40-
// }
41-
// recurseAllChildren(childArray[index].children);
42-
// } else if (childArray[index].childId < 1000)
43-
// // FILTER OUT separators...
44-
// // console.log('In Recurse - endpoint: ', childArray[index].childId);
45-
// arrOfAllChildIDs.push(childArray[index].childId); // Use this only to pull all endpoint childIds, document out breaks
46-
// if (childArray[index].childId === id) {
47-
// arrIndex = Number(index);
48-
// // Remove BOTH element & preceding separator spacing objects from array if NOT nested
49-
// childArray.splice(arrIndex - 1, 2);
50-
// // console.log(index, arrIndex, 'ultimate', childArray[index]);
51-
// break;
52-
// }
53-
// }
54-
// }
55-
// console.log(arrIndex);
56-
// console.log('arrOfAllChildIDs: ', arrOfAllChildIDs);
5716
};
58-
// ---------------------------------------------- NEW CODE for DELETE BUTTONS (end) ---------------------------------------
59-
60-
// ---------------------------------------------- LEGACY CODE (start) ---------------------------------------
61-
// // For showing the modal
62-
// const handleOpen = () => {
63-
// setOpen(true);
64-
// };
65-
// // For closing the modal and setting the global annotation value to the hook value
66-
// const handleClose = (id) => {
67-
// const childEle = handleFindAnno(childrenArray, id);
68-
// if (childEle) {
69-
// // set global annotation value for this component to it's hook value
70-
// childEle.annotations = annotation;
71-
// }
72-
// setOpen(false);
73-
// };
74-
// /**
75-
// * Handles when text exists in the textarea of the modal.
76-
// * If text exists/does not exist, corresponding button changes colors.
77-
// * Sets hook value to what is contained in the textarea
78-
// */
79-
// const handleAnnoChange = (event) => {
80-
// const { value } = event.target;
81-
// if (value === '' || value === undefined) {
82-
// ref.current.style.background = '#0CD34C';
83-
// } else {
84-
// ref.current.style.background = '#D59DFF';
85-
// }
86-
// if (value != annotation) {
87-
// setAnnotations(value);
88-
// }
89-
// };
90-
// /**
91-
// * This handler will find the specific anno for the corresponding component on the canvas in the childrenArray -
92-
// * where the canvas components are placed
93-
// */
94-
// const handleFindAnno = (array, id) => {
95-
// for (let i = 0; i < array.length; i++) {
96-
// const currentElement = array[i];
97-
// if (currentElement.childId === id) {
98-
// return currentElement;
99-
// // finds nested element if nested within canvas
100-
// } else if (currentElement.children.length > 0) {
101-
// // temp is to prevent a return of empty string since canvas element should always exist and allows the
102-
// // recursion to continue
103-
// const temp = handleFindAnno(currentElement.children, id);
104-
// if (temp != '') {
105-
// return temp;
106-
// }
107-
// }
108-
// }
109-
// return '';
110-
// };
111-
// /**
112-
// * This useEffect allows the annotations to remain persistent when changing between root level components on the right panel
113-
// */
114-
// useEffect(() => {
115-
// const event = {
116-
// target: { value: annotation },
117-
// id: id
118-
// };
119-
// handleAnnoChange(event);
120-
// }, []);
121-
122-
// const body = (
123-
// <div className="annotate-position">
124-
// <span className="annotate-textarea-header">
125-
// {' '}
126-
// Notes for: {name} ( {id} )
127-
// </span>
128-
// <textarea
129-
// className="annotate-textarea"
130-
// id={id.toString()}
131-
// onChange={handleAnnoChange}
132-
// >
133-
// {annotations}
134-
// </textarea>
135-
// </div>
136-
// );
137-
// ---------------------------------------------- LEGACY CODE (end) ---------------------------------------
13817

13918
return (
14019
<div style={{ padding: '1px', float: 'right' }}>
14120
<button
142-
className="annotate-button-empty" // NOTE: This class name no longer accurate
21+
className="annotate-button-empty" // NOTE: This className no longer accurate --> to update to delete button, same w/ Annotation export throughout
14322
id={'btn' + id}
14423
onClick={() => deleteHTMLtype(id)}
145-
// ref={ref}
14624
>
14725
x
14826
</button>
149-
{/* <Modal
150-
open={open}
151-
onClose={() => handleClose(id)}
152-
keepMounted={true}
153-
>
154-
{body}
155-
</Modal> */}
15627
</div>
15728
);
15829
}

‎app/src/interfaces/Interfaces.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export interface ChildElement {
2828
stateProps: StateProp[]; // state: [ { id, key, value, type }, ...]
2929
annotations?: string;
3030
stateUsed?: object;
31-
passedInProps: StateProp[]
31+
passedInProps: StateProp[];
3232
}
3333

3434
export interface Component {
@@ -60,7 +60,7 @@ export interface Action {
6060
payload: any;
6161
}
6262

63-
export interface Payload { }
63+
export interface Payload {}
6464
export interface Reduce {
6565
state: Context;
6666
action: Action;
@@ -92,6 +92,7 @@ export interface DragItemType {
9292
export interface LoginInt {
9393
isLoggedIn: boolean;
9494
}
95+
// Annotations TO BE REMOVED
9596
export interface Annotations {
9697
id: number;
9798
name: string;

0 commit comments

Comments
 (0)