Merge pull request #470 from shikorism/feature/326-react-checkin-form

チェックインフォームをReactで作り替える

.eslintrc.js

@@ -6,25 +6,33 @@ module.exports = {
     },
     extends: [
         'eslint:recommended',
-        'plugin:vue/essential',
+        'plugin:react/recommended',
         'plugin:prettier/recommended',
         'plugin:@typescript-eslint/recommended',
         'prettier',
         'prettier/@typescript-eslint',
-        'prettier/vue',
+        'prettier/react',
     ],
-    parser: 'vue-eslint-parser',
+    parser: '@typescript-eslint/parser',
     parserOptions: {
         ecmaVersion: 11,
-        parser: '@typescript-eslint/parser',
+        ecmaFeatures: {
+            jsx: true,
+        },
         sourceType: 'module',
     },
-    plugins: ['prettier', 'vue', '@typescript-eslint', 'jquery'],
+    plugins: ['prettier', 'react', '@typescript-eslint', 'jquery'],
     rules: {
         '@typescript-eslint/explicit-module-boundary-types': 0,
         '@typescript-eslint/no-explicit-any': 0,
         '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
         'jquery/no-ajax': 2,
         'jquery/no-ajax-events': 2,
+        'react/prop-types': 0,
+    },
+    settings: {
+        react: {
+            version: 'detect',
+        },
     },
 };

app/Http/Controllers/EjaculationController.php

@@ -16,17 +16,26 @@ class EjaculationController extends Controller
 {
     public function create(Request $request)
     {
-        $defaults = [
-            'date' => $request->input('date', date('Y/m/d')),
-            'time' => $request->input('time', date('H:i')),
-            'link' => $request->input('link', ''),
-            'tags' => $request->input('tags', ''),
-            'note' => $request->input('note', ''),
-            'is_private' => $request->input('is_private', 0) == 1,
-            'is_too_sensitive' => $request->input('is_too_sensitive', 0) == 1
+        $tags = old('tags') ?? $request->input('tags', '');
+        if (!empty($tags)) {
+            $tags = explode(' ', $tags);
+        }
+
+        $errors = $request->session()->get('errors');
+        $initialState = [
+            'fields' => [
+                'date' => old('date') ?? $request->input('date', date('Y/m/d')),
+                'time' => old('time') ?? $request->input('time', date('H:i')),
+                'link' => old('link') ?? $request->input('link', ''),
+                'tags' => $tags,
+                'note' => old('note') ?? $request->input('note', ''),
+                'is_private' => old('is_private') ?? $request->input('is_private', 0) == 1,
+                'is_too_sensitive' => old('is_too_sensitive') ?? $request->input('is_too_sensitive', 0) == 1
+            ],
+            'errors' => isset($errors) ? $errors->getMessages() : null
         ];
 
-        return view('ejaculation.checkin')->with('defaults', $defaults);
+        return view('ejaculation.checkin')->with('initialState', $initialState);
     }
 
     public function store(Request $request)
@@ -112,13 +121,36 @@ public function show($id)
         return view('ejaculation.show')->with(compact('user', 'ejaculation', 'ejaculatedSpan'));
     }
 
-    public function edit($id)
+    public function edit(Request $request, $id)
     {
         $ejaculation = Ejaculation::findOrFail($id);
 
         $this->authorize('edit', $ejaculation);
 
-        return view('ejaculation.edit')->with(compact('ejaculation'));
+        if (old('tags') === null) {
+            $tags = $ejaculation->tags->pluck('name');
+        } else {
+            $tags = old('tags');
+            if (!empty($tags)) {
+                $tags = explode(' ', $tags);
+            }
+        }
+
+        $errors = $request->session()->get('errors');
+        $initialState = [
+            'fields' => [
+                'date' => old('date') ?? $ejaculation->ejaculated_date->format('Y/m/d'),
+                'time' => old('time') ?? $ejaculation->ejaculated_date->format('H:i'),
+                'link' => old('link') ?? $ejaculation->link,
+                'tags' => $tags,
+                'note' => old('note') ?? $ejaculation->note,
+                'is_private' => is_bool(old('is_private')) ? old('is_private') : $ejaculation->note,
+                'is_too_sensitive' => is_bool(old('is_too_sensitive')) ? old('is_too_sensitive') : $ejaculation->is_too_sensitive
+            ],
+            'errors' => isset($errors) ? $errors->getMessages() : null
+        ];
+
+        return view('ejaculation.edit')->with(compact('ejaculation', 'initialState'));
     }
 
     public function update(Request $request, $id)

package.json

@@ -8,28 +8,32 @@
     "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
     "prod": "npm run production",
     "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "eslint": "eslint --ext .js,.ts,.vue resources/",
+    "eslint": "eslint --ext .js,.ts,.tsx resources/",
     "stylelint": "stylelint resources/assets/sass/**/*"
   },
   "devDependencies": {
     "@types/bootstrap": "^4.5.0",
     "@types/cal-heatmap": "^3.3.10",
     "@types/chart.js": "^2.9.22",
+    "@types/classnames": "^2.2.10",
     "@types/jquery": "^3.3.38",
     "@types/js-cookie": "^2.2.0",
     "@types/qs": "^6.9.4",
+    "@types/react": "^16.9.35",
+    "@types/react-dom": "^16.9.8",
     "@typescript-eslint/eslint-plugin": "^3.1.0",
     "@typescript-eslint/parser": "^3.1.0",
     "bootstrap": "^4.5.0",
     "cal-heatmap": "^3.3.10",
     "chart.js": "^2.7.1",
+    "classnames": "^2.2.6",
     "cross-env": "^5.2.0",
     "date-fns": "^1.30.1",
     "eslint": "^7.6.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-jquery": "^1.5.1",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-react": "^7.20.6",
     "husky": "^1.3.1",
     "jquery": "^3.5.0",
     "js-cookie": "^2.2.0",
@@ -40,17 +44,15 @@
     "popper.js": "^1.14.7",
     "prettier": "^2.0.5",
     "qs": "^6.9.4",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "resolve-url-loader": "^3.1.1",
     "sass": "^1.26.8",
     "sass-loader": "^7.1.0",
     "stylelint": "^9.10.1",
     "stylelint-config-recess-order": "^2.0.4",
     "ts-loader": "^6.0.1",
-    "typescript": "^3.4.5",
-    "vue": "^2.6.10",
-    "vue-class-component": "^7.1.0",
-    "vue-property-decorator": "^9.0.0",
-    "vue-template-compiler": "^2.6.10"
+    "typescript": "^3.4.5"
   },
   "stylelint": {
     "extends": "stylelint-config-recess-order"
@@ -65,7 +67,7 @@
       "stylelint --fix",
       "git add"
     ],
