Misc fixes & tweaks (#283)

* fix autorefresh fallthrough to default settings

* improve error handling & display

* always show spinner when it is refreshing

* remove unused class

* tweak metadata margin on default theme

* add debug logs back into fetching

* add styling on project titles

src/api/index.ts

@@ -1,3 +1,4 @@
+import debug from "../log";
 import type { Label } from "./domain/label";
 import type { Project } from "./domain/project";
 import type { Section } from "./domain/section";
@@ -65,8 +66,18 @@ export class TodoistApiClient {
       params.headers["Content-Type"] = "application/json";
     }
 
+    debug({
+      msg: "Sending Todoist API request",
+      context: params,
+    });
+
     const response = await this.fetcher.fetch(params);
 
+    debug({
+      msg: "Received Todoist API response",
+      context: response,
+    });
+
     if (response.statusCode >= 400) {
       throw new TodoistApiError(params, response);
     }
@@ -75,10 +86,13 @@ export class TodoistApiClient {
   }
 }
 
-class TodoistApiError extends Error {
+export class TodoistApiError extends Error {
+  public statusCode: number;
+
   constructor(request: RequestParams, response: WebResponse) {
     const message = `[${request.method}] ${request.url} returned '${response.statusCode}: ${response.body}`;
     super(message)
+    this.statusCode = response.statusCode;
   }
 }
 

src/data/index.ts

@@ -1,4 +1,4 @@
-import type { TodoistApiClient } from "../api";
+import { TodoistApiError, type TodoistApiClient } from "../api";
 import type { Label, LabelId } from "../api/domain/label";
 import type { Project, ProjectId } from "../api/domain/project";
 import type { Section, SectionId } from "../api/domain/section";
@@ -7,9 +7,15 @@ import type { Task } from "./task";
 import type { Task as ApiTask, CreateTaskParams, TaskId } from "../api/domain/task";
 import { SubscriptionManager, type UnsubscribeCallback } from "./subscriptions";
 import { Maybe } from "../utils/maybe";
-import moment from "moment";
 
-type SubscriptionResult = { type: "success", tasks: Task[] } | { type: "error" };
+export enum QueryErrorKind {
+  BadRequest,
+  Unauthorized,
+  Forbidden,
+  Unknown,
+}
+
+type SubscriptionResult = { type: "success", tasks: Task[] } | { type: "error", kind: QueryErrorKind };
 type OnSubscriptionChange = (result: SubscriptionResult) => void;
 type Refresh = () => Promise<void>;
 
@@ -90,7 +96,22 @@ export class TodoistAdapter {
       }
       catch (error: any) {
         console.error(`Failed to refresh task query: ${error}`);
-        callback({ type: "error" });
+
+        let result: SubscriptionResult = { type: "error", kind: QueryErrorKind.Unknown };
+        if (error instanceof TodoistApiError) {
+          switch (error.statusCode) {
+            case 400:
+              result.kind = QueryErrorKind.BadRequest;
+              break;
+            case 401:
+              result.kind = QueryErrorKind.Unauthorized;
+              break;
+            case 403:
+              result.kind = QueryErrorKind.Forbidden;
+              break;
+          }
+        }
+        callback(result);
       }
     };
   }

src/index.ts

@@ -128,6 +128,7 @@ class ObsidianFetcher implements WebFetcher {
             method: params.method,
             body: params.body,
             headers: params.headers,
+            throw: false,
         });
 
         return {

src/ui/ErrorDisplay.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  export let error: Error;
+  export let error: string;
 </script>
 
 <div class="todoist-error">
-  <p>Oh no, something went wrong!</p>
-  <code>{error}</code>
+  <p><b>Encountered error:</b></p>
+  <p>{error}</p>
 </div>

src/ui/QueryErrorDisplay.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { QueryErrorKind } from "../data";
+  import ErrorDisplay from "./ErrorDisplay.svelte";
+
+  export let kind: QueryErrorKind;
+
+  $: errorMessage = message(kind);
+
+  function message(kind: QueryErrorKind): string {
+    switch (kind) {
+      case QueryErrorKind.BadRequest:
+        return "The Todoist API has rejected the request. Please check the filter to ensure it is valid.";
+      case QueryErrorKind.Unauthorized:
+        return "The Todoist API request is missing or has the incorreect credentials. Please check the API token in the settings.";
+      default:
+        return "Unknown error occurred. Please check the Console in the Developer Tools window for more information";
+    }
+  }
+</script>
+
+<ErrorDisplay error={errorMessage} />

src/ui/TodoistQuery.svelte

@@ -4,14 +4,15 @@
   import type { Query } from "../query/query";
   import CreateTaskModal from "../modals/createTask/createTaskModal";
   import NoTaskDisplay from "./NoTaskDisplay.svelte";
-  import type { TodoistAdapter } from "../data";
+  import type { QueryErrorKind, TodoistAdapter } from "../data";
   import type { Task } from "../data/task";
   import GroupedTasks from "./GroupedTasks.svelte";
   import type { TaskId } from "../api/domain/task";
   import TaskListRoot from "./TaskListRoot.svelte";
   import { Notice } from "obsidian";
   import { setQuery, setTaskActions } from "./contexts";
   import ObsidianIcon from "../components/ObsidianIcon.svelte";
+  import QueryErrorDisplay from "./QueryErrorDisplay.svelte";
 
   export let query: Query;
   export let todoistAdapter: TodoistAdapter;
@@ -47,14 +48,19 @@
   let fetching: boolean = false;
   let tasks: Task[] = [];
   let tasksPendingClose: Set<TaskId> = new Set();
+  let queryError: QueryErrorKind | undefined = undefined;
 
   const [unsubscribeQuery, refreshQuery] = todoistAdapter.subscribe(
     query.filter,
     (result) => {
       switch (result.type) {
         case "success":
+          queryError = undefined;
           tasks = result.tasks;
           break;
+        case "error":
+          queryError = result.kind;
+          break;
       }
     }
   );
@@ -66,9 +72,14 @@
       autoRefreshIntervalId = null;
     }
 
