POC tested; native browser notifications implemented;

Signed-off-by: Sahil Shubham <[email protected]>

apps/extension/src/Hooks/useRaju.ts

@@ -3,8 +3,10 @@ import {
   Contents,
   idxKey,
   ILink,
+  mog,
   NodeEditorContent,
   NodeMetadata,
+  Reminder,
   Snippet,
   UserDetails,
   WorkspaceDetails
@@ -14,6 +16,7 @@ import { AsyncMethodReturns, Methods } from 'penpal'
 import toast from 'react-hot-toast'
 import { useContentStore } from '../Stores/useContentStore'
 import useDataStore from '../Stores/useDataStore'
+import { useReminderStore } from '../Stores/useReminderStore'
 import { useSnippetStore } from '../Stores/useSnippetStore'
 import { useAuthStore } from './useAuth'
 import useInternalAuthStore from './useAuthStore'
@@ -38,6 +41,7 @@ export default function useRaju() {
   const initContents = useContentStore((store) => store.initContents)
   const setIlinks = useDataStore((store) => store.setIlinks)
   const initSnippets = useSnippetStore((store) => store.initSnippets)
+  const setReminders = useReminderStore((store) => store.setReminders)
 
   const methods: Methods = {
     init(
@@ -47,14 +51,17 @@ export default function useRaju() {
       authAWS: any,
       snippets: Snippet[],
       contents: Contents,
-      ilinks: any[]
+      ilinks: any[],
+      reminders: Reminder[]
     ) {
       setAuthenticated(userDetails, workspaceDetails)
       setTheme(theme)
       setInternalAuthStore(authAWS)
       initSnippets(snippets)
       setIlinks(ilinks)
       initContents(contents)
+      setReminders(reminders)
+      mog('reminders raju', { reminders })
     },
     success(message: string) {
       toast.success(message)

apps/extension/src/Hooks/useReminders.ts

@@ -381,6 +381,9 @@ export const useReminders = () => {
       //     independent: true,
       //     attachment: reminderGroups
       // })
+      chrome.runtime.sendMessage({ type: 'SHOW_REMINDER', attachment: reminderGroups }, (response) => {
+        console.log('response post SHOW_REMINDER', response)
+      })
     }, time - now.getTime())
     toArmRems.forEach((r) => addArmReminder({ reminderId: r.id, timeoutId: id }))
   }

apps/extension/src/background.ts

@@ -82,6 +82,20 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       return true
     }
 
+    case 'SHOW_REMINDER': {
+      console.log('reminderGroups', request.attachment)
+      const firstReminder = request.attachment[0]?.reminders[0]
+      chrome.notifications.create(firstReminder.id, {
+        message: firstReminder.description,
+        title: firstReminder.title,
+        type: 'basic',
+        iconUrl: './Assets/icon48x48.png',
+        priority: 2,
+        requireInteraction: true
+      })
+      return true
+    }
+
     default: {
       return true
     }

apps/extension/src/manifest.json

@@ -43,7 +43,8 @@
     "storage",
     "tabs",
     "activeTab",
-    "search"
+    "search",
+    "notifications"
   ],
   "web_accessible_resources": [
     {

apps/webapp/src/Components/Chotu.tsx

@@ -11,6 +11,7 @@ import { initSearchIndex, searchWorker } from '../Workers/controller'
 import { useContentStore } from '../Stores/useContentStore'
 import { useDataStore } from '../Stores/useDataStore'
 import { useSnippetStore } from '../Stores/useSnippetStore'
+import { useReminderStore } from '../Stores/useReminderStore'
 
 export default function Chotu() {
   const [parent, setParent] = useState<AsyncMethodReturns<any>>(null)
@@ -20,6 +21,7 @@ export default function Chotu() {
   const theme = useThemeStore((state) => state.theme)
   const authAWS = JSON.parse(localStorage.getItem('auth-aws')).state
   const snippets = useSnippetStore((store) => store.snippets)
+  const reminders = useReminderStore((store) => store.reminders)
 
   const { ilinks, archive, addILink } = useDataStore()
   const { contents, setContent } = useContentStore()
@@ -56,7 +58,7 @@ export default function Chotu() {
   useEffect(() => {
     connection.promise
       .then((parent: any) => {
-        parent.init(userDetails, workspaceDetails, theme, authAWS, snippets, contents, ilinks)
+        parent.init(userDetails, workspaceDetails, theme, authAWS, snippets, contents, ilinks, reminders)
         // parent.success('Hi')
       })
       .catch((error) => {

apps/webapp/src/Components/Reminders/Reminders.style.tsx

@@ -1,7 +1,7 @@
 import { mix, transparentize } from 'polished'
 import styled, { createGlobalStyle, css } from 'styled-components'
-import { ReminderStatus, REMINDERS_DIMENSIONS } from '../../Hooks/useReminders'
 import { Title, Button } from '@mexit/shared'
+import { REMINDERS_DIMENSIONS, ReminderStatus } from '@mexit/core'
 
 export const RemindersWrapper = styled.div`
   margin: ${({ theme }) => theme.spacing.medium} 0;

apps/webapp/src/Stores/index.ts

@@ -15,6 +15,7 @@ import { useEditorStore } from './useEditorStore'
 import { useSnippetStore } from './useSnippetStore'
 import { useTodoStore } from './useTodoStore'
 import usePortalStore from './usePortalStore'
+import { useReminderStore } from './useReminderStore'
 
 if (IS_DEV) {
   console.log('Zustand Devtools Initialize')
@@ -44,6 +45,7 @@ if ('BroadcastChannel' in globalThis /* || isSupported() */) {
   share('contents', useContentStore)
   // share('authenticated', useAuthStore)
   // share('snippets', useSnippetStore)
+  // share('reminders', useReminderStore)
 }
 
 export default {}