-    "*.{ts,js,vue}": [
+    "*.{ts,tsx,js}": [
       "eslint --fix",
       "git add"
     ],

resources/assets/js/app.ts

@@ -1,4 +1,4 @@
-import * as Cookies from 'js-cookie';
+import Cookies from 'js-cookie';
 import { fetchPostJson, fetchDeleteJson, ResponseError } from './fetch';
 import { linkCard, pageSelector, deleteCheckinModal } from './tissue';
 

resources/assets/js/checkin.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { CheckinForm } from './components/CheckinForm';
+
+const initialState = JSON.parse(document.getElementById('initialState')?.textContent as string);
+ReactDOM.render(<CheckinForm initialState={initialState} />, document.getElementById('checkinForm'));

resources/assets/js/components/CheckBox.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+type CheckboxProps = {
+    id: string;
+    name: string;
+    className?: string;
+    checked?: boolean;
+    onChange?: (newValue: boolean) => void;
+};
+
+export const CheckBox: React.FC<CheckboxProps> = ({ id, name, className, checked, onChange, children }) => (
+    <div className={`custom-control custom-checkbox ${className}`}>
+        <input
+            id={id}
+            name={name}
+            type="checkbox"
+            className="custom-control-input"
+            checked={checked}
+            onChange={(e) => onChange && onChange(e.target.checked)}
+        />
+        <label className="custom-control-label" htmlFor={id}>
+            {children}
+        </label>
+    </div>
+);