Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat : Add Conditional Rendering for Event Prerequisites #42

Merged
merged 22 commits into from
May 2, 2024
Merged

feat : Add Conditional Rendering for Event Prerequisites #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
a21f716
Add Conditional Rendering for Event Prerequisites
Vyshnav001 Apr 23, 2024
28f49b7
Remove unnecessary console.log statement
Vyshnav001 Apr 23, 2024
fb4c244
Fix import statement for tiaraFont in register/page.tsx
rabilrbl Apr 23, 2024
9867272
Revert "Fix import statement for tiaraFont in register/page.tsx"
rabilrbl Apr 23, 2024
3cdca67
Merge pull request #41 from tiarasjec/main
Vyshnav001 Apr 23, 2024
498e785
Merge branch 'main' of https://github.com/tiarasjec/website into cards
Vyshnav001 Apr 25, 2024
0157891
Refactor button component to use the updated tiaraFont class name
Vyshnav001 Apr 25, 2024
541d1f4
Refactor page component to include link for registration
Vyshnav001 Apr 25, 2024
0ce6b57
Add link to card item in EventsPage component
Vyshnav001 Apr 25, 2024
948ba99
add session functionality for dynamic rendering of the Register button
Vyshnav001 Apr 25, 2024
95774f9
Refactor image and cost display in event page component
Vyshnav001 Apr 28, 2024
53c5fe8
update coordinator details
Vyshnav001 Apr 28, 2024
0902c4b
Merge branch 'main' of https://github.com/tiarasjec/website into cards
Vyshnav001 Apr 29, 2024
cb3931b
Update grid class in page.tsx to use lg breakpoint instead of xl
Vyshnav001 Apr 29, 2024
70dee9e
update coordinator detials
Vyshnav001 Apr 29, 2024
87c0e8d
Refactor event card rendering logic in page.tsx
Vyshnav001 Apr 29, 2024
5ba3598
add phone number with anchor tag
Vyshnav001 Apr 30, 2024
2decd1b
Update styling
Vyshnav001 May 1, 2024
155d3ec
Refactor event page styling
Vyshnav001 May 1, 2024
f72c743
fix: large screen styling issue
rabilrbl May 1, 2024
bc46713
Update postinstall script in package.json
rabilrbl May 1, 2024
75b5769
change register button to bottom
Vyshnav001 May 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"build": "next build",
"start": "next start",
"lint": "next lint",
"postinstall": "prisma generate && prisma migrate deploy"
"postinstall": "prisma generate"
},
"prisma": {},
"dependencies": {
Expand Down
273 changes: 159 additions & 114 deletions src/app/(content)/events/[category]/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,139 +5,184 @@ import Image from "next/image";
import { usePathname } from "next/navigation";
import Loading from "@/app/loading";
import { EncryptButton } from "@components/ui/hover/button";
import { cn } from "@/lib/utils";
import Link from "next/link";
import { tiaraFont } from "@/lib/fonts";

export interface Event {
name: string;
team: string;
description: string;
costs: number;
rules: string[];
prerequisites: string[];
general_rules: string[];
thumbnail: string;
startTime: string;
endTime: string;
// costs: string;
facultyCoordinators: FacultyCoordinator[];
studentCoordinators: StudentCoordinator[];
name: string;
team: string;
description: string;
costs: number;
rules: string[];
prerequisites: string[];
general_rules: string[];
thumbnail: string;
startTime: string;
endTime: string;
// costs: string;
facultyCoordinators: FacultyCoordinator[];
studentCoordinators: StudentCoordinator[];
}

export interface FacultyCoordinator {
name: string;
phone: string;
name: string;
phone: string;
}

export interface StudentCoordinator {
name: string;
phone: string;
name: string;
phone: string;
}

const Page = () => {
const [eventInfo, setEventInfo] = useState<Event>();
const pathname = usePathname();
const [loading, setLoading] = useState<boolean>(true);
const [eventInfo, setEventInfo] = useState<Event>();
const pathname = usePathname();
const [loading, setLoading] = useState<boolean>(true);

useEffect(() => {
setLoading(true);
const [, , category, path] = pathname.split("/");
fetch(`/api/events/${category}/${path}`)
.then((response) => response.json())
.then((dataList) => {
setEventInfo(dataList);
new Promise((resolve) => setTimeout(resolve, 5000));
setLoading(false);
})
.catch((error) => console.error("Error fetching events:", error));
}, [pathname]);
const startTime = eventInfo?.startTime ? new Date(eventInfo.startTime) : null;
const formattedDate = startTime ? startTime.getDate() : "";
const formattedTime = startTime
? startTime.toLocaleTimeString("en-US", {
hour: "2-digit",
minute: "2-digit",
})
: "";
const eventName = eventInfo?.name;
const parts = eventName?.split(/\(([^)]+)\)/);
return (
<>
{/* Hero */}
{loading ? (
<Loading />
) : (
<div className="w-full mt-32">
<div className="w-full h-full xl:grid grid-cols-2 sm:flex flex-col">
<div className="">
<div className="w-full">
<h1 className="text-3xl mt-3 font-bold text-center">{eventInfo?.name}</h1>
<p className=" mt-4 text-xl text-center">{eventInfo?.description}</p>
</div>
{/* <div className="bg-white rounded-xl flex w-3/6 h-10 text-black text-2xl justify-center items-center mt-4 font-tiara ml-4">
useEffect(() => {
setLoading(true);
const [, , category, path] = pathname.split("/");
fetch(`/api/events/${category}/${path}`)
.then((response) => response.json())
.then((dataList) => {
setEventInfo(dataList);
setLoading(false);
})
.catch((error) => console.error("Error fetching events:", error));
}, [pathname]);
const startTime = eventInfo?.startTime ? new Date(eventInfo.startTime) : null;
const formattedDate = startTime ? startTime.getDate() : "";
const formattedTime = startTime
? startTime.toLocaleTimeString("en-US", {
hour: "2-digit",
minute: "2-digit",
})
: "";
const eventName = eventInfo?.name;
const parts = eventName?.split(/\(([^)]+)\)/);
return (
<>
{/* Hero */}
{loading ? (
<Loading />
) : (
<div className="container w-full mt-32 px-5 mx-auto">
<div className="w-full h-full lg:grid grid-cols-2 sm:flex flex-col mx-auto">
<div className="mx-auto">
<div className="w-full mt-5 2xl:w-11/12 mx-auto ">
<h1 className="text-4xl font-bold ml-4 2xl:text-6xl ">
{eventInfo?.name}
</h1>
<p className="mt-4 ml-4 text-2xl 2xl:text-4xl">
{eventInfo?.description}
</p>
</div>
{/* <div className="bg-white rounded-xl flex w-3/6 h-10 text-black text-2xl justify-center items-center mt-4 font-tiara ml-4">
<span className="">
{formattedDate.toString().toLowerCase()}th may -{" "}
{formattedTime.toString().toLowerCase()}
</span>
</div> */}
<div className="w-full mt-5">
<h1 className="text-2xl font-bold text-tiara_red ml-4">Prerequisites</h1>
<ul className="mt-4 ml-5">
{eventInfo?.prerequisites.map((prerequisite, index) => (
<li className="text-lg list-disc marker:text-tiara_red" key={index}>
{prerequisite}
</li>
))}
</ul>
</div>
<div className="w-full mt-5">
<h1 className="text-2xl font-bold text-tiara_red ml-4">Rules</h1>
<ul className="mt-4 ml-5">
{eventInfo?.rules.map((rules, index) => (
<li className="text-lg list-disc marker:text-tiara_red" key={index}>
{rules}
</li>
))}
</ul>
</div>
<div className="w-full mt-5">
<h1 className="text-2xl font-bold text-tiara_red ml-4">Event Coordinators</h1>
<ul className="mt-4 ml-5">
{eventInfo?.studentCoordinators.map((studentCoordinators, index) => (
<li className="text-lg list-disc marker:text-tiara_red" key={index}>
{studentCoordinators.name} {" | "} {studentCoordinators.phone}
</li>
))}
</ul>
</div>
</div>
<div className="w-full mt-10 2xl:w-11/12 mx-auto ">
{eventInfo && eventInfo.prerequisites.length === 0 ? (
""
) : (
<>
<h1 className="text-2xl font-bold text-tiara_red ml-4 2xl:text-4xl">
Prerequisites
</h1>
<ul className="mt-4 ml-5">
{eventInfo?.prerequisites.map((prerequisite, index) => (
<li
className="text-lg list-disc marker:text-tiara_red 2xl:text-2xl"
key={index}
>
{prerequisite}
</li>
))}
</ul>
</>
)}
</div>
<div className="w-full mt-5 2xl:w-11/12 mx-auto ">
<h1 className="text-2xl font-bold text-tiara_red ml-4 2xl:text-4xl">
Rules
</h1>
<ul className="mt-4 ml-5">
{eventInfo?.rules.map((rules, index) => (
<li
className="text-lg list-disc marker:text-tiara_red 2xl:text-2xl"
key={index}
>
{rules}
</li>
))}
</ul>
</div>
<div className="w-full mt-5 2xl:w-11/12 mx-auto">
<h1 className="text-2xl font-bold text-tiara_red ml-4 2xl:text-4xl">
Event Coordinators
</h1>
<ul className="mt-4 ml-5">
{eventInfo?.studentCoordinators.map(
(studentCoordinators, index) => (
<li
className="text-lg list-disc marker:text-tiara_red 2xl:text-2xl"
key={index}
>
{studentCoordinators.name} {" | "}{" "}
<a
className=""
href={`tel:+91${studentCoordinators.phone}`}
>
{studentCoordinators.phone}
</a>{" "}
</li>
)
)}
</ul>
</div>
</div>

<div className="bg-black flex justify-center items-start">
<div>
{/* <h1 className="text-3xl font-bold text-white">{eventInfo?.name}</h1> */}
<Image
src={eventInfo?.thumbnail || ""}
width={500}
height={500}
alt="image"
className="rounded-md shadow-lg shadow-slate-500/50 hover:shadow-slate-500 hover:scale-110 hover:mt-5 transition-all duration-300 w-[500px] mt-16"
/>
<div className="mt-8 text-center font-tiara">
<span>
{" "}
cost ₹ <span className="text-tiara_red">{eventInfo?.costs}</span>{" "}
</span>
</div>
<div className="mt-8 text-center">
<EncryptButton targetText="Register Now" />
</div>
</div>
<div></div>
</div>
</div>
<div className=" flex justify-center items-start p-10">
<div>

{/* <h1 className="text-3xl font-bold text-white">{eventInfo?.name}</h1> */}
<Image
src={eventInfo?.thumbnail || ""}
width={400}
height={400}
alt="image"
className=" rounded-lg shadow-lg shadow-slate-500/50 mt-16 2xl:w-[620px] 2xl:h-[620px]"
/>
<div
className={cn(
"tracking-widest font-medium mt-8 text-center text-xl p-10",
tiaraFont.className
)}
>
<span className="2xl:text-4xl">
{" "}
cost ₹
<span className="text-tiara_red">{eventInfo?.costs}</span>
<span>/{eventInfo?.team ? "team" : "person"}</span>{" "}
</span>
</div>
)}
{/* End Hero */}
</>
);
<div className="text-center 2xl:text-2xl">
<Link href="/register">
<EncryptButton targetText="register now" />
</Link>
</div>
</div>
<div></div>
</div>
</div>
</div>
)}
{/* End Hero */}
</>
);
};

