Tidy up settings page a bit

marcus-crane · Jun 2, 2022 · 3dcbe93 · 3dcbe93
1 parent 5030410
commit 3dcbe93
Show file tree

Hide file tree

Showing 16 changed files with 378 additions and 154 deletions.
diff --git a/frontend/dist/assets/index.4a14fe4f.css → frontend/dist/assets/index.0b1a9ab5.css b/frontend/dist/assets/index.4a14fe4f.css → frontend/dist/assets/index.0b1a9ab5.css
diff --git a/frontend/dist/assets/index.bc6cfc65.js b/frontend/dist/assets/index.bc6cfc65.js
diff --git a/frontend/dist/assets/index.ded8a96d.js b/frontend/dist/assets/index.ded8a96d.js
diff --git a/frontend/dist/index.html b/frontend/dist/index.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta content="width=device-width, initial-scale=1.0" name="viewport" />
     <title>October</title>
-    <script type="module" crossorigin src="/assets/index.ded8a96d.js"></script>
-    <link rel="stylesheet" href="/assets/index.4a14fe4f.css">
+    <script type="module" crossorigin src="/assets/index.bc6cfc65.js"></script>
+    <link rel="stylesheet" href="/assets/index.0b1a9ab5.css">
   </head>
   <body class="max-h-screen bg-gray-100 dark:bg-gray-800">
     <div id="root"></div>

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -8,8 +8,9 @@
     "@tailwindcss/forms": "^0.4.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-hot-toast": "^2.2.0",
     "react-router-dom": "^6.3.0",
