Skip to content

Commit ddd3797

Browse files
ArpitKhatri1ArpitKhatri1
committed
intergrated api in events routes and individual events page
1 parent 638ab62 commit ddd3797

File tree

17 files changed

+310
-106
lines changed

17 files changed

+310
-106
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"react": "^18.3.1",
3030
"react-dom": "^18.3.1",
3131
"react-hook-form": "^7.54.2",
32-
"react-icons": "^5.4.0",
32+
"react-icons": "^5.5.0",
3333
"react-responsive": "^10.0.0",
3434
"reactflow": "^11.11.4",
3535
"sheet": "^0.2.0",

‎pnpm-lock.yaml

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/api/events/route.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { NextResponse } from "next/server";
2+
import axios from "axios";
3+
export async function GET() {
4+
const response = await axios.get(
5+
"https://discoverwithsac-bitspilani.in/2025/main/api/events/"
6+
);
7+
8+
return NextResponse.json(response.data);
9+
}

‎src/app/api/getsingleevent/route.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { NextRequest, NextResponse } from "next/server";
2+
3+
import axios from "axios";
4+
export async function GET(req: NextRequest) {
5+
const eventId = req.nextUrl.searchParams.get("eventId");
6+
const response = await axios.get(
7+
`https://discoverwithsac-bitspilani.in/2025/main/api/events/${eventId}`
8+
);
9+
console.log(response.data);
10+
11+
return NextResponse.json(response.data);
12+
}

‎src/app/blogs/page.tsx

Lines changed: 2 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -7,39 +7,9 @@ import ResourceNavbar from "@/components/resources/r-nav";
77
import Link from "next/link";
88
import SingularBlogPost from "@/components/blogs/singular-blog";
99

10-
const convertGoogleDriveUrl = (url: string) => {
11-
// Check if it's a Google Drive URL
12-
if (url.includes("drive.google.com/file/d/")) {
13-
// Extract the file ID
14-
const fileId = url.split("/file/d/")[1].split("/")[0];
15-
return `https://drive.google.com/uc?export=view&id=${fileId}`;
16-
}
17-
return url;
18-
};
19-
20-
const convertUrlsToLinks = (text: string) => {
21-
const urlRegex = /(https?:\/\/[^\s]+)/g;
10+
import { convertGoogleDriveUrl } from "@/lib/utils";
2211

23-
const parts = text.split(urlRegex);
24-
25-
return parts.map((part, index) => {
26-
if (part.match(urlRegex)) {
27-
return (
28-
<a
29-
key={index}
30-
href={part}
31-
target="_blank"
32-
rel="noopener noreferrer"
33-
className="text-blue-600 hover:text-blue-800 underline"
34-
onClick={(e) => e.stopPropagation()} // Prevent triggering the parent Link
35-
>
36-
{part}
37-
</a>
38-
);
39-
}
40-
return part;
41-
});
42-
};
12+
import { convertUrlsToLinks } from "@/hooks/convert-url-to-links";
4313

