Reminders v1 (#93)

#93

* added reminders view;

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

* added useReminders to extension; move reminder store constructor to core lib;

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

* POC tested; native browser notifications implemented;

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

* fixed double placeholder post dnd addition;

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

* deps: added date-fns in extension;

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

* removed devtools from stores and updated options for sharing zustand; initiliazed on new frame addition and different channels for different variables;

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

* added support for buttons in notifications;

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

Author: sahil-shubham

apps/extension/package.json

@@ -20,6 +20,7 @@
     "chrome-extension-async": "^3.4.1",
     "core-js": "^3.21.1",
     "crypto-browserify": "^3.12.0",
+    "date-fns": "^2.28.0",
     "fuzzysort": "^1.9.0",
     "hotkeys-js": "^3.8.7",
     "lodash": "^4.17.21",

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

@@ -187,6 +187,10 @@ export default function Chotu() {
           delete event.detail['type']
           child.updateIlinks(event.detail[0])
           break
+        case 'ACT_ON_REMINDER':
+          delete event.detail['type']
+          child.reminderAction(event.detail[0])
+          break
       }
     }
     window.addEventListener('raju', handleEvent)

apps/extension/src/Components/ReminderArmer.tsx

@@ -0,0 +1,40 @@
+import { IpcAction, mog, ReminderActionIpcData } from '@mexit/core'
+import React, { useEffect } from 'react'
+import { useReminders } from '../Hooks/useReminders'
+import { useReminderStore } from '../Stores/useReminderStore'
+
+const ReminderArmer = () => {
+  const reminders = useReminderStore((state) => state.reminders)
+  const { getToArmReminders, armReminders, clearAllArmedReminders, armMissedReminders, getMissedReminders } =
+    useReminders()
+
+  useEffect(() => {
+    const toArmRems = getToArmReminders()
+    // mog('ReminderArmer: useEffect', { reminders, toArmRems })
+
+    if (toArmRems.length > 0) {
+      toArmRems.forEach((rems) => armReminders(rems.reminders, rems.time))
+    } else {
+      // mog('ReminderArmer: Arming missed reminders', { reminders })
+      // armMissedReminders()
+    }
+
+    const intervalId = setInterval(() => {
+      const missedRems = getMissedReminders()
+      // mog('ReminderArmer: Arming missed reminders', { reminders, missedRems })
+      if (missedRems.length > 0) {
+        armMissedReminders()
+      }
+    }, 1000 * 60 * 1) // one minutes
+
+    return () => {
+      // mog('ReminderArmer: unArming reminders', { reminders })
+      clearInterval(intervalId)
+      clearAllArmedReminders()
+    }
+  }, [reminders])
+
+  return <></>
+}
+
+export default ReminderArmer

apps/extension/src/Hooks/useRaju.ts

@@ -3,20 +3,27 @@ import {
   Contents,
   idxKey,
   ILink,
+  mog,
   NodeEditorContent,
   NodeMetadata,
+  Reminder,
+  ReminderActions,
   Snippet,
   UserDetails,
   WorkspaceDetails
 } from '@mexit/core'
 import { Theme } from '@mexit/shared'
 import { AsyncMethodReturns, Methods } from 'penpal'
+import { useEffect } from 'react'
+import { addMinutes } from 'date-fns'
 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'
+import { useReminders } from './useReminders'
 import useThemeStore from './useThemeStore'
 
 interface ParentMethods {
@@ -26,6 +33,7 @@ interface ParentMethods {
   // ['SEARCH']: (key: idxKey | idxKey[], query: string) => Promise<any>
   ['SET_CONTENT']: [props: { nodeid: string; content: NodeEditorContent; metadata: NodeMetadata }]
   ['ADD_ILINK']: [props: AddILinkProps]
+  ['ACT_ON_REMINDER']: [props: { action: ReminderActions; reminder: Reminder }]
 }
 
 // Raju is great with doing Hera Pheri
@@ -38,6 +46,42 @@ export default function useRaju() {
   const initContents = useContentStore((store) => store.initContents)
   const setIlinks = useDataStore((store) => store.setIlinks)
   const initSnippets = useSnippetStore((store) => store.initSnippets)
+  const { setReminders, reminders } = useReminderStore()
+  const { actOnReminder } = useReminders()
+
+  useEffect(() => {
+    const handleMessage = (message) => {
+      if (message.type === 'RAJU') {
+        console.log('actOnReminders', reminders, message, addMinutes(Date.now(), 15).getTime())
+        const mentionedReminder = reminders.find((item) => item.id === message.notificationId)
+        switch (message.action) {
+          case 'OPEN':
+            actOnReminder({ type: 'open' }, mentionedReminder)
+            dispatch('ACT_ON_REMINDER', { action: { type: 'open' }, reminder: mentionedReminder })
+            break
+          case 'SNOOZE':
+            actOnReminder({ type: 'snooze', value: addMinutes(Date.now(), 15).getTime() }, mentionedReminder)
+            dispatch('ACT_ON_REMINDER', {
+              action: { type: 'snooze', value: addMinutes(Date.now(), 15).getTime() },
+              reminder: mentionedReminder
+            })
+            break
+          case 'DISMISS':
+            actOnReminder({ type: 'dismiss' }, mentionedReminder)
+            dispatch('ACT_ON_REMINDER', { action: { type: 'dismiss' }, reminder: mentionedReminder })
+            break
+        }
+      }
+
+      return
+    }
+
+    chrome.runtime.onMessage.addListener(handleMessage)
+
+    return () => {
+      chrome.runtime.onMessage.removeListener(handleMessage)
+    }
+  }, [reminders])
 
   const methods: Methods = {
     init(
@@ -47,14 +91,16 @@ 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)
     },
     success(message: string) {
       toast.success(message)