add: added an auth middleware to simplify code

front/src/index.css

@@ -1,3 +1,7 @@
 .cat {
     width: 100px;
+}
+
+.osaka {
+    width: 200px;
 }

front/src/pages/ChannelPage.tsx

@@ -26,7 +26,7 @@ export default function ChannelPage() {
                 );
             })
             .catch((err) => {
-                console.error(err.response.data.message);
+                console.error(err.response);
             });
     }
 
@@ -42,7 +42,7 @@ export default function ChannelPage() {
                 );
             })
             .catch((err) => {
-                console.error(err.response.data.message);
+                console.error(err.response);
             });
     }
 

front/src/pages/Home.tsx

@@ -19,25 +19,48 @@ export default function Home() {
                     setUser(res.data)
                 })
                 .catch((err) => {
-                    console.error(err)
+                    console.error(err.response)
                 })
-            } 
+        } 
 
         axios
-            .get("/api/channels").then((res) => {
+            .get("/api/channels")
+            .then((res) => {
                 setChannels(res.data)
             })
             .catch((err) => {
-                console.error(err)
+                console.error(err.response)
             })
         
         axios
-            .get("/api/lastmessages").then((res) => {
+            .get("/api/lastmessages")
+            .then((res) => {
                 setMessages(res.data)
+            })
+            .catch((err) => {
+                console.error(err.response)
             }
         )
     }, [])
 
+    useEffect(() => {
+        const id = setInterval(() => {
+            axios
+                .get("/api/lastmessages").then((res) => {
+                    setMessages(res.data)
+                }
+            )
+
+            axios
+                .get("/api/channels").then((res) => {
+                    setChannels(res.data)
+                }
+            )
+        }, 5000)
+
+        return () => { clearInterval(id) }
+    }, [])
+
     return (
         <div>
             <h1>Home</h1>
@@ -74,7 +97,7 @@ export default function Home() {
                     </li>
                 ))}
             </ul>
-            <img src="cat.jpg" alt="cat" className="cat"/>
+            <img src="osaka_arch.png" alt="osaka" className="osaka"/>
         </div>
     )
 }

front/src/pages/Login.tsx

@@ -16,7 +16,7 @@ export default function Login() {
                 navigate("/");
             })
             .catch((err) => {
-                alert(err.response.data.message);
+                alert(err.response);
             });
     }
 

front/src/pages/Register.tsx

@@ -9,18 +9,22 @@ export default function Register () {
 
     function handleSubmit(e: React.FormEvent) {
         e.preventDefault();
-        axios.post("/api/auth/register", { username, password }).then(() => {
-            axios
-                .post("/api/auth/login", { username, password })
-                .then((res) => {
-                    localStorage.setItem("token", res.data.token);
-                    navigate("/");
-                })
-                .catch((err) => {
-                    alert(err.response.data.message);
-                }
-            );
-        });
+        axios
+            .post("/api/auth/register", { username, password }).then(() => {
+                axios
+                    .post("/api/auth/login", { username, password })
+                    .then((res) => {
+                        localStorage.setItem("token", res.data.token);
+                        navigate("/");
+                    })
+                    .catch((err) => {
+                        alert(err.response);
+                    }
+                );
+            })
+            .catch((err) => {
+                alert(err.response);
+            });
     }
 
     return (