Add save feature

__tests__/Word_test.re

@@ -1,7 +1,26 @@
 open Jest;
+open Phoneme;
 
-describe("Expect", () => {
-  Expect.(test("toBe", () =>
-            expect(1 + 2) |> toBe(3)
-          ))
+describe("Word", () => {
+  describe("toString", () => {
+    open Expect;
+    test("toString(m,a,t)", () =>
+      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")
+    );
+  });
+
+  describe("fromString", () => {
+    open Expect;
+    test("fromString(\"m,a,t\")", () =>
+      expect("m,a,t" |> Word.fromString) |> toEqual([m, a, t])
+    );
+
+    test("fromString(\"qu,i,c,k\")", () =>
+      expect("qu,i,c,k" |> Word.fromString) |> toEqual([qu, i, c, k])
+    );
+  });
 });

src/Edit.re

@@ -1,33 +1,32 @@
 open Phoneme;
-
-let storageKey = "phonemes";
+open Word;
 
 type drawer =
   | PhonemeSelection
   | SavedWords;
 
 type state = {
-  phonemes: list(phoneme),
+  phonemes: word,
   activeIndex: int,
   drawer,
 };
 
 let initialState = {
-  phonemes: [firstPhoneme],
+  phonemes: [Phoneme.a],
   activeIndex: 0,
   drawer: PhonemeSelection,
 };
 
 let str = React.string;
-
 type action =
   | AddPhoneme
   | RemovePhoneme
   | PhonemeClicked(int, phoneme)
   | SetActive(int)
   | SelectionClicked(phoneme)
   | LoadButtonClicked
-  | CloseSavedWordsClicked;
+  | CloseSavedWordsClicked
+  | LoadWord(word);
 
 type accumulator('a) = {
   list: list('a),
@@ -42,7 +41,7 @@ let reducer = (state, action) => {
   | AddPhoneme => {
       ...state,
       activeIndex: List.length(state.phonemes),
-      phonemes: state.phonemes @ [firstPhoneme],
+      phonemes: state.phonemes @ [Phoneme.a],
     }
   | RemovePhoneme =>
     if (List.length(state.phonemes) > 1) {
@@ -73,6 +72,7 @@ let reducer = (state, action) => {
     }
   | LoadButtonClicked => {...state, drawer: SavedWords}
   | CloseSavedWordsClicked => {...state, drawer: PhonemeSelection}
+  | LoadWord(word) => {...state, phonemes: word}
   };
 };
 
@@ -106,21 +106,40 @@ let make = (~state, ~dispatch, ~onViewButtonClicked) => {
   };
 
   module SavedWords = {
-    [@react.component] 
+    [@react.component]
     let make = () => {
-      let (savedWords, setSavedWords) = React.useState(() => "");
+      let (savedWords, setSavedWords) = React.useState(() => []);
+
+      let deleteWord = (word: Word.word) => {
+        let words = Storage.deleteWord(word);
+        Js.log(Storage.toString(words));
+        setSavedWords(_ => words);
+      };
+
+      let loadWord = (word: Word.word) => {
+        dispatch(LoadWord(word));
+        dispatch(CloseSavedWordsClicked);
+      };
+
       React.useEffect1(
         () => {
-          setSavedWords(_ =>
-            Dom.Storage.getItem(storageKey, Dom.Storage.localStorage)
-            ->Belt.Option.getWithDefault("fail")
-          );
+          setSavedWords(_ => Storage.loadWords());
           None;
         },
         [||],
       );
       <div className="saved-words">
-        {str(savedWords)}
+        {savedWords
+         |> List.map(word =>
+              <Word
+                word
+                key={Word.toString(word)}
+                onDeleteClicked={() => deleteWord(word)}
+                onClick={() => loadWord(word)}
+              />
+            )
+         |> Array.of_list
+         |> React.array}
         <button
           className="transparent-button close-button"
           onClick={_evt => dispatch(CloseSavedWordsClicked)}
@@ -156,36 +175,43 @@ let make = (~state, ~dispatch, ~onViewButtonClicked) => {
             {str("+")}
           </button>
         </div>
-        {switch (state.drawer) {
-         | PhonemeSelection => <PhonemeSelection />
-         | SavedWords => <SavedWords />
-         }}
+        <PhonemeSelection />
       </>;
     };
   };
 
-  let save = () => {
-    Dom.Storage.setItem(storageKey, "test 123", Dom.Storage.localStorage);
+  module ActionSection = {
+    let saveWord = () => {
+      Storage.saveWord(state.phonemes);
+    };
+
+    [@react.component]
+    let make = () => {
+      <div className="action">
+        <button
+          className="transparent-button view-button"
+          onClick={_evt => onViewButtonClicked()}
+          title="Play"
+        />
+        <button
+          className="transparent-button save-button"
+          onClick={_evt => saveWord()}
+          title="Save"
+        />
+        <button
+          className="transparent-button load-button"
+          onClick={_evt => dispatch(LoadButtonClicked)}
+          title="Load"
+        />
+      </div>;
+    };
   };
 
   <div className="edit">
-    <ViewPhonemes phonemes={state.phonemes} />
-    <div className="action">
-      <button
-        className="transparent-button view-button"
-        onClick={_evt => onViewButtonClicked()}
-        title="Play"
-      />
-      <button
-        className="transparent-button save-button"
-        onClick={_evt => save()}
-        title="Save"
-      />
-      <button
-        className="transparent-button load-button"
-        onClick={_evt => dispatch(LoadButtonClicked)}
-        title="Load"
-      />
-    </div>
+    {switch (state.drawer) {
+     | PhonemeSelection =>
+       <> <ViewPhonemes phonemes={state.phonemes} /> <ActionSection /> </>
+     | SavedWords => <SavedWords />
+     }}
   </div>;
 };

src/Phoneme.re

@@ -28,58 +28,90 @@ type phoneme = {
   side,
 };
 
-let firstPhoneme = {sound: "a", image: "", color: Orange, side: Front};
-let orange: list(phoneme) = [
-  firstPhoneme,
-  {sound: "m", image: "", color: Orange, side: Front},
-  {sound: "s", image: "", color: Orange, side: Front},
-  {sound: "d", image: "", color: Orange, side: Front},
-  {sound: "t", image: "", color: Orange, side: Front},
-];
+let a = {sound: "a", image: "", color: Orange, side: Front};
+let m = {sound: "m", image: "", color: Orange, side: Front};
+let s = {sound: "s", image: "", color: Orange, side: Front};
+let d = {sound: "d", image: "", color: Orange, side: Front};
+let t = {sound: "t", image: "", color: Orange, side: Front};
+let orange: list(phoneme) = [a, m, s, d, t];
 
-let purple: list(phoneme) = [
-  {sound: "i", image: "", color: Purple, side: Front},
-  {sound: "n", image: "", color: Purple, side: Front},
-  {sound: "p", image: "", color: Purple, side: Front},
-  {sound: "g", image: "", color: Purple, side: Front},
-  {sound: "o", image: "", color: Purple, side: Front},
-];
+let i = {sound: "i", image: "", color: Purple, side: Front};
+let n = {sound: "n", image: "", color: Purple, side: Front};
+let p = {sound: "p", image: "", color: Purple, side: Front};
+let g = {sound: "g", image: "", color: Purple, side: Front};
+let o = {sound: "o", image: "", color: Purple, side: Front};
+let purple: list(phoneme) = [i, n, p, g, o];
 
-let yellow: list(phoneme) = [
-  {sound: "c", image: "", color: Yellow, side: Front},
-  {sound: "k", image: "", color: Yellow, side: Front},
-  {sound: "u", image: "", color: Yellow, side: Front},
-  {sound: "b", image: "", color: Yellow, side: Front},
-];
+let c = {sound: "c", image: "", color: Yellow, side: Front};
+let k = {sound: "k", image: "", color: Yellow, side: Front};
+let u = {sound: "u", image: "", color: Yellow, side: Front};
+let b = {sound: "b", image: "", color: Yellow, side: Front};
+let yellow: list(phoneme) = [c, k, u, b];
 
-let grey: list(phoneme) = [
-  {sound: "f", image: "", color: Grey, side: Front},
-  {sound: "e", image: "", color: Grey, side: Front},
-  {sound: "l", image: "", color: Grey, side: Front},
-  {sound: "h", image: "", color: Grey, side: Front},
-  {sound: "sh", image: "", color: Grey, side: Front},
-];
+let f = {sound: "f", image: "", color: Grey, side: Front};
+let e = {sound: "e", image: "", color: Grey, side: Front};
+let l = {sound: "l", image: "", color: Grey, side: Front};
+let h = {sound: "h", image: "", color: Grey, side: Front};
+let sh = {sound: "sh", image: "", color: Grey, side: Front};
+let grey: list(phoneme) = [f, e, l, h, sh];
 
-let pink: list(phoneme) = [
-  {sound: "r", image: "", color: Pink, side: Front},
-  {sound: "j", image: "", color: Pink, side: Front},
-  {sound: "v", image: "", color: Pink, side: Front},
-  {sound: "y", image: "", color: Pink, side: Front},
-  {sound: "w", image: "", color: Pink, side: Front},
-];
+let r = {sound: "r", image: "", color: Pink, side: Front};
+let j = {sound: "j", image: "", color: Pink, side: Front};
+let v = {sound: "v", image: "", color: Pink, side: Front};
+let y = {sound: "y", image: "", color: Pink, side: Front};
+let w = {sound: "w", image: "", color: Pink, side: Front};
+let pink: list(phoneme) = [r, j, v, y, w];
 
-let blue: list(phoneme) = [
-  {sound: "th", image: "", color: Blue, side: Front},
-  {sound: "z", image: "", color: Blue, side: Front},
-  {sound: "ch", image: "", color: Blue, side: Front},
-  {sound: "qu", image: "", color: Blue, side: Front},
-  {sound: "x", image: "", color: Blue, side: Front},
-  {sound: "ng", image: "", color: Blue, side: Front},
-  {sound: "nk", image: "", color: Blue, side: Front},
-];
+let th = {sound: "th", image: "", color: Blue, side: Front};
+let z = {sound: "z", image: "", color: Blue, side: Front};
+let ch = {sound: "ch", image: "", color: Blue, side: Front};
+let qu = {sound: "qu", image: "", color: Blue, side: Front};
+let x = {sound: "x", image: "", color: Blue, side: Front};
+let ng = {sound: "ng", image: "", color: Blue, side: Front};
+let nk = {sound: "nk", image: "", color: Blue, side: Front};
+let blue: list(phoneme) = [th, z, ch, qu, x, ng, nk];
 
 let phonemes: list(phoneme) = orange @ purple @ yellow @ grey @ pink @ blue;
 
+let toString = (phoneme: phoneme): string => phoneme.sound;
+
+let fromString = (sound: string): option(phoneme) => {
+  switch (sound) {
+  | "a" => Some(a)
+  | "m" => Some(m)
+  | "s" => Some(s)
+  | "d" => Some(d)
+  | "t" => Some(t)
+  | "i" => Some(i)
+  | "n" => Some(n)
+  | "p" => Some(p)
+  | "g" => Some(g)
+  | "o" => Some(o)
+  | "c" => Some(c)
+  | "k" => Some(k)
+  | "u" => Some(u)
+  | "b" => Some(b)
+  | "f" => Some(f)
+  | "e" => Some(e)
+  | "l" => Some(l)
+  | "h" => Some(h)
+  | "sh" => Some(sh)
+  | "r" => Some(r)
+  | "j" => Some(j)
+  | "v" => Some(v)
+  | "y" => Some(y)
+  | "w" => Some(w)
+  | "th" => Some(th)
+  | "z" => Some(z)
+  | "ch" => Some(ch)
+  | "qu" => Some(qu)
+  | "x" => Some(x)
+  | "ng" => Some(ng)
+  | "nk" => Some(nk)
+  | _ => None
+  };
+};
+
 let str = React.string;
 
 [@react.component]