removed all annotations variables, changed component to DeleteButton from Annotation

brett-webster · brett-webster · commit b84c850affe8 · 2023-02-24T03:25:00.000-05:00
diff --git a/app/src/components/main/DeleteButton.tsx b/app/src/components/main/DeleteButton.tsx
diff --git a/app/src/components/main/DirectChildComponent.tsx b/app/src/components/main/DirectChildComponent.tsx
@@ -3,7 +3,7 @@ import { Component, ChildElement } from '../../interfaces/Interfaces';
 import { useDrag } from 'react-dnd';
 import { ItemTypes } from '../../constants/ItemTypes';
 import StateContext from '../../context/context';
-import DeleteButton from './Annotation';
+import DeleteButton from './DeleteButton';
 import { combineStyles } from '../../helperFunctions/combineStyles';
 import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
 
@@ -67,11 +67,7 @@ function DirectChildComponent({
   return (
     <div onClick={onClickHandler} style={combinedStyle} ref={drag}>
       <strong>{name}</strong>
-      <DeleteButton
-        id={childId}
-        name={name}
-        // annotations={annotations}
-      />
+      <DeleteButton id={childId} name={name} />
     </div>
   );
 }
diff --git a/app/src/components/main/DirectChildHTML.tsx b/app/src/components/main/DirectChildHTML.tsx
@@ -5,18 +5,11 @@ import { ItemTypes } from '../../constants/ItemTypes';
 import StateContext from '../../context/context';
 import { combineStyles } from '../../helperFunctions/combineStyles';
 import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
-import DeleteButton from './Annotation';
+import DeleteButton from './DeleteButton';
 
 import { styleContext } from '../../containers/AppContainer';
 
-function DirectChildHTML({
-  childId,
-  name,
-  type,
-  typeId,
-  style,
-  annotations
-}: ChildElement) {
+function DirectChildHTML({ childId, name, type, typeId, style }: ChildElement) {
   const [state, dispatch] = useContext(StateContext);
   const { isThemeLight } = useContext(styleContext);
 
@@ -98,7 +91,6 @@ function DirectChildHTML({
         <DeleteButton
           id={childId}
           name={name[0].toLowerCase() + name.slice(1)}
-          annotations={annotations}
         />
       </span>
     </div>
diff --git a/app/src/components/main/DirectChildHTMLNestable.tsx b/app/src/components/main/DirectChildHTMLNestable.tsx
@@ -7,7 +7,7 @@ import { combineStyles } from '../../helperFunctions/combineStyles';
 import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
 import renderChildren from '../../helperFunctions/renderChildren';
 import adjustComponentColor from '../../helperFunctions/adjustComponentColor';
-import DeleteButton from './Annotation';
+import DeleteButton from './DeleteButton';
 import validateNewParent from '../../helperFunctions/changePositionValidation';
 import componentNest from '../../helperFunctions/componentNestValidation';
 import AddRoute from './AddRoute';
@@ -22,7 +22,6 @@ function DirectChildHTMLNestable({
   style,
   children,
   name,
-  annotations,
   attributes
 }: ChildElement) {
   const [state, dispatch] = useContext(StateContext);
@@ -224,7 +223,7 @@ function DirectChildHTMLNestable({
           {attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}
         </strong>
         {routeButton}
-        <DeleteButton id={childId} name={name} annotations={annotations} />
+        <DeleteButton id={childId} name={name} />
       </span>
       {renderChildren(children)}
     </div>
diff --git a/app/src/components/main/IndirectChild.tsx b/app/src/components/main/IndirectChild.tsx
@@ -3,16 +3,15 @@ import { combineStyles } from '../../helperFunctions/combineStyles';
 import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
 import StateContext from '../../context/context';
 import { Component } from '../../interfaces/Interfaces';
-import DeleteButton from './Annotation';
+import DeleteButton from './DeleteButton';
 
 function IndirectChild({
   style,
   children,
   placeHolder,
   linkId,
   childId,
-  name,
-  annotations
+  name
 }) {
   const [state, dispatch] = useContext(StateContext);
   let combinedStyle = combineStyles(globalDefaultStyle, style);
@@ -37,7 +36,7 @@ function IndirectChild({
   return (
     <div style={combinedStyle}>
       {`  ( ${childId} )`}
-      <DeleteButton id={childId} name={name} annotations={annotations} />
+      <DeleteButton id={childId} name={name} />
       {linkId ? (
         <div onClick={onClickHandlerRoute}>{linkName}</div>
       ) : (
diff --git a/app/src/helperFunctions/renderChildren.tsx b/app/src/helperFunctions/renderChildren.tsx
@@ -15,8 +15,8 @@ const renderChildren = (children: ChildElement[]) => {
   const [state, dispatch] = useContext(StateContext);
 
   return children.map((child: ChildElement, i: number) => {
-    const { type, style, childId, children, attributes, name, annotations} = child;
-    let {typeId} = child;
+    const { type, style, childId, children, attributes, name } = child;
+    let { typeId } = child;
     if (name === '') child.name = state.components[typeId - 1].name;
     // A DirectChildComponent is an instance of a top level component
     // This component will render IndirectChild components (div/components rendered inside a child component)
@@ -30,28 +30,57 @@ const renderChildren = (children: ChildElement[]) => {
           typeId={typeId}
           key={'DirChildComp' + childId.toString() + name}
           name={name}
-          annotations={annotations}
         />
       );
     }
     // child is a non-nestable type of HTML element (aka NOT divs, forms, OrderedLists, UnorderedLists, menus)
-    else if (type === 'HTML Element' && typeId !== 11 && typeId !== 1000 && typeId !== 2 && typeId !== 3 && typeId !== 14 && typeId !== 15 && typeId !== 16 && typeId !== 17 && typeId !== 18 && typeId !== -1 && typeId !== 19) {
+    else if (
+      type === 'HTML Element' &&
+      typeId !== 11 &&
+      typeId !== 1000 &&
+      typeId !== 2 &&
+      typeId !== 3 &&
+      typeId !== 14 &&
+      typeId !== 15 &&
+      typeId !== 16 &&
+      typeId !== 17 &&
+      typeId !== 18 &&
+      typeId !== -1 &&
+      typeId !== 19
+    ) {
       return (
         <DirectChildHTML
           childId={childId}
           type={type}
           typeId={typeId}
-          key={'DirChildHTML' + childId.toString() + name }
+          key={'DirChildHTML' + childId.toString() + name}
           name={name}
-          annotations={annotations}
         />
       );
     }
     // child is a nestable type of HTML element (divs, forms, OrderedLists, UnorderedLists, menus)
-    else if (type === 'HTML Element' && (typeId === 11 || typeId === 2 || typeId === 3 || typeId === 14 || typeId === 15 || typeId === 16 || typeId === 17 || typeId === 18 || typeId === -1 || typeId === 19)) {
-      if((typeId === 18 || typeId === 19) && state.projectType === 'Classic React') typeId = 18;
-      if((typeId === 17 || typeId === -1) && state.projectType === 'Next.js') return renderChildren(children);
-      if((typeId === 18 || typeId === 19) && state.projectType === 'Next.js') typeId = 19;
+    else if (
+      type === 'HTML Element' &&
+      (typeId === 11 ||
+        typeId === 2 ||
+        typeId === 3 ||
+        typeId === 14 ||
+        typeId === 15 ||
+        typeId === 16 ||
+        typeId === 17 ||
+        typeId === 18 ||
+        typeId === -1 ||
+        typeId === 19)
+    ) {
+      if (
+        (typeId === 18 || typeId === 19) &&
+        state.projectType === 'Classic React'
+      )
+        typeId = 18;
+      if ((typeId === 17 || typeId === -1) && state.projectType === 'Next.js')
+        return renderChildren(children);
+      if ((typeId === 18 || typeId === 19) && state.projectType === 'Next.js')
+        typeId = 19;
       return (
         <DirectChildHTMLNestable
           childId={childId}
@@ -60,19 +89,22 @@ const renderChildren = (children: ChildElement[]) => {
           children={children}
           key={'DirChildHTMLNest' + childId.toString() + name}
           name={name}
-          annotations={annotations}
           attributes={attributes}
         />
       );
-    }
-    else if (type === 'HTML Element' && typeId === 1000 ) {
+    } else if (type === 'HTML Element' && typeId === 1000) {
       return (
         <SeparatorChild
           childId={childId}
           type={type}
           typeId={typeId}
           children={children}
-          key={'SeparatorChild' + childId.toString() + name + (Math.random()*1000).toString()}
+          key={
+            'SeparatorChild' +
+            childId.toString() +
+            name +
+            (Math.random() * 1000).toString()
+          }
           name={name}
         />
       );
diff --git a/app/src/interfaces/Interfaces.ts b/app/src/interfaces/Interfaces.ts
@@ -26,7 +26,6 @@ export interface ChildElement {
   events: object;
   children?: ChildElement[];
   stateProps: StateProp[]; // state: [ { id, key, value, type }, ...]
-  annotations?: string;
   stateUsed?: object;
   passedInProps: StateProp[];
 }
@@ -43,7 +42,6 @@ export interface Component {
   past: any[];
   future: any[];
   stateProps: StateProp[]; // state: [ { id, key, value, type }, ...]
-  annotations?: string;
   useStateCodes: string[];
   useContext?: object;
   passedInProps: StateProp[];
@@ -92,11 +90,9 @@ export interface DragItemType {
 export interface LoginInt {
   isLoggedIn: boolean;
 }
-// Annotations TO BE REMOVED
 export interface DeleteButtons {
   id: number;
   name: string;
-  annotations?: string;
 }
 export interface StatePropsPanelProps {
   selectHandler: (table: any) => void;
