Merge pull request #12 from aswanthabam/feature

feat : Dashboard Basic

src/App.css

@@ -8,12 +8,12 @@
 
 /* width */
 ::-webkit-scrollbar {
-  width: 10px;
+  width: 5px;
 }
 
 /* Track */
 ::-webkit-scrollbar-track {
-  background: #2f6838;
+  /* background: #2f6838; */
 }
 
 /* Handle */

src/apis/eventApi.tsx

@@ -1,5 +1,32 @@
 import { _EventInfo } from "../types";
-import { publicRouter } from "./api";
+import {
+  ResponseStatus,
+  ResponseType,
+  publicRouter,
+  validateResponse,
+} from "./api";
+
+export const myEvents = async (
+  setLoading: (status: boolean) => void,
+  setToast: (
+    status: boolean,
+    message: string | null,
+    hideAfter: number | null
+  ) => void
+): Promise<[] | null> => {
+  setLoading(true);
+  var res = publicRouter.post("/api/v2/events/myEvents");
+  var val = await validateResponse(res);
+  if (val.status == ResponseStatus.SUCCESS) {
+    if (val.contentType == ResponseType.DATA) {
+      var data = val.data.data;
+      var events: [] = (data as any)["events"];
+      return events;
+    }
+  }
+  setToast(true, val.data.message, 3000);
+  return null;
+};
 
 export const getEvents = async (
   eventId: string | null | undefined,

src/apis/userApi.tsx

@@ -17,7 +17,7 @@ export const userDetails = async (
     message: string | null,
     hideAfter: number | null
   ) => void
-): Promise<{} | null | undefined> => {
+): Promise<_UserDetails | null> => {
   setLoading(true);
   var res = publicRouter.post("/api/v2/users/details");
   var val = await validateResponse(res);
@@ -28,7 +28,7 @@ export const userDetails = async (
     var step = (val.data.data as any)["step"] as number;
     localStorage.setItem("step", step + "");
     setLoading(false);
-    return val.data.data as {} | null | undefined;
+    return val.data.data as _UserDetails;
   }
   setLoading(false);
   return null;

src/components/usercard/UserCard.module.css

@@ -0,0 +1,118 @@
+.userCard {
+  /* width: calc(100% - 40px); */
+  width: calc(100% - 40px);
+  height: 60vw;
+  max-width: 500px;
+  max-height: 300px;
+  padding: 20px;
+  border-radius: 20px;
+  position: relative;
+  background: var(--color-2);
+
+  .top {
+    width: 100%;
+    display: flex;
+    gap: 50px;
+    align-items: center;
+    .img {
+      width: 60px;
+      height: 60px;
+      & img {
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        border: 5px solid var(--color-4);
+      }
+    }
+
+    .details {
+      & span {
+        display: block;
+      }
+      .name {
+        font-size: 20px;
+      }
+      .college {
+        font-size: 13px;
+        color: var(--color-4);
+      }
+      .course {
+        font-size: 10px;
+        color: var(--color-4);
+      }
+    }
+  }
+
+  .bottom {
+    margin-top: 20px;
+    .userId {
+      position: absolute;
+      background: var(--color-4);
+      width: calc(100% - 20px);
+      bottom: 0;
+      left: 0;
+      padding: 10px;
+      border-radius: 0 0 20px 20px;
+      display: flex;
+      justify-content: space-between;
+      color: var(--color-orange);
+      font-weight: 600;
+
+      .email {
+        font-size: 13px;
+        color: var(--color-3);
+      }
+    }
+    .participate {
+      width: calc(100% - 0px);
+      height: 100px;
+      padding: 10px 0;
+      /* padding: 10px; */
+      border-top: 2px solid var(--color-4);
+      color: var(--color-black);
+      & h5 {
+        font-size: 15px;
+      }
+      .events {
+        display: block;
+        margin-top: 10px;
+        font-size: 13px;
+        color: var(--color-green);
+
+        & span {
+          display: inline-block;
+          background: var(--color-3);
+          padding: 5px 10px;
+          border-radius: 5px;
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .userCard {
+    .top {
+      .img {
+        width: 100px;
+        height: 100px;
+        & img {
+          width: 100px;
+          height: 100px;
+        }
+      }
+      .details {
+        .name {
+          font-size: 30px;
+        }
+        .college {
+          font-size: 20px;
+        }
+        .course {
+          font-size: 15px;
+        }
+      }
+    }
+  }
+}

src/components/usercard/UserCard.tsx

@@ -0,0 +1,61 @@
+import style from "./UserCard.module.css";
+import { _Event, _UserDetails } from "../../types";
+import { useEffect } from "react";
+import defaultProfile from "../../assets/frlIf.png";
+
+interface UserCardProps {
+  details: _UserDetails;
+  participations: [] | null;
+}
+
+const UserCard: React.FC<UserCardProps> = ({ details, participations }) => {
+  //   useEffect(() => {});
+  var year: string;
+  if (details.year == 1) year = "1st Year";
+  else if (details.year == 2) year = "2nd Year";
+  else if (details.year == 3) year = "3rd Year";
+  else year = details.year + " Year";
+  console.log(participations);
+  var pars = "";
+  if (!participations || participations!.length < 1)
+    pars = "<span>Not Registered in any events!</span>";
+  else {
+    for (var i = 0; i < participations!.length; i++) {
+      pars += "<span>" + (participations![i] as any)["name"] + "</span>";
+      //   if (i < participations!.length - 1) {
+      //     pars += ", ";
+      //   }
+    }
+  }
+  return (
+    <div className={style.userCard}>
+      <div className={style.top}>
+        <div className={style.img}>
+          <img src={details.picture ? details.picture : defaultProfile} />
+        </div>
+        <div className={style.details}>
+          <h2 className={style.name}>{details.name}</h2>
+          <span className={style.college}>{details.college}</span>
+          <span className={style.course}>
+            {details.course} - {year}
+          </span>
+        </div>
+      </div>
+      <div className={style.bottom}>
+        <span className={style.userId}>
+          <span className={style.email}>{details.email}</span>
+          <span>{details.userId}&nbsp; &nbsp;</span>
+        </span>
+        <div className={style.participate}>
+          <h5>Registered Events</h5>
+          <div
+            className={style.events}
+            dangerouslySetInnerHTML={{ __html: pars }}
+          ></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserCard;

src/pages/dashboard/Dashboard.module.css

@@ -2,7 +2,26 @@
   width: 100%;
   height: auto;
   .page {
-    width: calc(100% - 100px);
-    padding: 50px;
+    width: calc(100% - 30px);
+    padding: 15px;
+
+    .info {
+      display: block;
+      margin: 20px 0;
+      width: calc(100% - 40px);
+      padding: 20px;
+      border-radius: 20px;
+      text-align: center;
+      background: var(--color-green);
+    }
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .dashboard {
+    .page {
+      width: calc(100% - 100px);
+      padding: 50px;
+    }
   }
 }

src/pages/dashboard/Dashboard.tsx

@@ -1,26 +1,34 @@
 import style from "./Dashboard.module.css";
 import Footer from "../../components/footer/Footer";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { userDetails } from "../../apis/userApi";
 import { useLoader } from "../../components/toploader/useLoader";
 import { useToast } from "../../components/toast/useToast";
 import { useNavigate } from "react-router-dom";
+import { _UserDetails } from "../../types";
+import UserCard from "../../components/usercard/UserCard";
+import EventList from "../../components/eventlist/EventList";
+import { myEvents } from "../../apis/eventApi";
 interface DashboardProps {
   // Dashboard: _Dashboard;
 }
 
 const Dashboard: React.FC<DashboardProps> = ({}) => {
   var { setLoaderStatus } = useLoader();
   var { setToastStatus } = useToast();
+  const [user, setUserDetails] = useState<_UserDetails | null>();
+  const [parEvents, setParEvents] = useState<[] | null>(null);
   var redirect = useNavigate();
+
   useEffect(() => {
     userDetails(setLoaderStatus, setToastStatus).then(
-      (val: {} | null | undefined) => {
+      (val: _UserDetails | null) => {
+        setUserDetails(val);
         if (!val) {
           setToastStatus(true, "Please login to continue!", 3000);
           redirect("/register");
           return;
-        } else if (((val as any)["step"] as number) < 2) {
+        } else if (val.step < 2) {
           setToastStatus(
             true,
             "Your registration is not complete! Please complete the registration to contine",
@@ -29,13 +37,21 @@ const Dashboard: React.FC<DashboardProps> = ({}) => {
           redirect("/register/details");
           return;
         }
+        myEvents(setLoaderStatus, setToastStatus).then((pars) => {
+          setParEvents(pars);
+        });
       }
     );
   }, []);
   return (
     <div className={style.dashboard}>
       <div className={style.page}>
-        <span>Dashboard</span>
+        {/* <span>Dashboard</span> */}
+        {user && <UserCard details={user!} participations={parEvents} />}
+        <span className={style.info}>
+          Please click 'Register' on the events you wish to participate
+        </span>
+        <EventList />
       </div>
       <Footer />
     </div>

src/pages/event/Event.module.css

@@ -1,7 +1,7 @@
 .event {
   .page {
-    width: calc(100% - 100px);
-    padding: 50px;
+    width: calc(100% - 30px);
+    padding: 15px;
 
     .image {
       width: 100%;
@@ -42,3 +42,12 @@
     }
   }
 }
+
+@media screen and (min-width: 768px) {
+  .event {
+    .page {
+      width: calc(100% - 100px);
+      padding: 50px;
+    }
+  }
+}