Add load saved word on play screen.

abadi199 · Feb 6, 2020 · 549b6d8 · 549b6d8
1 parent f808aac
commit 549b6d8
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 26 deletions.
diff --git a/index.html b/index.html
@@ -16,4 +16,16 @@ <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>
diff --git a/src/PhonicsApp.re b/src/PhonicsApp.re
@@ -12,7 +12,8 @@ let str = React.string;
 
 let toView = (state: state) => {
   switch (state) {
-  | Edit(editState) => View({word: editState.word})
+  | Edit(editState) =>
+    View({word: editState.word, display: View.DisplayPlay})
   | View(_) => state
   };
 };

diff --git a/src/View.re b/src/View.re
@@ -1,15 +1,26 @@
 open Word;
 
-type state = {word};
+type display =
+  | DisplayPlay
+  | DisplaySavedWords;
+
+type state = {
+  word,
+  display,
+};
 
 let str = React.string;
 
 type action =
-  | NoOp;
+  | LoadWord(word)
+  | LoadButtonClicked
+  | CloseSavedWordsClicked;
 
 let reducer = (state, action) => {
   switch (action) {
-  | NoOp => state
+  | LoadWord(word) => {word, display: DisplayPlay}
+  | LoadButtonClicked => {...state, display: DisplaySavedWords}
+  | CloseSavedWordsClicked => {...state, display: DisplayPlay}
   };
 };
 
@@ -29,12 +40,34 @@ let make = (~dispatch, ~state, ~onEditButtonClicked) => {
     };
   };
 
-  <div className="view">
-    <ViewWord word={state.word} />
-    <button
-      className="transparent-button edit-button"
-      onClick={_evt => onEditButtonClicked()}
-      title="Edit"
+  module ActionSection = {
+    [@react.component]
+    let make = () => {
+      <div className="action">
+        <button
+          className="transparent-button load-button"
+          onClick={_evt => dispatch(LoadButtonClicked)}
+          title="Load"
+        />
+        <button
+          className="transparent-button edit-button"
+          onClick={_evt => onEditButtonClicked()}
+          title="Edit"
+        />
+      </div>;
+    };
+  };
+
+  switch (state.display) {
+  | DisplayPlay =>
+    <div className="play">
+      <ViewWord word={state.word} />
+      <ActionSection />
+    </div>
+  | DisplaySavedWords =>
+    <SavedWords
+      onWordClicked={(word: word) => dispatch(LoadWord(word))}
+      onCloseClicked={() => dispatch(CloseSavedWordsClicked)}
     />
-  </div>;
+  };
 };
diff --git a/src/style.scss b/src/style.scss
@@ -77,15 +77,17 @@ html {
     }
   }
 
-  .view {
+  .play {
     display: grid;
     height: 100%;
     width: 100%;
     grid-template-rows: 100vh;
-    .edit-button {
+    .action {
       position: absolute;
       top: 10px;
       right: 10px;
+    }
+    .edit-button {
       background-image: url("./icons/settings-24px.svg");
       background-size: contain;
       background-position: center;
@@ -124,19 +126,19 @@ html {
       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");
-    }
+  .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");
   }
 
   .selected {
@@ -153,7 +155,7 @@ html {
     }
   }
 
-  .view {
+  .play {
     .phoneme {
       border-radius: 20px;
       border-top-width: 40px;
@@ -178,6 +180,7 @@ html {
     .word {
       display: flex;
       flex-direction: row;
+      align-items: flex-start;
       .phoneme {
         margin-right: 5px;
       }