massive refactoring to support customising highlights page and org mode

luhmann · Feb 14, 2022 · a89f57e · a89f57e
1 parent 0a52349
commit a89f57e
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
+> README below is outdated since the major change on 14/2/2022. Pending a rewrite.
+
 > Supports multiple date formats, as long as it has "yyyy", "dd", "MM", in addition to the default "MMM do yyyy". Currently does not support other formats, e.g. "MMMM" or "E"
 
 > Installing the plugin from the martketplace now works! If you are changing from manually loading the plugin to using the one from the marketplace, please read the [instructions here](https://github.com/hkgnp/logseq-readwise-plugin#migrating-from-manual-loading-to-marketplace) to prevent synchronising of duplicate data.

diff --git a/src/App.css b/src/App.css
@@ -835,9 +835,9 @@ video {
   background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
 }
 
-.bg-red-600 {
+.bg-yellow-300 {
   --tw-bg-opacity: 1;
-  background-color: rgba(220, 38, 38, var(--tw-bg-opacity));
+  background-color: rgba(252, 211, 77, var(--tw-bg-opacity));
 }
 
 .bg-green-600 {
@@ -956,9 +956,9 @@ video {
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
 
-.text-red-500 {
+.text-red-400 {
   --tw-text-opacity: 1;
-  color: rgba(239, 68, 68, var(--tw-text-opacity));
+  color: rgba(248, 113, 113, var(--tw-text-opacity));
 }
 
 .text-blue-500 {

diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
@@ -8,7 +8,7 @@ const ProgressBar = ({ progressPercentage }) => {
         <div
           style={{ width: `${progressPercentage}%` }}
           className={`h-full ${
-            progressPercentage < 70 ? 'bg-red-600' : 'bg-green-600'
+            progressPercentage < 70 ? 'bg-yellow-300' : 'bg-green-600'
           }`}
         ></div>
       </div>

diff --git a/src/components/Sync.tsx b/src/components/Sync.tsx
@@ -29,6 +29,7 @@ const Sync = (props: {
   } = props;
 
   const [progressPercentage, setProgressPercentage] = useState(0);
+  const [coolingOff, setCoolingOff] = useState(false);
 
   const { customTitle, metaData, height, width, sectionHeader } =
     logseq.settings.template;
@@ -49,13 +50,19 @@ const Sync = (props: {
 
     // Handle progress bar
     // If there are 200 books, each interval will be 0.5
-    const interval = 100 / bookList.length;
+    const interval: number = parseFloat((100 / bookList.length).toFixed(2));
 
     for (const b of bookList) {
-      setProgressPercentage(progressPercentage + interval);
+      setProgressPercentage(
+        (progressPercentage) => progressPercentage + interval
+      );
 
       // Get highlights for book
-      const bookHighlights = await getHighlightsForBook(b.id, token);
+      const bookHighlights = await getHighlightsForBook(
+        b.id,
+        token,
+        setCoolingOff
+      );
 
       // Filter only the latest highlights
       const latestHighlights = bookHighlights.data.results.filter(
@@ -247,7 +254,12 @@ const Sync = (props: {
           </button>
         )}
 
-        <div id="coolingOffDiv" className="text-red-500 text-sm"></div>
+        {/* Only show when cooling off */}
+        {coolingOff && (
+          <p className="text-red-400 font-bold text-sm">
+            Please wait for Readwise's cooling off period to lapse.
+          </p>
+        )}
 
         {/* Start progress bar */}
         <div className="relative pt-1 mt-3">

diff --git a/src/services/utilities.ts b/src/services/utilities.ts
@@ -123,7 +123,11 @@ export const loadFromReadwise = async (
   }
 };
 
-export const getHighlightsForBook = async (id: number, token: string) => {
+export const getHighlightsForBook = async (
+  id: number,
+  token: string,
+  setCoolingOff: Function
+) => {
   let response: any;
   try {
     response = await axios({
@@ -138,9 +142,18 @@ export const getHighlightsForBook = async (id: number, token: string) => {
     });
   } catch (e) {
     console.log(e);
+
+    if (e.response.status === 429) {
+      setCoolingOff(true);
+    }
+
     const retryAfter =
       parseInt(e.response.headers['retry-after']) * 1000 + 5000;
+
     await sleep(retryAfter);
+
+    console.log('Trying a second time...');
+
     response = await axios({
       method: 'get',
       url: 'https://readwise.io/api/v2/highlights/',
@@ -151,6 +164,8 @@ export const getHighlightsForBook = async (id: number, token: string) => {
         book_id: id,
       },
     });
+
+    setCoolingOff(false);
   }
 
   return response;