First commit

Author: pksilen

.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": ["@babel/preset-react", "@babel/preset-typescript", [
+    "@babel/preset-env", {
+      "targets": {
+        "node": "current"
+      }
+    }
+  ]],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
+}

.gitignore

@@ -0,0 +1,4 @@
+dist
+.DS_Store
+node_modules
+.idea

README.md

@@ -0,0 +1,3 @@
+# Universal Model Vue Todo App
+
+

index.html

@@ -0,0 +1,2 @@
+<div id="app"></div>
+<script src="/dist/build.js"></script>

package-lock.json

@@ -0,0 +1,46 @@
+{
+  "name": "universal-model-react-todo-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server",
+    "eslint": "eslint --ext .js,.vue src",
+    "build": "webpack"
+  },
+  "dependencies": {
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "universal-model-react": "^0.5.1",
+    "vue": "^3.0.0-alpha.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-react": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@types/react": "^16.9.17",
+    "@types/react-dom": "^16.9.4",
+    "@typescript-eslint/eslint-plugin": "^2.15.0",
+    "@typescript-eslint/parser": "^2.15.0",
+    "babel-loader": "^8.0.6",
+    "eslint": "^6.8.0",
+    "prettier": "^1.19.1",
+    "typescript": "^3.7.4",
+    "webpack": "^4.41.4",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.10.1"
+  },
+  "browserslist": [
+    "last 2 version",
+    "> 0.2%",
+    "Firefox ESR",
+    "not dead"
+  ],
+  "prettier": {
+    "arrowParens": "always",
+    "printWidth": 110,
+    "tabWidth": 2,
+    "singleQuote": true
+  }
+}

package.json

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import HeaderView from './header/HeaderView';
+import TodoListView from './todolist/TodoListView';
+
+const App = () => (
+  <div>
+    <HeaderView />
+    <TodoListView />
+  </div>
+);
+
+export default App;

src/App.tsx

@@ -0,0 +1,3 @@
+export default class Constants {
+    static FAKE_SERVICE_LATENCY_IN_MILLIS = 1000;
+}

src/Constants.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import store from '../store/store';
+import changeUserName from './model/actions/changeUserName';
+
+const HeaderView = () => {
+  const { headerState } = store.getState();
+  store.useState([headerState]);
+
+  return (
+    <div>
+      <h1>{headerState.userName}</h1>
+      <label>User name:</label>
+      <input onChange={({ target: { value } }) => changeUserName(value)} />
+    </div>
+  );
+};
+
+export default HeaderView;

src/header/HeaderView.tsx

@@ -0,0 +1,6 @@
+import store from '../../../store/store';
+
+export default function changeUserName(newUserName: string): void {
+  const { headerState } = store.getState();
+  headerState.userName = newUserName;
+}

src/header/model/actions/changeUserName.ts

@@ -0,0 +1,3 @@
+export default {
+  userName: 'John'
+};

src/header/model/state/initialHeaderState.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { render } from 'react-dom';
+import App from './App';
+
+const rootElement = document.getElementById('app');
+
+if (rootElement) {
+  render(<App />, rootElement);
+}

src/main.tsx

@@ -0,0 +1,17 @@
+import { createStore } from 'universal-model-react';
+import initialHeaderState from '../header/model/state/initialHeaderState';
+import initialTodoListState from '../todolist/model/state/initialTodoListState';
+import createTodoListStateSelectors from '../todolist/model/state/createTodoListStateSelectors';
+
+const initialState = {
+  headerState: initialHeaderState,
+  todosState: initialTodoListState
+};
+
+export type State = typeof initialState;
+
+const selectors = {
+  ...createTodoListStateSelectors<State>()
+};
+
+export default createStore(initialState, selectors);

src/store/store.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { useEffect, useMemo } from 'react';
+import store from '../store/store';
+import { Todo } from './model/state/initialTodoListState';
+import removeTodo from './model/actions/removeTodo';
+import toggleShouldShowOnlyDoneTodos from './model/actions/toggleShouldShowOnlyDoneTodos';
+import fetchTodos from './model/actions/fetchTodos';
+import todoListController from './controller/todoListController';
+import toggleIsDoneTodo from './model/actions/toggleIsDoneTodo';
+
+const TodoListView = () => {
+  const { todosState } = store.getState();
+  store.useState([todosState]);
+  const { shownTodos } = store.getSelectors();
+  store.useSelectors([shownTodos]);
+
+  useEffect(() => {
+    // noinspection JSIgnoredPromiseFromCall
+    fetchTodos();
+    document.addEventListener('keypress', todoListController.handleKeyPress);
+    return () => document.removeEventListener('keypress', todoListController.handleKeyPress);
+  }, []);
+
+  const todoItems = useMemo(
+    () =>
+      shownTodos.value.map((todo: Todo, index: number) => (
+        <li key={index}>
+          <input
+            id={todo.name}
+            type="checkbox"
+            defaultChecked={todo.isDone}
+            onChange={() => toggleIsDoneTodo(todo)}
+          />
+          <label>{todo.name}</label>
+          <button onClick={() => removeTodo(todo)}>Remove</button>
+        </li>
+      )),
+    [shownTodos.value]
+  );
+
+  return (
+    <div>
+      <input
+        id="shouldShowOnlyDoneTodos"
+        type="checkbox"
+        defaultChecked={todosState.shouldShowOnlyDoneTodos}
+        onChange={toggleShouldShowOnlyDoneTodos}
+      />
+      <label>Show only done todos</label>
+      <ul>{todoItems}</ul>
+    </div>
+  );
+};
+
+export default TodoListView;

