home initila render

app/api/gigs/route.ts

@@ -12,7 +12,9 @@ export async function GET(request: NextRequest) {
     const userId = await getDataFromToken(request);
 
     // Fetch all gigs that note owned by the logged user
-    const allGigs = await Gig.find({ user_id: { $ne: userId } });
+    const allGigs = await Gig.find({ user_id: { $ne: userId } }).populate(
+      "user_id"
+    );
 
     // Fetch the list of favorites for the current user
     const userFavorites = await Favourite.find({ user_id: userId });

app/dashboard/home/page.tsx

@@ -1,9 +1,11 @@
-import React from "react";
+import Home from "@/components/sections/Home";
 
-type Props = {};
-
-const page = (props: Props) => {
-  return <div className="text-white text-5xl">Home</div>;
+const page = () => {
+  return (
+    <div className="">
+      <Home />
+    </div>
+  );
 };
 
 export default page;

app/dashboard/layout.tsx

@@ -1,4 +1,4 @@
-import FetchUser from "@/components/fetchDataComponents/FetchUser";
+import FetchData from "@/components/fetchDataComponents/FetchUser";
 import HeaderNavBar from "@/components/navBars/HeaderNavBar";
 import MobileNavBar from "@/components/navBars/MobileNavBar";
 import SideNavBar from "@/components/navBars/SideNavBar";
@@ -21,7 +21,7 @@ export default function RootLayout({
       <div className="hidden max-2sm:flex">
         <MobileNavBar />
       </div>
-      <FetchUser />
+      <FetchData />
       <HeaderNavBar />
       <div className="flex h-full">
         <SideNavBar />

components/completeFormParts/PartOne.tsx

@@ -31,8 +31,8 @@ const PartOne = ({ active, type }: Props) => {
                 } `}
                 quality={100}
                 src={imageStored?.fileUrl}
-                height={90}
-                width={90}
+                height={300}
+                width={300}
                 alt="profile pic"
               />
             </div>
@@ -44,8 +44,8 @@ const PartOne = ({ active, type }: Props) => {
                 } `}
                 quality={100}
                 src={image?.url}
-                height={90}
-                width={90}
+                height={300}
+                width={300}
                 alt="profile pic"
               />
             </div>

components/fetchDataComponents/FetchUser.tsx

@@ -2,13 +2,15 @@
 import { useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { currentUser } from "@/store/UserSlice";
+import { getAllGigs } from "@/store/gigSlice";
 
-const FetchUser = () => {
+const FetchData = () => {
   const dispatch = useDispatch<any>();
   useEffect(() => {
     dispatch(currentUser());
+    dispatch(getAllGigs());
   }, []);
   return <div className="hidden">fetchUser</div>;
 };
 
-export default FetchUser;
+export default FetchData;

components/form/InputCreateGig.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { handleGigForm, addFeature } from "@/store/newGigSlice";
+import { handleGigForm, addFeature } from "@/store/gigSlice";
 import React, { ChangeEvent } from "react";
 import { useDispatch } from "react-redux";
 

components/form/InputSelectCategory.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { handleGigForm } from "@/store/newGigSlice";
+import { handleGigForm } from "@/store/gigSlice";
 import React, { useState } from "react";
 import { useDispatch } from "react-redux";
 import { Categorys } from "@/constants/domaineExpertisme";

components/form/Quill.tsx

@@ -4,7 +4,7 @@ import dynamic from "next/dynamic";
 import { useDispatch } from "react-redux";
 import React, { useState, useEffect } from "react";
 import "react-quill/dist/quill.snow.css";
-import { handleGigForm } from "@/store/newGigSlice";
+import { handleGigForm } from "@/store/gigSlice";
 const ReactQuill = dynamic(() => import("react-quill"), {
   ssr: false,
 });

components/form/UploadImageGigBtn.tsx

@@ -2,7 +2,7 @@
 import { OurFileRouter } from "@/app/api/uploadthing/core";
 import { UploadButton } from "@uploadthing/react";
 import { useDispatch } from "react-redux";
-import { handleGigForm } from "@/store/newGigSlice";
+import { handleGigForm } from "@/store/gigSlice";
 import {
   setImageInfo,
   setImageStatusToFailed,

components/sections/Home.tsx

@@ -0,0 +1,92 @@
+"use client";
+import { useAppSelector } from "@/store/store";
+import Image from "next/image";
+import { hearthEmpty, etoile } from "@/public/assets";
+const Home = () => {
+  const gigs: any = useAppSelector((state) => state.gigs.data);
+  const statusGetAllGigs: any = useAppSelector(
+    (state) => state.gigs.statusGetAllGigs
+  );
+
+  if (statusGetAllGigs === "loading")
+    return <div className="text-white text-5xl">loading ....</div>;
+  console.log(gigs.gigs);
+  if (statusGetAllGigs === "succeeded")
+    return (
+      <div className="text-white text-5xl grid grid-cols-3 max-lg:grid-cols-2 max-lg:mx-16 max-sm:grid-cols-1 max-sm:mx-20  gap-16 mt-8 mx-10">
+        {gigs.gigs.map((gig: any) => {
+          return (
+            <div className="bg-blue-dark-4 rounded-[20px] border border-white pb-4">
+              {/* container 1 */}
+              <div className="relative">
+                {/* image */}
+                <Image
+                  src={gig.picture.fileUrl}
+                  alt={gig.picture.fileKey}
+                  className="h-[20vh] w-full rounded-t-[20px] border-b border-white"
+                  width={1000}
+                  height={1000}
+                  quality={100}
+                />
+                <Image
+                  src={hearthEmpty}
+                  alt="hearth empty"
+                  className="absolute cursor-pointer top-4 right-4 "
+                  width={20}
+                  height={20}
+                />
+              </div>
+              {/* container 2 */}
+              <div>
+                <div className="flex justify-between pt-4 px-2 items-center">
+                  {/* gig owner icon profile */}
+                  <div className="flex items-center space-x-2">
+                    <Image
+                      className="rounded-full border border-white h-[25px] w-[25px]"
+                      src={gig.user_id.picture.fileUrl}
+                      alt={gig.user_id.picture.fileKey}
+                      width={200}
+                      height={200}
+                    />
+                    <p className="font-tajwal text-[12px]">
+                      {gig.user_id.firstName}
+                    </p>
+                  </div>
+                  {/* gig category */}
+                  <h3 className="text-[14px] text-shadow-green">
+                    {gig.category}
+                  </h3>
+                </div>
+                {/*  */}
+                <div className="font-tajwal text-[16px] pt-4 px-2 tracking-wide leading-6">
+                  {gig.title}
+                </div>
+                {/* gig rating */}
+                <div className="flex px-2 font-tajwal pt-2 space-x-1 items-center">
+                  <Image
+                    className="h-[17px] w-[18px]"
+                    src={etoile}
+                    alt="etoile"
+                    width={200}
+                    height={200}
+                  />
+                  <p className="text-[16px] text-shadow-green">
+                    {gig.rating}.0
+                  </p>
+                  <p className="text-[16px] text-darkentwo">(0)</p>
+                </div>
+
+                {/* gig price */}
+                <h1 className="text-[17px] text-light-green font-bold tracking-wide font-tajwal pt-4 px-2">
+                  <span>From </span>
+                  {gig.user_id.country}${gig.price}
+                </h1>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+};
+
+export default Home;

hooks/useAddNewGig.ts

@@ -4,7 +4,7 @@ import {
   clearGig,
   clearStatusGig,
   handleGigForm,
-} from "@/store/newGigSlice";
+} from "@/store/gigSlice";
 
 import { Toastfailed, ToastLoading, Toastsuccess } from "@/helpers/Toast";
 import { useRouter } from "next/navigation";

public/assets/index.ts

@@ -32,6 +32,7 @@ import ringFill from "./ringFill.png";
 import ringWhite from "./ringWhite.png";
 import arrowRight from "./arrow.png";
 import arrowLeft from "./arrow2.png";
+import etoile from "./etoile.png";
 
 export {
   logo,
@@ -68,4 +69,5 @@ export {
   ringFill,
   arrowRight,
   arrowLeft,
+  etoile,
 };

store/newGigSlice.ts → store/gigSlice.ts

@@ -14,6 +14,16 @@ const instance = axios.create({
   },
 });
 
+// get all gigs
+export const getAllGigs = createAsyncThunk("gigs/all", async () => {
+  try {
+    const response = await instance.get("/gigs");
+    return response.data;
+  } catch (error: any) {
+    return new Error(error.message);
+  }
+});
+
 // Add a new gig
 export const addGig = createAsyncThunk(
   "gigs/add",
@@ -31,6 +41,7 @@ export const addGig = createAsyncThunk(
 const initialState = {
   data: [],
   statusAddGig: "",
+  statusGetAllGigs: "",
   gig: {
     picture: {
       fileUrl: "",
@@ -47,6 +58,7 @@ const initialState = {
     user_id: "",
   },
   errorAddGig: "",
+  errorGetAllGigs: "",
 };
 
 const gigSlice = createSlice({
@@ -88,6 +100,17 @@ const gigSlice = createSlice({
       .addCase(addGig.rejected, (state, { payload }: any) => {
         state.statusAddGig = "failed";
         state.errorAddGig = payload.response.data.message;
+      })
+      .addCase(getAllGigs.pending, (state) => {
+        state.statusGetAllGigs = "loading";
+      })
+      .addCase(getAllGigs.fulfilled, (state, { payload }) => {
+        state.statusGetAllGigs = "succeeded";
+        state.data = payload;
+      })
+      .addCase(getAllGigs.rejected, (state, { payload }: any) => {
+        state.statusGetAllGigs = "failed";
+        state.errorGetAllGigs = payload.response.data.message;
       });
   },
 });

store/store.ts

@@ -7,7 +7,7 @@ import UserSlice from "./UserSlice";
 import CompleteProfileSlice from "./CompleteProfileSlice";
 import UploadProfilePictureSlice from "./UploadProfilePictureSlice";
 import modalSlice from "./modalSlice";
-import GigSlice from "./newGigSlice";
+import GigSlice from "./gigSlice";
 const store = configureStore({
   reducer: {
     welcome: welcomeSlice,

tailwind.config.js

@@ -31,13 +31,15 @@ module.exports = {
         "blue-dark-1": "#1B1B27",
         "blue-dark-2": "#15192B",
         "blue-dark-3": "#161622",
+        "blue-dark-4": "#121417",
         "light-white": "#C7D8EB",
         "light-green": "#A3DE83",
         "dark-green": "#08BF31",
         "shadow-green": "#9B9B1F",
         golden: "rgba(254, 197, 118, 0.54)",
         bluen: "rgba(199, 216, 235, 0.40)",
         darken: "rgba(63, 63, 70, 0.83)",
+        darkentwo: "rgba(183, 183, 151, 0.58)",
       },
       fontFamily: {
         sans: ["Mirza", "cursive"],