4414
const BlogsPage = () => {
4515
const [blogPosts, setBlogPosts] = useState<BlogPostType[] | null>(null);

‎src/app/contact/page.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,4 @@ const ContactPage = () => {
4343
};
4444

4545
export default ContactPage;
46+

‎src/app/events/[eventId]/page.tsx

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
"use client"
2+
import React, { useState, useEffect } from "react";
3+
import axios from "axios";
4+
import { BlogPostType } from "@/types";
5+
import { CommentsSection } from "@/components/blogs/comments/comment-section";
6+
7+
interface PageProps {
8+
params: Promise<{
9+
eventId: string
10+
}>
11+
}
12+
import { EventType } from "@/types";
13+
14+
const SingleEventPage = ({ params }: PageProps) => {
15+
// Unwrap the params Promise using React.use()
16+
const resolvedParams = React.use(params);
17+
const { eventId } = resolvedParams;
18+
19+
const [currentEvent, setCurrentEvent] = useState<EventType | null>(null);
20+
console.log(currentEvent)
21+
22+
useEffect(() => {
23+
const getData = async () => {
24+
try {
25+
const response = await axios.get("/api/getsingleevent", {
26+
params: { eventId }
27+
});
28+
console.log("here is the reponse", response.data)
29+
setCurrentEvent(response.data as EventType);
30+
} catch (e) {
31+
console.log("There was some error", e);
32+
}
33+
};
34+
35+
getData();
36+
}, [eventId]);
37+
38+
if (!currentEvent) {
39+
return (
40+
<div className="w-full flex justify-center min-h-screen">
41+
<div className="min-h-full mt-10 max-w-[1000px] px-3">
42+
Loading...
43+
</div>
44+
</div>
45+
);
46+
}
47+
console.log(currentEvent)
48+
49+
return (
50+
<div className="w-full justify-center min-h-full">
51+
<div className="bg-blue-50 h-1/2 w-full flex justify-center">
52+
<div className="container py-12 md:py-20 px-10 max-w-[1440px] flex justify-center">
53+
<div className="grid gap-8 md:grid-cols-2 items-center">
54+
<div className="space-y-4">
55+
<h1 className="text-4xl font-bold tracking-tighter sm:text-5xl">{currentEvent.title}</h1>
56+
<p className="text-gray-500">
57+
58+
</p>
59+
</div>
60+
<div className="relative aspect-[4/3] overflow-hidden rounded-xl">
61+
{/* <Image src={'/resources/chronicles1.jpg'} alt="chronicles" height={1000} width={500} className='h-[400px] w-auto ml-auto' /> */}
62+
</div>
63+
</div>
64+
</div>
65+
</div>
66+
<div className="w-full flex justify-center">
67+
<div className="container py-12 md:py-20 px-10 max-w-[1440px] flex justify-center text-center text-md">
68+
{
69+
currentEvent.description
70+
}
71+
</div>
72+
73+
</div>
74+
75+
</div>
76+
);
77+
78+
};
79+
80+
export default SingleEventPage;
81+

‎src/app/events/page.tsx

Lines changed: 45 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,11 @@ import ImageCrouselVertical from '@/components/events-page/ImageCrouselVertical'
66
import SearchBar from '@/components/SearchBar'
77
import React from 'react'
88
import { useState, useEffect } from 'react'
9+
import axios from 'axios'
10+
import { EventType } from '@/types'
911

1012
const EventsPage = () => {
13+
const [events, setEvents] = useState<EventType[]>()
1114
// State to track if the screen is wide enough
1215
const [LargeScreen, setLargeScreen] = useState(2000);
1316

@@ -23,6 +26,17 @@ const EventsPage = () => {
2326
return () => window.removeEventListener('resize', checkScreenSize); // Cleanup on unmount
2427
}, []);
2528

29+
useEffect(() => {
30+
const getEvents = async () => {
31+
const data = await axios.get("/api/events")
32+
const res: EventType[] = await data.data
33+
setEvents(res)
34+
}
35+
getEvents()
36+
37+
}, [])
38+
console.log(events)
39+
2640
return (
2741
<div className='max-w-[1660px] mx-auto py-7 space-y-10'>
2842
<div className='mx-auto text-4xl md:text-5xl font-bold text-center'>
@@ -39,29 +53,48 @@ const EventsPage = () => {
3953
{
4054
LargeScreen > 1280 ? (
4155
<div className='grid w-full grid-cols-2 h-[750px] overflow-hidden gap-10'>
56+
{
57+
events ? (
58+
<>
59+
<div className=''>
60+
<ImageCarouselMain event={events[0]} />
61+
</div>
62+
<div className='space-y-8'>
63+
<ImageCarouselHorizontal event={events[1]} />
64+
<ImageCarouselHorizontal event={events[2]} />
65+
<ImageCarouselHorizontal event={events[3]} />
4266

43-
<div className=''>
44-
<ImageCarouselMain />
45-
</div>
46-
<div className='space-y-8'>
47-
<ImageCarouselHorizontal />
48-
<ImageCarouselHorizontal />
49-
<ImageCarouselHorizontal />
67+
</div></>
68+
69+
) : ""
70+
}
5071

51-
</div>
5272
</div>
5373

5474
) : (
5575
<div className='grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-10'>
56-
<ImageCrouselVertical /><ImageCrouselVertical /><ImageCrouselVertical />
57-
<ImageCrouselVertical /><ImageCrouselVertical /><ImageCrouselVertical />
76+
{events ? (
77+
events.slice(0, 4).map((event) => (
78+
<div key={event.id}>
79+
<ImageCrouselVertical event={event} />
80+
</div>
81+
))
82+
) : ""}
5883
</div>
5984
)
6085
}
6186

6287
<div className='grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-10'>
63-
<ImageCrouselVertical /><ImageCrouselVertical /><ImageCrouselVertical />
64-
<ImageCrouselVertical /><ImageCrouselVertical /><ImageCrouselVertical />
88+
{events ? (
89+
events.slice(4,).map((event) => (
90+
<div key={event.id}>
91+
<ImageCrouselVertical event={event} />
92+
</div>
93+
))
94+
) : ""}
95+
96+
{/* <ImageCrouselVertical /><ImageCrouselVertical /><ImageCrouselVertical />
97+
<ImageCrouselVertical /><ImageCrouselVertical /><ImageCrouselVertical /> */}
6598
</div>
6699
</div >
67100
</div >

‎src/app/home/page.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from "react";
22
import Image from "next/image";
33
import { Separator } from "@/components/ui/separator";
44
import ImageCarousel from "@/components/home/crousel";
5+
import BlogCrousel from "@/components/home/blog-crousel";
56

67
const Home = () => {
78
const ResourceImage = [
@@ -14,6 +15,7 @@ const Home = () => {
1415
{ src: "/production/events/e2.jpg" },
1516
{ src: "/production/events/enew.jpg" }
1617
]
18+
1719
// const finalImages = [
1820
// // `https://www.instagram.com/p/DEtr6QjJD0B/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==`
1921
// ]
@@ -49,10 +51,7 @@ const Home = () => {
4951
Events
5052
</div>
5153
<ImageCarousel images={EventsImage} autoPlayInterval={5000} />
52-
<div className="text-4xl font-bold text-center py-5 underline">
53-
Blogs
54-
</div>
55-
{/* <ImageCarousel images={finalImages} autoPlayInterval={5000} /> */}
54+
<BlogCrousel />
5655
</div>
5756
</div>
5857
</div>

‎src/components/Footer.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { GrLinkedin } from "react-icons/gr";
55

66
const Footer = () => {
77
return (
8-
<div className="h-64 w-full bg-[#ebdcbc] mt-10 flex flex-col">
8+
<div className="h-80 w-full bg-[#ebdcbc] mt-10 flex flex-col">
99
<div className="justify-center w-full footer:ml-auto footer:w-1/2 h-3/4 flex items-center md:px-3">
1010
<Image
1111
src={"/bitspilanilogo.png"}
@@ -38,3 +38,4 @@ const Footer = () => {
3838
};
3939

4040
export default Footer;
41+

‎src/components/events-page/ImageCrouselHorizontal.tsx

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ const imageList = [
88
"/eventsTestImage.webp",
99
]
1010
import { MoveUpRight } from 'lucide-react';
11-
export default function ImageCarouselHorizontal() {
11+
import { EventType } from '@/types'
12+
import Link from 'next/link'
13+
export default function ImageCarouselHorizontal({ event }: { event: EventType }) {
1214
const [current, setCurrent] = useState(0)
1315
const [count, setCount] = useState(0)
1416
const [api, setApi] = useState<CarouselApi>()
@@ -22,8 +24,8 @@ export default function ImageCarouselHorizontal() {
2224
setCurrent(api.selectedScrollSnap() + 1)
2325
})
2426
}, [api])
25-
const title = "Summer Intership Talk - 2024"
26-
const description = "On April 26, 1986, the Number Four RBMK reactor at the Chernobyl Nuclear Power Plant exploded and released radioactive material into the environment. The accident was caused by a flawed reactor design, inadequately trained personnel, and an attempt to shut down the reactor during a power surge. "
27+
const title = event.title
28+
const description = event.description
2729
const resources = ["resource1", "resource2",]
2830
return (
2931
<div className='flex gap-4 h-[220px] w-full relative '>
@@ -55,16 +57,18 @@ export default function ImageCarouselHorizontal() {
5557
</div>
5658
</Carousel>
5759
</div>
58-
<div className=' w-[60%] space-y-3'>
60+
<div className=' w-[60%] space-y-3 h-full flex flex-col'>
5961
<div className='text-2xl font-semibold whitespace-nowrap flex'>
60-
<div>
61-
{title}
62-
</div>
62+
<Link href={`/events/${event.id}`}>
63+
<div className='line-clamp-1 '>
64+
{title}
65+
</div>
66+
</Link>
6367
<div className='ml-auto'>
6468
<MoveUpRight />
6569
</div>
6670
</div>
67-
<p className=' line-clamp-5'>{description}</p>
71+
<p className=' line-clamp-5 flex-grow'>{description}</p>
6872
<div className='flex justify-between px-3 mt-auto'>
6973
{resources.map((ele, index) => {
7074
return (

0 commit comments

Comments
 (0)