Make data page configurable

digitalmaster · Nov 12, 2022 · 5e3d420 · 5e3d420
1 parent 43872cc
commit 5e3d420
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 46 deletions.
diff --git a/src/app.tsx b/src/app.tsx
@@ -11,14 +11,14 @@ import useOnBlockInteract from '~/hooks/useOnBlockInteract';
 
 const App = () => {
   const [showPracticeOverlay, setShowPracticeOverlay] = React.useState(false);
-  const { tagsListString, pluginPageTitle } = useSettings();
+  const { tagsListString, dataPageTitle } = useSettings();
 
   const { selectedTag, setSelectedTag, tagsList } = useTags({ tagsListString });
 
   const { practiceCardsUids, practiceCardsData, displayCardCounts, fetchPracticeData } =
     usePracticeCardsData({
       selectedTag,
-      pluginPageTitle,
+      dataPageTitle,
     });
 
   const handleGradeClick = async ({ grade, refUid }) => {
@@ -27,7 +27,7 @@ const App = () => {
     const cardData = practiceCardsData[refUid];
     console.log('DEBUG:: ~ file: app.jsx ~ line 26 ~ cardData', cardData);
 
-    await practice({ ...cardData, grade, refUid, pluginPageTitle });
+    await practice({ ...cardData, grade, refUid, dataPageTitle });
   };
 
   const handlePracticeClick = () => {
@@ -44,7 +44,7 @@ const App = () => {
     setSelectedTag(tag);
   };
 
-  useCollapseReferenceList({ pluginPageTitle });
+  useCollapseReferenceList({ dataPageTitle });
 
   // Keep counters in sync as you add/remove tags from blocks
   const [tagsOnEnter, setTagsOnEnter] = React.useState([]);

diff --git a/src/components/RoamSRImport.tsx b/src/components/RoamSRImport.tsx
@@ -0,0 +1,5 @@
+const RoamSrImportData = () => {
+  return <div>foo</div>;
+};
+
+export default RoamSrImportData;
diff --git a/src/hooks/useCollapseReferenceList.tsx b/src/hooks/useCollapseReferenceList.tsx
@@ -4,13 +4,13 @@ import * as domUtils from '~/utils/dom';
 
 // Collapse memo data block ref by default (to keep things less noisy)
 // @TODO: Maybe make this configurable
-const useCollapseReferenceList = ({ pluginPageTitle }) => {
+const useCollapseReferenceList = ({ dataPageTitle }) => {
   const collapseDataReferenceBlock = React.useMemo(() => {
     const fn = async () => {
       await asyncUtils.sleep(100);
       const elmList = [
         ...Array.from(document.querySelectorAll('.rm-ref-page-view .rm-ref-page-view-title')),
-      ].filter((elm) => elm.textContent === pluginPageTitle);
+      ].filter((elm) => elm.textContent === dataPageTitle);
 
       for (const elm of elmList) {
         const collapseControlBtn = elm?.parentNode.querySelector('.rm-caret-open');
@@ -19,7 +19,7 @@ const useCollapseReferenceList = ({ pluginPageTitle }) => {
     };
 
     return fn;
-  }, [pluginPageTitle]);
+  }, [dataPageTitle]);
   const [currentRoute, setCurrentRoute] = React.useState('');
 
   React.useEffect(() => {
@@ -33,7 +33,7 @@ const useCollapseReferenceList = ({ pluginPageTitle }) => {
     return () => {
       window.removeEventListener('popstate', onRouteChange);
     };
-  }, [pluginPageTitle, collapseDataReferenceBlock]);
+  }, [dataPageTitle, collapseDataReferenceBlock]);
 
   React.useEffect(() => {
     const observer = new MutationObserver(() => {

diff --git a/src/hooks/usePracticeCardsData.tsx b/src/hooks/usePracticeCardsData.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as queries from '~/queries';
 
-const usePracticeCardsData = ({ selectedTag, pluginPageTitle }) => {
+const usePracticeCardsData = ({ selectedTag, dataPageTitle }) => {
   const [practiceCardsUids, setPracticeCardsUids] = React.useState([]);
   const [practiceCardsData, setPracticeCardsData] = React.useState({});
   const [refetchTrigger, setRefetchTrigger] = React.useState(false);
@@ -11,7 +11,7 @@ const usePracticeCardsData = ({ selectedTag, pluginPageTitle }) => {
     (async () => {
       const { cardsData, newCardsUids, dueCardsUids } = await queries.getPracticeCardData({
         selectedTag,
-        pluginPageTitle,
+        dataPageTitle,
       });
 
       // Always practice due cards first
@@ -20,7 +20,7 @@ const usePracticeCardsData = ({ selectedTag, pluginPageTitle }) => {
       setPracticeCardsUids([...dueCardsUids, ...newCardsUids]);
       setDisplayCardCounts({ new: newCardsUids.length, due: dueCardsUids.length });
     })();
-  }, [selectedTag, pluginPageTitle, refetchTrigger]);
+  }, [selectedTag, dataPageTitle, refetchTrigger]);
 
   return {
     practiceCardsUids,

diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts
@@ -1,17 +1,17 @@
 import React from 'react';
 import settingsPanelConfig from '~/settingsPanelConfig';
 
-const defaultSettings = {
+export const defaultSettings = {
   tagsListString: 'memo',
-  // pluginPageTitle: 'roam/memo',
-  pluginPageTitle: 'roam/memo/debug',
+  dataPageTitle: 'roam/memo',
 };
 
 // @TODO: Refactor/Hoist this so we can call useSettings in multiple places
 // without duplicating settings state (ie maybe init state in app and use
 // context to access it anywhere)
 const useSettings = () => {
   const [settings, setSettings] = React.useState(defaultSettings);
+  console.log('DEBUG:: ~ file: useSettings.ts ~ line 15 ~ settings', settings);
 
   React.useEffect(() => {
     if (!settings.tagsListString.trim()) {
@@ -24,10 +24,8 @@ const useSettings = () => {
 
   React.useEffect(() => {
     // Init config panel
-    window.roamMemo.extensionAPI.settings.panel.create(
-      settingsPanelConfig({ setSettings, pluginPageTitle: settings.pluginPageTitle })
-    );
-  }, [setSettings, settings.pluginPageTitle]);
+    window.roamMemo.extensionAPI.settings.panel.create(settingsPanelConfig({ setSettings }));
+  }, [setSettings, settings.dataPageTitle]);
 
   React.useEffect(() => {
     const allSettings = window.roamMemo.extensionAPI.settings.getAll() || {};

diff --git a/src/practice.ts b/src/practice.ts
@@ -71,12 +71,12 @@ interface Practice {
   eFactor: number;
   grade: number;
   refUid: string;
-  pluginPageTitle: string;
+  dataPageTitle: string;
   dateCreated: null | Date;
 }
 
 const practice = async (
-  { interval, repetitions, eFactor, grade, refUid, pluginPageTitle, dateCreated = null }: Practice,
+  { interval, repetitions, eFactor, grade, refUid, dataPageTitle, dateCreated = null }: Practice,
   isDryRun = false
 ) => {
   // Just don't want to store nextDueDateFromNow
@@ -92,7 +92,7 @@ const practice = async (
   if (!isDryRun) {
     await savePracticeData({
       refUid: refUid,
-      pluginPageTitle,
+      dataPageTitle,
       grade,
       dateCreated,
       ...practiceResultData,

diff --git a/src/queries.test.ts b/src/queries.test.ts
@@ -246,6 +246,6 @@ describe.skip('getPluginPageData', () => {
       },
     }));
 
-    expect(queries.getPluginPageData({ pluginPageTitle: 'roam/memo' })).resolves.toBe({});
+    expect(queries.getPluginPageData({ dataPageTitle: 'roam/memo' })).resolves.toBe({});
   });
 });
diff --git a/src/queries.ts b/src/queries.ts
@@ -42,7 +42,7 @@ const mapPluginPageData = (queryResultsData) =>
       return acc;
     }, {}) || {};
 
-export const getPluginPageData = async ({ pluginPageTitle }) => {
+export const getPluginPageData = async ({ dataPageTitle }) => {
   const q = `[
     :find (pull ?pluginPageChildren [
       :block/string
@@ -57,7 +57,7 @@ export const getPluginPageData = async ({ pluginPageTitle }) => {
     ]`;
 
   const dataBlockName = 'data';
-  const queryResultsData = await window.roamAlphaAPI.q(q, pluginPageTitle, dataBlockName);
+  const queryResultsData = await window.roamAlphaAPI.q(q, dataPageTitle, dataBlockName);
 
   if (!queryResultsData.length) return {};
 
@@ -81,16 +81,16 @@ export const getDueCardUids = (data) => {
   return results;
 };
 
-export const generateNewCardProps = ({ dateCreated } = {}) => ({
+export const generateNewCardProps = ({ dateCreated = undefined } = {}) => ({
   dateCreated: dateCreated || new Date(),
   eFactor: 2.5,
   interval: 0,
   repetitions: 0,
   isNew: true,
 });
 
-export const getPracticeCardData = async ({ selectedTag, pluginPageTitle }) => {
-  const pluginPageData = await getPluginPageData({ pluginPageTitle });
+export const getPracticeCardData = async ({ selectedTag, dataPageTitle }) => {
+  const pluginPageData = await getPluginPageData({ dataPageTitle });
 
   const selectedTagReferencesIds = await getPageReferenceIds(selectedTag);
   const cardsData = { ...pluginPageData };
@@ -333,9 +333,9 @@ const getEmojiFromGrade = (grade) => {
   }
 };
 
-export const savePracticeData = async ({ refUid, pluginPageTitle, dateCreated, ...data }) => {
-  await getOrCreatePage(pluginPageTitle);
-  const dataBlockUid = await getOrCreateBlockOnPage(pluginPageTitle, 'data', -1, {
+export const savePracticeData = async ({ refUid, dataPageTitle, dateCreated, ...data }) => {
+  await getOrCreatePage(dataPageTitle);
+  const dataBlockUid = await getOrCreateBlockOnPage(dataPageTitle, 'data', -1, {
     open: false,
     heading: 3,
   });

diff --git a/src/settingsPanelConfig.ts b/src/settingsPanelConfig.ts
@@ -1,13 +1,13 @@
 import * as asyncUtils from '~/utils/async';
 import { importRoamSrOldData } from '~/utils/migration';
+import RoamSrImportData from '~/components/RoamSRImport';
+import { defaultSettings } from './hooks/useSettings';
 
-const settingsPanelConfig = ({ setSettings, pluginPageTitle }) => {
-  // importRoamSrOldData({ pluginPageTitle }); // temp
-  const syncFn = async (e) => {
-    const tagsListString = e.target.value.trim();
-    window.roamMemo.extensionAPI.settings.set('tagsListString', tagsListString);
+const settingsPanelConfig = ({ setSettings }) => {
+  const syncFn = async ({ key, value }: { key: string; value: any }) => {
+    window.roamMemo.extensionAPI.settings.set(key, value);
     setSettings((currentSettings) => {
-      return { ...currentSettings, tagsListString };
+      return { ...currentSettings, [key]: value };
     });
   };
 
@@ -22,18 +22,33 @@ const settingsPanelConfig = ({ setSettings, pluginPageTitle }) => {
           'Separate multiple with commas. First one is the default page. Example: "memo, sr, 🐘, french words, fun facts"',
         action: {
           type: 'input',
-          placeholder: 'memo',
-          onChange: processChange,
+          placeholder: defaultSettings.tagsListString,
+          onChange: (e) => {
+            const tagsListString = e.target.value.trim();
+            processChange({ key: 'tagsListString', value: tagsListString });
+          },
         },
       },
       {
         id: 'import-roam-sr-data',
         name: 'Import Roam/Sr Data',
         description: 'Import Roam Sr Old data',
         action: {
-          type: 'button',
-          onClick: () => importRoamSrOldData({ pluginPageTitle }),
-          content: 'Fetch Data',
+          type: 'reactComponent',
+          component: RoamSrImportData,
+        },
+      },
+      {
+        id: 'dataPageTitle',
+        name: 'Data Page Title',
+        description: "Name of page where we'll store all your data",
+        action: {
+          type: 'input',
+          placeholder: defaultSettings.dataPageTitle,
+          onChange: (e) => {
+            const value = e.target.value.trim();
+            processChange({ key: 'dataPageTitle', value });
+          },
         },
       },
     ],

diff --git a/src/utils/migration.ts b/src/utils/migration.ts
@@ -1,18 +1,18 @@
 import practice from '~/practice';
 import * as queries from '~/queries';
 
-export const importRoamSrOldData = async ({ pluginPageTitle }) => {
+export const importRoamSrOldData = async ({ dataPageTitle }) => {
   const oldReviewData = await queries.getOldRoamSrPracticeData();
-  const newReviewData = await convertRoamSrPracticeData(oldReviewData, pluginPageTitle);
+  const newReviewData = await convertRoamSrPracticeData(oldReviewData, dataPageTitle);
   console.log('DEBUG:: ~ file: migration.ts ~ line 8 ~ newReviewData', newReviewData);
 
   // Used to Filter blocks that already exist
-  const pluginPageData = await queries.getPluginPageData({ pluginPageTitle });
+  const pluginPageData = await queries.getPluginPageData({ dataPageTitle: dataPageTitle });
   // Ignore old data if already started practicing
   // if (typeof pluginPageData[refUid] !== 'undefined') continue;
 };
 
-const convertRoamSrPracticeData = async (oldReviewRecords, pluginPageTitle) => {
+const convertRoamSrPracticeData = async (oldReviewRecords, dataPageTitle) => {
   const results = {};
   for (const [_, resultsArr] of Object.entries(oldReviewRecords)) {
     //@ts-ignore
@@ -22,7 +22,7 @@ const convertRoamSrPracticeData = async (oldReviewRecords, pluginPageTitle) => {
       let practiceInputData = {
         refUid,
         grade,
-        pluginPageTitle,
+        dataPageTitle,
         dateCreated,
         eFactor: undefined,
         repetitions: undefined,
-Original file line number
+Diff line change
@@ Expand Up / @@ -246,6 +246,6 @@ describe.skip('getPluginPageData', () => { @@
           },
         }));
-        expect(queries.getPluginPageData({ pluginPageTitle: 'roam/memo' })).resolves.toBe({});
+        expect(queries.getPluginPageData({ dataPageTitle: 'roam/memo' })).resolves.toBe({});
       });
     });