From c01ba92021ded3f931b92e4e571209d8a2ddaaee Mon Sep 17 00:00:00 2001
From: Joshua Shoemaker <joshuashoemaker@outlook.com>
Date: Fri, 26 May 2023 19:13:18 -0500
Subject: [PATCH] refact: fixed front end type, removed dead code

---
 .../createUiCanvasInteractions.ts             |  24 +--
 frontend/components/DocumentCanvas/types.ts   |  19 +++
 .../workspace/Sidebar/DocumentLineItem.tsx    |  48 +-----
 .../workspace/Sidebar/GroupLineItem.tsx       | 143 +-----------------
 .../workspace/Sidebar/makeDefaultSidebar.ts   |   4 +
 .../workspace/Sidebar/navigationProps.ts      |   4 +-
 6 files changed, 28 insertions(+), 214 deletions(-)
 create mode 100644 frontend/components/DocumentCanvas/types.ts

diff --git a/frontend/components/DocumentCanvas/createUiCanvasInteractions.ts b/frontend/components/DocumentCanvas/createUiCanvasInteractions.ts
index 4bbd903..1840341 100644
--- a/frontend/components/DocumentCanvas/createUiCanvasInteractions.ts
+++ b/frontend/components/DocumentCanvas/createUiCanvasInteractions.ts
@@ -1,28 +1,6 @@
 import isInBounds from '../../utils/isInBounds'
 import { entities } from '../../wailsjs/wailsjs/go/models'
