Add tiny utility to control forms with MobX

Author: kubk

.prettierrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  singleQuote: true,
+  printWidth: 100
+};

README.md

@@ -7,6 +7,7 @@ This project is a boilerplate for a quickstart development React applications. [
 - [MobX](https://github.com/mobxjs/mobx) - Simple, scalable state management
 - [mobx-log](https://github.com/kubk/mobx-log) - Logger for MobX, works only in dev mode
 - [React Router](https://github.com/ReactTraining/react-router) - The most popular routing library for React
+- A [tiny utility](src/store/mobx-form.ts) to control forms with MobX
 - Prettier
 
 The development process is exactly the same as you will do with Create React App.

package-lock.json

@@ -15,7 +15,7 @@
     "classnames": "^2.3.1",
     "gh-pages": "^3.2.3",
     "mobx": "^6.3.3",
-    "mobx-log": "^0.4.0",
+    "mobx-log": "^0.8.6",
     "mobx-react-lite": "^3.2.1",
     "mobx-utils": "^6.0.4",
     "nanoid": "^3.1.25",
@@ -34,7 +34,6 @@
     "typescript": "^4.4.2"
   },
   "scripts": {
-    "cs": "./node_modules/.bin/prettier src/**/*.{ts,tsx,js,jsx,scss} --write --single-quote --jsx-single-quote",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build",
     "start": "react-scripts start",

package.json

@@ -4,27 +4,19 @@ import { observer } from 'mobx-react-lite';
 
 type Props = {
   value: string | number;
-  onSelect: (userId: string | null) => void;
+  onChange: (value: { currentTarget: { value: string } }) => void;
   users: User[];
 };
 
-export const AssigneeSelector = observer(
-  ({ onSelect, users, value }: Props) => {
-    return (
-      <select
-        value={value}
-        onChange={(e) => {
-          const userId = e.target.value || null;
-          onSelect(userId);
-        }}
-      >
-        <option value=''>No assignee</option>
-        {users.map((user, i) => (
-          <option key={i} value={user.id}>
-            {user.name}
-          </option>
-        ))}
-      </select>
-    );
-  }
-);
+export const AssigneeSelector = observer(({ onChange, users, value }: Props) => {
+  return (
+    <select value={value} onChange={onChange}>
+      <option value="">No assignee</option>
+      {users.map((user, i) => (
+        <option key={i} value={user.id}>
+          {user.name}
+        </option>
+      ))}
+    </select>
+  );
+});

src/components/assignee-selector/assignee-selector.tsx

@@ -43,50 +43,54 @@ export const Tasks = observer(() => {
 
       {!taskStore.usersLoading && (
         <TransitionGroup className={styles.tasks}>
-          {taskStore.tasks.map((task, i) => (
-            <CSSTransition key={task.id} timeout={300} classNames={'item'}>
-              <div
-                key={i}
-                className={cn(styles.task, { [styles.done]: task.isDone })}
-              >
-                <span className={styles.taskInfo}>
-                  <CheckCircle
-                    onClick={() => taskStore.toggleDone(task.id)}
-                    className={styles.icon}
-                    fill={task.isDone ? 'var(--c-teal)' : 'var(--c-black)'}
-                  />
+          {taskStore.tasks.map((task, i) => {
+            const { form } = task;
+            return (
+              <CSSTransition key={task.id} timeout={300} classNames={'item'}>
+                <div
+                  key={i}
+                  className={cn(styles.task, {
+                    [styles.done]: form.isDone.checked,
+                  })}
+                >
+                  <span className={styles.taskInfo}>
+                    <CheckCircle
+                      onClick={form.isDone.toggle}
+                      className={styles.icon}
+                      fill={form.isDone.checked ? 'var(--c-teal)' : 'var(--c-black)'}
+                    />
 
-                  <input
-                    className={styles.input}
-                    value={task.title}
-                    ref={(input) => {
-                      if (i === 0) {
-                        rememberElement(input);
-                      }
-                    }}
-                    placeholder='Type in the title of the task!'
-                    readOnly={task.isDone}
-                    onChange={(e) => {
-                      taskStore.editTask(task.id, 'title', e.target.value);
-                    }}
-                  />
-                </span>
+                    <input
+                      className={styles.input}
+                      ref={(input) => {
+                        if (i === 0) {
+                          rememberElement(input);
+                        }
+                      }}
+                      placeholder="Type in the title of the task!"
+                      readOnly={form.isDone.checked}
+                      {...form.title.toInput}
+                    />
+                  </span>
 
-                <AssigneeSelector
-                  value={task.userId || ''}
-                  onSelect={(userId) => taskStore.assign(task.id, userId)}
-                  users={taskStore.users}
-                />
+                  <AssigneeSelector
+                    users={taskStore.users.map((user) => ({
+                      id: user.id,
+                      name: user.form.name.value,
+                    }))}
+                    {...form.userId.toInput}
+                  />
 
-                <img
-                  src={trash}
-                  alt={'remove task'}
-                  className={styles.trash}
-                  onClick={() => taskStore.removeTask(task.id)}
-                />
-              </div>
-            </CSSTransition>
-          ))}
+                  <img
+                    src={trash}
+                    alt={'remove task'}
+                    className={styles.trash}
+                    onClick={() => taskStore.removeTask(task.id)}
+                  />
+                </div>
+              </CSSTransition>
+            );
+          })}
         </TransitionGroup>
       )}
     </div>

src/components/tasks/tasks.tsx

@@ -42,7 +42,7 @@ export const Users = observer(() => {
         {!taskStore.usersLoading && (
           <TransitionGroup className={styles.users}>
             {taskStore.usersWithTasks.map((user, i) => (
-              <CSSTransition key={user.id} timeout={300} classNames='item'>
+              <CSSTransition key={user.id} timeout={300} classNames="item">
                 <div className={styles.user} key={i}>
                   <input
                     ref={(input) => {
@@ -51,16 +51,11 @@ export const Users = observer(() => {
                       }
                     }}
                     className={styles.input}
-                    value={user.name}
+                    {...user.form.name.toInput}
                     placeholder="Type in user's name!"
-                    onChange={(event) => {
-                      taskStore.editUser(user.id, 'name', event.target.value);
-                    }}
                   />
 
-                  <p className={styles.taskCompleted}>
-                    Completed {user.taskCompleted}
-                  </p>
+                  <p className={styles.taskCompleted}>Completed {user.taskCompleted}</p>
                   <p className={styles.taskCount}>Total {user.taskTotal}</p>
 
                   <img

src/components/users/users.tsx

@@ -16,7 +16,6 @@
   --shadow-depth-3: 0 6px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
 }
 
-
 body {
   margin: 0;
   padding: 0;

src/css/index.css

@@ -2,9 +2,9 @@ import React, { SVGAttributes } from 'react';
 
 export const CheckCircle = (props: SVGAttributes<SVGElement>) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M11.48,23.5h0a11.5,11.5,0,0,1,0-23h0a11.38,11.38,0,0,1,4.67,1,1,1,0,0,1-.85,1.91,9.31,9.31,0,0,0-3.82-.81h0a9.41,9.41,0,0,0,0,18.82h0A9.4,9.4,0,0,0,20.87,12V11A1,1,0,1,1,23,11v1A11.49,11.49,0,0,1,11.48,23.5Z' />
-      <path d='M11.48,15.14a1,1,0,0,1-.74-.31L7.61,11.7a1,1,0,0,1,1.48-1.48l2.39,2.4L22.22,1.86a1,1,0,0,1,1.48,1.48L12.22,14.84A1,1,0,0,1,11.48,15.14Z' />
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+      <path d="M11.48,23.5h0a11.5,11.5,0,0,1,0-23h0a11.38,11.38,0,0,1,4.67,1,1,1,0,0,1-.85,1.91,9.31,9.31,0,0,0-3.82-.81h0a9.41,9.41,0,0,0,0,18.82h0A9.4,9.4,0,0,0,20.87,12V11A1,1,0,1,1,23,11v1A11.49,11.49,0,0,1,11.48,23.5Z" />
+      <path d="M11.48,15.14a1,1,0,0,1-.74-.31L7.61,11.7a1,1,0,0,1,1.48-1.48l2.39,2.4L22.22,1.86a1,1,0,0,1,1.48,1.48L12.22,14.84A1,1,0,0,1,11.48,15.14Z" />
     </svg>
   );
 };

src/icons/check-circle.tsx

@@ -0,0 +1,41 @@
+import { makeAutoObservable } from 'mobx';
+
+export class TextInput {
+  constructor(public value = '') {
+    makeAutoObservable(this);
+  }
+
+  private onChange = (e: { currentTarget: { value: string } }) => {
+    this.value = e.currentTarget.value;
+  };
+
+  setValue = (value: string) => {
+    this.value = value;
+  };
+
+  get toInput() {
+    return { value: this.value, onChange: this.onChange };
+  }
+}
+
+export class CheckboxInput {
+  constructor(public checked: boolean) {
+    makeAutoObservable(this);
+  }
+
+  toggle = () => {
+    this.checked = !this.checked;
+  };
+
+  setValue = (value: boolean) => {
+    this.checked = value;
+  };
+
+  onChange = (event: { currentTarget: { checked: boolean } }) => {
+    this.checked = event.currentTarget.checked;
+  };
+
+  get toInput() {
+    return { checked: this.checked, onChange: this.onChange };
+  }
+}

src/store/mobx-form.ts

@@ -4,7 +4,7 @@ import { configureMakeLoggable } from 'mobx-log';
 
 configureMakeLoggable({
   storeConsoleAccess: true,
-})
+});
 
 export const stores = {
   taskStore: new TaskStore(new TaskApi()),

src/store/stores.ts

@@ -40,23 +40,23 @@ describe('TaskStore', () => {
 
     await when(() => !taskStore.usersLoading && !taskStore.tasksLoading);
 
-    expect(taskStore.usersWithTasks[0].name).toBe('John Doe');
+    expect(taskStore.usersWithTasks[0].form.name.value).toBe('John Doe');
     expect(taskStore.usersWithTasks[0].taskTotal).toBe(2);
     expect(taskStore.usersWithTasks[0].taskCompleted).toBe(1);
 
-    expect(taskStore.usersWithTasks[1].name).toBe('Jane Snow');
+    expect(taskStore.usersWithTasks[1].form.name.value).toBe('Jane Snow');
     expect(taskStore.usersWithTasks[1].taskTotal).toBe(1);
     expect(taskStore.usersWithTasks[1].taskCompleted).toBe(0);
 
-    taskStore.assign('1', '2');
+    taskStore.tasks.find((task) => task.id === '1')?.form.userId.setValue('2');
     // Completed task 1 removed from user 1
     expect(taskStore.usersWithTasks[0].taskTotal).toBe(1);
     expect(taskStore.usersWithTasks[0].taskCompleted).toBe(0);
     // Task 1 added to added to user 2 as completed
     expect(taskStore.usersWithTasks[1].taskTotal).toBe(2);
     expect(taskStore.usersWithTasks[1].taskCompleted).toBe(1);
 
-    taskStore.toggleDone('1');
+    taskStore.tasks.find((task) => task.id === '1')?.form.isDone.toggle();
     // User 2 now has no completed tasks
     expect(taskStore.usersWithTasks[1].taskCompleted).toBe(0);
   });