refactor.

abadi199 · Feb 6, 2020 · f808aac · f808aac
1 parent 4d6c88a
commit f808aac
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 102 deletions.
diff --git a/src/Edit.re b/src/Edit.re
@@ -1,20 +1,20 @@
 open Phoneme;
 open Word;
 
-type drawer =
-  | PhonemeSelection
-  | SavedWords;
+type display =
+  | DisplayPhonemeSelection
+  | DisplaySavedWords;
 
 type state = {
-  phonemes: word,
+  word,
   activeIndex: int,
-  drawer,
+  display,
 };
 
 let initialState = {
-  phonemes: [Phoneme.a],
+  word: [Phoneme.a],
   activeIndex: 0,
-  drawer: PhonemeSelection,
+  display: DisplayPhonemeSelection,
 };
 
 let str = React.string;
@@ -40,16 +40,16 @@ let reducer = (state, action) => {
   switch (action) {
   | AddPhoneme => {
       ...state,
-      activeIndex: List.length(state.phonemes),
-      phonemes: state.phonemes @ [Phoneme.a],
+      activeIndex: List.length(state.word),
+      word: state.word @ [Phoneme.a],
     }
   | RemovePhoneme =>
-    if (List.length(state.phonemes) > 1) {
-      let newPhonemes = state.phonemes |> List.rev |> List.tl |> List.rev;
+    if (List.length(state.word) > 1) {
+      let newPhonemes = state.word |> List.rev |> List.tl |> List.rev;
       let length = List.length(newPhonemes);
       {
         ...state,
-        phonemes: newPhonemes,
+        word: newPhonemes,
         activeIndex:
           List.length(newPhonemes) > state.activeIndex
             ? state.activeIndex : length - 1,
@@ -59,20 +59,20 @@ let reducer = (state, action) => {
     }
   | PhonemeClicked(index, phoneme) => {
       ...state,
-      phonemes: selectPhoneme(index, phoneme, state.phonemes),
+      word: selectPhoneme(index, phoneme, state.word),
     }
   | SetActive(index) => {...state, activeIndex: index}
   | SelectionClicked(clickedPhoneme) => {
       ...state,
-      phonemes:
-        state.phonemes
+      word:
+        state.word
         |> List.mapi((index, phoneme) => {
              index == state.activeIndex ? clickedPhoneme : phoneme
            }),
     }
-  | LoadButtonClicked => {...state, drawer: SavedWords}
-  | CloseSavedWordsClicked => {...state, drawer: PhonemeSelection}
-  | LoadWord(word) => {...state, phonemes: word}
+  | LoadButtonClicked => {...state, display: DisplaySavedWords}
+  | CloseSavedWordsClicked => {...state, display: DisplayPhonemeSelection}
+  | LoadWord(word) => {...state, word}
   };
 };
 
@@ -105,56 +105,12 @@ let make = (~state, ~dispatch, ~onViewButtonClicked) => {
     };
   };
 
-  module SavedWords = {
+  module ViewWord = {
     [@react.component]
-    let make = () => {
-      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(_ => Storage.loadWords());
-          None;
-        },
-        [||],
-      );
-      <div className="saved-words">
-        {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)}
-          title="Close"
-        />
-      </div>;
-    };
-  };
-
-  module ViewPhonemes = {
-    [@react.component]
-    let make = (~phonemes: list(phoneme)) => {
+    let make = (~word: list(phoneme)) => {
       <>
-        <div className="phonemes">
-          {phonemes
+        <div className="word">
+          {word
            |> List.mapi((index, selectedPhoneme) =>
                 <SelectedPhoneme
                   selectedPhoneme
@@ -182,7 +138,7 @@ let make = (~state, ~dispatch, ~onViewButtonClicked) => {
 
   module ActionSection = {
     let saveWord = () => {
-      Storage.saveWord(state.phonemes);
+      Storage.saveWord(state.word);
     };
 
     [@react.component]
@@ -206,12 +162,20 @@ let make = (~state, ~dispatch, ~onViewButtonClicked) => {
       </div>;
     };
   };
+  let loadWord = (word: word) => {
+    dispatch(LoadWord(word));
+    dispatch(CloseSavedWordsClicked);
+  };
 
   <div className="edit">
-    {switch (state.drawer) {
-     | PhonemeSelection =>
-       <> <ViewPhonemes phonemes={state.phonemes} /> <ActionSection /> </>
-     | SavedWords => <SavedWords />
+    {switch (state.display) {
+     | DisplayPhonemeSelection =>
+       <> <ViewWord word={state.word} /> <ActionSection /> </>
+     | DisplaySavedWords =>
+       <SavedWords
+         onWordClicked=loadWord
+         onCloseClicked={() => dispatch(CloseSavedWordsClicked)}
+       />
      }}
   </div>;
 };
diff --git a/src/PhonicsApp.re b/src/PhonicsApp.re
@@ -12,7 +12,7 @@ let str = React.string;
 
 let toView = (state: state) => {
   switch (state) {
-  | Edit(editState) => View({phonemes: editState.phonemes})
+  | Edit(editState) => View({word: editState.word})
   | View(_) => state
   };
 };
@@ -22,8 +22,8 @@ let toEdit = (state: state) => {
   | View(viewState) =>
     Edit({
       activeIndex: 0,
-      phonemes: viewState.phonemes,
-      drawer: Edit.PhonemeSelection,
+      word: viewState.word,
+      display: Edit.DisplayPhonemeSelection,
     })
   | Edit(_) => state
   };

diff --git a/src/SavedWords.re b/src/SavedWords.re
@@ -0,0 +1,36 @@
+[@react.component]
+let make = (~onWordClicked, ~onCloseClicked) => {
+  let (savedWords, setSavedWords) = React.useState(() => []);
+
+  let deleteWord = (word: Word.word) => {
+    let words = Storage.deleteWord(word);
+    Js.log(Storage.toString(words));
+    setSavedWords(_ => words);
+  };
+
+  React.useEffect1(
+    () => {
+      setSavedWords(_ => Storage.loadWords());
+      None;
+    },
+    [||],
+  );
+  <div className="saved-words">
+    {savedWords
+     |> List.map(word =>
+          <Word
+            word
+            key={Word.toString(word)}
+            onDeleteClicked={() => deleteWord(word)}
+            onClick={() => onWordClicked(word)}
+          />
+        )
+     |> Array.of_list
+     |> React.array}
+    <button
+      className="transparent-button close-button"
+      onClick={_evt => onCloseClicked()}
+      title="Close"
+    />
+  </div>;
+};
diff --git a/src/View.re b/src/View.re
@@ -1,6 +1,6 @@
-open Phoneme;
+open Word;
 
-type state = {phonemes: list(phoneme)};
+type state = {word};
 
 let str = React.string;
 
@@ -15,11 +15,11 @@ let reducer = (state, action) => {
 
 [@react.component]
 let make = (~dispatch, ~state, ~onEditButtonClicked) => {
-  module ViewPhonemes = {
+  module ViewWord = {
     [@react.component]
-    let make = (~phonemes) => {
-      <div className="phonemes">
-        {phonemes
+    let make = (~word) => {
+      <div className="word">
+        {word
          |> List.mapi((index, phoneme) =>
               <Phoneme phoneme key={string_of_int(index)} />
             )
@@ -30,7 +30,7 @@ let make = (~dispatch, ~state, ~onEditButtonClicked) => {
   };
 
   <div className="view">
-    <ViewPhonemes phonemes={state.phonemes} />
+    <ViewWord word={state.word} />
     <button
       className="transparent-button edit-button"
       onClick={_evt => onEditButtonClicked()}

diff --git a/src/style.scss b/src/style.scss
@@ -35,7 +35,7 @@ html {
     height: 50px;
   }
 
-  .phonemes {
+  .word {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -164,26 +164,6 @@ html {
     }
   }
 
-  .word {
-    display: flex;
-    flex-direction: row;
-    .phoneme {
-      margin-right: 5px;
-    }
-    margin: 0 10px 20px;
-    border-radius: 10px;
-    padding: 10px;
-    background-color: #fff;
-    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-    .delete-word-button {
-      height: 30px;
-      width: 30px;
-      background-image: url("./icons/close-24px.svg");
-      padding: 0px;
-      margin-left: 5px;
-    }
-  }
-
   .saved-words {
     padding: 50px;
     height: 100vh;
@@ -195,6 +175,26 @@ html {
     align-content: flex-start;
     overflow: auto;
 
+    .word {
+      display: flex;
+      flex-direction: row;
+      .phoneme {
+        margin-right: 5px;
+      }
+      margin: 0 10px 20px;
+      border-radius: 10px;
+      padding: 10px;
+      background-color: #fff;
+      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+      .delete-word-button {
+        height: 30px;
+        width: 30px;
+        background-image: url("./icons/close-24px.svg");
+        padding: 0px;
+        margin-left: 5px;
+      }
+    }
+
     .close-button {
       position: fixed;
       top: 5px;