wip - implement save words.

index.html

@@ -16,16 +16,4 @@ <h1>Please enable JavaScript to use Phonics app.</h1>
     </noscript>
     <div id="app"></div>
     <script src="/src/index.re"></script>
-    <script>
-		if ('serviceWorker' in navigator) {
-      const sw = "sw.js";
-			navigator.serviceWorker.register(sw)
-				.then(function(registration) {
-					console.log('Registration successful, scope is:', registration.scope);
-				})
-				.catch(function(error) {
-					console.log('Service worker registration failed, error:', error);
-				});
-		}
-  	</script>
 </html>

package.json

@@ -13,6 +13,7 @@
   "license": "ISC",
   "devDependencies": {
     "bs-platform": "^7.0.1",
+    "bs-remotedata": "^2.0.1",
     "bsb-js": "^1.1.7",
     "parcel-bundler": "^1.12.4",
     "parcel-plugin-sw-cache": "^0.3.1",

src/Edit.re

@@ -1,11 +1,22 @@
 open Phoneme;
 
+let storageKey = "phonemes";
+
+type drawer =
+  | PhonemeSelection
+  | SavedWords;
+
 type state = {
   phonemes: list(phoneme),
   activeIndex: int,
+  drawer,
 };
 
-let initialState = {phonemes: [firstPhoneme], activeIndex: 0};
+let initialState = {
+  phonemes: [firstPhoneme],
+  activeIndex: 0,
+  drawer: PhonemeSelection,
+};
 
 let str = React.string;
 
@@ -14,7 +25,9 @@ type action =
   | RemovePhoneme
   | PhonemeClicked(int, phoneme)
   | SetActive(int)
-  | SelectionClicked(phoneme);
+  | SelectionClicked(phoneme)
+  | LoadButtonClicked
+  | CloseSavedWordsClicked;
 
 type accumulator('a) = {
   list: list('a),
@@ -26,12 +39,17 @@ let selectPhoneme = (index, phoneme, list) =>
 
 let reducer = (state, action) => {
   switch (action) {
-  | AddPhoneme => {...state, phonemes: state.phonemes @ [firstPhoneme]}
+  | AddPhoneme => {
+      ...state,
+      activeIndex: List.length(state.phonemes),
+      phonemes: state.phonemes @ [firstPhoneme],
+    }
   | RemovePhoneme =>
     if (List.length(state.phonemes) > 1) {
       let newPhonemes = state.phonemes |> List.rev |> List.tl |> List.rev;
       let length = List.length(newPhonemes);
       {
+        ...state,
         phonemes: newPhonemes,
         activeIndex:
           List.length(newPhonemes) > state.activeIndex
@@ -53,6 +71,8 @@ let reducer = (state, action) => {
              index == state.activeIndex ? clickedPhoneme : phoneme
            }),
     }
+  | LoadButtonClicked => {...state, drawer: SavedWords}
+  | CloseSavedWordsClicked => {...state, drawer: PhonemeSelection}
   };
 };
 
@@ -67,6 +87,49 @@ let make = (~state, ~dispatch, ~onViewButtonClicked) => {
     };
   };
 
+  module PhonemeSelection = {
+    [@react.component]
+    let make = () => {
+      <div className="selection">
+        {Phoneme.phonemes
+         |> List.mapi((index, phoneme) =>
+              <Phoneme
+                phoneme
+                key={string_of_int(index)}
+                onClick={() => dispatch(SelectionClicked(phoneme))}
+              />
+            )
+         |> Array.of_list
+         |> React.array}
+      </div>;
+    };
+  };
+
+  module SavedWords = {
+    [@react.component]
+    let make = () => {
+      let (savedWords, setSavedWords) = React.useState(() => "");
+      React.useEffect1(
+        () => {
+          setSavedWords(_ =>
+            Dom.Storage.getItem(storageKey, Dom.Storage.localStorage)
+            ->Belt.Option.getWithDefault("fail")
+          );
+          None;
+        },
+        [||],
+      );
+      <div className="saved-words">
+        {str(savedWords)}
+        <button
+          className="transparent-button close-button"
+          onClick={_evt => dispatch(CloseSavedWordsClicked)}
+          title="Close"
+        />
+      </div>;
+    };
+  };
+
   module ViewPhonemes = {
     [@react.component]
     let make = (~phonemes: list(phoneme)) => {
@@ -93,28 +156,36 @@ let make = (~state, ~dispatch, ~onViewButtonClicked) => {
             {str("+")}
           </button>
         </div>
-        <div className="selection">
-          {Phoneme.phonemes
-           |> List.mapi((index, phoneme) =>
-                <Phoneme
-                  phoneme
-                  key={string_of_int(index)}
-                  onClick={() => dispatch(SelectionClicked(phoneme))}
-                />
-              )
-           |> Array.of_list
-           |> React.array}
-        </div>
+        {switch (state.drawer) {
+         | PhonemeSelection => <PhonemeSelection />
+         | SavedWords => <SavedWords />
+         }}
       </>;
     };
   };
 
+  let save = () => {
+    Dom.Storage.setItem(storageKey, "test 123", Dom.Storage.localStorage);
+  };
+
   <div className="edit">
     <ViewPhonemes phonemes={state.phonemes} />
-    <button
-      className="view-button"
-      onClick={_evt => onViewButtonClicked()}
-      title="Play"
-    />
+    <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>
   </div>;
 };

src/PhonicsApp.re

@@ -1,5 +1,3 @@
-open Phoneme;
-
 type state =
   | Edit(Edit.state)
   | View(View.state);
@@ -21,7 +19,12 @@ let toView = (state: state) => {
 
 let toEdit = (state: state) => {
   switch (state) {
-  | View(viewState) => Edit({activeIndex: 0, phonemes: viewState.phonemes})
+  | View(viewState) =>
+    Edit({
+      activeIndex: 0,
+      phonemes: viewState.phonemes,
+      drawer: Edit.PhonemeSelection,
+    })
   | Edit(_) => state
   };
 };

src/View.re

@@ -32,7 +32,7 @@ let make = (~dispatch, ~state, ~onEditButtonClicked) => {
   <div className="view">
     <ViewPhonemes phonemes={state.phonemes} />
     <button
-      className="edit-button"
+      className="transparent-button edit-button"
       onClick={_evt => onEditButtonClicked()}
       title="Edit"
     />

src/Word.re

@@ -0,0 +1,9 @@
+open Phoneme;
+
+type word = list(phoneme);
+
+let toString = (word: word): string => {
+  word
+  |> List.map((phoneme: phoneme) => {phoneme.sound})
+  |> List.fold_right((phoneme, acc) => {phoneme ++ acc}, _, "");
+};

src/style.scss

@@ -12,9 +12,13 @@ html {
     border-radius: 5px;
     // box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
   }
-  .view-button,
-  .edit-button {
-    // background: rgba(223, 223, 223, 0.5);
+
+  .transparent-button {
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    opacity: 0.5;
+    background-color: transparent;
     font-size: 16px;
     width: 50px;
     height: 50px;
@@ -71,7 +75,6 @@ html {
     width: 100%;
     grid-template-rows: 100vh;
     .edit-button {
-      background-color: transparent;
       position: absolute;
       top: 10px;
       right: 10px;
@@ -106,16 +109,25 @@ html {
         font-size: 40px;
       }
     }
-    .view-button {
-      background-color: transparent;
+    .action {
       position: absolute;
       top: 10px;
       right: 10px;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .close-button {
+      background-image: url("./icons/close-24px.svg");
+    }
+    .save-button {
+      background-image: url("./icons/save-24px.svg");
+    }
+    .load-button {
+      background-image: url("./icons/folder_open-24px.svg");
+    }
+    .view-button {
       background-image: url("./icons/play_circle_filled-24px.svg");
-      background-size: contain;
-      background-position: center;
-      background-repeat: no-repeat;
-      opacity: 0.5;
     }
   }
 
@@ -143,4 +155,14 @@ html {
       font-size: 150px;
     }
   }
+
+  .saved-words {
+    background-color: #bcbcbc;
+    position: relative;
+    .close-button {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+    }
+  }
 }