export default Page;
65 changes: 47 additions & 18 deletions src/app/(content)/events/[category]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Image from "next/image";
import { CardBody, CardContainer, CardItem } from "@/components/ui/3d-card";
import { tiaraFont } from "@/lib/fonts";
import { cn } from "@/lib/utils";
import Link from "next/link";

function toTitleCase(str: string) {
return str.replace(/\w\S*/g, function (txt) {
Expand All @@ -16,6 +17,7 @@ function toTitleCase(str: string) {
export default function EventsPage() {
const [cards, setCards] = useState<CardType[]>([]);
const pathname = usePathname();

useEffect(() => {
const path = pathname.split("/")[2];
fetch(`/api/events/${path}`)
Expand Down Expand Up @@ -46,24 +48,51 @@ export default function EventsPage() {
return null;
}
return (
<CardContainer
key={index}
containerClassName="relative flex items-center justify-center transition-all duration-200 ease-linear"
>
<CardBody className="relative">
<CardItem translateZ="100" className="w-full mt-4">
<Image
src={card.thumbnail}
className="rounded-xl "
alt="thumbnail"
width={1200}
height={800}
priority
sizes="(max-width: 640px) 100vw, (max-width: 1023px) 50vw, 33vw"
/>
</CardItem>
</CardBody>
</CardContainer>


(card.id !== "15" && card.id !== "14") ? (
<Link href={`/events/${pathname.split("/")[2]}/${card.id}`} key={index}>
<CardContainer
key={index}
containerClassName="relative flex items-center justify-center transition-all duration-200 ease-linear"
>
<CardBody className="relative">
<CardItem translateZ="100" className="w-full mt-4">
<Image
src={card.thumbnail}
className="rounded-xl"
alt="thumbnail"
width={1200}
height={800}
priority
sizes="(max-width: 640px) 100vw, (max-width: 1023px) 50vw, 33vw"
/>
</CardItem>
</CardBody>
</CardContainer>
</Link>
) : (
<CardContainer
key={index}
containerClassName="relative flex items-center justify-center transition-all duration-200 ease-linear"
>
<CardBody className="relative">
<CardItem translateZ="100" className="w-full mt-4">
<Image
src={card.thumbnail}
className="rounded-xl"
alt="thumbnail"
width={1200}
height={800}
priority
sizes="(max-width: 640px) 100vw, (max-width: 1023px) 50vw, 33vw"
/>
</CardItem>
</CardBody>
</CardContainer>
)


);
})}
</div>
Expand Down
Loading
Loading