logout

logout function

frontend/src/components/sidebar/LogoutButton.jsx

@@ -1,9 +1,19 @@
 import { BiLogOut } from "react-icons/bi";
+import useLogout from "../../hooks/useLogout";
 
 const LogoutButton = () => {
+  const { loading, logout } = useLogout();
+
   return (
     <div className="mt-auto">
-      <BiLogOut className="w-6 h-6 text-white cursor-pointer" />
+      {!loading ? (
+        <BiLogOut
+          className="w-6 h-6 text-white cursor-pointer"
+          onClick={logout}
+        />
+      ) : (
+        <span className="loading loading-spinner"></span>
+      )}
     </div>
   );
 };

frontend/src/hooks/useLogout.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { useAuthContext } from "../context/AuthContext";
+import toast from "react-hot-toast";
+
+const useLogout = () => {
+  const [loading, setLoading] = React.useState(false);
+  const { setAuthUser } = useAuthContext();
+
+  const logout = async () => {
+    setLoading(true);
+    try {
+      const res = await fetch("/api/auth/logout", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      const data = await res.json();
+      if (data.error) {
+        throw new Error(data.error);
+      }
+      localStorage.removeItem("chat-user");
+      setAuthUser(null);
+    } catch (error) {
+      toast.error(error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return { loading, logout };
+};
+
+export default useLogout;