Highlights v2 structure

.changeset/late-cheetahs-listen.md

@@ -0,0 +1,6 @@
+---
+'mexit': patch
+'mexit-webapp': patch
+---
+
+Highlight V2 API changes

apps/extension/src/Hooks/useHighlights.tsx

@@ -159,7 +159,11 @@ export const useHighlightAPI = () => {
       type: 'HIGHLIGHT',
       subType: 'ADD_HIGHLIGHT',
       headers: workspaceHeaders(),
-      body: highlight
+      body: {
+        data: {
+          properties: highlight.properties
+        }
+      }
     }
 
     const response = await chrome.runtime.sendMessage(request)

apps/extension/src/Hooks/useSaveChanges.ts

@@ -177,7 +177,6 @@ export function useSaveChanges() {
     const isCapturedHighlight = selection?.range && window.location.href
 
     const highlight = isCapturedHighlight && {
-      entityId: generateHighlightId(),
       properties: {
         sourceUrl: selection?.range && deleteQueryParams(window.location.href),
         saveableRange: selection?.range,
@@ -186,7 +185,7 @@ export function useSaveChanges() {
     }
 
     try {
-      await saveHighlight(
+      const highlightId = await saveHighlight(
         {
           ...highlight,
           properties: {
@@ -196,7 +195,10 @@ export function useSaveChanges() {
         },
         document.title
       )
-      addHighlightInStore(highlight)
+      addHighlightInStore({
+        entityId: highlightId,
+        ...highlight
+      })
       toast('Highlight saved!')
     } catch (err) {
       console.error(err)

apps/webapp/src/Hooks/API/useHighlightAPI.tsx

@@ -6,8 +6,9 @@ export const useHighlightAPI = () => {
   const saveHighlight = async (h: Highlight) => {
     const reqData = {
       // workspaceId: getWorkspaceId(),
-      properties: h.properties,
-      entityId: h.entityId
+      data: {
+        properties: h.properties
+      }
     }
     const res = await API.highlight.save(reqData)
     mog('We saved that highlight', { res })
@@ -23,17 +24,19 @@ export const useHighlightAPI = () => {
       expiry: GET_REQUEST_MINIMUM_GAP_IN_MS
     })
     try {
-      const highlights = res?.Items?.map((item: any) => {
-        if (item.properties?.content) {
-          const content = deserializeContent(item.properties.content)
-          item.properties.content = content
-        }
+      const highlights = res
+        ?.map((item: any) => {
+          if (item.properties?.content) {
+            const content = deserializeContent(item.properties.content)
+            item.properties.content = content
+          }
 
-        return {
-          properties: item?.properties,
-          entityId: item?.entityId
-        } as Highlight
-      }).filter((v: undefined | Highlight) => !!v)
+          return {
+            properties: item?.properties,
+            entityId: item?.entityRefID
+          } as Highlight
+        })
+        .filter((v: undefined | Highlight) => !!v)
       return highlights
     } catch (e) {
       mog('Error fetching highlights', { e })

apps/webapp/src/Hooks/useHighlights.tsx

@@ -39,7 +39,9 @@ export const useHighlightSync = () => {
     await highlightsAPI
       .getAllHighlights()
       .then((highlights) => {
+        console.log('highlights', highlights)
         if (highlights) {
+          mog('SETTING HIGHLIGHTS', { highlights })
           setHighlights(highlights)
           getEntitiyInitializer('initializeHighlights', highlights)
         }

apps/webapp/src/Views/Register.tsx

@@ -194,12 +194,10 @@ export const Register = () => {
 
               <InputFormError
                 name="invite"
-                label="Invite Code"
+                label="Invite Code (Optional)"
                 inputProps={{
                   placeholder: 'Got an invite? Enter it here!',
-                  ...registerForm.register('invite', {
-                    required: true
-                  })
+                  ...registerForm.register('invite', {})
                 }}
                 errors={regErrors}
               ></InputFormError>

apps/webapp/src/Workers/requests.ts

@@ -235,15 +235,15 @@ const initializeHighlightsExtension = async () => {
     .then((d) => d.json())
     .then((d: any) => {
       const highlights =
-        d?.Items?.map((item) => {
+        d?.map((item) => {
           if (item?.properties?.content) {
             const content = deserializeContent(item.properties.content)
             item.properties.content = content
           }
 
           return {
             properties: item?.properties,
-            entityId: item?.entityId
+            entityId: item?.entityRefID
           } as Highlight
         }) ?? []
 

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

@@ -119,6 +119,7 @@ const highlightStoreConfig = (set, get) => ({
 
   getHighlightsOfUrl: (url: string) => {
     const withoutScrollUrl = deleteQueryParams(url)
+    mog('GET URL', { url, withoutScrollUrl })
 
     const highlights = get().highlights ?? []
 

libs/core/src/Types/Highlight.ts

@@ -27,7 +27,7 @@ export interface Highlight {
   /**
    * ID of the highlight
    */
-  entityId: string
+  entityId?: string
 
   /**
    * Properties of the highlight