Wire up rhythm and rhythm-edit with frequency handling

Author: chadian

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "next/babel"
+  ]
+}

.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "env": {
+    "jest": true
+  }
+}

components/rhythm-edit.js

@@ -1,14 +1,47 @@
 import { useState } from "react";
 import styles from "../styles/RhythmEdit.module.css";
+import { denominatorTerm } from "../utils/denominator-term";
+import { numeratorTerm } from '../utils/numerator-term';
 
-export default function RhythmEdit({ rhythm, onClose, onUpdate }) {
+const generateNumeratorSelect = (selected, onChange) => {
+  const options = [1, 2, 3, 4, 5, 6, 7].map((number) => {
+    return <option key={number} value={number}>{ numeratorTerm(number) }</option>;
+  });
+
+  return <select onChange={onChange} aria-label="Rhythm action count" value={selected}>{
+    options
+  }</select>;
+};
+
+const generateDenominatorSelect = (selected, onChange) => {
+  const options = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14].map((number) => {
+    return <option key={number} value={number}>{ denominatorTerm(number) }</option>;
+  });
+
+  return <select onChange={onChange} aria-label="Rhythm action count time span" value={selected}>
+    { options }
+  </select>;
+};
+
+export default function RhythmEdit({ rhythm, onClose, onSubmit }) {
   const [rhythmAction, setRhythmAction] = useState(rhythm.action);
   const [rhythmFrequency, setRhythmFrequency] = useState(rhythm.frequency);
+  const [rhythmNumerator, rhythmDenominator] = rhythmFrequency;
   const [rhythmReason, setRhythmReason] = useState(rhythm.reason);
 
+  const submitHandler = (e) => {
+    e.preventDefault();
+
+    onSubmit({
+      action: rhythmAction,
+      reason: rhythmReason,
+      frequency: rhythmFrequency,
+    });
+  };
+
   return (
-    <div className={styles["rhythm-edit"]}>
-      <button onClick={() => onClose()} className={styles.close}>
+    <form className={styles["rhythm-edit"]} onSubmit={submitHandler}>
+      <button type="button" onClick={() => onClose()} className={styles.close}>
         Close
       </button>
       <div className={styles.action}>
@@ -21,25 +54,13 @@ export default function RhythmEdit({ rhythm, onClose, onUpdate }) {
         />
       </div>
       <div className={styles.frequency}>
-        <select aria-label="Rhythm action count">
-          <option>once</option>
-          <option>twice</option>
-          <option>thrice</option>
-          <option>four times</option>
-          <option>five times</option>
-          <option>six times</option>
-          <option>seven times</option>
-        </select>
+        {generateNumeratorSelect(rhythmNumerator, (e) =>
+          setRhythmFrequency([Number(e.target.value), rhythmDenominator])
+        )}
         <span className={styles.every}>every</span>
-        <select aria-label="Rhythm action count time span">
-          <option>day</option>
-          <option>two days</option>
-          <option>three days</option>
-          <option>four days</option>
-          <option>five days</option>
-          <option>six days</option>
-          <option>seven days</option>
-        </select>
+        {generateDenominatorSelect(rhythmDenominator, (e) =>
+          setRhythmFrequency([rhythmNumerator, Number(e.target.value)])
+        )}
       </div>
       <div className="styles.reason">
         <div className={styles.action}>
@@ -52,7 +73,7 @@ export default function RhythmEdit({ rhythm, onClose, onUpdate }) {
           />
         </div>
       </div>
-      <button onClick={() => onUpdate({ action: rhythmAction, reason: rhythmReason, frequency: rhythm.frequency })}>Update Rhythm</button>
-    </div>
+      <button type="submit">Update Rhythm</button>
+    </form>
   );
 }

components/rhythm-edit.test.js

@@ -0,0 +1,65 @@
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom/extend-expect";
+import RhythmEdit from './rhythm-edit';
+
+describe('with an existing rhythm object', () => {
+  let rendered;
+  let rhythm;
+  let actionInput;
+  let numeratorSelect;
+  let denominatorSelect;
+  let reasonInput;
+  let submit;
+  let onSubmitCallback;
+
+  beforeEach(() => {
+    rhythm = {
+      action: "I want to run",
+      frequency: [2, 3],
+      reason: "I want to train for a marathon",
+    };
+
+    onSubmitCallback = jest.fn();
+
+    rendered = render(
+      <RhythmEdit rhythm={rhythm} onSubmit={onSubmitCallback}/>
+    );
+
+    actionInput = rendered.getByDisplayValue("I want to run");
+    numeratorSelect = rendered.getByLabelText("Rhythm action count");
+    denominatorSelect = rendered.getByLabelText(
+      "Rhythm action count time span"
+    );
+    reasonInput = rendered.getByDisplayValue("I want to train for a marathon");
+    submit = rendered.getByRole("button", { name: "Update Rhythm" });
+  });
+
+  test("it renders the rhythm's editable properties", () => {
+    expect(actionInput).toBeTruthy();
+    expect(reasonInput).toBeTruthy();
+    expect(numeratorSelect).toBeTruthy();
+    expect(denominatorSelect).toBeTruthy();
+  });
+
+  test('it can submit changes', async () => {
+    userEvent.clear(actionInput);
+    userEvent.type(actionInput, "I want to swim");
+
+    userEvent.selectOptions(numeratorSelect, "four times");
+    userEvent.selectOptions(denominatorSelect, "five days");
+
+    userEvent.clear(reasonInput);
+    userEvent.type(reasonInput, "I want to do a triathlon");
+
+    userEvent.click(submit);
+
+    expect(onSubmitCallback).toHaveBeenCalledTimes(1);
+    expect(onSubmitCallback).toHaveBeenCalledWith({
+      action: "I want to swim",
+      frequency: [4, 5],
+      reason: 'I want to do a triathlon'
+    });
+  });
+});
+

components/rhythm/rhythm.js

@@ -1,18 +1,21 @@
 import { useState } from 'react';
 import styles from '../../styles/Rhythm.module.css';
 import Occurrence from './occurrence';
+import { numeratorTerm } from '../../utils/numerator-term';
+import { denominatorTerm } from '../../utils/denominator-term';
 
 function Rhythm({ rhythm, onEdit }) {
   const [opportunityTaken, setOpportunity] = useState(false);
   const toggleOpportunityTaken = () => setOpportunity(!opportunityTaken);
   const opportunityStatus = opportunityTaken ? 'opportunity-taken' : 'opportunity';
+  const [frequencyNumerator, frequencyDenominator] = rhythm.frequency;
 
   return (
     <div className={styles.rhythm}>
       <button onClick={() => onEdit(rhythm)}>Edit</button>
       <div className={styles.action}>{rhythm.action}</div>
-      <div className={styles.frequency}>{rhythm.frequency}</div>
-      <div className={styles.reason}>{rhythm.reason}</div>
+      <div className={styles.frequency}>{numeratorTerm(frequencyNumerator)} every {denominatorTerm(frequencyDenominator)}</div>
+      <div className={styles.reason}>because {rhythm.reason}</div>
       <div className={styles.occurrences}>
         <Occurrence status="miss" />
         <Occurrence status="miss" />

jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  transform: {
+    '^.+\\.js$': 'babel-jest',
+    '.+\\.(css|styl|less|sass|scss)$': 'jest-transform-css',
+  },
+};

package.json

@@ -5,11 +5,20 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "test": "jest"
   },
   "dependencies": {
+    "@testing-library/jest-dom": "^5.11.8",
+    "@testing-library/react": "^11.2.2",
+    "babel-jest": "^26.6.3",
+    "jest": "^26.6.3",
+    "jest-transform-css": "^2.1.0",
     "next": "10.0.3",
     "react": "17.0.1",
     "react-dom": "17.0.1"
+  },
+  "devDependencies": {
+    "@testing-library/user-event": "^12.6.0"
   }
 }

pages/index.js

@@ -11,8 +11,8 @@ export default function Home() {
   const [rhythmToEdit, setRhythmToEdit] = useState();
   const [rhythm, setRhythm] = useState({
     action: "Drink water every 8 hours",
-    frequency: "once every day",
-    reason: "because my body needs it",
+    frequency: [1, 1],
+    reason: "my body needs it",
   });
 
   return (
@@ -27,7 +27,7 @@ export default function Home() {
           <RhythmEdit
             rhythm={rhythmToEdit}
             onClose={() => setModal(false)}
-            onUpdate={(rhythm) => {
+            onSubmit={(rhythm) => {
               setModal(false);
               setRhythmToEdit(null);
               setRhythm(rhythm);

utils/denominator-term.js

@@ -0,0 +1,34 @@
+export function denominatorTerm(number) {
+  switch (number) {
+    case 1:
+      return "day ";
+    case 2:
+      return "two days";
+    case 3:
+      return "three days";
+    case 4:
+      return "four days";
+    case 5:
+      return "five days";
+    case 6:
+      return "six days";
+    case 7:
+      return "week";
+    case 8:
+      return "eight days";
+    case 9:
+      return "nine days";
+    case 10:
+      return "ten days";
+    case 11:
+      return "eleven days";
+    case 12:
+      return "twelve days";
+    case 13:
+      return "thirteen days";
+    case 14:
+      return "two weeks";
+  }
+
+  throw new Error(`${number} is outside the range for a numerator term`);
+}

utils/numerator-term.js

@@ -0,0 +1,20 @@
+export function numeratorTerm(number) {
+  switch (number) {
+    case 1:
+      return 'once'
+    case 2:
+      return 'twice'
+    case 3:
+      return 'thrice'
+    case 4:
+      return 'four times'
+    case 5:
+      return 'five times'
+    case 6:
+      return 'six times'
+    case 7:
+      return 'seven times'
+  }
+
+  throw new Error(`${number} is outside the range for a numerator term`);
+}