Sync view updates from extension, CMD + S to save View (#403)

#403

* CMD + S to save view, Sync view updates from extension

* Changeset added

* Table overlay fixes

Author: dineshsingh1

.changeset/old-balloons-play.md

@@ -0,0 +1,6 @@
+---
+'mexit': patch
+'mexit-webapp': patch
+---
+
+Sync Views From Extension, CMD + S To Save Views

apps/extension/src/Hooks/useSaveChanges.ts

@@ -17,14 +17,14 @@ import useDataStore from '../Stores/useDataStore'
 import { useHighlightStore } from '../Stores/useHighlightStore'
 import { useRecentsStore } from '../Stores/useRecentsStore'
 import { useSputlitStore } from '../Stores/useSputlitStore'
-import { wUpdateDoc } from '../Sync/invokeOnWorker'
 
 import { useAuthStore } from './useAuth'
 import { useEditorStore } from './useEditorStore'
 import { useHighlights } from './useHighlights'
 import { useInternalLinks } from './useInternalLinks'
 import { useNamespaces } from './useNamespaces'
 import { useNodes } from './useNodes'
+import { useSearch } from './useSearch'
 import { useSputlitContext, VisualState } from './useSputlitContext'
 
 export interface AppendAndSaveProps {
@@ -40,6 +40,7 @@ export function useSaveChanges() {
   const { setPreviewMode, setNodeContent } = useEditorStore()
   const { getParentILink, getEntirePathILinks, updateMultipleILinks, updateSingleILink, createNoteHierarchyString } =
     useInternalLinks()
+  const { updateDocument, updateBlocks } = useSearch()
   const { setVisualState } = useSputlitContext()
   const setNode = useSputlitStore((s) => s.setNode)
   const setSelection = useSputlitStore((s) => s.setSelection)
@@ -127,7 +128,7 @@ export function useSaveChanges() {
         setContent(nodeid, content)
 
         const title = !bulkCreateRequest ? message.title : message.node.title
-        wUpdateDoc({ id: nodeid, contents: content, title })
+        updateDocument({ id: nodeid, contents: content, title })
 
         mog('DispatchAfterSave', { response, nodeid, content, metadata, highlight, blockHighlightMap })
         dispatchAfterSave({ nodeid, content, metadata, highlight, blockHighlightMap }, saveAndExit, notification)
@@ -271,10 +272,9 @@ export function useSaveChanges() {
         const bulkCreateRequest = request.subType === 'BULK_CREATE_NODES'
         const nodeid = !bulkCreateRequest ? message.id : message.node.id
         const content = message.content ?? request.body.content
-
         appendContent(node.nodeid, content)
         const title = !bulkCreateRequest ? message.title : message.node.title
-        wUpdateDoc({
+        updateBlocks({
           id: node.nodeid,
           contents: content,
           title

apps/extension/src/Hooks/useSearch.ts

@@ -18,15 +18,16 @@ import {
   ListItemType,
   QuickLinkType,
   SearchRepExtra,
-  sortByCreated
+  sortByCreated,
+  useContentStore
 } from '@mexit/core'
 import { useQuery } from '@mexit/shared'
 
 import useDataStore from '../Stores/useDataStore'
 import { useLinkStore } from '../Stores/useLinkStore'
 import { useMentionStore } from '../Stores/useMentionStore'
 import { useSputlitStore } from '../Stores/useSputlitStore'
-import { wAddDoc, wRemoveDoc, wSearchIndexWithRanking, wUpdateDoc } from '../Sync/invokeOnWorker'
+import { wAddDoc, wRemoveDoc, wSearchIndexWithRanking, wUpdateDoc, wUpdateOrAppendBlocks } from '../Sync/invokeOnWorker'
 import { getListItemFromNode, getListItemFromSnippet } from '../Utils/helper'
 
 import { useAuthStore } from './useAuth'
@@ -71,10 +72,11 @@ export const useSearch = () => {
   const { getQuickLinks } = useQuickLinks()
   const { getSnippet } = useSnippets()
   const { generateSearchQuery } = useQuery()
+  const setDocUpdated = useContentStore((store) => store.setDocUpdated)
 
   const { getSearchExtra } = useSearchExtra()
 
-  const { getPathFromNodeid } = useLinks()
+  const { getTitleFromNoteId } = useLinks()
 
   const searchInList = async (actionType?: ActionType) => {
     const ilinks = useDataStore.getState().ilinks
@@ -156,34 +158,55 @@ export const useSearch = () => {
     const extra = getSearchExtra()
     await wAddDoc({
       ...doc,
-      title: doc.title ?? getPathFromNodeid(doc.id),
+      title: doc.title ?? getTitleFromNoteId(doc.id, { includeArchived: true, includeShared: true }),
       options: {
         ...(doc.options ?? {}),
         extra
       }
     })
+
+    setDocUpdated()
+  }
+
+  const updateBlocks = async (doc: IUpdateDoc) => {
+    const extra = getSearchExtra()
+
+    await wUpdateOrAppendBlocks({
+      ...doc,
+      title: doc.title ?? getTitleFromNoteId(doc.id, { includeArchived: true, includeShared: true }),
+      options: {
+        ...(doc.options ?? {}),
+        extra
+      }
+    })
+
+    setDocUpdated()
   }
 
   const updateDocument = async (doc: IUpdateDoc) => {
     const extra = getSearchExtra()
 
     await wUpdateDoc({
       ...doc,
-      title: doc.title ?? getPathFromNodeid(doc.id),
+      title: doc.title ?? getTitleFromNoteId(doc.id, { includeArchived: true, includeShared: true }),
       options: {
         ...(doc.options ?? {}),
         extra
       }
     })
+
+    setDocUpdated()
   }
 
   const removeDocument = async (key: Indexes, id: string) => {
     await wRemoveDoc(key, id)
+    setDocUpdated()
   }
 
   return {
     addDocument,
     searchInList,
+    updateBlocks,
     updateDocument,
     removeDocument
   }

apps/extension/src/Hooks/useSnippets.tsx

@@ -8,7 +8,8 @@ import {
   extractMetadata,
   getSnippetCommand,
   Snippet,
-  SnippetID
+  SnippetID,
+  useContentStore
 } from '@mexit/core'
 import { useSlashCommands } from '@mexit/shared'
 
@@ -28,6 +29,7 @@ export const useSnippets = () => {
   const updateDescription = useDescriptionStore((store) => store.updateDescription)
   const getWorkspaceId = useAuthStore((store) => store.getWorkspaceId)
   const { setVisualState } = useSputlitContext()
+
   const setPreviewMode = useEditorStore((s) => s.setPreviewMode)
   const addMetadata = useMetadataStore((s) => s.addMetadata)
   const setSlashCommands = useDataStore((store) => store.setSlashCommands)
@@ -73,6 +75,8 @@ export const useSnippets = () => {
           id: message.id,
           contents: request.data.content,
           title: message.title
+        }).then(() => {
+          useContentStore.getState().setDocUpdated()
         })
 
         if (notify) {

apps/extension/src/Sync/index.ts

@@ -58,7 +58,7 @@ const messagePassing = () => {
     useContentStore,
     {
       name: BroadcastSyncedChannel.CONTENTS,
-      sync: [{ field: 'contents' }]
+      sync: [{ field: 'contents' }, { field: 'docUpdated' }]
     },
     onStateChange
   )

apps/extension/src/Sync/invokeOnWorker.ts

@@ -62,6 +62,10 @@ export const wUpdateDoc = async (doc: IUpdateDoc) => {
   if (childIframe) return childIframe.updateDoc(doc)
 }
 
+export const wUpdateOrAppendBlocks = async (doc: IUpdateDoc) => {
+  if (childIframe) return childIframe.updateOrAppendBlocks(doc)
+}
+
 export const wRemoveDoc = async (key: Indexes, id: string) => {
   if (childIframe) return childIframe.removeDoc(key, id)
 }

apps/webapp/src/Components/TaskHeader.tsx

@@ -1,4 +1,5 @@
-import { useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { toast } from 'react-hot-toast'
 
 import trashIcon from '@iconify/icons-codicon/trash'
 import arrowLeftRightLine from '@iconify/icons-ri/arrow-left-right-line'
@@ -17,8 +18,10 @@ import {
   LoadingButton,
   ToolbarTooltip
 } from '@workduck-io/mex-components'
+import { tinykeys } from '@workduck-io/tinykeys'
 
 import {
+  PrimaryText,
   ShortcutToken,
   ShortcutTokens,
   TaskHeader as StyledTaskHeader,
@@ -40,6 +43,68 @@ interface ViewHeaderProps {
   cardSelected?: boolean // * To show actions related to selected Item
 }
 
+const ViewChangeStatus = ({ viewId }) => {
+  const views = useViewStore((store) => store.views)
+
+  const { viewType, sortOrder, globalJoin, sortType, entities, currentFilters, groupBy } = useViewFilters()
+  const { getView, updateView } = useViews()
+
+  const isCurrentViewChanged = useMemo(() => {
+    const currentView = getView(viewId)
+    return !(
+      JSON.stringify(currentFilters) === JSON.stringify(currentView?.filters) &&
+      viewType === currentView?.viewType &&
+      groupBy === currentView?.groupBy &&
+      sortType === currentView?.sortType &&
+      sortOrder === currentView?.sortOrder &&
+      entities === currentView?.entities
+    )
+  }, [currentFilters, viewType, entities, groupBy, sortType, sortOrder, views, viewId])
+
+  const onSaveView = useCallback(
+    async (viewId: string) => {
+      const oldview = getView(viewId)
+
+      const newView = {
+        ...oldview,
+        filters: currentFilters,
+        viewType,
+        globalJoin,
+        groupBy,
+        entities,
+        sortOrder,
+        sortType
+      }
+
+      try {
+        await updateView(newView)
+        toast('View Saved')
+      } catch (err) {
+        console.error('Unable to save view', err)
+        toast('Unable to save view')
+      }
+    },
+    [currentFilters, viewType, groupBy, sortType, sortOrder, entities]
+  )
+
+  useEffect(() => {
+    const unsubscribe = tinykeys(window, {
+      '$mod+KeyS': (e) => {
+        e.stopPropagation()
+        e.preventDefault()
+
+        if (isCurrentViewChanged) {
+          onSaveView(viewId)
+        }
+      }
+    })
+
+    return () => unsubscribe()
+  }, [viewId, onSaveView, isCurrentViewChanged])
+
+  return <PrimaryText>{isCurrentViewChanged && '*'}</PrimaryText>
+}
+
 const ViewHeader = ({ cardSelected = false }: ViewHeaderProps) => {
   const [deleting, setDeleting] = useState(false)
 
@@ -50,20 +115,10 @@ const ViewHeader = ({ cardSelected = false }: ViewHeaderProps) => {
 
   const { goTo } = useRouting()
   const { deleteView } = useViews()
+
   const [source, target] = useSingleton()
   const { viewType, sortOrder, globalJoin, sortType, entities, currentFilters, groupBy } = useViewFilters()
 
-  const isCurrentViewChanged = useMemo(() => {
-    return !(
-      JSON.stringify(currentFilters) === JSON.stringify(view?.filters) &&
-      viewType === view?.viewType &&
-      groupBy === view?.groupBy &&
-      sortType === view?.sortType &&
-      sortOrder === view?.sortOrder &&
-      entities === view?.entities
-    )
-  }, [currentFilters, viewType, groupBy, sortType, sortOrder])
-
   const handleUpdateView = () => {
     openTaskViewModal({
       filters: currentFilters,
@@ -96,7 +151,6 @@ const ViewHeader = ({ cardSelected = false }: ViewHeaderProps) => {
 
   const handleCloneView = () => {
     const { id, filters, ...properties } = view
-    console.log('cloning')
     openTaskViewModal({
       cloneViewId: view?.id,
       filters,
@@ -128,7 +182,7 @@ const ViewHeader = ({ cardSelected = false }: ViewHeaderProps) => {
             <TaskViewTitle>
               <Icon icon={stackLine} />
               <span>{view?.title}</span>
-              {isCurrentViewChanged && !isDefault && '*'}
+              {view?.id && !isDefault && <ViewChangeStatus viewId={view?.id} />}
             </TaskViewTitle>
             <TaskViewControls>
               {!isDefault && (

apps/webapp/src/IFrame/extensionConnector.ts

@@ -19,7 +19,8 @@ import {
   searchIndexWithRanking,
   startRequestsWorkerService,
   startSearchWorker,
-  updateDoc
+  updateDoc,
+  updateOrAppendBlocks
 } from '../Workers/controller'
 
 import { broadCastMessage } from './channels'
@@ -55,6 +56,7 @@ export const webExtensionConnector = async () => {
     startRequestsWorkerService,
     addDoc,
     updateDoc,
+    updateOrAppendBlocks,
     removeDoc,
     initHighlightsExtension,
     initLinksExtension,

apps/webapp/src/Views/SearchFilters.tsx

@@ -91,10 +91,12 @@ const SearchFilters = ({
         </FilterValuesWrapper>
         <NewFilterMenu filters={filters} addFilter={(f) => addCurrentFilter(f)} removeLastFilter={removeLastFilter} />
       </SearchFiltersWrapper>
-      {onGroupByChange && <GroupByMenu onChange={onGroupByChange} />}
-      {sortMenuProps && <SortMenu {...sortMenuProps} />}
-      {onEntityFilterChange && <EntityFilterMenu onChange={onEntityFilterChange} />}
-      {viewSelectorProps && <ViewSelector {...viewSelectorProps} />}
+      <SearchFilterLabel flexStart>
+        {onGroupByChange && <GroupByMenu onChange={onGroupByChange} />}
+        {sortMenuProps && <SortMenu {...sortMenuProps} />}
+        {onEntityFilterChange && <EntityFilterMenu onChange={onEntityFilterChange} />}
+        {viewSelectorProps && <ViewSelector {...viewSelectorProps} />}
+      </SearchFilterLabel>
     </SearchFilterWrapper>
   )
 }