From ad3e483f581c5c0fc053f1c526cb438b25a3ae48 Mon Sep 17 00:00:00 2001 From: Aswanth Vc Date: Sun, 3 Dec 2023 13:46:22 +0530 Subject: [PATCH 1/2] feat : Dashboard UserCard --- src/App.css | 4 +- src/apis/userApi.tsx | 4 +- src/assets/frlIf.png | Bin 0 -> 9739 bytes src/components/usercard/UserCard.module.css | 96 ++++++++++++++++++++ src/components/usercard/UserCard.tsx | 42 +++++++++ src/pages/dashboard/Dashboard.module.css | 23 ++++- src/pages/dashboard/Dashboard.tsx | 18 +++- src/pages/event/Event.module.css | 13 ++- src/types.tsx | 36 +++++--- 9 files changed, 213 insertions(+), 23 deletions(-) create mode 100644 src/assets/frlIf.png create mode 100644 src/components/usercard/UserCard.module.css create mode 100644 src/components/usercard/UserCard.tsx diff --git a/src/App.css b/src/App.css index 6bf4289a..44a54270 100644 --- a/src/App.css +++ b/src/App.css @@ -8,12 +8,12 @@ /* width */ ::-webkit-scrollbar { - width: 10px; + width: 5px; } /* Track */ ::-webkit-scrollbar-track { - background: #2f6838; + /* background: #2f6838; */ } /* Handle */ diff --git a/src/apis/userApi.tsx b/src/apis/userApi.tsx index f4574caf..8c709e5f 100644 --- a/src/apis/userApi.tsx +++ b/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; diff --git a/src/assets/frlIf.png b/src/assets/frlIf.png new file mode 100644 index 0000000000000000000000000000000000000000..7bdd0e0f0f1e91f6c8e86698c38b81164f1c0752 GIT binary patch literal 9739 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 literal 0 HcmV?d00001 diff --git a/src/components/usercard/UserCard.module.css b/src/components/usercard/UserCard.module.css new file mode 100644 index 00000000..f58d3aee --- /dev/null +++ b/src/components/usercard/UserCard.module.css @@ -0,0 +1,96 @@ +.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; + + .email { + font-size: 13px; + color: var(--color-3); + } + } + .participate { + width: calc(100% - 4px); + height: 100px; + border: 2px solid var(--color-black); + } + } +} + +@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; + } + } + } + } +} diff --git a/src/components/usercard/UserCard.tsx b/src/components/usercard/UserCard.tsx new file mode 100644 index 00000000..5b94f89e --- /dev/null +++ b/src/components/usercard/UserCard.tsx @@ -0,0 +1,42 @@ +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; +} + +const UserCard: React.FC = ({ details }) => { + // 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"; + return ( +
+
+
+ +
+
+

{details.name}

+ {details.college} + + {details.course} - {year} + +
+
+
+ + {details.email} + {details.userId}    + +
{""}
+
+
+ ); +}; + +export default UserCard; diff --git a/src/pages/dashboard/Dashboard.module.css b/src/pages/dashboard/Dashboard.module.css index b752023f..c22e341c 100644 --- a/src/pages/dashboard/Dashboard.module.css +++ b/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; + } } } diff --git a/src/pages/dashboard/Dashboard.tsx b/src/pages/dashboard/Dashboard.tsx index c0019c8b..614cbcb1 100644 --- a/src/pages/dashboard/Dashboard.tsx +++ b/src/pages/dashboard/Dashboard.tsx @@ -1,10 +1,13 @@ 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"; interface DashboardProps { // Dashboard: _Dashboard; } @@ -12,15 +15,17 @@ interface DashboardProps { const Dashboard: React.FC = ({}) => { var { setLoaderStatus } = useLoader(); var { setToastStatus } = useToast(); + const [user, setUserDetails] = useState<_UserDetails | 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", @@ -35,7 +40,12 @@ const Dashboard: React.FC = ({}) => { return (
- Dashboard + {/* Dashboard */} + {user && } + + Please click 'Register' on the events you wish to participate + +
diff --git a/src/pages/event/Event.module.css b/src/pages/event/Event.module.css index ba9e38e8..a33377e1 100644 --- a/src/pages/event/Event.module.css +++ b/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; + } + } +} diff --git a/src/types.tsx b/src/types.tsx index a52bfa8a..0c288d63 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -23,17 +23,17 @@ export type _EventInfo = { teams: any[]; } & _Event; -export type _UserDetails = { - name: string | undefined; - email: string | undefined; - phone: string | undefined; - college: string | undefined; - course: string | undefined; - year: string | undefined; - password: string | undefined; - // dob: Date, - // picture: string | null, -}; +// export type _UserDetails = { +// name: string | undefined; +// email: string | undefined; +// phone: string | undefined; +// college: string | undefined; +// course: string | undefined; +// year: string | undefined; +// password: string | undefined; +// // dob: Date, +// // picture: string | null, +// }; export type _User = { userId: string | null; @@ -50,6 +50,20 @@ export type _User = { expiry: string; }; +/* User Details */ + +export type _UserDetails = { + userId: string; + name: string; + email: string; + picture: string | null; + gctian: boolean; + college: string; + course: string; + year: number; + step: number; +}; + /* User Login Data */ export type _UserLogin = { From f6cc1ff7f90788719a7b9b97f5e4877e42cc6433 Mon Sep 17 00:00:00 2001 From: Aswanth Vc Date: Sun, 3 Dec 2023 17:54:32 +0530 Subject: [PATCH 2/2] Dashboard User card updated --- src/apis/eventApi.tsx | 29 ++++++++++++++++++++- src/components/usercard/UserCard.module.css | 26 ++++++++++++++++-- src/components/usercard/UserCard.tsx | 23 ++++++++++++++-- src/pages/dashboard/Dashboard.tsx | 8 +++++- 4 files changed, 80 insertions(+), 6 deletions(-) diff --git a/src/apis/eventApi.tsx b/src/apis/eventApi.tsx index 1f3adf15..7ea299db 100644 --- a/src/apis/eventApi.tsx +++ b/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, diff --git a/src/components/usercard/UserCard.module.css b/src/components/usercard/UserCard.module.css index f58d3aee..4866e668 100644 --- a/src/components/usercard/UserCard.module.css +++ b/src/components/usercard/UserCard.module.css @@ -55,6 +55,8 @@ border-radius: 0 0 20px 20px; display: flex; justify-content: space-between; + color: var(--color-orange); + font-weight: 600; .email { font-size: 13px; @@ -62,9 +64,29 @@ } } .participate { - width: calc(100% - 4px); + width: calc(100% - 0px); height: 100px; - border: 2px solid var(--color-black); + 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; + } + } } } } diff --git a/src/components/usercard/UserCard.tsx b/src/components/usercard/UserCard.tsx index 5b94f89e..4babd92c 100644 --- a/src/components/usercard/UserCard.tsx +++ b/src/components/usercard/UserCard.tsx @@ -5,15 +5,28 @@ import defaultProfile from "../../assets/frlIf.png"; interface UserCardProps { details: _UserDetails; + participations: [] | null; } -const UserCard: React.FC = ({ details }) => { +const UserCard: React.FC = ({ 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 = "Not Registered in any events!"; + else { + for (var i = 0; i < participations!.length; i++) { + pars += "" + (participations![i] as any)["name"] + ""; + // if (i < participations!.length - 1) { + // pars += ", "; + // } + } + } return (
@@ -33,7 +46,13 @@ const UserCard: React.FC = ({ details }) => { {details.email} {details.userId}    -
{""}
+
+
Registered Events
+
+
); diff --git a/src/pages/dashboard/Dashboard.tsx b/src/pages/dashboard/Dashboard.tsx index 614cbcb1..af0079c5 100644 --- a/src/pages/dashboard/Dashboard.tsx +++ b/src/pages/dashboard/Dashboard.tsx @@ -8,6 +8,7 @@ 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; } @@ -16,7 +17,9 @@ const Dashboard: React.FC = ({}) => { 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: _UserDetails | null) => { @@ -34,6 +37,9 @@ const Dashboard: React.FC = ({}) => { redirect("/register/details"); return; } + myEvents(setLoaderStatus, setToastStatus).then((pars) => { + setParEvents(pars); + }); } ); }, []); @@ -41,7 +47,7 @@ const Dashboard: React.FC = ({}) => {
{/* Dashboard */} - {user && } + {user && } Please click 'Register' on the events you wish to participate