Initialize Entities In API calls, Personal View In Views Page (#413)

#413

* Init Entities in API calls, Inline Todos changes

* Remove logs

Author: dineshsingh1

.changeset/sour-berries-compete.md

@@ -0,0 +1,5 @@
+---
+'mexit-webapp': patch
+---
+
+'Init Entities in API calls, inline tasks'

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

@@ -72,9 +72,9 @@ const ViewList = () => {
               data: {}
             },
             {
-              label: 'Reminders',
+              label: 'Personal',
               id: ReminderViewData.id,
-              icon: getMIcon('ICON', 'ri:timer-flash-line'),
+              icon: getMIcon('ICON', 'ri:user-line'),
               data: {}
             }
           ]}

apps/webapp/src/Components/TaskHeader.tsx

@@ -107,7 +107,7 @@ const ViewHeader = ({ cardSelected = false }: ViewHeaderProps) => {
 
   const openTaskViewModal = useTaskViewModalStore((store) => store.openModal)
 
-  const isDefault = ['tasks', 'reminders'].includes(view?.id)
+  const isDefault = ['tasks', 'personal'].includes(view?.id)
 
   const { goTo } = useRouting()
 

apps/webapp/src/Components/Views/index.tsx

@@ -63,7 +63,7 @@ export const ViewContainer: React.FC<ViewProps> = ({ viewId, withFilters = true
 
   return (
     <View>
-      <ViewRenderer key={activeView?.id} view={activeView} />
+      <ViewRenderer view={activeView} />
     </View>
   )
 }

apps/webapp/src/Editor/Components/SlashCommands/useSlashCommandOnChange.ts

@@ -9,7 +9,14 @@ import {
   TElement
 } from '@udecode/plate'
 
-import { camelCase, FloatingElementType, isElder, useComboboxStore, useFloatingStore } from '@mexit/core'
+import {
+  camelCase,
+  ELEMENT_TODO_LI,
+  FloatingElementType,
+  isElder,
+  useComboboxStore,
+  useFloatingStore
+} from '@mexit/core'
 
 import { useSnippets } from '../../../Hooks/useSnippets'
 import { IComboboxItem, SlashCommandConfig } from '../../Types/Combobox'
@@ -23,10 +30,13 @@ export const useSlashCommandOnChange = (keys: { [type: string]: SlashCommandConf
     const targetRange = useComboboxStore.getState().targetRange
     const commandKey = Object.keys(keys).filter((k) => keys[k].command === item.key)[0]
     const commandConfig = keys[commandKey]
-
     if (targetRange) {
       try {
-        if (isElder(commandKey, 'snip')) {
+        if (commandConfig.slateElementType === ELEMENT_TODO_LI) {
+          const data = commandConfig.getData ? commandConfig.getData(item) : { type: commandConfig.slateElementType }
+          select(editor, targetRange)
+          insertNodes(editor, data)
+        } else if (isElder(commandKey, 'snip')) {
           const content = getSnippetContent(commandConfig.command)
           if (content) {
             select(editor, targetRange)

apps/webapp/src/Editor/Hooks/useEditorConfig.ts

@@ -16,6 +16,7 @@ import {
   mog,
   PromptRenderType,
   SEPARATOR,
+  TodoStatus,
   useAuthStore,
   useDataStore,
   useEditorStore,
@@ -259,7 +260,12 @@ export const useEditorPluginConfig = (editorId: string, options?: PluginOptionTy
       },
       task: {
         slateElementType: ELEMENT_TODO_LI,
-        command: 'task'
+        command: 'task',
+        getData: () => ({
+          type: ELEMENT_TODO_LI,
+          children: [{ text: '' }],
+          status: TodoStatus.todo
+        })
       },
       table: {
         slateElementType: ELEMENT_TABLE,

apps/webapp/src/Editor/Plugins/options.tsx

@@ -40,6 +40,7 @@ import {
   MARK_ITALIC,
   MARK_STRIKETHROUGH,
   PlateEditor,
+  setElements,
   toggleList,
   unwrapList,
   Value
@@ -62,18 +63,12 @@ const preFormat = (editor: PlateEditor<Value>) => unwrapList(editor)
  * Returns true if the autoformat can be applied:
  * Is outside of code
  */
-const formatQuery = (editor: PlateEditor<Value>, options: AutoformatQueryOptions) => {
+export const formatQuery = (editor: PlateEditor<Value>, options: AutoformatQueryOptions) => {
   const parentEntry = getParentNode(editor, editor.selection.focus)
   if (!parentEntry) return
   const [node] = parentEntry
 
-  // mog('formatQuery', { editor, options, node })
-
   if (isElement(node) && node.type !== ELEMENT_CODE_LINE && node.type !== ELEMENT_CODE_BLOCK) {
-    // mog('formatNodeConversion', {
-    //   node,
-    //   parentEntry
-    // })
     return true
   }
   return false
@@ -177,14 +172,10 @@ export const optionsAutoFormatRule: Array<AutoformatRule> = [
     match: '[]',
     triggerAtBlockStart: true,
     format: (editor: PlateEditor<Value>) => {
-      insertNodes(editor, [
-        {
-          type: ELEMENT_TODO_LI,
-          children: [{ text: '' }],
-          id: generateTempId(),
-          status: TodoStatus.todo
-        }
-      ])
+      setElements(editor, {
+        type: ELEMENT_TODO_LI,
+        status: TodoStatus.todo
+      })
     },
     query: formatQuery
   },

apps/webapp/src/Hooks/useHighlights.tsx

@@ -2,6 +2,8 @@ import { useCallback } from 'react'
 
 import { mog, useHighlightStore } from '@mexit/core'
 
+import { getEntitiyInitializer } from '../Workers/controller'
+
 import { useHighlightAPI } from './API/useHighlightAPI'
 
 export const useHighlights = () => {
@@ -38,6 +40,7 @@ export const useHighlightSync = () => {
       .then((highlights) => {
         if (highlights) {
           setHighlights(highlights)
+          getEntitiyInitializer('initializeHighlights', highlights)
         }
       })
       .catch((e) => {

apps/webapp/src/Hooks/useInitLoader.ts

@@ -41,6 +41,7 @@ export const useInitLoader = () => {
 
   const getWorkspaceId = useAuthStore((store) => store.getWorkspaceId)
   const snippetHydrated = useSnippetStore((store) => store._hasHydrated)
+  const highlightStoreHydrated = useHighlightStore((store) => store._hasHydrated)
   const dataStoreHydrated = useDataStore((store) => store._hasHydrated)
   const contentStoreHydrated = useContentStore((store) => store._hasHydrated)
   const initHighlightBlockMap = useHighlightStore((store) => store.initHighlightBlockMap)
@@ -124,7 +125,8 @@ export const useInitLoader = () => {
       userPrefHydrated &&
       snippetHydrated &&
       dataStoreHydrated &&
-      contentStoreHydrated
+      contentStoreHydrated &&
+      highlightStoreHydrated
     ) {
       startWorkers()
         .then(async () => {

apps/webapp/src/Hooks/useURLs.ts

@@ -15,8 +15,11 @@ import {
   URL_DOMAIN_REG,
   useAuthStore,
   useDataStore,
-  useHighlightStore
-, useLinkStore } from '@mexit/core'
+  useHighlightStore,
+  useLinkStore
+} from '@mexit/core'
+
+import { getEntitiyInitializer } from '../Workers/controller'
 
 import { useLinkFilterFunctions } from './useFilterFunctions'
 import { applyFilters, FilterStore } from './useFilters'
@@ -352,6 +355,7 @@ export const useURLsAPI = () => {
       })
       .then((links: Link[]) => {
         setLinks(links)
+        getEntitiyInitializer('initializeLinks', links)
       })
       .catch(console.error)
 

apps/webapp/src/Hooks/useViewResults.ts

@@ -46,11 +46,13 @@ const useViewResults = (path: string) => {
     const filterSetQuery = currentFilters?.length > 0 ? [...parentFilters, currentFilters] : parentFilters
     const query = generateFilterSetQuery(filterSetQuery, entities)
 
-    queryIndex(Indexes.MAIN, query).then((queryResult) => {
-      if (queryResult) {
-        setResults(queryResult)
-      }
-    })
+    if (query.length) {
+      queryIndex(Indexes.MAIN, query).then((queryResult) => {
+        if (queryResult) {
+          setResults(queryResult)
+        }
+      })
+    } else setResults([])
   }, [currentFilters, entities, docUpdated])
 
   return groupedResults

apps/webapp/src/Hooks/useViews.tsx

@@ -1,6 +1,6 @@
 import { Entities } from '@workduck-io/mex-search'
 
-import { Filter, getAllEntities, useDataStore, View, ViewType } from '@mexit/core'
+import { Filter, getAllEntities, RESERVED_NAMESPACES, useDataStore, View, ViewType } from '@mexit/core'
 
 import { useViewStore } from '../Stores/useViewStore'
 
@@ -32,6 +32,25 @@ export const useViews = () => {
     }
   }
 
+  const getPersonalSpace = (): Filter => {
+    const space = useDataStore.getState().spaces.find((space) => space.name === RESERVED_NAMESPACES.default)
+
+    if (space)
+      return {
+        multiple: false,
+        id: 'FILTER_SPACE',
+        join: 'all',
+        type: 'space',
+        values: [
+          {
+            value: space.id,
+            id: space.id,
+            label: space.name
+          }
+        ]
+      }
+  }
+
   const getParentViewFilters = (path: string) => {
     const entities = getAllEntities(path)
 
@@ -64,14 +83,16 @@ export const useViews = () => {
           globalJoin: 'all',
           sortOrder: 'ascending'
         }
-      case 'reminders':
+      case 'personal':
+        // eslint-disable-next-line no-case-declarations
+        const personalFilters = getPersonalSpace()
         return {
-          id: 'reminders',
-          filters: [],
-          title: 'Reminders',
-          description: 'The Reminders View is helpful tool for keeping track of tasks, events, and deadlines.',
+          id: 'personal',
+          filters: personalFilters ? [personalFilters] : [],
+          title: 'Personal',
+          description: 'The Personal View is helpful tool for keeping track of tasks, events, and deadlines.',
           viewType: ViewType.List,
-          entities: [Entities.REMINDER],
+          entities: [],
           globalJoin: 'all',
           sortOrder: 'ascending'
         }

apps/webapp/src/Stores/useAuth.ts

@@ -46,6 +46,7 @@ export const useAuthentication = () => {
   const [sensitiveData, setSensitiveData] = useState<RegisterFormData | undefined>()
 
   const initContents = useContentStore((store) => store.initContents)
+  const resetHighlights = useHighlightStore((store) => store.reset)
   const clearUsersCache = useUserCacheStore((s) => s.clearCache)
   const clearUserPreferences = useUserPreferenceStore((store) => store.clear)
   const clearSnippets = useSnippetStore((s) => s.clear)
@@ -119,6 +120,7 @@ export const useAuthentication = () => {
     clearReactions()
     clearComments()
     resetDataStore()
+    resetHighlights()
     clearMentions()
     clearRoutesInformation()
     resetPublicNodes()

apps/webapp/src/Switch.tsx

@@ -5,7 +5,7 @@ import { animated } from 'react-spring'
 
 import styled from 'styled-components'
 
-import { AppInitStatus, useAuthStore, useBlockStore, useEditorStore , useLayoutStore } from '@mexit/core'
+import { AppInitStatus, useAuthStore, useBlockStore, useEditorStore, useLayoutStore } from '@mexit/core'
 import { OverlaySidebarWindowWidth } from '@mexit/shared'
 
 import RouteNotFound from './Components/404'

apps/webapp/src/Utils/nav.ts

@@ -12,6 +12,7 @@ export const showNav = (pathname: string): boolean => {
     '/tag',
     '/integrations',
     '/reminders',
+    '/personal',
     ROUTE_PATHS.links
   ]
 

apps/webapp/src/Views/SearchView.tsx

@@ -276,7 +276,6 @@ const SearchView = <Item,>({
   useEffect(() => {
     executeSearch(searchTerm)
     return () => {
-      mog('clearing search', { searchTerm })
       clearSearch()
     }
   }, []) // eslint-disable-line react-hooks/exhaustive-deps

libs/core/src/Data/defaultCommands.ts

@@ -11,12 +11,14 @@ export const defaultCommands: SlashCommand[] = [
   { command: 'task', text: 'Create a Task', icon: getMIcon('ICON', 'ri:task-line'), type: CategoryType.action },
   { command: 'table', text: 'Insert Table', icon: getMIcon('ICON', 'ri:table-line'), type: CategoryType.action },
   // { command: 'canvas', text: 'Insert Drawing canvas', icon: getMIcon('ICON', 'ri:markup-line'), type: CategoryType.action },
-  { command: 'webem', text: 'Insert Web embed', icon: getMIcon('ICON', 'ri:global-line'), type: CategoryType.action },
-  {
-    command: 'remind',
-    text: 'Create a Reminder',
-    icon: getMIcon('ICON', 'ri:timer-line'),
-    type: CategoryType.action,
-    extended: true
-  }
+  { command: 'webem', text: 'Insert Web embed', icon: getMIcon('ICON', 'ri:global-line'), type: CategoryType.action }
+
+  // TODO: Add this back in when they are ready
+  // {
+  //   command: 'remind',
+  //   text: 'Create a Reminder',
+  //   icon: getMIcon('ICON', 'ri:timer-line'),
+  //   type: CategoryType.action,
+  //   extended: true
+  // }
 ] as SlashCommand[]

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

@@ -44,7 +44,7 @@ interface LayoutState {
 
 const SIDEBAR_WIDTH = 276
 
-export const layoutStoreConfig = (set, get) => ({
+const initializeLayoutStore = () => ({
   // Focus mode
   toggleTop: 44,
   showLoader: false,
@@ -65,7 +65,11 @@ export const layoutStoreConfig = (set, get) => ({
   rhSidebar: {
     expanded: false,
     show: true
-  },
+  }
+})
+
+export const layoutStoreConfig = (set, get) => ({
+  ...initializeLayoutStore(),
   setToggleTop: (height: number) => set({ toggleTop: height }),
   toggleFocusMode: () => set((state) => ({ focusMode: { ...state.focusMode, on: !state.focusMode.on } })),
   setFocusMode: (focusMode) => set({ focusMode }),
@@ -115,6 +119,10 @@ export const layoutStoreConfig = (set, get) => ({
     const infobar = get().infobar
     if (infobar.mode === mode) return
     set({ infobar: { ...infobar, mode } })
+  },
+  reset: () => {
+    const initLayoutState = initializeLayoutStore()
+    set(initLayoutState)
   }
 })
 

libs/core/src/Utils/reminders.ts

@@ -80,9 +80,16 @@ export const upcoming = (reminder: Reminder) => {
   return today.getTime() <= reminder.time
 }
 
+// export const ReminderViewData: any = {
+//   id: 'reminders',
+//   title: 'Reminders',
+//   filters: [],
+//   globalJoin: 'all'
+// }
+
 export const ReminderViewData: any = {
-  id: 'reminders',
-  title: 'Reminders',
+  id: 'personal',
+  title: 'Personal',
   filters: [],
   globalJoin: 'all'
 }

libs/shared/src/Components/AIPreview/styled.tsx

@@ -107,7 +107,7 @@ export const FloaterContainer = styled.div`
   backdrop-filter: blur(2rem);
   border: 1px solid ${({ theme }) => theme.tokens.surfaces.app};
   transform-origin: top;
-  z-index: 9999;
+  z-index: 10;
   border: 1px solid ${({ theme }) => theme.tokens.surfaces.s[3]};
   animation: ${float} 150ms ease-out;
 `