create new list page

src/components/TaskList.jsx

@@ -64,7 +64,7 @@ return (
             <option key={key} className="list-item" value={list.id}>{list.title}</option>
           ))}
         </select>
-        <Link to="/lists/new">リスト新規作成</Link>
+        <Link to="/list/new">リスト新規作成</Link>
       </div>
       <div className="tasks">
         <div className="tasks-header">

src/pages/NewList.jsx

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import { useCookies } from "react-cookie";
+import axios from "axios";
+import { Header } from "../components/Header";
+import { useHistory } from "react-router-dom";
+import { url } from "../const";
+import "./newList.css";
+
+export const NewList = () => {
+  const [cookies] = useCookies();
+  const history = useHistory();
+  const [title, setTitle] = useState("");
+  const handleTitleChange = (e) => setTitle(e.target.value);
+  const onCreateList = () => {
+    const data = {
+      title: title
+    }
+
+    axios.post(`${url}/lists`, data, {
+      headers: {
+        authorization: `Bearer ${cookies.token}`
+      }
+    })
+    .then(() => {
+      history.push("/");
+    })
+    .catch((err) => {
+      console.log(err);
+    })
+  }
+
+  return (
+    <div>
+      <Header />
+      <main className="new-list">
+        <h2>リスト新規作成</h2>
+        <form className="new-list-form">
+          <label>タイトル</label><br />
+          <input type="text" onChange={handleTitleChange} className="new-list-title" /><br />
+          <button type="button" onClick={onCreateList} className="new-list-button">作成</button>
+        </form>
+      </main>
+    </div>
+  )
+}

src/pages/newList.css

@@ -0,0 +1,23 @@
+@charset "utf-8";
+
+.new-list {
+  width: 1000px;
+  margin: 0 auto;
+}
+
+.new-list-form {
+  color: #555555;
+}
+
+.new-list-title {
+  width: 300px;
+  margin-bottom: 25px;
+}
+
+.new-list-button {
+  background-color: #242F9B;
+  color: #ffffff;
+  width: 80px;
+  height: 40px;
+  border-radius: 5px;
+}

src/routes/Router.jsx

@@ -5,6 +5,7 @@ import { Home } from "../pages/Home";
 import { NotFound } from "../pages/NotFound";
 import { SignIn } from "../pages/SignIn";
 import { NewTask } from "../pages/NewTask";
+import { NewList } from "../pages/NewList";
 
 export const Router = () => {
   const auth = useSelector((state) => state.auth.isSignIn)
@@ -17,6 +18,7 @@ export const Router = () => {
           <>
             <Route exact path="/" component={Home} />
             <Route exact path="/task/new" component={NewTask} />
+            <Route exact path="/list/new" component={NewList} />
           </>
         ) : (
           <Redirect to="/signin" />