-    const interval =
-      query?.autorefresh ??
-      ($settings.autoRefreshToggle ? $settings.autoRefreshInterval : 0);
+    // Use the query autorefresh, or look to the settings if its zero
+    let interval = query.autorefresh;
+
+    if (interval === 0) {
+      interval = $settings.autoRefreshToggle
+        ? $settings.autoRefreshInterval
+        : 0;
+    }
 
     if (interval != 0) {
       autoRefreshIntervalId = window.setInterval(async () => {
@@ -111,19 +122,14 @@
   <h4 class="todoist-query-title">{title}</h4>
 {/if}
 <div
-  class={fetching
-    ? "edit-block-button todoist-refresh-button todoist-refresh-disabled"
-    : "edit-block-button todoist-refresh-button"}
+  class="edit-block-button todoist-refresh-button"
+  class:todoist-refresh-fetching={fetching}
   on:click={async () => {
     await forceRefresh();
   }}
   aria-label="Refresh list"
 >
-  <ObsidianIcon
-    class={fetching ? "todoist-refresh-spin" : ""}
-    iconId="refresh-ccw"
-    size={24}
-  />
+  <ObsidianIcon iconId="refresh-ccw" size={24} />
 </div>
 <div
   class="edit-block-button todoist-add-button"
@@ -136,7 +142,9 @@
 </div>
 <br />
 {#if fetchedOnce}
-  {#if filteredTasks.length === 0}
+  {#if queryError !== undefined}
+    <QueryErrorDisplay kind={queryError} />
+  {:else if filteredTasks.length === 0}
     <NoTaskDisplay />
   {:else if query.group}
     <GroupedTasks tasks={filteredTasks} />

src/utils.ts

@@ -6,26 +6,3 @@ export function isPositiveInteger(str: string): boolean {
 export function toInt(str: string): number {
   return Math.floor(Number(str));
 }
-
-export class ExtendedMap<K, V> extends Map<K, V> {
-  get_or_default(key: K, defaultValue: V): V {
-    if (this.has(key)) {
-      return this.get(key);
-    }
-
-    return defaultValue;
-  }
-
-  get_or_maybe_insert(key: K, newValue: () => V | null): V {
-    if (this.has(key)) {
-      return this.get(key);
-    }
-
-    const value = newValue();
-    if (value) {
-      this.set(key, value);
-    }
-
-    return value;
-  }
-}

styles.css

@@ -27,12 +27,11 @@
   background-color: var(--background-modifier-hover);
 }
 
-.todoist-refresh-disabled {
-  opacity: 0.5;
-  pointer-events: none;
+.is-live-preview .todoist-refresh-button.todoist-refresh-fetching {
+  opacity: 1!important;
 }
 
-.todoist-refresh-spin {
+.todoist-refresh-fetching > div {
   animation: spin 1s linear infinite reverse;
 }
 
@@ -49,7 +48,7 @@
 
 .is-live-preview .task-metadata,
 .is-live-preview .todoist-task-description {
-  margin-left: 26px;
+  margin-left: 34px;
 }
 
 .task-metadata-item {
@@ -156,3 +155,7 @@ ul.todoist-task-list {
   color: var(--text-muted);
 }
 
+.todoist-project-title {
+  margin: 1em 0;
+  font-weight: 700;
+}