Skip to content

Commit 62ccada

Browse files
lillwimberlylillwimberly
authored
Merge pull request #4 from oslabs-beta/Brett/InitialDeleteBtns
Delete button UI and logic added in Canvas, need to tie to auto-refresh of Code Preview
2 parents 0ad4170 + f127502 commit 62ccada

File tree

1 file changed

+134
-79
lines changed

1 file changed

+134
-79
lines changed

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

Lines changed: 134 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,157 @@
1-
2-
import React, {
3-
useRef, useState, useContext, useEffect,
4-
} from 'react';
1+
import React, { useRef, useState, useContext, useEffect } from 'react';
52
import { Annotations } from '../../interfaces/Interfaces';
63
import Modal from '@material-ui/core/Modal';
74
import StateContext from '../../context/context';
85

9-
function Annotation({
10-
id,
11-
name,
12-
annotations,
13-
}: Annotations) {
14-
const [state, ] = useContext(StateContext);
15-
const [annotation, setAnnotations] = useState(annotations);
6+
function Annotation({ id, name, annotations }: Annotations) {
7+
const [state] = useContext(StateContext);
8+
// const [annotation, setAnnotations] = useState(annotations);
169
// React hook setting the annotation button modal open/close state
17-
const [open, setOpen] = React.useState(false);
18-
const ref = useRef(null);
10+
// const [open, setOpen] = React.useState(false);
11+
// const ref = useRef(null);
12+
1913
// focusIndex and childrenArray are used to find the array of all elements on the canvas
2014
const focusIndex = state.canvasFocus.componentId - 1;
21-
const childrenArray = state.components[focusIndex].children;
22-
// For showing the modal
23-
const handleOpen = () => {
24-
setOpen(true);
25-
};
26-
// For closing the modal and setting the global annotation value to the hook value
27-
const handleClose = (id) => {
28-
const childEle = handleFindAnno(childrenArray, id);
29-
if (childEle) {
30-
// set global annotation value for this component to it's hook value
31-
childEle.annotations = annotation;
32-
}
33-
setOpen(false);
34-
};
35-
/**
36-
* Handles when text exists in the textarea of the modal.
37-
* If text exists/does not exist, corresponding button changes colors.
38-
* Sets hook value to what is contained in the textarea
39-
*/
40-
const handleAnnoChange = (event) => {
41-
const { value } = event.target;
42-
if (value === '' || value === undefined) {
43-
ref.current.style.background = '#0CD34C';
44-
} else {
45-
ref.current.style.background = '#D59DFF';
46-
}
47-
if (value != annotation) {
48-
setAnnotations(value);
49-
}
50-
}
51-
/**
52-
* This handler will find the specific anno for the corresponding component on the canvas in the childrenArray -
53-
* where the canvas components are placed
54-
*/
55-
const handleFindAnno = (array, id) => {
56-
for (let i = 0; i < array.length; i++) {
57-
const currentElement = array[i];
58-
if (currentElement.childId === id) {
59-
return currentElement;
60-
// finds nested element if nested within canvas
61-
} else if (currentElement.children.length > 0) {
62-
// temp is to prevent a return of empty string since canvas element should always exist and allows the
63-
// recursion to continue
64-
const temp = handleFindAnno(currentElement.children, id)
65-
if (temp != '') {
66-
return temp;
15+
const childrenArray = state.components[focusIndex].children; // ADDING SLICE HERE CAUSES STATE to NOT CHANGE...
16+
17+
// ---------------------------------------------- NEW CODE for DELETE BUTTONS (start) ---------------------------------------
18+
console.log('State components: ', state.components[0].children); // BRETT ADDED
19+
const deleteHTMLtype = (id: number) => {
20+
console.log(id, childrenArray);
21+
let arrIndex: number = -1;
22+
23+
let arrOfAllChildIDs: number[] = [];
24+
recurseAllChildren(childrenArray);
25+
26+
function recurseAllChildren(childArray) {
27+
// console.log('Full Array: ', childArray, arrOfAllChildIDs);
28+
for (let index in childArray) {
29+
// console.log(index);
30+
31+
if (childArray[index].children.length) {
32+
// console.log('In Recurse - non-endpoint: ', childArray[index].childId);
33+
arrOfAllChildIDs.push(childArray[index].childId); // Use this only to pull all non-endpoint childIds, document out breaks
34+
if (childArray[index].childId === id) {
35+
arrIndex = Number(index);
36+
// Remove BOTH element & preceding separator spacing objects from array if NOT nested
37+
childArray.splice(arrIndex - 1, 2);
38+
break;
39+
}
40+
recurseAllChildren(childArray[index].children);
41+
} else if (childArray[index].childId < 1000)
42+
// FILTER OUT separators...
43+
// console.log('In Recurse - endpoint: ', childArray[index].childId);
44+
arrOfAllChildIDs.push(childArray[index].childId); // Use this only to pull all endpoint childIds, document out breaks
45+
if (childArray[index].childId === id) {
46+
arrIndex = Number(index);
47+
// Remove BOTH element & preceding separator spacing objects from array if NOT nested
48+
childArray.splice(arrIndex - 1, 2);
49+
// console.log(index, arrIndex, 'ultimate', childArray[index]);
50+
break;
6751
}
6852
}
6953
}
70-
return '';
54+
console.log(arrIndex);
55+
console.log('arrOfAllChildIDs: ', arrOfAllChildIDs);
7156
};
72-
/**
73-
* This useEffect allows the annotations to remain persistent when changing between root level components on the right panel
74-
*/
75-
useEffect(() => {
76-
const event = {
77-
target: { value: annotation },
78-
id: id,
79-
}
80-
handleAnnoChange(event);
81-
}, [])
57+
// ---------------------------------------------- NEW CODE for DELETE BUTTONS (end) ---------------------------------------
8258

83-
const body = (
84-
<div className='annotate-position'>
85-
<span className='annotate-textarea-header'> Notes for: {name} ( {id} )</span>
86-
<textarea className='annotate-textarea' id={id.toString()} onChange={handleAnnoChange}>{annotations}</textarea>
87-
</div>
88-
)
59+
// ---------------------------------------------- LEGACY CODE (start) ---------------------------------------
60+
// // For showing the modal
61+
// const handleOpen = () => {
62+
// setOpen(true);
63+
// };
64+
// // For closing the modal and setting the global annotation value to the hook value
65+
// const handleClose = (id) => {
66+
// const childEle = handleFindAnno(childrenArray, id);
67+
// if (childEle) {
68+
// // set global annotation value for this component to it's hook value
69+
// childEle.annotations = annotation;
70+
// }
71+
// setOpen(false);
72+
// };
73+
// /**
74+
// * Handles when text exists in the textarea of the modal.
75+
// * If text exists/does not exist, corresponding button changes colors.
76+
// * Sets hook value to what is contained in the textarea
77+
// */
78+
// const handleAnnoChange = (event) => {
79+
// const { value } = event.target;
80+
// if (value === '' || value === undefined) {
81+
// ref.current.style.background = '#0CD34C';
82+
// } else {
83+
// ref.current.style.background = '#D59DFF';
84+
// }
85+
// if (value != annotation) {
86+
// setAnnotations(value);
87+
// }
88+
// };
89+
// /**
90+
// * This handler will find the specific anno for the corresponding component on the canvas in the childrenArray -
91+
// * where the canvas components are placed
92+
// */
93+
// const handleFindAnno = (array, id) => {
94+
// for (let i = 0; i < array.length; i++) {
95+
// const currentElement = array[i];
96+
// if (currentElement.childId === id) {
97+
// return currentElement;
98+
// // finds nested element if nested within canvas
99+
// } else if (currentElement.children.length > 0) {
100+
// // temp is to prevent a return of empty string since canvas element should always exist and allows the
101+
// // recursion to continue
102+
// const temp = handleFindAnno(currentElement.children, id);
103+
// if (temp != '') {
104+
// return temp;
105+
// }
106+
// }
107+
// }
108+
// return '';
109+
// };
110+
// /**
111+
// * This useEffect allows the annotations to remain persistent when changing between root level components on the right panel
112+
// */
113+
// useEffect(() => {
114+
// const event = {
115+
// target: { value: annotation },
116+
// id: id
117+
// };
118+
// handleAnnoChange(event);
119+
// }, []);
120+
121+
// const body = (
122+
// <div className="annotate-position">
123+
// <span className="annotate-textarea-header">
124+
// {' '}
125+
// Notes for: {name} ( {id} )
126+
// </span>
127+
// <textarea
128+
// className="annotate-textarea"
129+
// id={id.toString()}
130+
// onChange={handleAnnoChange}
131+
// >
132+
// {annotations}
133+
// </textarea>
134+
// </div>
135+
// );
136+
// ---------------------------------------------- LEGACY CODE (end) ---------------------------------------
89137

90138
return (
91139
<div style={{ padding: '1px', float: 'right' }}>
92-
<button className='annotate-button-empty' id={"btn" + id} onClick={() => handleOpen(id)} ref={ref}>Notes</button>
93-
<Modal
140+
<button
141+
className="annotate-button-empty" // NOTE: This class name no longer accurate
142+
id={'btn' + id}
143+
onClick={() => deleteHTMLtype(id)}
144+
// ref={ref}
145+
>
146+
DELETE
147+
</button>
148+
{/* <Modal
94149
open={open}
95150
onClose={() => handleClose(id)}
96151
keepMounted={true}
97152
>
98153
{body}
99-
</Modal>
154+
</Modal> */}
100155
</div>
101156
);
102157
}

0 commit comments

Comments
 (0)