-    "react-toastify": "^9.0.1"
+    "react-toastify": "^9.0.3"
   },
   "scripts": {
     "dev": "vite",

diff --git a/frontend/package.json.md5 b/frontend/package.json.md5
@@ -1 +1 @@
-1fdb8b94b07f5d08ac87bd007e82256d
+007286ef2e29c47f3eccbab570b80a6e
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client'
+import { Toaster } from 'react-hot-toast'
 
 import 'react-toastify/dist/ReactToastify.css';
 import './style.css';
@@ -9,6 +10,7 @@ import Router from './router';
 const routes = (
   <React.StrictMode>
     <Router />
+    <Toaster />
   </React.StrictMode>
 )
 

diff --git a/frontend/src/pages/Settings.jsx b/frontend/src/pages/Settings.jsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import Navbar from "../components/Navbar";
-import { toast } from "react-toastify";
+import { toast } from "react-hot-toast";
+import { BrowserOpenURL } from '../../wailsjs/runtime'
 import { GetSettings } from "../../wailsjs/go/backend/Backend";
 import {
   SaveToken,
@@ -37,17 +38,19 @@ export default function Settings() {
     toast.success("Your changes have been saved")
   }
 
-  function checkReadwiseTokenValid() {
-    const toastId = toast.loading("Contacting the Readwise API...")
-    CheckTokenValidity()
-      .then(apiError => {
-        if (apiError === null) {
-          toast.update(toastId, { render: "Successfully authenticated against the Readwise API", type: "success", isLoading: false, autoClose: 2000 })
-        } else {
-          throw apiError
+  function checkTokenValid() {
+    toast.promise(
+      CheckTokenValidity(tokenInput),
+    {
+      loading: 'Contacting Readwise...',
+      success: () => "Your API token is valid!",
+      error: (err) => {
+        if (err === "401 Unauthorized") {
+          return "Readwise rejected your token"
         }
-      })
-      .catch(err => toast.update(toastId, { render: err.message(), type: "error", isLoading: false, autoClose: 2000 }))
+        return err
+      }
+    })
   }
 
   return (
@@ -64,10 +67,22 @@ export default function Settings() {
             <div className="px-4 py-5 sm:p-6">
               <h3 className="text-lg leading-6 font-medium text-gray-900">Set your Readwise access token</h3>
               <div className="mt-2 max-w-xl text-sm text-gray-500">
-                <p>You can find your access token at https://readwise.io/access_token</p>
+                <p>You can find your access token at{" "}
+                  <button
+                    className="text-gray-600 underline"
+                    onClick={() =>
+                      BrowserOpenURL("https://readwise.io/access_token")
+                    }
+                  >
+                    https://readwise.io/access_token
+                  </button>
+                </p>
               </div>
-              <form onSubmit={(e) => e.preventDefault()} className="mt-5 sm:flex sm:items-center">
-                <div className="w-full sm:max-w-xs">
+              <form
+                onSubmit={(e) => e.preventDefault()}
+                className="sm:flex flex-col"
+              >
+                <div className="w-full mt-4 sm:flex sm:items-center">
                   <input
                     onChange={(e) => setTokenInput(e.target.value)}
                     type="text"
@@ -78,30 +93,22 @@ export default function Settings() {
                     value={tokenInput}
                   />
                 </div>
-                <button
-                  onClick={saveToken}
-                  type="submit"
-                  className="mt-3 w-full inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-                >
-                  Save
-                </button>
-              </form>
-            </div>
-          </div>
-          <div className="bg-white shadow sm:rounded-lg">
-            <div className="px-4 py-5 sm:p-6">
-              <h3 className="text-lg leading-6 font-medium text-gray-900">Validate your Readwise token</h3>
-              <div className="mt-2 max-w-xl text-sm text-gray-500">
-                <p>Make a call to the Readwise API to check that your token is valid and correctly entered</p>
-              </div>
-              <form onSubmit={(e) => e.preventDefault()} className="mt-5 sm:flex sm:items-center">
-                <button
-                  onClick={checkReadwiseTokenValid}
-                  type="submit"
-                  className="mt-3 w-full inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:text-sm"
-                >
-                  Validate Readwise token
-                </button>
+                <div className="w-full mt-4 sm:flex flex-row">
+                  <button
+                    onClick={checkTokenValid}
+                    type="submit"
+                    className="mt-3 w-full inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:mt-0 sm:text-sm"
+                  >
+                    Validate
+                  </button>
+                  <button
+                    onClick={saveToken}
+                    type="submit"
+                    className="mt-3 w-full inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:text-sm"
+                  >
+                    Save
+                  </button>
+                </div>
               </form>
             </div>
           </div>

diff --git a/frontend/wailsjs/go/backend/Backend.d.ts b/frontend/wailsjs/go/backend/Backend.d.ts
@@ -2,18 +2,18 @@
 // This file is automatically generated. DO NOT EDIT
 import {backend} from '../models';
 
-export function GetBookmark():Promise<backend.Bookmark>;
-
-export function GetContent():Promise<backend.Content>;
-
-export function GetSelectedKobo():Promise<backend.Kobo>;
-
-export function GetSettings():Promise<backend.Settings>;
-
 export function PromptForLocalDBPath():Promise<Error>;
 
 export function SelectKobo(arg1:string):Promise<Error>;
 
 export function DetectKobos():Promise<Array<backend.Kobo>>;
 
 export function ForwardToReadwise():Promise<number|Error>;
+
+export function GetBookmark():Promise<backend.Bookmark>;
+
+export function GetContent():Promise<backend.Content>;
+
+export function GetSelectedKobo():Promise<backend.Kobo>;
+
+export function GetSettings():Promise<backend.Settings>;
diff --git a/frontend/wailsjs/go/backend/Backend.js b/frontend/wailsjs/go/backend/Backend.js
@@ -2,22 +2,6 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
-export function GetBookmark() {
-  return window['go']['backend']['Backend']['GetBookmark']();
-}
-
-export function GetContent() {
-  return window['go']['backend']['Backend']['GetContent']();
-}
-
-export function GetSelectedKobo() {
-  return window['go']['backend']['Backend']['GetSelectedKobo']();
-}
-
-export function GetSettings() {
-  return window['go']['backend']['Backend']['GetSettings']();
-}
-
 export function PromptForLocalDBPath() {
   return window['go']['backend']['Backend']['PromptForLocalDBPath']();
 }
@@ -33,3 +17,19 @@ export function DetectKobos() {
 export function ForwardToReadwise() {
   return window['go']['backend']['Backend']['ForwardToReadwise']();
 }
+
+export function GetBookmark() {
+  return window['go']['backend']['Backend']['GetBookmark']();
+}
+
+export function GetContent() {
+  return window['go']['backend']['Backend']['GetContent']();
+}
+
+export function GetSelectedKobo() {
+  return window['go']['backend']['Backend']['GetSelectedKobo']();
+}
+
+export function GetSettings() {
+  return window['go']['backend']['Backend']['GetSettings']();
+}
diff --git a/frontend/wailsjs/go/backend/Kobo.d.ts b/frontend/wailsjs/go/backend/Kobo.d.ts
@@ -3,10 +3,6 @@
 import {backend} from '../models';
 import {map[string]backend} from '../models';
 
-export function ListBookmarksByID(arg1:string):Promise<Array<backend.Bookmark>|Error>;
-
-export function ListBooksOnDevice():Promise<Array<backend.Content>|Error>;
-
 export function ListDeviceBookmarks():Promise<Array<backend.Bookmark>|Error>;
 
 export function ListDeviceContent():Promise<Array<backend.Content>|Error>;
@@ -16,3 +12,7 @@ export function BuildContentIndex(arg1:Array<backend.Content>):Promise<map[strin
 export function CountDeviceBookmarks():Promise<number>;
 
 export function FindBookOnDevice(arg1:string):Promise<backend.Content|Error>;
+
+export function ListBookmarksByID(arg1:string):Promise<Array<backend.Bookmark>|Error>;
+
+export function ListBooksOnDevice():Promise<Array<backend.Content>|Error>;
diff --git a/frontend/wailsjs/go/backend/Kobo.js b/frontend/wailsjs/go/backend/Kobo.js
@@ -2,14 +2,6 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
-export function ListBookmarksByID(arg1) {
-  return window['go']['backend']['Kobo']['ListBookmarksByID'](arg1);
-}
-
-export function ListBooksOnDevice() {
-  return window['go']['backend']['Kobo']['ListBooksOnDevice']();
-}
-
 export function ListDeviceBookmarks() {
   return window['go']['backend']['Kobo']['ListDeviceBookmarks']();
 }
@@ -29,3 +21,11 @@ export function CountDeviceBookmarks() {
 export function FindBookOnDevice(arg1) {
   return window['go']['backend']['Kobo']['FindBookOnDevice'](arg1);
 }
+
+export function ListBookmarksByID(arg1) {
+  return window['go']['backend']['Kobo']['ListBookmarksByID'](arg1);
+}
+
+export function ListBooksOnDevice() {
+  return window['go']['backend']['Kobo']['ListBooksOnDevice']();
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		1fdb8b94b07f5d08ac87bd007e82256d
		007286ef2e29c47f3eccbab570b80a6e