-
-
-type MouseCoordinates = {
-  startMouseX: number, startMouseY: number, endMouseX: number, endMouseY: number
-}
-
-type RectangleCoordinates = {
-  startX: number, startY: number, endX: number, endY: number
-}
-
-type AddAreaToStoreCallback =
-  (startX: number, startY: number, endX: number, endY: number)
-    => Promise<void>
-
-type SetZoomCallback = (newZoomLevel: number) => void
-
-type ZoomDetails = {
-  currentZoomLevel: number,
-  maxZoomLevel: number,
-  zoomStep: number
-}
-
-type HoverOverAreaCallback = (areaId?: string) => void
+import { AddAreaToStoreCallback, HoverOverAreaCallback, MouseCoordinates, RectangleCoordinates, SetZoomCallback, ZoomDetails } from './types'
 
 /**
  * @param uiCanvas 
diff --git a/frontend/components/DocumentCanvas/types.ts b/frontend/components/DocumentCanvas/types.ts
new file mode 100644
index 0000000..cf61d59
--- /dev/null
+++ b/frontend/components/DocumentCanvas/types.ts
@@ -0,0 +1,19 @@
+export type MouseCoordinates = {
+  startMouseX: number, startMouseY: number, endMouseX: number, endMouseY: number
+}
+
+export type RectangleCoordinates = {
+  startX: number, startY: number, endX: number, endY: number
+}
+
+export type AddAreaToStoreCallback = (startX: number, startY: number, endX: number, endY: number) => Promise<void>
+
+export type SetZoomCallback = (newZoomLevel: number) => void
+
+export type ZoomDetails = {
+  currentZoomLevel: number,
+  maxZoomLevel: number,
+  zoomStep: number
+}
+
+export type HoverOverAreaCallback = (areaId?: string) => void
\ No newline at end of file
diff --git a/frontend/components/workspace/Sidebar/DocumentLineItem.tsx b/frontend/components/workspace/Sidebar/DocumentLineItem.tsx
index cc0e25a..aa2890f 100644
--- a/frontend/components/workspace/Sidebar/DocumentLineItem.tsx
+++ b/frontend/components/workspace/Sidebar/DocumentLineItem.tsx
@@ -56,7 +56,7 @@ const DocumentLineItem = (props: { document: SidebarDocument, groupId: string, i
 
   return (
     <li className='p-0 m-0' key={props.document.id}>
-      {!props.document.areas.length
+      {!props.document.areas?.length
         ?
         <div
           onClick={() => onDocumentClickHandler(props.document.id)}
@@ -149,52 +149,6 @@ const DocumentLineItem = (props: { document: SidebarDocument, groupId: string, i
           <ul>
             {props.document.areas.map((a, index) => (
               <AreaLineItem key={a.id} area={a} index={index} documentId={props.document.id} />
-              // <li key={a.id}>
-              //   {selectedAreaId === a.id && isEditAreaNameInputShowing
-              //     ? <input
-              //       type="text"
-              //       name="areaName"
-              //       id="areaName"
-              //       autoFocus
-              //       className="h-8 text-white placeholder-gray-400 bg-gray-900 bg-opacity-5 block w-full rounded-none rounded-l-md border-late-700 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-              //       placeholder={a.name || `Area ${index}`}
-              //       onBlur={onAreaInputBlur}
-              //       onKeyDown={(event) => {
-              //         onEnterHandler(event,
-              //           () => onConfirmAreaNameChangeHandler({ areaId: a.id, areaName: event.currentTarget.value }))
-              //       }}
-              //       ref={editAreaNameTextInput}
-              //     />
-              //     : <div
-              //       draggable
-              //       onDragOver={() => onAreaDragOver(a.id)}
-              //       onDragStart={() => onAreaDragStart(a.id)}
-              //       onDragEnd={() => onAreaDropEnd(a.id)}
-              //       className={classNames('flex justify-between items-center cursor-pointer',
-              //         selectedAreaId === a.id ? 'bg-indigo-500 text-gray-200' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
-              //         dragOverAreaId === a.id ? 'bg-gray-300 text-gray-700' : '',
-              //         selectedAreaId === a.id && dragOverAreaId === a.id ? 'bg-indigo-300' : '',
-              //       )}>
-              //       <a
-              //         role='button'
-              //         onClick={() => onAreaClick(a.id)}
-              //         onDoubleClick={() => onAreaDoubleClick(a.id)}
-              //         className={classNames('group w-full pr-2 py-2 text-left font-medium pl-8 text-xs',
-              //           'rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 py-2 select-none',
-              //         )}>
-              //         {a.name || `Area ${a.order}`}
-              //       </a>
-              //       <ArrowPathIcon
-              //         className='w-6 h-5 mr-2 text-white hover:bg-white hover:text-gray-700 rounded-full p-0.5'
-              //         aria-hidden="true"
-              //         onClick={() => console.log('refresh')}
-              //       />
-              //       <XMarkIcon
-              //         className='w-6 h-5 mr-2 text-white hover:bg-red-400 hover:text-gray-100 rounded-full p-0.5'
-              //         onClick={() => handleAreaDeleteButtonClick(a.id)} />
-              //     </div>
-              //   }
-              // </li>
             ))}
           </ul>
         </details>
diff --git a/frontend/components/workspace/Sidebar/GroupLineItem.tsx b/frontend/components/workspace/Sidebar/GroupLineItem.tsx
index 45839fa..4900d73 100644
--- a/frontend/components/workspace/Sidebar/GroupLineItem.tsx
+++ b/frontend/components/workspace/Sidebar/GroupLineItem.tsx
@@ -1,17 +1,14 @@
 'use client'
 
 import { DocumentPlusIcon, PlusIcon, XMarkIcon } from '@heroicons/react/24/outline'
-import React, { useRef, useState } from 'react'
+import React, { useRef } from 'react'
 import { useProject } from '../../../context/Project/provider'
 import classNames from '../../../utils/classNames'
 import onEnterHandler from '../../../utils/onEnterHandler'
-import AddGroupInput from './AddGroupInput'
 import DocumentLineItem from './DocumentLineItem'
 import { useSidebar } from './provider'
 import { SidebarGroup } from './types'
 
-
-
 const GroupLineItem = (props: { group: SidebarGroup, dragOverGroupId?: string }) => {
   const {
     requestAddDocument,
@@ -58,10 +55,6 @@ const GroupLineItem = (props: { group: SidebarGroup, dragOverGroupId?: string })
     setDragOverGroupId(groupId)
   }
 
-  const onGroupDragStart = (groupId: string) => {
-    setSelectedGroupId(groupId)
-  }
-
   const onGroupDropEnd = (groupId: string) => {
     if (!groupId || groupId == dragOverGroupId) return
 
@@ -136,140 +129,6 @@ const GroupLineItem = (props: { group: SidebarGroup, dragOverGroupId?: string })
     <ul>
       {props.group.documents.map((d, index) => (
         <DocumentLineItem key={d.id} document={d} index={index} groupId={props.group.id} />
-        // <li className='p-0 m-0' key={d.id}>
-        //   {!d.areas.length
-        //     ?
-        //     <div
-        //       onClick={() => onDocumentClickHandler(d.id)}
-        //       onDoubleClick={() => onDocumentDoubleClickHandler(d.id)}
-        //       className={classNames(
-        //         d.id === selectedDocumentId
-        //           ? 'bg-gray-900 text-white'
-        //           : 'text-gray-300 hover:bg-gray-700 hover:text-white',
-        //         'group items-center py-2 text-base font-medium rounded-b-md pl-10',
-        //         index !== 0 ? 'rounded-t-md' : '',
-        //       )}>
-        //       {selectedDocumentId === d.id && isEditDocumentNameInputShowing
-        //         ? <input
-        //           type="text"
-        //           name="documentName"
-        //           id="documentName"
-        //           autoFocus
-        //           className="h-8 w-[calc(100%-18px)] text-white placeholder-gray-400 bg-gray-900 bg-opacity-5 inline-block rounded-none rounded-l-md border-late-700 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-        //           defaultValue={d.name}
-        //           onBlur={onDocumentInputBlur}
-        //           onKeyDown={(event) => {
-        //             onEnterHandler(event,
-        //               () => onConfirmDocumentNameChangeHandler(event.currentTarget.value))
-        //           }}
-        //           ref={editDocumentNameTextInput}
-        //         />
-        //         : <a
-        //           role='button'
-        //           className={classNames(
-        //             d.id === selectedDocumentId
-        //               ? 'bg-gray-900 text-white'
-        //               : 'text-gray-300 hover:bg-gray-700 hover:text-white',
-        //             'text-left font-medium text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 '
-        //           )}
-        //         >
-        //           {d.name}
-        //         </a>
-        //       }
-        //     </div>
-        //     : <details>
-        //       <summary
-        //         onClick={() => onDocumentClickHandler(d.id)}
-        //         onDoubleClick={() => onDocumentDoubleClickHandler(d.id)}
-        //         className={classNames(
-        //           d.id === selectedDocumentId
-        //             ? 'bg-gray-900 text-white'
-        //             : 'text-gray-300 hover:bg-gray-700 hover:text-white',
-        //           'group items-center py-2 text-base font-medium rounded-b-md pl-6',
-        //           index !== 0 ? 'rounded-t-md' : '',
-
-        //         )}>
-        //         {selectedDocumentId === d.id && isEditDocumentNameInputShowing
-        //           ? <input
-        //             type="text"
-        //             name="documentName"
-        //             id="documentName"
-        //             autoFocus
-        //             className="h-8 w-[calc(100%-18px)] text-white placeholder-gray-400 bg-gray-900 bg-opacity-5 inline-block rounded-none rounded-l-md border-late-700 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-        //             defaultValue={d.name}
-        //             onBlur={onDocumentInputBlur}
-        //             onKeyDown={(event) => {
-        //               onEnterHandler(event,
-        //                 () => onConfirmDocumentNameChangeHandler(event.currentTarget.value))
-        //             }}
-        //             ref={editDocumentNameTextInput}
-        //           />
-        //           : <a
-        //             role='button'
-        //             className={classNames(
-        //               d.id === selectedDocumentId
-        //                 ? 'bg-gray-900 text-white'
-        //                 : 'text-gray-300 hover:bg-gray-700 hover:text-white',
-        //               'text-left font-medium text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 '
-        //             )}
-        //           >
-        //             {d.name}
-        //           </a>
-        //         }
-        //       </summary>
-        //       <ul>
-        //         {d.areas.map((a, index) => (
-        //           <li key={a.id}>
-        //             {selectedAreaId === a.id && isEditAreaNameInputShowing
-        //               ? <input
-        //                 type="text"
-        //                 name="areaName"
-        //                 id="areaName"
-        //                 autoFocus
-        //                 className="h-8 text-white placeholder-gray-400 bg-gray-900 bg-opacity-5 block w-full rounded-none rounded-l-md border-late-700 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-        //                 placeholder={a.name || `Area ${index}`}
-        //                 onBlur={onAreaInputBlur}
-        //                 onKeyDown={(event) => {
-        //                   onEnterHandler(event,
-        //                     () => onConfirmAreaNameChangeHandler({ areaId: a.id, areaName: event.currentTarget.value }))
-        //                 }}
-        //                 ref={editAreaNameTextInput}
-        //               />
-        //               : <div
-        //                 draggable
-        //                 onDragOver={() => onAreaDragOver(a.id)}
-        //                 onDragStart={() => onAreaDragStart(a.id)}
-        //                 onDragEnd={() => onAreaDropEnd(a.id)}
-        //                 className={classNames('flex justify-between items-center cursor-pointer',
-        //                   selectedAreaId === a.id ? 'bg-indigo-500 text-gray-200' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
-        //                   dragOverAreaId === a.id ? 'bg-gray-300 text-gray-700' : '',
-        //                   selectedAreaId === a.id && dragOverAreaId === a.id ? 'bg-indigo-300' : '',
-        //                 )}>
-        //                 <a
-        //                   role='button'
-        //                   onClick={() => onAreaClick(a.id)}
-        //                   onDoubleClick={() => onAreaDoubleClick(a.id)}
-        //                   className={classNames('group w-full pr-2 py-2 text-left font-medium pl-8 text-xs',
-        //                     'rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 py-2 select-none',
-        //                   )}>
-        //                   {a.name || `Area ${a.order}`}
-        //                 </a>
-        //                 <ArrowPathIcon
-        //                   className='w-6 h-5 mr-2 text-white hover:bg-white hover:text-gray-700 rounded-full p-0.5'
-        //                   aria-hidden="true"
-        //                   onClick={() => console.log('refresh')}
-        //                 />
-        //                 <XMarkIcon
-        //                   className='w-6 h-5 mr-2 text-white hover:bg-red-400 hover:text-gray-100 rounded-full p-0.5'
-        //                   onClick={() => handleAreaDeleteButtonClick(a.id)} />
-        //               </div>
-        //             }
-        //           </li>
-        //         ))}
-        //       </ul>
-        //     </details>
-        //   }
-        // </li>
       ))}
 
       {renderAddNewDocument(props.group.id)}
diff --git a/frontend/components/workspace/Sidebar/makeDefaultSidebar.ts b/frontend/components/workspace/Sidebar/makeDefaultSidebar.ts
index cc45a09..1db8b35 100644
--- a/frontend/components/workspace/Sidebar/makeDefaultSidebar.ts
+++ b/frontend/components/workspace/Sidebar/makeDefaultSidebar.ts
@@ -16,6 +16,10 @@ const makeDefaultSidebar = (): SidebarContextType => ({
   setIsAddNewGroupInputShowing: (_: boolean) => {},
   isEditAreaNameInputShowing: false,
   setIsEditAreaNameInputShowing: (_: boolean) => {},
+  dragOverGroupId: '',
+  setDragOverGroupId: (_: string) => {},
+  dragOverAreaId: '',
+  setDragOverAreaId: (_: string) => {},
 })
 
 export default makeDefaultSidebar
\ No newline at end of file
diff --git a/frontend/components/workspace/Sidebar/navigationProps.ts b/frontend/components/workspace/Sidebar/navigationProps.ts
index f357b1f..6144101 100644
--- a/frontend/components/workspace/Sidebar/navigationProps.ts
+++ b/frontend/components/workspace/Sidebar/navigationProps.ts
@@ -8,7 +8,7 @@ const getNavigationProps = (documents: entities.Document[], groups: entities.Gro
       .map(d => ({
         id: d.id,
         name: d.name,
-        areas: d.areas.map(a => ({ id: a.id, name: a.name, order: a.order }))//.sort((a, b) => a.order - b.order)
+        areas: d.areas?.map(a => ({ id: a.id, name: a.name, order: a.order }))//.sort((a, b) => a.order - b.order)
       }))
 
     return {
@@ -23,7 +23,7 @@ const getNavigationProps = (documents: entities.Document[], groups: entities.Gro
     .map(d => ({
       id: d.id,
       name: d.name,
-      areas: d.areas.map(a => ({ id: a.id, name: a.name, order: a.order }))//.sort((a, b) => a.order - b.order)
+      areas: d.areas?.map(a => ({ id: a.id, name: a.name, order: a.order }))//.sort((a, b) => a.order - b.order)
     }))
 
   return [