Add logout

 import { useState, useEffect } from "react";
 import { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { Navigate, useNavigate } from "react-router-dom";
 import authService from "../service/auth";
 import authService from "../service/auth";
 // components
 // components
 import Topbar from "../components/Topbar";
 import Topbar from "../components/Topbar";
 import Bottombar from "../components/Bottombar";
 import Bottombar from "../components/Bottombar";
 
 
 function Settings() {
 function Settings() {
+  const token = sessionStorage.getItem("user-token");
   const navigate = useNavigate();
   const navigate = useNavigate();
-  const [editSuccess, setEditSuccess] = useState(0);
+  const [logoutSuccess, setLogoutSuccess] = useState(0);
   const [userinfo, setUserinfo] = useState({
   const [userinfo, setUserinfo] = useState({
     username: "",
     username: "",
     country: "",
     country: "",
@@ -15,13 +16,12 @@ function Settings() {
     email: "",
     email: "",
   });
   });
 
 
-  // useEffect(() => {
-  //     navigate("/login", { replace: true });
-  // }, [ navigate]);
-
-  const logout = () => {
-    return;
-  };
+  useEffect(() => {
+    if (logoutSuccess === "logout") {
+      sessionStorage.clear();
+      navigate("/login", { replace: true });
+    }
+  }, [logoutSuccess, setLogoutSuccess, navigate]);
 
 
   const onChange = (e) => {
   const onChange = (e) => {
     setUserinfo((orgState) => ({
     setUserinfo((orgState) => ({
@@ -37,9 +37,15 @@ function Settings() {
       return;
       return;
     }
     }
     const response = await authService.handleUserEdit(userinfo);
     const response = await authService.handleUserEdit(userinfo);
-    setEditSuccess(response);
+    if (response === "success") {
+      alert("User info successfully changed");
+    }
   };
   };
 
 
+  if (!token) {
+    return <Navigate to="/login" />;
+  }
+
   return (
   return (
     <div>
     <div>
       <Topbar />
       <Topbar />
@@ -89,7 +95,8 @@ function Settings() {
       <br />
       <br />
 
 
       <div>
       <div>
-        Want to logout? <button onClick={() => logout()}>Logout</button>
+        Want to logout?{" "}
+        <button onClick={() => setLogoutSuccess("logout")}>Logout</button>
       </div>
       </div>
       <Bottombar />
       <Bottombar />
     </div>
     </div>