Add back and forward buttons

Add back and forward buttons that allow a user
to traverse their API navigation history

Author: dillonredding

src/browser.tsx

@@ -1,39 +1,67 @@
 import { Accessor, createContext, createSignal, ParentComponent, Setter, useContext } from 'solid-js';
+import { createStore } from 'solid-js/store';
 
-import { Action, Entity, follow, parse, submit, Target } from '@siren-js/client';
+import * as Siren from '@siren-js/client';
+
+interface HistoryItem {
+  url: string;
+  content: string;
+  entity?: Siren.Entity;
+  error?: Error;
+}
 
 interface BrowserContextValue {
-  entity: Accessor<Entity | undefined>;
+  canGoBack: Accessor<boolean>;
+  canGoForward: Accessor<boolean>;
+  entity: Accessor<Siren.Entity | undefined>;
+  error: Accessor<Error | undefined>;
   loading: Accessor<boolean>;
   location: Accessor<string>;
   rawContent: Accessor<string | undefined>;
   setLocation: Setter<string>;
-  error: Accessor<Error | undefined>;
-  follow: (target: Target) => void;
-  submit: (action: Action) => void;
+  follow(target: Siren.Target): void;
+  goBack(): void;
+  goForward(): void;
+  submit(action: Siren.Action): void;
 }
 
 const BrowserContext = createContext({} as BrowserContextValue);
 
 export const BrowserProvider: ParentComponent = (props) => {
   const [loading, setLoading] = createSignal(false);
   const [location, setLocation] = createSignal('');
-  const [entity, setEntity] = createSignal<Entity>();
+  const [history, setHistory] = createStore<HistoryItem[]>([]);
+  const [historyIndex, setHistoryIndex] = createSignal(-1);
   const [rawContent, setRawContent] = createSignal<string>();
+  const [entity, setEntity] = createSignal<Siren.Entity>();
   const [error, setError] = createSignal<Error>();
 
   const responseHandler = async (res: Response): Promise<void> => {
     setLocation(res.url);
+
     const text = await res.text();
     setRawContent(text);
+
+    const historyItem: HistoryItem = {
+      url: res.url,
+      content: text,
+    };
+
     const contentType = res.headers.get('Content-Type') ?? '';
     if (/^application\/vnd\.siren\+json(;|$)/.test(contentType)) {
+      const entity = await Siren.parse(text);
       setError(undefined);
-      setEntity(await parse(text));
+      setEntity(entity);
+      historyItem.entity = entity;
     } else {
+      const error = new Error(`Unable to parse unrecognized Content-Type: ${contentType}`);
       setEntity(undefined);
-      setError(new Error(`Unable to parse unrecognized Content-Type: ${contentType}`));
+      setError(error);
+      historyItem.error = error;
     }
+
+    setHistory([...history.slice(0, historyIndex() + 1), historyItem]);
+    setHistoryIndex((value) => value + 1);
   };
 
   const navigate = (req: () => Promise<Response>) => {
@@ -44,18 +72,59 @@ export const BrowserProvider: ParentComponent = (props) => {
       .finally(() => setLoading(false));
   };
 
-  const value: BrowserContextValue = {
-    entity,
-    error,
-    loading,
-    location,
-    rawContent,
-    setLocation,
-    follow: (url) => navigate(() => follow(url)),
-    submit: (action: Action) => navigate(() => submit(action)),
+  const follow = (target: Siren.Target) => navigate(() => Siren.follow(target));
+  const submit = (action: Siren.Action) => navigate(() => Siren.submit(action));
+
+  const setStateFrom = (item: HistoryItem) => {
+    setLocation(item.url);
+    setRawContent(item.content);
+    setEntity(item.entity);
+    setError(item.error);
+  };
+
+  const go = (indexFn: (currentIndex: number) => number) => {
+    setHistoryIndex((currentIndex) => {
+      const index = indexFn(currentIndex);
+      const historyItem = history[index];
+      setStateFrom(historyItem);
+      return index;
+    });
+  };
+
+  const canGoBack = () => historyIndex() > 0;
+  const goBack = () => {
+    if (canGoBack()) {
+      go((i) => i - 1);
+    }
+  };
+
+  const canGoForward = () => historyIndex() < history.length - 1;
+  const goForward = () => {
+    if (canGoForward()) {
+      go((i) => i + 1);
+    }
   };
 
-  return <BrowserContext.Provider value={value}>{props.children}</BrowserContext.Provider>;
+  return (
+    <BrowserContext.Provider
+      value={{
+        canGoBack,
+        canGoForward,
+        entity,
+        error,
+        follow,
+        goBack,
+        goForward,
+        loading,
+        location,
+        rawContent,
+        setLocation,
+        submit,
+      }}
+    >
+      {props.children}
+    </BrowserContext.Provider>
+  );
 };
 
 export const useBrowserContext = () => useContext(BrowserContext);

src/components/Navigator.tsx

@@ -3,7 +3,16 @@ import { Component } from 'solid-js';
 import { useBrowserContext } from '../browser';
 
 export const Navigator: Component = () => {
-  const { loading, location, setLocation, follow } = useBrowserContext();
+  const {
+    loading,
+    location,
+    setLocation,
+    canGoBack,
+    canGoForward,
+    goBack: back,
+    goForward: forward,
+    follow,
+  } = useBrowserContext();
   return (
     <form
       onSubmit={(e) => {
@@ -12,6 +21,39 @@ export const Navigator: Component = () => {
       }}
     >
       <div class="field has-addons">
+        <div class="control">
+          <button
+            type="button"
+            class="button"
+            classList={{ 'is-loading': loading() }}
+            disabled={!canGoBack()}
+            onClick={back}
+          >
+            <span class="icon">
+              <i class="fas fa-arrow-left" />
+            </span>
+          </button>
+        </div>
+        <div class="control">
+          <button
+            type="button"
+            class="button"
+            classList={{ 'is-loading': loading() }}
+            disabled={!canGoForward()}
+            onClick={forward}
+          >
+            <span class="icon">
+              <i class="fas fa-arrow-right" />
+            </span>
+          </button>
+        </div>
+        {/* <div class="control">
+          <button type="button" class="button" classList={{ 'is-loading': loading() }}>
+            <span class="icon">
+              <i class="fas fa-redo" />
+            </span>
+          </button>
+        </div> */}
         <div class="control is-expanded">
           <input
             class="input"
@@ -24,7 +66,7 @@ export const Navigator: Component = () => {
           />
         </div>
         <div class="control">
-          <button class="button is-primary" classList={{ 'is-loading': loading() }}>
+          <button type="submit" class="button is-primary" classList={{ 'is-loading': loading() }}>
             <span class="icon">
               <i class="fas fa-search" />
             </span>