fixed logout

Author: abhitrueprogrammer

src/api/auth.ts

@@ -7,6 +7,16 @@ export const login = async(email: string, password: string) =>{
         return response.data as data;
     }catch(err){
 
+        throw err;
+    }
+}
+
+export const logout = async() =>{
+    try {
+        const response = await axios.post('/auth/logout')
+        return response.data as data;
+    }catch(err){
+        
         throw err;
     }
 }

src/api/logout.ts

@@ -1,15 +1,13 @@
 "use client";
 import { DataTable } from "@/components/table/data-table";
-import columns from "@/components/columns";
 import userCol from "@/components/columns/UserCol";
 // import { useEffect, useMemo, useState } from "react";
 // import { user } from "@/store/interfaces";
-import oosers from "@/components/dumUser.json";
 // import useToast from "@/lib/toast";
 import { useQuery } from "@tanstack/react-query";
 import { fetchUsers } from "@/api/fetchUsers";
-import { User } from "@/data/schema";
-import { useEffect, useState } from "react";
+import {type User } from "@/data/schema";
+import {  useState } from "react";
 import { useDebounce } from "use-debounce";
 import Image from "next/image";
 import loading from "@/assets/images/loading.gif";
@@ -20,12 +18,10 @@ export default function Users() {
   const [currentCursor, setCurrentCursor] = useState<string | undefined>(
     undefined,
   );
-   const [selectedUser, setSelectedUser] = useState<User | null>(null);
   const [pageLimit, setPageLimit] =useState<number>(10);
   const [theName, setTheName] = useState<string>("");
   // const queryClient = useQueryClient();
   const [nameDebounce] = useDebounce(theName, 1000);
-  const [open, setOpen] = useState(false);
   const {
     data: userList,
     isLoading,
@@ -53,14 +49,9 @@ export default function Users() {
       setCurrentCursor(prevCursor ?? undefined); // Move to previous page
     }
   };
-  const handleRowClick = (user: User) => {
-    setSelectedUser(user);
-    setOpen(true);
-  };
 
-  const handleModalClose = () => {
-    setOpen(false);
-  };
+
+
 
 
   return (
@@ -90,13 +81,7 @@ export default function Users() {
           />
         </div>
       )}
-{selectedUser && (
-          <UserModal
-            open={open}
-            onClose={handleModalClose}
-            user={selectedUser}
-          />
-        )}
+
 
       <DataTable<User, string>
         setPageLimit={setPageLimit}
@@ -106,7 +91,6 @@ export default function Users() {
         // data={oosers}
         handleNextPage={handleNextPage}
         handlePrevPage={handlePrevPage}
-        onRowClick={handleRowClick}
       />
     </div>
   );

src/app/users/page.tsx

@@ -6,6 +6,9 @@ import { DataTableColumnHeader } from "@/components/table/data-table-column-head
 import { Badge } from "@/components/ui/badge";
 import { DataTableRowActions } from "@/components/table/data-table-row-actions";
 import { type User } from "@/data/schema";
+import { banUnban } from "@/api/ban";
+import toast from "react-hot-toast";
+import { Button } from "../ui/button";
 
 const columns: ColumnDef<User>[] = [
   // {
@@ -52,7 +55,9 @@ const columns: ColumnDef<User>[] = [
   // },
   {
     accessorKey: "Email",
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Email" />,
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Email" />
+    ),
     cell: ({ row }) => <span>{row.getValue("Email")}</span>,
   },
   // {
@@ -62,17 +67,23 @@ const columns: ColumnDef<User>[] = [
   // },
   {
     accessorKey: "Gender",
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Gender" />,
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Gender" />
+    ),
     cell: ({ row }) => <span>{row.getValue("Gender")}</span>,
   },
   {
     accessorKey: "RegNo",
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Reg No." />,
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Reg No." />
+    ),
     cell: ({ row }) => <span>{row.getValue("RegNo")}</span>,
   },
   {
     accessorKey: "PhoneNo",
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Phone No." />,
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Phone No." />
+    ),
     cell: ({ row }) => <span>{row.getValue("PhoneNo")}</span>,
   },
   // {
@@ -100,11 +111,30 @@ const columns: ColumnDef<User>[] = [
   // },
   {
     accessorKey: "IsBanned",
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Banned" />,
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Banned" />
+    ),
     cell: ({ row }) => (
-      <Badge variant={row.getValue("IsBanned") ? "destructive" : "outline"}>
+      <Button
+        onClick={() =>
+          toast.promise(async ()=>{
+            await banUnban({
+              ban: !row.getValue("IsBanned"),
+              email: row.getValue("Email"),
+            })
+            await queryClient.invalidateQueries({ queryKey: ["users"] })
+          }
+
+          , {
+            loading: "Updating...",
+            success: "User updated",
+            error: "Failed to update user",
+          })
+        }
+        variant={row.getValue("IsBanned") ? "destructive" : "outline"}
+      >
         {row.getValue("IsBanned") ? "Yes" : "No"}
-      </Badge>
+      </Button>
     ),
   },
   // {
@@ -132,7 +162,9 @@ const columns: ColumnDef<User>[] = [
   // },
   {
     accessorKey: "HostelBlock",
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Hostel Block" />,
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Hostel Block" />
+    ),
     cell: ({ row }) => <span>{row.getValue("HostelBlock")}</span>,
   },
   // {

src/components/columns/UserCol.tsx

@@ -14,6 +14,7 @@ import { cn } from "@/lib/utils";
 import { Loader2 } from "lucide-react"; // Import spinner icon
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import toast from "react-hot-toast";
 
 export function LoginForm({
   className,
@@ -30,6 +31,7 @@ export function LoginForm({
     try {
       const response = await login(email, password);
       if (response.status === "success") {
+        toast.success("Login successful");
         router.push("/users");
       }
     } catch (err) {

src/components/login-form.tsx

@@ -17,18 +17,14 @@ import {
 import { LogOutIcon, MenuIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { Sidebar } from "./sidebar";
+import { logout } from "@/api/auth";
 
 export function Navbar() {
     const router = useRouter();
 
     const handleLogout = async ()=>{
         try{
-            await fetch("/api/auth/signout", {
-                method: "POST",
-                headers: {
-                  'Content-Type': 'application/json'
-                },
-              })
+            await logout();
             router.push("/login")
         }catch(err){
             console.log(err);

src/components/navbar.tsx

@@ -16,6 +16,7 @@ export const env = createEnv({
    * `NEXT_PUBLIC_`.
    */
   client: {
+    NEXT_PUBLIC_BASEURL: z.string(),
     // NEXT_PUBLIC_CLIENTVAR: z.string(),
   },
 
@@ -24,6 +25,8 @@ export const env = createEnv({
    * middlewares) or client-side so we need to destruct manually.
    */
   runtimeEnv: {
+    NEXT_PUBLIC_BASEURL: process.env.NEXT_PUBLIC_BASEURL,
+
     NODE_ENV: process.env.NODE_ENV,
     // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
   },