Prototype UI

This is a prototype UI (no testing, no proper architecture), just to
exercise the data model.

Author: JTimothyKing

src/WordStore.js

@@ -26,7 +26,7 @@ class WordStore {
             (a, b) =>
                 (a.word.length - b.word.length)
                 || (a.word.localeCompare(b.word))
-        );
+        ).map(W => ({...W}));
     }
 
     /**

src/Worksheet.css

@@ -7,7 +7,7 @@
   pointer-events: none;
 }
 
-.worksheet-header {
+.worksheet-content {
   background-color: navajowhite;
   min-height: 100vh;
   display: flex;
@@ -21,3 +21,18 @@
 .worksheet-link {
   color: #61dafb;
 }
+
+
+.wordlist {
+  display: table;
+}
+
+.word {
+  display: table-row;
+}
+
+.word span {
+  display: table-cell;
+  padding-left: 10px;
+  padding-right: 10px;
+}

src/Worksheet.js

@@ -1,17 +1,68 @@
-import React from 'react';
+import React, {useState} from 'react';
 import './Worksheet.css';
 
-function Worksheet() {
-  return (
-    <div className="worksheet">
-      <header className="worksheet-header">
-        <img src={process.env.PUBLIC_URL + '/android-chrome-512x512.png'} className="worksheet-logo" alt="" />
-        <p>
-          Coming soon!
-        </p>
-      </header>
-    </div>
-  );
+function WorkSheetEdit({submitWord}) {
+    return (
+        <form onSubmit={event => {
+            event.preventDefault();
+            let word = event.target.querySelector('input[name=word]').value;
+            let tag = event.target.querySelector('input[name=tag]').value;
+            submitWord(word, tag);
+        }}>
+            <input
+                type="text"
+                name = "word"
+                className="word-word"
+            />
+            <input
+                type="text"
+                name = "tag"
+                className="word-tag"
+            />
+            <input type="submit"/>
+        </form>
+    );
+}
+
+function WorksheetWords({children}) {
+    return (
+        <div className="wordlist">
+            {children.map((W, i) =>
+                <p className="word" key={i}>
+                    <span className="word-word">{W.word}</span>
+                    <span className="word-tag">{W.tag}</span>
+                </p>
+            )}
+        </div>
+    )
+}
+
+function Worksheet({model}) {
+    const [words, setWords] = useState(model.words);
+
+    return (
+        <div className="worksheet">
+            <header className="worksheet-header">
+                <WorkSheetEdit
+                    submitWord={(word, tag) => {
+                        if (word) {
+                            if (tag.toLowerCase() === 'x') {
+                                model.removeWords(word);
+                            } else if (tag !== '') {
+                                model.tagWord(word, tag); // also adds the word if needed
+                            } else {
+                                model.untagWord(word);
+                            }
+                            setWords(model.words);
+                        }
+                    }}
+                />
+            </header>
+            <div className="worksheet-content">
+                <WorksheetWords>{words}</WorksheetWords>
+            </div>
+        </div>
+    );
 }
 
 export default Worksheet;

src/Worksheet.test.js

@@ -2,8 +2,6 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import Worksheet from './Worksheet';
 
-test('renders learn react link', () => {
-  const { getByText } = render(<Worksheet />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+test('to do...', () => {
+  expect(1).toEqual(1);
 });

src/index.js

@@ -3,10 +3,11 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import Worksheet from './Worksheet';
 import * as serviceWorker from './serviceWorker';
+import WordStore from "./WordStore";
 
 ReactDOM.render(
   <React.StrictMode>
-    <Worksheet />
+    <Worksheet model={new WordStore()} />
   </React.StrictMode>,
   document.getElementById('root')
 );