Merge pull request #34 from fastbuka/Api

Updated the Routing System

src/app/(auth)/register/page.tsx

@@ -149,7 +149,7 @@ const Register: React.FC = () => {
                 htmlFor="email"
                 className="block mb-2 text-lg font-medium text-[#000000]"
               >
-                Email Address
+                Description
               </label>
               <input
                 type="email"
@@ -158,7 +158,7 @@ const Register: React.FC = () => {
                 value={description}
                 onChange={(event) => setDescription(event.target?.value)}
                 className="bg-white border border-black text-[#000000] text-sm rounded-full block w-full p-3 placeholder-[#000000]"
-                placeholder="name@gmail.com"
+                placeholder="Description"
                 required
               />
             </div>
@@ -243,7 +243,7 @@ const Register: React.FC = () => {
                 value={address}
                 onChange={(event) => setAddress(event.target?.value)}
                 className="bg-white border border-black text-[#000000] text-sm rounded-full block w-full p-3 placeholder-[#000000]"
-                placeholder="name@gmail.com"
+                placeholder="Store address"
                 required
               />
             </div>
@@ -255,13 +255,13 @@ const Register: React.FC = () => {
                 Opening Time
               </label>
               <input
-                type="tel"
+                type="text"
                 id="phone"
                 name="phone"
                 value={opening_time}
                 onChange={(event) => setOpeningTime(event.target?.value)}
                 className="bg-white border border-black text-[#000000] text-sm rounded-full block w-full p-3 placeholder-[#000000]"
-                placeholder="Phone Number"
+                placeholder="Opening Time"
                 required
               />
             </div>
@@ -273,13 +273,13 @@ const Register: React.FC = () => {
                 Closing Time
               </label>
               <input
-                type="tel"
+                type="text"
                 id="phone"
                 name="phone"
                 value={closing_time}
                 onChange={(event) => setClosingTime(event.target?.value)}
                 className="bg-white border border-black text-[#000000] text-sm rounded-full block w-full p-3 placeholder-[#000000]"
-                placeholder="Phone Number"
+                placeholder="Closing Time"
                 required
               />
             </div>

src/components/Breadcrumbs/Breadcrumb.tsx

@@ -76,9 +76,9 @@ const Breadcrumb = ({ pageName }: BreadcrumbProps) => {
   if (!user) {
     return <div>Loading...</div>;
   }
-  if (loading) return <div>Loading vendor details...</div>;
-  if (error) return <div>Error: {error}</div>;
-  if (!vendor) return <div>No vendor found</div>;
+
+
+  if (!vendor) return null;
 
   return (
     <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">

src/components/Dashboard/Add-Account.tsx

@@ -1,8 +1,32 @@
 "use client";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import Image from "next/image";
 import Nigeria from "/public/nigeria2.png";
 import XLM from "/public/xlm.png";
+import { useRouter, useParams } from "next/navigation";
+import { useLogout } from "@/queries/auth";
+import { QueryClient } from "react-query";
+import { getUser, getToken } from "@/utils/token";
+import { getVendorBySlug } from "@/utils/token";
+
+interface UserProfile {
+  profile: {
+    first_name: string;
+    email: string;
+  };
+}
+
+interface Vendor {
+  id: number;
+  uuid: string;
+  name: string;
+  slug: string;
+  description: string;
+  country: string;
+  city: string;
+  // Add other fields if needed
+}
+
 
 const AddAccount = () => {
   // State to track selected currency
@@ -13,6 +37,55 @@ const AddAccount = () => {
     setSelectedCurrency(e.target.value);
   };
 
+      // vendor slug
+      const router = useRouter();
+      const [user, setUser] = useState<UserProfile | null>(null);
+      const [queryClient] = useState(() => new QueryClient());
+      const logout = useLogout(queryClient);
+
+      const { slug } = useParams(); // Get the slug directly from params
+      const [vendor, setVendor] = useState<any | null>(null); // State to store vendor details
+      const [loading, setLoading] = useState<boolean>(true);
+      const [error, setError] = useState<string | null>(null);
+
+      // Fetch vendor data as a separate function
+      const fetchVendor = async (slug: string) => {
+        try {
+          const response = await getVendorBySlug(slug); // Fetch vendor data using the slug
+
+          // Assuming response.data contains your expected vendor data
+          if (response?.data?.vendor) {
+            setVendor(response.data.vendor);
+          } else {
+            throw new Error("Vendor not found");
+          }
+        } catch (err) {
+          setError("Failed to fetch vendor details");
+        } finally {
+          setLoading(false);
+        }
+      };
+
+      useEffect(() => {
+        const token = getToken();
+        const userData = getUser();
+        if (!token || !userData) {
+          router.push("/login");
+        } else {
+          setUser(userData as UserProfile);
+        }
+
+        if (slug) {
+          fetchVendor(slug as string); // Call the fetchVendor function
+        }
+      }, [slug, router]);
+
+      if (!user) {
+        return <div>Loading...</div>;
+      }
+
+      if (!vendor) return null;
+
   return (
     <div className="w-full mx-auto">
       <div className="grid md:grid-cols-2 gap-5 md:gap-10">

src/components/Dashboard/Add-Category.tsx

@@ -1,12 +1,34 @@
 "use client";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Image from "next/image";
-import placeholderImage from "/public/Food_and_flower.png"
+import placeholderImage from "/public/Food_and_flower.png";
+import { useRouter, useParams } from "next/navigation";
+import { useLogout } from "@/queries/auth";
+import { QueryClient } from "react-query";
+import { getUser, getToken } from "@/utils/token";
+import { getVendorBySlug } from "@/utils/token";
+
+interface UserProfile {
+  profile: {
+    first_name: string;
+    email: string;
+  };
+}
+
+interface Vendor {
+  id: number;
+  uuid: string;
+  name: string;
+  slug: string;
+  description: string;
+  country: string;
+  city: string;
+  // Add other fields if needed
+}
 
 const CategoryForm: React.FC = () => {
   const [imagePreview, setImagePreview] = useState<string | null>(null);
 
-
   // Handle image selection and preview
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
@@ -15,6 +37,55 @@ const CategoryForm: React.FC = () => {
     }
   };
 
+  // vendor slug
+  const router = useRouter();
+  const [user, setUser] = useState<UserProfile | null>(null);
+  const [queryClient] = useState(() => new QueryClient());
+  const logout = useLogout(queryClient);
+
+  const { slug } = useParams(); // Get the slug directly from params
+  const [vendor, setVendor] = useState<any | null>(null); // State to store vendor details
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch vendor data as a separate function
+  const fetchVendor = async (slug: string) => {
+    try {
+      const response = await getVendorBySlug(slug); // Fetch vendor data using the slug
+
+      // Assuming response.data contains your expected vendor data
+      if (response?.data?.vendor) {
+        setVendor(response.data.vendor);
+      } else {
+        throw new Error("Vendor not found");
+      }
+    } catch (err) {
+      setError("Failed to fetch vendor details");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const token = getToken();
+    const userData = getUser();
+    if (!token || !userData) {
+      router.push("/login");
+    } else {
+      setUser(userData as UserProfile);
+    }
+
+    if (slug) {
+      fetchVendor(slug as string); // Call the fetchVendor function
+    }
+  }, [slug, router]);
+
+  if (!user) {
+    return <div>Loading...</div>;
+  }
+
+  if (!vendor) return null;
+
   return (
     <>
       <div className="grid md:grid-cols-2 gap-10">

src/components/Dashboard/Add-Food.tsx

@@ -1,6 +1,29 @@
 "use client";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Image from "next/image";
+import { useRouter, useParams } from "next/navigation";
+import { useLogout } from "@/queries/auth";
+import { QueryClient } from "react-query";
+import { getUser, getToken } from "@/utils/token";
+import { getVendorBySlug } from "@/utils/token";
+
+interface UserProfile {
+  profile: {
+    first_name: string;
+    email: string;
+  };
+}
+
+interface Vendor {
+  id: number;
+  uuid: string;
+  name: string;
+  slug: string;
+  description: string;
+  country: string;
+  city: string;
+  // Add other fields if needed
+}
 
 const FoodForm: React.FC = () => {
   const [imagePreview, setImagePreview] = useState<string | null>(null);
@@ -17,6 +40,55 @@ const FoodForm: React.FC = () => {
     }
   };
 
+  // vendor slug
+  const router = useRouter();
+  const [user, setUser] = useState<UserProfile | null>(null);
+  const [queryClient] = useState(() => new QueryClient());
+  const logout = useLogout(queryClient);
+
+  const { slug } = useParams(); // Get the slug directly from params
+  const [vendor, setVendor] = useState<any | null>(null); // State to store vendor details
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch vendor data as a separate function
+  const fetchVendor = async (slug: string) => {
+    try {
+      const response = await getVendorBySlug(slug); // Fetch vendor data using the slug
+
+      // Assuming response.data contains your expected vendor data
+      if (response?.data?.vendor) {
+        setVendor(response.data.vendor);
+      } else {
+        throw new Error("Vendor not found");
+      }
+    } catch (err) {
+      setError("Failed to fetch vendor details");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const token = getToken();
+    const userData = getUser();
+    if (!token || !userData) {
+      router.push("/login");
+    } else {
+      setUser(userData as UserProfile);
+    }
+
+    if (slug) {
+      fetchVendor(slug as string); // Call the fetchVendor function
+    }
+  }, [slug, router]);
+
+  if (!user) {
+    return <div>Loading...</div>;
+  }
+
+  if (!vendor) return null;
+
   return (
     <div className="grid md:grid-cols-2 gap-10">
       <form className="w-full mx-auto bg-white p-8 rounded-lg shadow-lg md:order-1 order-2">
@@ -183,5 +255,3 @@ const FoodForm: React.FC = () => {
 };
 
 export default FoodForm;
-
-