Merge pull request #7 from Abh1noob/master

hello

devsoc24-portal-fe/src/app/login/login-form.tsx

@@ -42,6 +42,9 @@ export default function LoginForm() {
       const { data } = await axios.post<APIResponse>(
         `${process.env.NEXT_PUBLIC_API_URL}/login`,
         { email: formVal.email, password: formVal.password },
+        {
+          withCredentials: true,
+        },
       );
       toast.update(toastId, {
         render: (

devsoc24-portal-fe/src/app/page.tsx

@@ -14,6 +14,7 @@ import {
   userProps,
 } from "@/store/store";
 import Loading from "./loading";
+import TrackComponent from "@/components/track/TrackComponent";
 
 interface ideaProps {
   message: string;
@@ -76,18 +77,18 @@ export default function HomePage() {
   const { user, setUser } = useUserStore();
   const [teamData, setTeamData] = useState<teamDataProps | null>(null);
 
-  const login = async () => {
-    const response = await axios.post(
-      `${process.env.NEXT_PUBLIC_API_URL}/login`,
-      {
-        email: "[email protected]",
-        password: "123456",
-      },
-      {
-        withCredentials: true,
-      },
-    );
-  };
+  // const login = async () => {
+  //   const response = await axios.post(
+  //     `${process.env.NEXT_PUBLIC_API_URL}/login`,
+  //     {
+  //       email: "[email protected]",
+  //       password: "123456",
+  //     },
+  //     {
+  //       withCredentials: true,
+  //     },
+  //   );
+  // };
 
   const fetchData = async () => {
     try {
@@ -162,7 +163,7 @@ export default function HomePage() {
 
   useEffect(() => {
     const fetchDataAndLogin = async () => {
-      await login();
+      // await login();
       await fetchData();
       await fetchIdea();
     };
@@ -201,33 +202,32 @@ export default function HomePage() {
   const router = useRouter();
 
   return (
-    <Suspense fallback={<Loading />}>
-      <main className="flex min-h-screen flex-col items-start overflow-x-hidden bg-[#F4F5FA]">
-        <div className="flex h-[10%] w-full items-center gap-x-8 bg-background px-6 py-2">
-          <Logo className="h-9/10 w-auto" />
-          <Image src={Dashtitle as HTMLImageElement} alt="title" />
-        </div>
-        <div className="mt-4 flex w-full flex-col gap-4 px-4 md:flex-row md:flex-wrap">
-          {team ? (
-            <CustomCard
-              title="Your Devsoc Team"
-              cardImage="teamCardImg"
-              cardContent="No Team Members Yet?"
-              cardDesc="Start A New Team or Join One"
-              buttonDetails={noTeamCard}
-            />
-          ) : (
-            <TeamCard {...teamData} />
-          )}
+    <main className="flex h-fit lg:h-screen flex-col items-start overflow-y-auto overflow-x-hidden bg-[#F4F5FA]">
+      <div className="flex h-[10%] w-full items-center gap-x-8 bg-background px-6 py-2">
+        <Logo className="h-9/10 w-auto" />
+        <Image src={Dashtitle as HTMLImageElement} alt="title" />
+      </div>
+      <div className="mt-4 flex h-fit w-full flex-col justify-evenly gap-4 overflow-y-auto px-4 md:flex-row lg:h-[85%]">
+        {team ? (
           <CustomCard
-            title="Idea Submission"
-            cardImage="ideaSubmissionImg"
-            cardContent="No Idea Submitted yet"
-            cardDesc="Submit Your Idea Before < date > <div time >"
-            buttonDetails={ideaCard}
+            title="Your Devsoc Team"
+            cardImage="teamCardImg"
+            cardContent="No Team Members Yet?"
+            cardDesc="Start A New Team or Join One"
+            buttonDetails={noTeamCard}
           />
-        </div>
-      </main>
-    </Suspense>
+        ) : (
+          <TeamCard {...teamData} />
+        )}
+        <CustomCard
+          title="Idea Submission"
+          cardImage="ideaSubmissionImg"
+          cardContent="No Idea Submitted yet"
+          cardDesc="Submit Your Idea Before < date > <div time >"
+          buttonDetails={ideaCard}
+        />
+        <TrackComponent />
+      </div>
+    </main>
   );
 }

devsoc24-portal-fe/src/app/signup/details/personal-details-form.tsx

@@ -21,7 +21,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 type PersonalDetailsFormValues = z.infer<typeof personalDetailsSchema>;
 
@@ -47,23 +47,32 @@ export default function PersonalDetails({
       gender: undefined,
     },
     mode: "onChange",
+    shouldUnregister: false,
   });
-
+  const [gender, setGender] = useState("");
   useEffect(() => {
     form.setValue("firstName", localStorage.getItem("first_name") ?? "");
     form.setValue("lastName", localStorage.getItem("last_name") ?? "");
     form.setValue("email", email ?? "");
     form.setValue("phoneNumber", localStorage.getItem("phone_number") ?? "");
     form.setValue("country", localStorage.getItem("country") ?? "+91");
+    const temp = localStorage.getItem("gender") as
+      | "Male"
+      | "Female"
+      | "Others"
+      | "Prefer Not to Say";
+
+    setGender(temp);
+  }, []);
+
+  useEffect(() => {
     form.setValue(
       "gender",
-      (localStorage.getItem("gender") as
-        | "Male"
-        | "Female"
-        | "Others"
-        | "Prefer Not to Say") ?? undefined,
+      gender as "Male" | "Female" | "Others" | "Prefer Not to Say",
     );
-  }, []);
+    setGender(form.getValues("gender"));
+    console.log("Form Values:", form.getValues());
+  }, [gender]);
 
   async function onSubmit(data: PersonalDetailsFormValues) {
     localStorage.setItem("first_name", data.firstName);
@@ -217,7 +226,10 @@ export default function PersonalDetails({
           render={({ field }) => (
             <FormItem>
               <FormLabel>Gender</FormLabel>
-              <Select onValueChange={field.onChange} defaultValue={field.value}>
+              <Select
+                onValueChange={field.onChange}
+                defaultValue={form.getValues("gender")}
+              >
                 <FormControl>
                   <SelectTrigger>
                     <SelectValue placeholder="Gender" />

devsoc24-portal-fe/src/app/test/page.tsx

@@ -0,0 +1,12 @@
+import TrackComponent from "@/components/track/TrackComponent";
+import React from "react";
+
+const Page = () => {
+  return (
+    <div className="h-screen w-screen bg-black flex items-center justify-center">
+      <TrackComponent />
+    </div>
+  );
+};
+
+export default Page;

devsoc24-portal-fe/src/components/customCard.tsx

@@ -23,7 +23,7 @@ function CustomCard(props: CardProps) {
 
   return (
     <>
-      <div className="h-fit w-full rounded-xl bg-white md:w-fit">
+      <div className="h-fit w-full rounded-xl bg-white md:w-[32vw]">
         <div className="pl-3 pt-2 font-semibold text-[#45464E]">{title}</div>
         <div className="flex flex-col items-center justify-center p-8">
           <div className="rounded-full border-[#E1E2E9] bg-[#F4F5FA] p-8">

devsoc24-portal-fe/src/components/teamCard.tsx

@@ -49,7 +49,7 @@ const TeamCard: React.FC<teamDataProps> = (props) => {
   return (
     <>
       <div>
-        <div className="h-fit w-full rounded-xl bg-white md:w-[400px]">
+        <div className="h-fit w-full rounded-xl bg-white md:w-[32vw]">
           <div className="pl-3 pt-2 font-semibold text-[#45464E]">
             Your Devsoc Team
           </div>

devsoc24-portal-fe/src/components/track/TrackCard.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import Image from "next/image";
+
+const TrackCard = (props: { name: string; imagesrc: string }) => {
+  return (
+    <div className="h-fit w-fit overflow-hidden rounded-2xl">
+      <Image
+        src={props.imagesrc}
+        alt="track image"
+        height={0}
+        width={0}
+        className="h-fit w-full"
+      />
+      <div className="flex h-[40px] w-full items-center bg-[#3B3B3B] pl-4 font-semibold text-white">
+        {props.name}
+      </div>
+    </div>
+  );
+};
+
+export default TrackCard;

devsoc24-portal-fe/src/components/track/TrackComponent.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import TrackCard from "./TrackCard";
+
+const tracks = [
+  {
+    imgsrc: "/images/trackImg1.svg",
+    name: "Secret Track 1",
+  },
+  {
+    imgsrc: "/images/trackImg1.svg",
+    name: "Secret Track 2",
+  },
+  {
+    imgsrc: "/images/trackImg1.svg",
+    name: "Secret Track 3",
+  },
+  {
+    imgsrc: "/images/trackImg1.svg",
+    name: "Secret Track 4",
+  },
+  {
+    imgsrc: "/images/trackImg1.svg",
+    name: "Secret Track 5",
+  },
+  {
+    imgsrc: "/images/trackImg1.svg",
+    name: "Secret Track 6",
+  },
+];
+const TrackComponent = () => {
+  return (
+    <div className="trackComponent h-full overflow-auto rounded-xl w-full md:w-[32vw] bg-white px-6">
+      <div className="pl-3 pt-2 font-semibold text-[#45464E]">
+        Track Details
+      </div>
+      <div className="my-6 flex w-full flex-col items-center gap-6">
+        {tracks.map((item, index) => (
+          <TrackCard imagesrc={item.imgsrc} name={item.name} key={index} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TrackComponent;

devsoc24-portal-fe/src/styles/globals.css

@@ -88,4 +88,22 @@
   /* Black color */
 
   /* Rounded corners */
+}
+
+/* Track Component Scrollbar */
+.trackComponent::-webkit-scrollbar {
+  width: 3px; /* Width of the scrollbar */
+}
+
+.trackComponent::-webkit-scrollbar-track {
+  background: #f1f1f1; /* Color of the scrollbar track */
+}
+
+.trackComponent::-webkit-scrollbar-thumb {
+  background: #888; /* Color of the scrollbar thumb */
+  border-radius: 6px; /* Roundness of the scrollbar thumb */
+}
+
+.trackComponent::-webkit-scrollbar-thumb:hover {
+  background: #555; /* Color of the scrollbar thumb on hover */
 }