WOOHOO

2025-03-14 17:03:54 +00:00
parent 87a58a6736
commit 0c64b5be79
5 changed files with 183 additions and 51 deletions
--- a/app/dashboard/shipping/page.tsx
+++ b/app/dashboard/shipping/page.tsx
@@ -27,12 +27,18 @@ export default function ShippingPage() {
  const [loading, setLoading] = useState<boolean>(true);
  const [modalOpen, setModalOpen] = useState<boolean>(false);
  const [editing, setEditing] = useState<boolean>(false);
+  const [refreshTrigger, setRefreshTrigger] = useState<number>(0);

  const router = useRouter();

+  const refreshShippingMethods = () => {
+    setRefreshTrigger(prev => prev + 1);
+  };
+
  useEffect(() => {
    const fetchShippingMethodsData = async () => {
      try {
+        setLoading(true);
        const authToken = document.cookie
          .split("; ")
          .find((row) => row.startsWith("Authorization="))
@@ -65,23 +71,41 @@ export default function ShippingPage() {
    };

    fetchShippingMethodsData();
-  }, []);
+  }, [refreshTrigger]); // Add refreshTrigger as a dependency

  const handleAddShipping = async () => {
    if (!newShipping.name || !newShipping.price) return;

    try {
-      const authToken = document.cookie.split("Authorization=")[1];
-      const updatedMethods: ShippingMethod[] = await addShippingMethod(
+      setLoading(true);
+      const authToken = document.cookie
+        .split("; ")
+        .find((row) => row.startsWith("Authorization="))
+        ?.split("=")[1];
+        
+      if (!authToken) {
+        console.error("No auth token found");
+        return;
+      }
+      
+      await addShippingMethod(
        authToken,
        newShipping
      );

-      setShippingMethods(updatedMethods);
-      setNewShipping({ name: "", price: 0 }); // No `_id` needed for new entry
+      // Close modal and reset form before refreshing to avoid UI delays
      setModalOpen(false);
+      setNewShipping({ name: "", price: 0 });
+      
+      // Refresh the list after adding
+      refreshShippingMethods();
+      
+      console.log("Shipping method added successfully");
    } catch (error) {
      console.error("Error adding shipping method:", error);
+      alert("Failed to add shipping method. Please try again.");
+    } finally {
+      setLoading(false);
    }
  };

@@ -89,23 +113,37 @@ export default function ShippingPage() {
    if (!newShipping.name || !newShipping.price || !newShipping._id) return; // Ensure `_id` exists

    try {
-      const authToken = document.cookie.split("Authorization=")[1];
-      const updatedShipping: ShippingMethod = await updateShippingMethod(
+      setLoading(true);
+      const authToken = document.cookie
+        .split("; ")
+        .find((row) => row.startsWith("Authorization="))
+        ?.split("=")[1];
+        
+      if (!authToken) {
+        console.error("No auth token found");
+        return;
+      }
+      
+      await updateShippingMethod(
        authToken,
        newShipping._id,
        newShipping
      );

-      setShippingMethods((prevMethods) =>
-        prevMethods.map((method) =>
-          method._id === updatedShipping._id ? updatedShipping : method
-        )
-      );
+      // Close modal and reset form before refreshing to avoid UI delays
+      setModalOpen(false);
      setNewShipping({ name: "", price: 0 });
      setEditing(false);
-      setModalOpen(false);
+      
+      // Refresh the list after updating
+      refreshShippingMethods();
+      
+      console.log("Shipping method updated successfully");
    } catch (error) {
      console.error("Error updating shipping method:", error);
+      alert("Failed to update shipping method. Please try again.");
+    } finally {
+      setLoading(false);
    }
  };

@@ -114,9 +152,7 @@ export default function ShippingPage() {
      const authToken = document.cookie.split("Authorization=")[1];
      const response = await deleteShippingMethod(authToken, _id);
      if (response.success) {
-        setShippingMethods((prevMethods) =>
-          prevMethods.filter((method) => method._id !== _id)
-        );
+        refreshShippingMethods(); // Refresh the list after deleting
      } else {
        console.error("Deletion was not successful.");
      }
@@ -141,7 +177,11 @@ export default function ShippingPage() {
          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
            Manage Shipping Options
          </h1>
-          <Button onClick={() => setModalOpen(true)}>
+          <Button onClick={() => {
+            setNewShipping({ name: "", price: 0 });
+            setEditing(false);
+            setModalOpen(true);
+          }}>
            <Plus className="mr-2 h-5 w-5" />
            Add Shipping Method
          </Button>
@@ -159,7 +199,11 @@ export default function ShippingPage() {
      {/* Shipping Modal */}
      <ShippingModal
        open={modalOpen}
-        onClose={() => setModalOpen(false)}
+        onClose={() => {
+          setNewShipping({ name: "", price: 0 });
+          setEditing(false);
+          setModalOpen(false);
+        }}
        onSave={editing ? handleUpdateShipping : handleAddShipping}
        shippingData={newShipping}
        editing={editing}
--- a/components/layout/sidebar.tsx
+++ b/components/layout/sidebar.tsx
@@ -7,11 +7,28 @@ import { ShoppingCart, LogOut } from "lucide-react"
 import { NavItem } from "./nav-item"
 import { Button } from "@/components/ui/button"
 import { sidebarConfig } from "@/config/sidebar"
+import { logoutUser } from "@/lib/auth-utils"
+import { toast } from "sonner"

 const Sidebar: React.FC = () => {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
  const router = useRouter()

+  const handleLogout = async () => {
+    try {
+      // Show toast notification for better user experience
+      toast.success("Logging out...");
+      
+      // Perform the logout
+      await logoutUser();
+      
+      // The logoutUser function will handle the redirect
+    } catch (error) {
+      console.error("Error during logout:", error);
+      toast.error("Failed to logout. Please try again.");
+    }
+  };
+
  return (
    <>
      <nav
@@ -48,7 +65,7 @@ const Sidebar: React.FC = () => {

          <div className="p-4 border-t border-border">
            <Button
-              onClick={() => {}}
+              onClick={handleLogout}
              variant="ghost"
              className="w-full justify-start text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-500 hover:bg-background"
            >
--- a/components/modals/shipping-modal.tsx
+++ b/components/modals/shipping-modal.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { ChangeEvent } from "react";
+import { ChangeEvent, FormEvent } from "react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -25,6 +25,12 @@ export const ShippingModal = ({
  handleChange,
  setShippingData,
 }: ShippingModalProps) => {
+  
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    onSave(shippingData);
+  };
+  
  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[600px]">
@@ -34,38 +40,42 @@ export const ShippingModal = ({
          </DialogTitle>
        </DialogHeader>

-        <div className="grid gap-4 py-4">
-          <div className="space-y-2">
-            <label className="text-sm font-medium">Method Name</label>
-            <Input
-              name="name"
-              placeholder="Shipping Method Name"
-              value={shippingData.name}
-              onChange={handleChange}
-            />
+        <form onSubmit={handleSubmit}>
+          <div className="grid gap-4 py-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Method Name</label>
+              <Input
+                name="name"
+                placeholder="Shipping Method Name"
+                value={shippingData.name}
+                onChange={handleChange}
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Price</label>
+              <Input
+                name="price"
+                type="number"
+                step="0.01"
+                placeholder="Price (£)"
+                value={shippingData.price}
+                onChange={handleChange}
+                required
+              />
+            </div>
          </div>

-          <div className="space-y-2">
-            <label className="text-sm font-medium">Price</label>
-            <Input
-              name="price"
-              type="number"
-              step="0.01"
-              placeholder="Price (£)"
-              value={shippingData.price}
-              onChange={handleChange}
-            />
-          </div>
-        </div>
-
-        <DialogFooter className="flex justify-end gap-2">
-          <Button variant="outline" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button onClick={() => onSave(shippingData)}>
-            {editing ? "Update Shipping Method" : "Create Shipping Method"}
-          </Button>
-        </DialogFooter>
+          <DialogFooter className="flex justify-end gap-2">
+            <Button type="button" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit">
+              {editing ? "Update Shipping Method" : "Create Shipping Method"}
+            </Button>
+          </DialogFooter>
+        </form>
      </DialogContent>
    </Dialog>
  );
--- a/lib/auth-utils.ts
+++ b/lib/auth-utils.ts
@@ -0,0 +1,55 @@
+/**
+ * Auth utilities for managing authentication state
+ */
+
+/**
+ * Get the authentication token from cookies or localStorage
+ */
+export function getAuthToken(): string | null {
+  return document.cookie
+    .split('; ')
+    .find(row => row.startsWith('Authorization='))
+    ?.split('=')[1] || localStorage.getItem('Authorization');
+}
+
+/**
+ * Check if the user is logged in
+ */
+export function isLoggedIn(): boolean {
+  return !!getAuthToken();
+}
+
+/**
+ * Logout the user by removing auth tokens and redirecting
+ */
+export async function logoutUser(): Promise<void> {
+  const token = getAuthToken();
+  
+  if (token) {
+    try {
+      // Try to logout on the server (if this fails, we still proceed with client logout)
+      await fetch(`${process.env.NEXT_PUBLIC_API_URL}/auth/logout`, {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        }
+      }).catch(err => {
+        // Silently catch errors - we still want to proceed with local logout
+        console.warn('Server logout failed:', err);
+      });
+    } catch (error) {
+      console.warn('Error during server logout:', error);
+      // Continue with client-side logout regardless of server response
+    }
+  }
+  
+  // Remove the auth token from cookies
+  document.cookie = 'Authorization=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; Secure; SameSite=Strict';
+  
+  // Remove from localStorage as backup
+  localStorage.removeItem('Authorization');
+  
+  // Redirect to login page
+  window.location.href = '/auth/login';
+} 
--- a/lib/shippingHelper.ts
+++ b/lib/shippingHelper.ts
@@ -47,6 +47,12 @@ export const addShippingMethod = async (
      }
    );

+    // If fetchData returns directly (not a Response object), just return it
+    if (!res.ok && !res.status) {
+      return res;
+    }
+
+    // Handle if it's a Response object
    if (!res.ok) {
      const errorData = await res.json();
      throw new Error(errorData.message || "Failed to add shipping method");
@@ -102,7 +108,7 @@ export const updateShippingMethod = async (
    );

    if (!res) throw new Error("Failed to update shipping method");
-    return res
+    return res;
  } catch (error) {
    console.error("Error updating shipping method:", error);
    throw error;