Add next, prev, and shuffle.

__tests__/Word_test.re

@@ -8,8 +8,8 @@ describe("Word", () => {
       expect([m, a, t] |> Word.toString) |> toBe("m,a,t")
     );
 
-    test("toString(qu,i,c,k)", () =>
-      expect([qu, i, c, k] |> Word.toString) |> toBe("qu,i,c,k")
+    test("toString(qu,i,ck)", () =>
+      expect([qu, i, ck] |> Word.toString) |> toBe("qu,i,ck")
     );
   });
 
@@ -23,4 +23,28 @@ describe("Word", () => {
       expect("qu,i,c,k" |> Word.fromString) |> toEqual([qu, i, c, k])
     );
   });
+
+  describe("findPrev", () => {
+    Expect.(
+      test("findPrev", () =>
+        expect(
+          Word.findPrev([[m, a, t], [qu, i, ck]], [qu, i, ck])
+          ->Belt.Option.map(Word.toString),
+        )
+        |> toEqual(Some("m,a,t"))
+      )
+    )
+  });
+
+  describe("findNext", () => {
+    Expect.(
+      test("findNext", () =>
+        expect(
+          Word.findNext([[m, a, t], [qu, i, ck]], [m, a, t])
+          ->Belt.Option.map(Word.toString),
+        )
+        |> toEqual(Some("qu,i,ck"))
+      )
+    )
+  });
 });

src/Storage.re

@@ -74,4 +74,21 @@ let deleteWord: word => list(word) =
     let updatedWords = removeWord(existingWords, word);
     Dom.Storage.setItem(storageKey, updatedWords, Dom.Storage.localStorage);
     loadWords();
+  };
+
+let prevWord: word => word =
+  word => {
+    loadWords()->findPrev(word)->Belt.Option.getWithDefault(word);
+  };
+
+let nextWord: word => word =
+  word => {
+    loadWords()->findNext(word)->Belt.Option.getWithDefault(word);
+  };
+
+let shuffleWord: unit => option(word) =
+  () => {
+    let words = loadWords();
+    let randomIndex = Random.int(List.length(words));
+    List.nth_opt(words, randomIndex);
   };

src/View.re

@@ -58,10 +58,50 @@ let make = (~dispatch, ~state, ~onEditButtonClicked) => {
     };
   };
 
+  module Navigation = {
+    let prevButtonClicked = _evt => {
+      let word = Storage.prevWord(state.word);
+      dispatch(LoadWord(word));
+    };
+
+    let shuffleButtonClicked = _evt => {
+      let word =
+        Storage.shuffleWord()->Belt.Option.getWithDefault(state.word);
+      dispatch(LoadWord(word));
+    };
+
+    let nextButtonClicked = _evt => {
+      let word = Storage.nextWord(state.word);
+      dispatch(LoadWord(word));
+    };
+
+    [@react.component]
+    let make = () => {
+      <div className="navigation">
+        <button
+          className="transparent-button prev-button"
+          title="Next"
+          onClick=prevButtonClicked
+        />
+        <button
+          className="transparent-button shuffle-button"
+          title="Next"
+          onClick=shuffleButtonClicked
+        />
+        <button
+          className="transparent-button next-button"
+          title="Next"
+          onClick=nextButtonClicked
+        />
+      </div>;
+    };
+  };
+
   switch (state.display) {
   | DisplayPlay =>
     <div className="play">
       <ViewWord word={state.word} />
+      <Navigation />
       <ActionSection />
     </div>
   | DisplaySavedWords =>

src/Word.re

@@ -20,6 +20,28 @@ let fromString = (word: string): word => {
   |> List.flatten;
 };
 
+let rec findPrev: (list(word), word) => option(word) =
+  (words, word) => {
+    let wordStr = toString(word);
+    switch (words) {
+    | [] => None
+    | [_] => None
+    | [a, b, ..._rest] when toString(b) == wordStr => Some(a)
+    | [_, ...rest] => findPrev(rest, word)
+    };
+  };
+
+let rec findNext: (list(word), word) => option(word) =
+  (words, word) => {
+    let wordStr = toString(word);
+    switch (words) {
+    | [] => None
+    | [_] => None
+    | [a, b, ..._rest] when toString(a) == wordStr => Some(b)
+    | [_, ...rest] => findNext(rest, word)
+    };
+  };
+
 [@react.component]
 let make = (~word: word, ~onDeleteClicked=() => (), ~onClick=() => ()) => {
   <div className="word" onClick={_evt => onClick()}>