Flexsearch and Request Handler Fixes; Update Search in Extension (#404)

#404

* Remove .data from response in extension requestHandler

* Update mex-search to 0.0.8 for flexsearch fix

* IDBStorage to Localstorage webapp auth getter

* Update search

* UI changes

* Add changeset

* Remove logs

---------

Co-authored-by: Dinesh Singh <[email protected]>

Author: Mukul Mehta

.changeset/light-pans-clap.md

@@ -0,0 +1,6 @@
+---
+'mexit': patch
+'mexit-webapp': patch
+---
+
+Request Handler fixes; Revert flexsearh to 0.7.22; UI and Search Fixes

apps/extension/src/Components/Action/styled.tsx

@@ -17,7 +17,7 @@ export const StyledAction = styled.div<{ $active?: boolean }>`
   ${({ $active }) =>
     $active &&
     css`
-      background: ${({ theme }) => theme.tokens.surfaces.s[1]};
+      background: ${({ theme }) => theme.tokens.surfaces.s[3]};
     `}
 `
 

apps/extension/src/Components/Sidebar/SnippetsInfoBar.tsx

@@ -119,14 +119,14 @@ export const SnippetsInfoBar = () => {
       setSearchedSnippets(snippets)
     } else {
       const searched = res
-        .map((r) => {
+        ?.map((r) => {
           const snippet = snippets.find((snippet) => snippet.id === r.parent)
 
           return snippet
         })
-        .filter((s) => s !== undefined) as Snippet[]
+        ?.filter((s) => s !== undefined) as Snippet[]
 
-      setSearchedSnippets(searched)
+      setSearchedSnippets(searched ?? [])
     }
   }
 

apps/extension/src/Components/Sidebar/index.tsx

@@ -26,7 +26,7 @@ const ExtInfoBarItems = () => {
   return (
     <Tabs
       visible={true}
-      openedTab={infobar.mode}
+      openedTab={infobar.mode ?? 'context'}
       root={getElementById('ext-side-nav')}
       onChange={(tab) => {
         setInfobarMode(tab as ExtInfobarMode)

apps/extension/src/Hooks/useSearch.ts

@@ -23,7 +23,8 @@ import {
   useContentStore,
   useDataStore,
   useLinkStore,
-  useMentionStore
+  useMentionStore,
+  useSnippetStore
 } from '@mexit/core'
 import { useQuery } from '@mexit/shared'
 
@@ -33,7 +34,6 @@ import { getListItemFromNode, getListItemFromSnippet } from '../Utils/helper'
 
 import { useLinks } from './useLinks'
 import { useQuickLinks } from './useQuickLinks'
-import { useSnippets } from './useSnippets'
 
 export const useSearchExtra = () => {
   const ilinks = useDataStore((s) => s.ilinks)
@@ -70,7 +70,6 @@ export const useSearchExtra = () => {
 
 export const useSearch = () => {
   const { getQuickLinks } = useQuickLinks()
-  const { getSnippet } = useSnippets()
   const { generateSearchQuery } = useQuery()
   const setDocUpdated = useContentStore((store) => store.setDocUpdated)
 
@@ -111,8 +110,9 @@ export const useSearch = () => {
         })
 
         if (!selection) {
+          const snippets = useSnippetStore.getState().snippets
           snippetItems?.forEach((snippet) => {
-            const snip = getSnippet(snippet.parent)
+            const snip = snippets?.[snippet?.parent]
             if (snip) {
               const item = getListItemFromSnippet(snip, actionType)
               localNodes.push(item)

apps/extension/src/Hooks/useSnippets.tsx

@@ -10,17 +10,15 @@ import {
   Snippet,
   SnippetID,
   useAuthStore,
-  useContentStore,
   useDataStore,
   useDescriptionStore,
   useMetadataStore,
   useSnippetStore
 } from '@mexit/core'
 import { useSlashCommands } from '@mexit/shared'
 
-import { wUpdateDoc } from '../Sync/invokeOnWorker'
-
 import { useEditorStore } from './useEditorStore'
+import { useSearch } from './useSearch'
 import { useSputlitContext, VisualState } from './useSputlitContext'
 
 export const useSnippets = () => {
@@ -34,6 +32,7 @@ export const useSnippets = () => {
   const addMetadata = useMetadataStore((s) => s.addMetadata)
   const setSlashCommands = useDataStore((store) => store.setSlashCommands)
 
+  const { updateDocument } = useSearch()
   const { generateSlashCommands } = useSlashCommands()
 
   const getSnippets = () => {
@@ -70,13 +69,12 @@ export const useSnippets = () => {
         const metadata = extractMetadata(message.metadata, { icon: DefaultMIcons.SNIPPET })
 
         addMetadata('snippets', { [message.id]: metadata })
-        wUpdateDoc({
+
+        updateDocument({
           indexKey: Indexes.SNIPPET,
           id: message.id,
           contents: request.data.content,
           title: message.title
-        }).then(() => {
-          useContentStore.getState().setDocUpdated()
         })
 
         if (notify) {

apps/extension/src/Utils/requestHandler.ts

@@ -32,7 +32,7 @@ export const handleCaptureRequest = ({ subType, data }) => {
         })
         .json()
         .then((response: any) => {
-          return { message: { ...response.data, content: deserializeContent(reqData.data) }, error: null }
+          return { message: { ...response, content: deserializeContent(reqData.data) }, error: null }
         })
         .catch((err) => {
           return { message: null, error: err }
@@ -62,7 +62,7 @@ export const handleCaptureRequest = ({ subType, data }) => {
         })
         .json()
         .then((response: any) => {
-          return { message: { ...response.data, content: deserializeContent(reqData.data) }, error: null }
+          return { message: { ...response, content: deserializeContent(reqData.data) }, error: null }
         })
         .catch((error) => {
           return { message: null, error: error }
@@ -90,7 +90,7 @@ export const handleSnippetRequest = ({ data }) => {
     })
     .json()
     .then((response: any) => {
-      return { message: response.data, error: null }
+      return { message: response, error: null }
     })
     .catch((err) => {
       return { message: null, error: err }
@@ -113,7 +113,7 @@ export const handleNodeContentRequest = ({ subType, body, headers }) => {
         })
         .json()
         .then((response: any) => {
-          return { message: response.data, error: null }
+          return { message: response, error: null }
         })
         .catch((err) => {
           return { message: null, error: err }

apps/webapp/src/Components/Sidebar/SidebarList.tsx

@@ -7,7 +7,7 @@ import { debounce } from 'lodash'
 
 import { tinykeys } from '@workduck-io/tinykeys'
 
-import { fuzzySearch, LastOpenedState, mog , useLayoutStore } from '@mexit/core'
+import { fuzzySearch, LastOpenedState, mog, useLayoutStore } from '@mexit/core'
 import {
   DesignItem,
   EmptyMessage,

apps/webapp/src/Components/Sidebar/TaskViewList.tsx

@@ -2,13 +2,7 @@ import React from 'react'
 
 import stackLine from '@iconify/icons-ri/stack-line'
 
-import {
-  ContextMenuType,
-  getMIcon,
-  ReminderViewData,
-  useLayoutStore,
-  ViewType
-} from '@mexit/core'
+import { ContextMenuType, getMIcon, ReminderViewData, useLayoutStore, ViewType } from '@mexit/core'
 import { DefaultMIcons, IconDisplay } from '@mexit/shared'
 
 import { NavigationType, ROUTE_PATHS, useRouting } from '../../Hooks/useRouting'

apps/webapp/src/Components/TaskHeader.tsx

@@ -10,14 +10,7 @@ import stackLine from '@iconify/icons-ri/stack-line'
 import { Icon } from '@iconify/react'
 import { useSingleton } from '@tippyjs/react'
 
-import {
-  Button,
-  DisplayShortcut,
-  IconButton,
-  Infobox,
-  LoadingButton,
-  ToolbarTooltip
-} from '@workduck-io/mex-components'
+import { Button, DisplayShortcut, IconButton, LoadingButton, ToolbarTooltip } from '@workduck-io/mex-components'
 import { tinykeys } from '@workduck-io/tinykeys'
 
 import {
@@ -26,7 +19,6 @@ import {
   ShortcutTokens,
   TaskHeader as StyledTaskHeader,
   TaskHeaderTitleSection,
-  TasksHelp,
   TaskViewControls,
   TaskViewHeaderWrapper,
   TaskViewTitle
@@ -138,6 +130,7 @@ const ViewHeader = ({ cardSelected = false }: ViewHeaderProps) => {
     openTaskViewModal({
       cloneViewId: view?.id,
       filters: currentFilters,
+      type: 'save-as',
       properties: {
         viewType,
         globalJoin,
@@ -216,7 +209,7 @@ const ViewHeader = ({ cardSelected = false }: ViewHeaderProps) => {
       </TaskHeaderTitleSection>
       <ShortcutTokens>
         <ShortcutToken>
-          Select:
+          Select Card:
           <Icon icon={dragMove2Fill} />
         </ShortcutToken>
         {cardSelected && (
@@ -243,7 +236,7 @@ const ViewHeader = ({ cardSelected = false }: ViewHeaderProps) => {
           </ShortcutToken>
         )}
       </ShortcutTokens>
-      <Infobox text={TasksHelp} />
+      {/* <Infobox text={TasksHelp} /> */}
     </StyledTaskHeader>
   )
 }

apps/webapp/src/Components/TaskViewModal.tsx

@@ -37,6 +37,8 @@ interface ViewProperties {
   groupBy?: string
 }
 
+export type ViewCreateType = 'new' | 'update' | 'clone' | 'save-as'
+
 interface TaskViewModalState {
   open: boolean
   // If present, changes in title, description will be applied to the view with viewid
@@ -45,9 +47,11 @@ interface TaskViewModalState {
   cloneViewId?: string
   filters: Filter[]
   properties?: ViewProperties
+  type?: ViewCreateType
 
   openModal: (args: {
     filters: Filter[]
+    type?: ViewCreateType
     updateViewId?: string
     cloneViewId?: string
     properties: ViewProperties
@@ -59,6 +63,7 @@ interface TaskViewModalState {
 const getInitialState = () => ({
   open: false,
   filters: [],
+  type: 'new' as ViewCreateType,
   updateViewId: undefined,
   cloneViewId: undefined,
   properties: {
@@ -88,6 +93,7 @@ const TaskViewModal = () => {
   const updateViewId = useTaskViewModalStore((store) => store.updateViewId)
   const cloneViewId = useTaskViewModalStore((store) => store.cloneViewId)
   const filters = useTaskViewModalStore((store) => store.filters)
+  const type = useTaskViewModalStore((store) => store.type)
 
   const closeModal = useTaskViewModalStore((store) => store.closeModal)
 
@@ -173,10 +179,17 @@ const TaskViewModal = () => {
     closeModal()
   }
 
-  // mog('TaskViewModal', { open, curView })
+  // * TODO: Use Type Based Switch here
+  const getTitle = () => {
+    if (updateViewId) return 'Update View'
+    if (type === 'save-as') return 'Save As'
+    if (cloneViewId) return 'Clone View'
+    return 'New View'
+  }
+
   return (
     <Modal className="ModalContent" overlayClassName="ModalOverlay" onRequestClose={closeModal} isOpen={open}>
-      <ModalHeader>{updateViewId ? 'Update' : cloneViewId ? 'Clone' : 'New'} Task View</ModalHeader>
+      <ModalHeader>{getTitle()}</ModalHeader>
 
       <form onSubmit={handleSubmit(onSubmit)}>
         <Input

apps/webapp/src/Components/Todo/BoardTask.tsx

@@ -42,7 +42,6 @@ export const RenderBoardTask = React.memo<RenderTaskProps>(
 
     const todo = useMemo(() => getTodoOfNode(nodeid, todoid), [nodeid, todoid])
     const pC = useMemo(() => getPureContent(todo), [id, todo, documentUpdated])
-    console.log('TODO IS', { todo, pC, nodeid })
     const { accessWhenShared } = usePermissions()
     const readOnly = useMemo(() => isReadonly(accessWhenShared(todo?.nodeid)), [todo])
     const toggleModal = useModalStore((store) => store.toggleOpen)

apps/webapp/src/IFrame/initializeExtension.ts

@@ -1,5 +1,3 @@
-import { get } from 'idb-keyval'
-
 import { BroadcastSyncedChannel, getStoreName, StoreIdentifier } from '@mexit/core'
 
 const updateDwindleAuth = (extension) => {
@@ -14,7 +12,7 @@ const updateDwindleAuth = (extension) => {
 
 const updateUserInfo = async (extension) => {
   const storeName = getStoreName(StoreIdentifier.AUTH, false)
-  const data = await get(storeName)
+  const data = localStorage.getItem(storeName)
   extension.sendToExtension({
     msgId: BroadcastSyncedChannel.AUTH,
     state: JSON.parse(data).state,

apps/webapp/src/Workers/search.ts

@@ -47,14 +47,24 @@ const searchWorker = {
   addDoc: (doc: IUpdateDoc) => {
     if (doc.indexKey === Indexes.ARCHIVE) console.log('Adding Archive Doc', { id: doc.id, contents: doc.contents })
 
-    searchX.addOrUpdateDocument(doc)
+    searchX.addOrUpdateDocument({
+      ...doc,
+      contents: doc.contents?.map((item) => ({ ...item, metadata: item.metadata ?? {} }))
+    })
   },
   updateBlock: (doc: IUpdateDoc) => {
-    searchX.appendToDoc(doc)
+    searchX.appendToDoc({
+      ...doc,
+      contents: doc.contents?.map((item) => ({ ...item, metadata: item.metadata ?? {} }))
+    })
   },
   updateDoc: (doc: IUpdateDoc) => {
     if (doc.indexKey === Indexes.ARCHIVE) console.log('Updating Archive Doc', { id: doc.id, contents: doc.contents })
-    searchX.addOrUpdateDocument(doc)
+
+    searchX.addOrUpdateDocument({
+      ...doc,
+      contents: doc.contents?.map((item) => ({ ...item, metadata: item.metadata ?? {} }))
+    })
   },
   updateILink: (ilink: ILink) => {
     searchX.updateIlink(ilink)

libs/core/src/Stores/auth.store.ts

@@ -36,7 +36,7 @@ export const authStoreConfig = (set, get) => ({
   }
 })
 
-export const useAuthStore = createStore(authStoreConfig, StoreIdentifier.AUTHSTORE, true, {
+export const useAuthStore = createStore(authStoreConfig, StoreIdentifier.AUTH, true, {
   storage: {
     web: typeof window !== 'undefined' ? localStorage : undefined
   }

libs/core/src/Types/Store.ts

@@ -62,7 +62,6 @@ export enum StoreIdentifier {
   TREE = 'tree',
   USERCACHE = 'user-cache',
   APP = 'app',
-  AUTHSTORE = 'authstore',
   EDITORS = 'editors',
   EDITOR = 'editor',
   BUFFER = 'buffer',

libs/shared/src/Style/Todo.tsx

@@ -190,6 +190,7 @@ export const ShortcutTokens = styled.div`
 
 export const ShortcutToken = styled.div`
   display: flex;
+  pointer-events: none;
   align-items: center;
   ${({ theme }) => generateStyle(theme.generic.shortcut)};
   gap: ${({ theme }) => theme.spacing.small};

libs/shared/src/Utils/helpers.ts

@@ -2,7 +2,6 @@ import React from 'react'
 import toast from 'react-hot-toast'
 
 export async function copyTextToClipboard(text: any, toastMessage?: string) {
-  console.log('COPY TO CLIP', { text, s: String(text) })
   await navigator.clipboard
     .writeText(String(text))
     .then(() => {

libs/shared/src/Utils/tabInfo.ts

@@ -1,6 +1,5 @@
 export const getCurrentTab = async () => {
   const cTabsArr = await chrome.tabs?.query({ currentWindow: true, active: true })
-  console.log('Tabs: ', cTabsArr)
   const currTab = cTabsArr[0]
 
   return currTab

package.json

@@ -20,7 +20,7 @@
     "*.{ts,tsx}": "eslint --cache --fix"
   },
   "dependencies": {
-    "@workduck-io/mex-search": "0.0.6",
+    "@workduck-io/mex-search": "0.0.8",
     "buffer": "^6.0.3",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",