Add todo sample application (#1)

* feat: add material-table

* feat: ignore .idea directory

* refactor: refactor structure

* refactor: deleted because of automatic generation.

* feat: add todo sample application

* docs: add createSlice and createAsyncThunk and createEntityAdapter.

Co-authored-by: username <[email protected]>

Author: treetips

.gitignore

@@ -35,6 +35,8 @@ node_modules
 # Optional REPL history
 .node_repl_history
 
+# Intellij IDEA
+.idea
 
 ## Application
 .next

README.md

@@ -2,10 +2,14 @@
 
 This is a sample for `server-side rendering` using `TypeScript` , `Next.js` , `Redux Toolkit` , and `Material-UI` .
 
+I also used the latest features such as `createSlice` , `createAsyncThunk` , and `createEntityAdapter` .
+
 `VSCode` , `prettier` and `TSLint` provide real-time formatting, syntax checking and organizing of unused imports.
 
 これは、 `TypeScript` , `Next.js` , `Redux Toolkit` , `Material-UI` を使った `サーバーサイドレンダリング` に対応したサンプルです。
 
+`createSlice` ・ `createAsyncThunk` ・ `createEntityAdapter` といった最新機能も使ってみました。
+
 `VSCode` と `prettier` と `TSLint` によって、リアルタイムに整形と構文チェックと未使用 import の整理が行われます。
 
 ## Live demo
@@ -18,8 +22,14 @@ This is a sample for `server-side rendering` using `TypeScript` , `Next.js` , `R
 - [Typescript](https://www.typescriptlang.org/)
 - [Next.js](https://nextjs.org/)
 - [Material-UI](https://material-ui.com/)
+- [material-table](https://material-table.com/#/)
 - [Redux](https://redux.js.org/)
 - [Redux Toolkit](https://redux-toolkit.js.org/)
+    - [createSlice](https://redux-toolkit.js.org/api/createSlice)
+    - [createAsyncThunk](https://redux-toolkit.js.org/api/createAsyncThunk)
+    - [createEntityAdapter](https://redux-toolkit.js.org/api/createEntityAdapter)
+    - [createSelector](https://redux-toolkit.js.org/api/createSelector)
+    - It using most of the major features of the redux toolkit !!
 - [TSLint](https://palantir.github.io/tslint/)
 
 ## Requirement

components/molecules/TodoList.tsx

@@ -0,0 +1,80 @@
+import MaterialTable from "material-table"
+import React, { useEffect } from "react"
+import { useTodo } from "../../hooks"
+
+type Props = {}
+
+/**
+ * TODO list
+ * @param props Props
+ */
+export const TodoList = function (props: Props) {
+  const {} = props
+  const {
+    isFetching,
+    fetchAllTodos,
+    addTodo,
+    editTodo,
+    deleteTodo,
+    todos,
+  } = useTodo()
+
+  useEffect(() => {
+    fetchAllTodos()
+  }, [])
+
+  return (
+    <MaterialTable
+      title="TODO List"
+      columns={[
+        { title: "id", field: "id", type: "numeric", editable: "never" },
+        { title: "name", field: "name" },
+        { title: "complete", field: "complete", type: "boolean" },
+        {
+          title: "create time",
+          field: "createdAt",
+          type: "datetime",
+          editable: "never",
+        },
+        {
+          title: "update time",
+          field: "updatedAt",
+          type: "datetime",
+          editable: "never",
+        },
+      ]}
+      options={{
+        actionsColumnIndex: 99,
+        search: true,
+      }}
+      data={todos}
+      isLoading={isFetching}
+      editable={{
+        onRowAdd: (newData) =>
+          new Promise((resolve, reject) => {
+            addTodo({
+              todo: newData,
+            })
+              .then(() => resolve(todos))
+              .catch((e) => reject(e))
+          }),
+        onRowUpdate: (newData, _) =>
+          new Promise((resolve, reject) => {
+            editTodo({
+              todo: newData,
+            })
+              .then((payload) => resolve(payload))
+              .catch((e) => reject(e))
+          }),
+        onRowDelete: (oldData) =>
+          new Promise((resolve, reject) => {
+            deleteTodo({
+              id: oldData.id,
+            })
+              .then(() => resolve(todos))
+              .catch((e) => reject(e))
+          }),
+      }}
+    />
+  )
+}

components/molecules/index.ts

@@ -1,2 +1,3 @@
 export * from "./NextListItem"
 export * from "./PageHeader"
+export * from "./TodoList"

constants/Page.ts

@@ -1,5 +1,5 @@
 import { Color } from "@material-ui/core"
-import { blue, pink, red } from "@material-ui/core/colors"
+import { blue, pink, red, yellow } from "@material-ui/core/colors"
 import { SvgIconProps } from "@material-ui/core/SvgIcon"
 import { Home, Info, Save } from "@material-ui/icons"
 import { IEnum } from "."
@@ -34,6 +34,16 @@ export class Page implements IEnum<Page> {
     Save,
     blue
   )
+  public static readonly TODO = new Page(
+    3,
+    "TODO",
+    "TODO sample",
+    "TODO sample | sample",
+    "The TODO sample application using createAsyncThunk and createEntityAdapter.",
+    "/todo",
+    Save,
+    yellow
+  )
   public static readonly ERROR = new Page(
     99,
     "Error",

hooks/index.ts

@@ -1,2 +1,3 @@
 export * from "./useCounter"
 export * from "./usePage"
+export * from "./useTodo"

hooks/useTodo.ts

@@ -0,0 +1,83 @@
+import { unwrapResult } from "@reduxjs/toolkit"
+import { useCallback } from "react"
+import { useDispatch, useSelector } from "react-redux"
+import { Todo } from "../model"
+import {
+  addTodoAction,
+  deleteTodoAction,
+  editTodoAction,
+  fetchAllTodosAction,
+  fetchTodoAction,
+} from "../store/todo/action"
+import {
+  allTodoSelector,
+  isFetchingSelector,
+  todoSelector,
+} from "../store/todo/selector"
+
+/**
+ * TODO custom hook
+ */
+export const useTodo = () => {
+  const dispatch = useDispatch()
+  const isFetching = useSelector(isFetchingSelector)
+  const todo = useSelector(todoSelector)
+  const todos = useSelector(allTodoSelector)?.map((t) => ({
+    id: t.id,
+    name: t.name,
+    complete: t.complete,
+    createdAt: t.createdAt,
+    updatedAt: t.updatedAt,
+  }))
+
+  const fetchAllTodos = useCallback(
+    (arg?: { offset?: number; limit?: number }) => {
+      return dispatch(
+        fetchAllTodosAction({
+          offset: arg?.offset || 0,
+          limit: arg?.limit || 5,
+        })
+      ).then(unwrapResult)
+    },
+    [dispatch]
+  )
+
+  const fetchTodo = useCallback(
+    (arg: { id: number }) => {
+      return dispatch(fetchTodoAction(arg)).then(unwrapResult)
+    },
+    [dispatch]
+  )
+
+  const addTodo = useCallback(
+    (arg: { todo: Todo }) => {
+      return dispatch(addTodoAction(arg)).then(unwrapResult)
+    },
+    [dispatch]
+  )
+
+  const editTodo = useCallback(
+    (arg: { todo: Todo }) => {
+      return dispatch(editTodoAction(arg)).then(unwrapResult)
+    },
+    [dispatch]
+  )
+
+  const deleteTodo = useCallback(
+    (arg: { id: number }) => {
+      return dispatch(deleteTodoAction(arg)).then(unwrapResult)
+    },
+    [dispatch]
+  )
+
+  return {
+    isFetching,
+    todos,
+    todo,
+    fetchAllTodos,
+    fetchTodo,
+    addTodo,
+    editTodo,
+    deleteTodo,
+  } as const
+}

model/ApiErrorResponse.ts

@@ -0,0 +1,8 @@
+/**
+ * Api error response
+ */
+export type ApiErrorResponse = {
+  statusCode: number
+  message: string
+  error?: Error
+}

model/TestData.ts

@@ -0,0 +1,14 @@
+import { Todo } from "./Todo"
+
+// test data
+export let testTodos: Todo[] = []
+
+for (let i = 0; i < 6; i++) {
+  testTodos.push({
+    id: i + 1,
+    name: `Task ${i + 1}`,
+    complete: i % 2 == 0,
+    createdAt: new Date(),
+    updatedAt: new Date(),
+  })
+}

model/Todo.tsx

@@ -0,0 +1,10 @@
+/**
+ * TODO model
+ */
+export type Todo = {
+  id: number
+  name: string
+  complete: boolean
+  createdAt: Date
+  updatedAt: Date
+}

model/index.ts

@@ -0,0 +1 @@
+export * from "./Todo"