Merge pull request #93 from abiddiscombe/92-New-instances-of-NoteDeck-broken

92 - New instances of NoteDeck broken

Author: abiddiscombe

src/App.tsx

@@ -1,17 +1,9 @@
-import { useEffect } from "react";
 import Main from "./blocks/Main/Main";
 import Header from "./blocks/Header/Header";
 import Mobile from "./blocks/Mobile/Mobile";
 import { isMobile } from "react-device-detect";
-import { settingsService } from "./database/settings.service";
 
 function App() {
-  async function init() {
-    await settingsService.instantiate();
-  }
-
-  useEffect(() => init(), []);
-
   if (isMobile) {
     return <Mobile />;
   }

src/blocks/Header/Header.tsx

@@ -1,5 +1,5 @@
 import { useLiveQuery } from "dexie-react-hooks";
-import { notesService } from "../../database/notes.service";
+import notes from "../../database/notes";
 import HeaderLogo from "./HeaderLogo";
 import HeaderBackup from "./HeaderBackup";
 import HeaderNewNote from "./HeaderNewNote";
@@ -11,7 +11,7 @@ import Banner from "../../components/Banner";
 import { APP_INFO } from "../../utilities/constants";
 
 const Header = () => {
-  const notes = useLiveQuery(() => notesService.list());
+  const noteList = useLiveQuery(() => notes.list());
   const isDeprecatingDomain = window.location.host === APP_INFO.AppHostOld;
 
   return (
@@ -38,7 +38,7 @@ const Header = () => {
       )}
       <header className="flex items-center gap-2 border-b border-b-primary-200 bg-white px-4 py-1.5 shadow-sm dark:border-b-primary-800 dark:bg-primary-900">
         <HeaderLogo />
-        {!!notes?.length && (
+        {!!noteList?.length && (
           <>
             <HeaderNewNote />
             <HeaderHideNonPriorityNotes />

src/blocks/Header/HeaderDeleteNotes.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { Field, Label } from "@headlessui/react";
 import { TrashIcon } from "@heroicons/react/16/solid";
-import { notesService } from "../../database/notes.service";
+import notes from "../../database/notes";
 import Dialog from "../../components/Dialog";
 import Button from "../../components/Button";
 import Tooltip from "../../components/Tooltip";
@@ -20,7 +20,7 @@ const HeaderDeleteNotes = () => {
   }, [showModal]);
 
   async function handleDeleteEverything() {
-    await notesService.removeAll(!retainPriorityNotes);
+    await notes.removeAll(!retainPriorityNotes);
     setShowModal(false);
   }
 

src/blocks/Header/HeaderHideNonPriorityNotes.tsx

@@ -2,19 +2,15 @@ import { StarIcon } from "@heroicons/react/16/solid";
 import Button from "../../components/Button";
 import Tooltip from "../../components/Tooltip";
 import { useLiveQuery } from "dexie-react-hooks";
-import { settingsService } from "../../database/settings.service";
-import { SETTINGS_KEYS } from "../../utilities/constants";
+import settings, { SETTINGS_KEYS } from "../../database/settings";
 
 const HeaderHideNonPriorityNotes = () => {
-  const activeSetting = useLiveQuery(
-    async () => await settingsService.read(SETTINGS_KEYS.HideNonPriorityNotes),
+  const activeSetting = useLiveQuery(() =>
+    settings.read(SETTINGS_KEYS.HideNonPriorityNotes),
   );
 
   const toggleSetting = async () => {
-    await settingsService.write(
-      SETTINGS_KEYS.HideNonPriorityNotes,
-      !activeSetting,
-    );
+    await settings.write(SETTINGS_KEYS.HideNonPriorityNotes, !activeSetting);
   };
 
   const label = activeSetting ? "Show All Notes" : "Show Priority Notes Only";

src/blocks/Header/HeaderNewNote.tsx

@@ -1,4 +1,4 @@
-import { notesService } from "../../database/notes.service";
+import notes from "../../database/notes";
 import { PlusIcon } from "@heroicons/react/16/solid";
 import Button from "../../components/Button";
 import Tooltip from "../../components/Tooltip";
@@ -7,7 +7,7 @@ const HeaderNewNote = () => {
   const label = "New Note";
 
   function handleCreateNote() {
-    notesService.create({
+    notes.create({
       theme: "yellow",
       content: "",
       isPriority: false,

src/blocks/Main/Main.tsx

@@ -1,27 +1,33 @@
 import { useLiveQuery } from "dexie-react-hooks";
-import { notesService } from "../../database/notes.service";
 import MainOnboarding from "./MainOnboarding";
 import Note from "./Note/Note";
-import { settingsService } from "../../database/settings.service";
-import { SETTINGS_KEYS } from "../../utilities/constants";
+import notes from "../../database/notes";
+import settings, { SETTINGS_KEYS } from "../../database/settings";
 
 const Main = () => {
-  const notes = useLiveQuery(() => notesService.list());
+  const noteItems = useLiveQuery(() => notes.list());
+
+  const useOpaqueNotes = useLiveQuery(() =>
+    settings.read(SETTINGS_KEYS.UseOpaqueNotes),
+  );
+
   const hideNonPriorityNotes = useLiveQuery(() =>
-    settingsService.read(SETTINGS_KEYS.HideNonPriorityNotes),
+    settings.read(SETTINGS_KEYS.HideNonPriorityNotes),
   );
 
-  if (notes && !notes.length) {
+  if (noteItems && !noteItems.length) {
     return <MainOnboarding />;
   }
 
   const filteredNotes = hideNonPriorityNotes
-    ? notes?.filter((note) => note.isPriority)
-    : notes;
+    ? noteItems?.filter((note) => note.isPriority)
+    : noteItems;
 
   return (
     <main className="relative overflow-auto p-2">
-      {filteredNotes?.map((note) => <Note key={note.id} noteData={note} />)}
+      {filteredNotes?.map((note) => (
+        <Note key={note.id} noteData={note} useOpaqueNotes={useOpaqueNotes} />
+      ))}
     </main>
   );
 };

src/blocks/Main/MainOnboarding.tsx

@@ -1,12 +1,12 @@
 import { PlusIcon } from "@heroicons/react/16/solid";
-import { notesService } from "../../database/notes.service";
+import notes from "../../database/notes";
 import { APP_INFO } from "../../utilities/constants";
 import Button from "../../components/Button";
 import Typography from "../../components/Typography";
 
 const MainOnboarding = () => {
   function handleCreateNote() {
-    notesService.create({
+    notes.create({
       theme: "yellow",
       content: "This is your first note! Click here to edit.",
       isPriority: false,

src/blocks/Main/Note/Note.tsx

@@ -1,24 +1,19 @@
 import { useEffect, useId, useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 import Draggable, { DraggableData, DraggableEvent } from "react-draggable";
-import { notesService } from "../../../database/notes.service";
-import { settingsService } from "../../../database/settings.service";
+import notes from "../../../database/notes";
 import { NoteItem } from "../../../database/db";
-import { useLiveQuery } from "dexie-react-hooks";
 import { themes } from "../../../utilities/themes";
 import NoteMenu from "./NoteMenu";
-import { SETTINGS_KEYS } from "../../../utilities/constants";
 import { StarIcon } from "@heroicons/react/16/solid";
 
 const Note = (
   p: React.HTMLAttributes<HTMLElement> & {
     noteData: NoteItem;
+    useOpaqueNotes?: boolean;
   },
 ) => {
   const id = useId();
-  const useOpaqueNotes = useLiveQuery(() =>
-    settingsService.read(SETTINGS_KEYS.UseOpaqueNotes),
-  );
   const textareaId = useId();
   const nodeRef = useRef<HTMLElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -32,10 +27,10 @@ const Note = (
   });
 
   useEffect(() => {
-    notesService.modify(p.noteData.id, notePosition);
+    notes.modify(p.noteData.id, notePosition);
   }, [notePosition, p.noteData.id]);
 
-  if (useOpaqueNotes === undefined || !p.noteData) {
+  if (!p.noteData) {
     return null;
   }
 
@@ -59,7 +54,7 @@ const Note = (
   }
 
   async function handleBringForwards() {
-    const highestId = await notesService.getTopZIndex();
+    const highestId = await notes.getTopZIndex();
     if (highestId !== notePosition.posZ) {
       setNotePosition((prevState) => ({
         ...prevState,
@@ -86,7 +81,7 @@ const Note = (
         ref={nodeRef}
         className={twMerge(
           "absolute rounded shadow-sm hover:shadow-lg",
-          useOpaqueNotes ? theme.noteOpaque : theme.note,
+          p.useOpaqueNotes ? theme.noteOpaque : theme.note,
           !p.noteData.content &&
             !p.noteData.isPriority &&
             "[&:not(:hover)]:animate-pulse",
@@ -113,7 +108,7 @@ const Note = (
           id={textareaId}
           ref={textareaRef}
           onChange={() =>
-            notesService.modify(p.noteData.id, {
+            notes.modify(p.noteData.id, {
               content: textareaRef.current?.value,
             })
           }

src/blocks/Main/Note/NoteMenu.tsx

@@ -6,10 +6,7 @@ import {
   MenuItems,
   Transition,
 } from "@headlessui/react";
-import {
-  notesService,
-  NoteModifyableFields,
-} from "../../../database/notes.service";
+import notes, { NoteModifyableFields } from "../../../database/notes";
 import { NoteItem } from "../../../database/db";
 import { themes } from "../../../utilities/themes";
 import NoteMenuTheme from "./NoteMenuTheme";
@@ -30,11 +27,11 @@ const NoteMenu = (
   },
 ) => {
   function handleNoteDelete() {
-    notesService.remove(p.noteData.id);
+    notes.remove(p.noteData.id);
   }
 
   function handleNoteModify(updates: NoteModifyableFields) {
-    notesService.modify(p.noteData.id, {
+    notes.modify(p.noteData.id, {
       ...p.noteData,
       ...updates,
     });
@@ -47,7 +44,7 @@ const NoteMenu = (
     const tooWide = window.innerWidth < maxX;
     const tooTall = window.innerHeight < maxY;
 
-    notesService.create({
+    notes.create({
       posX: p.noteData.posX + (tooWide ? -20 : 20),
       posY: p.noteData.posY + (tooTall ? -20 : 20),
       posW: p.noteData.posW,

src/blocks/Settings/SettingsItems.tsx

@@ -1,12 +1,11 @@
 import { useLiveQuery } from "dexie-react-hooks";
-import { settingsService } from "../../database/settings.service";
+import settings, { SETTINGS_KEYS } from "../../database/settings";
 import Switch from "../../components/Switch";
 import ItemContainer from "./ItemContainer";
-import { SETTINGS_KEYS } from "../../utilities/constants";
 
 const SettingsItems = () => {
-  const useOpaqueNotes = useLiveQuery(
-    async () => await settingsService.read(SETTINGS_KEYS.UseOpaqueNotes),
+  const useOpaqueNotes = useLiveQuery(() =>
+    settings.read(SETTINGS_KEYS.UseOpaqueNotes),
   );
 
   return (
@@ -17,8 +16,8 @@ const SettingsItems = () => {
       >
         <Switch
           state={!useOpaqueNotes}
-          setState={() =>
-            settingsService.write(SETTINGS_KEYS.UseOpaqueNotes, !useOpaqueNotes)
+          setState={async () =>
+            await settings.write(SETTINGS_KEYS.UseOpaqueNotes, !useOpaqueNotes)
           }
         />
       </ItemContainer>

src/components/Dialog.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from "react";
 import { useLiveQuery } from "dexie-react-hooks";
-import { notesService } from "../database/notes.service";
+import notes from "../database/notes";
 import { XMarkIcon } from "@heroicons/react/16/solid";
 import Typography from "./Typography";
 import {
@@ -20,7 +20,7 @@ const Dialog = (
     children: React.ReactNode;
   },
 ) => {
-  const highestZIndex = useLiveQuery(() => notesService.getTopZIndex());
+  const highestZIndex = useLiveQuery(() => notes.getTopZIndex());
 
   return (
     <Transition appear show={p.isOpen}>

src/database/db.ts

@@ -1,5 +1,9 @@
 import Dexie, { IndexableType, Table } from "dexie";
-import { TABLE_NAMES } from "../utilities/constants";
+
+enum TABLE_NAMES {
+  Notes = "notes",
+  Settings = "settings",
+}
 
 export interface NoteItem {
   id: IndexableType;
@@ -62,4 +66,7 @@ export class MySubClassedDexie extends Dexie {
   }
 }
 
-export const db = new MySubClassedDexie();
+const db = new MySubClassedDexie();
+
+export default db;
+export { TABLE_NAMES };

src/database/notes.service.ts src/database/notes.ts

@@ -1,6 +1,5 @@
-import { db } from "./db";
+import db, { TABLE_NAMES } from "./db";
 import { IndexableType } from "dexie";
-import { TABLE_NAMES } from "../utilities/constants";
 
 export type NoteModifyableFields = {
   posX?: number;
@@ -64,11 +63,4 @@ const removeAll = async (deletePriorityNotes: boolean) => {
   });
 };
 
-export const notesService = {
-  list,
-  create,
-  modify,
-  remove,
-  removeAll,
-  getTopZIndex,
-};
+export default { list, create, modify, remove, removeAll, getTopZIndex };