src/todolist/TodoListView.tsx

@@ -0,0 +1,12 @@
+import addTodo from '../model/actions/addTodo';
+import removeAllTodos from '../model/actions/removeAllTodos';
+
+export default {
+  handleKeyPress(keyboardEvent: KeyboardEvent): void {
+    if (keyboardEvent.code === 'KeyA') {
+      addTodo();
+    } else if (keyboardEvent.code === 'KeyR') {
+      removeAllTodos();
+    }
+  }
+};

src/todolist/controller/todoListController.ts

@@ -0,0 +1,6 @@
+import store from '../../../store/store';
+
+export default function addTodo(): void {
+  const { todosState } = store.getState();
+  todosState.todos.push({ name: 'new todo', isDone: false });
+}

src/todolist/model/actions/addTodo.ts

@@ -0,0 +1,10 @@
+import store from '../../../store/store';
+import todoService from '../services/todoService';
+
+export default async function fetchTodos(): Promise<void> {
+  const { todosState } = store.getState();
+
+  todosState.isFetchingTodos = false;
+  todosState.todos = await todoService.fetchTodos();
+  todosState.isFetchingTodos = true;
+}

src/todolist/model/actions/fetchTodos.ts

@@ -0,0 +1,6 @@
+import store from '../../../store/store';
+
+export default function removeAllTodos(): void {
+  const { todosState } = store.getState();
+  todosState.todos = [];
+}

src/todolist/model/actions/removeAllTodos.ts

@@ -0,0 +1,7 @@
+import { Todo } from '../state/initialTodoListState';
+import store from '../../../store/store';
+
+export default function removeTodo(todoToRemove: Todo): void {
+  const { todosState } = store.getState();
+  todosState.todos = todosState.todos.filter((todo: Todo) => todo !== todoToRemove);
+}

src/todolist/model/actions/removeTodo.ts

@@ -0,0 +1,5 @@
+import { Todo } from '../state/initialTodoListState';
+
+export default function toggleIsDoneTodo(todo: Todo): void {
+  todo.isDone = !todo.isDone;
+}

src/todolist/model/actions/toggleIsDoneTodo.ts

@@ -0,0 +1,6 @@
+import store from '../../../store/store';
+
+export default function toggleShouldShowOnlyDoneTodos(): void {
+  const { todosState } = store.getState();
+  todosState.shouldShowOnlyDoneTodos = !todosState.shouldShowOnlyDoneTodos;
+}

src/todolist/model/actions/toggleShouldShowOnlyDoneTodos.ts

@@ -0,0 +1,18 @@
+import { ITodoService } from './ITodoService';
+import { Todo } from '../state/initialTodoListState';
+import Constants from '../../../Constants';
+
+export default class FakeTodoService implements ITodoService {
+  fetchTodos(): Promise<Todo[]> {
+    return new Promise<Todo[]>((resolve: (todo: Todo[]) => void) => {
+      setTimeout(
+        () =>
+          resolve([
+            { name: 'first todo', isDone: true },
+            { name: 'second todo', isDone: false }
+          ]),
+        Constants.FAKE_SERVICE_LATENCY_IN_MILLIS
+      );
+    });
+  }
+}

src/todolist/model/services/FakeTodoService.ts

@@ -0,0 +1,5 @@
+import { Todo } from '../state/initialTodoListState';
+
+export interface ITodoService {
+  fetchTodos(): Promise<Todo[]>;
+}

src/todolist/model/services/ITodoService.ts

@@ -0,0 +1,3 @@
+import FakeTodoService from './FakeTodoService';
+
+export default new FakeTodoService();

src/todolist/model/services/todoService.ts

@@ -0,0 +1,12 @@
+import { State } from '../../../store/store';
+import { Todo } from './initialTodoListState';
+
+const createTodoListStateSelectors = <T extends State>() => ({
+  shownTodos: (state: T) =>
+    state.todosState.todos.filter(
+      (todo: Todo) =>
+        (state.todosState.shouldShowOnlyDoneTodos && todo.isDone) || !state.todosState.shouldShowOnlyDoneTodos
+    )
+});
+
+export default createTodoListStateSelectors;

src/todolist/model/state/createTodoListStateSelectors.ts

@@ -0,0 +1,10 @@
+export interface Todo {
+  name: string;
+  isDone: boolean;
+}
+
+export default {
+  todos: [] as Todo[],
+  shouldShowOnlyDoneTodos: false,
+  isFetchingTodos: false
+};

src/todolist/model/state/initialTodoListState.ts

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "moduleResolution": "node",
+    "allowJs": true,
+    "noEmit": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "jsx": "react"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}

tsconfig.json

@@ -0,0 +1,27 @@
+const path = require("path");
+
+module.exports = (env = {}) => ({
+  entry: path.resolve(__dirname, "./src/main.tsx"),
+  output: {
+    path: path.resolve(__dirname, "./dist"),
+    publicPath: "/dist/",
+    filename: "build.js"
+  },
+  resolve: {
+    extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js', 'jsx']
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: "babel-loader"
+      }
+    ]
+  },
+  devServer: {
+    inline: true,
+    hot: true,
+    stats: "minimal",
+    contentBase: __dirname
+  }
+});