init cloudinary and add image upload in event page

rtnAyush · Mar 11, 2024 · a4b8166 · a4b8166
1 parent 7e104c7
commit a4b8166
Show file tree

Hide file tree

Showing 10 changed files with 316 additions and 166 deletions.
diff --git a/app/(public)/events/page.tsx b/app/(public)/events/page.tsx
@@ -8,10 +8,10 @@ export default async function Page() {
     //TODO: Fetch events and pass them to EventsCards
 
     const currentDate = new Date();
-    const ongoingEvents :any = await getEvents(currentDate,'ongoing') ;
-    const upcomingEvents:any = await getEvents(currentDate,'upcoming') ;
-    const pastEvents:any = await getEvents(currentDate,'past') ;  
-    
+    const ongoingEvents = await getEvents(currentDate, 'ongoing');
+    const upcomingEvents = await getEvents(currentDate, 'upcoming');
+    const pastEvents = await getEvents(currentDate, 'past');
+
 
     return (
         <>
@@ -44,16 +44,16 @@ export default async function Page() {
                         <h2 className="text-2xl">Ongoing events</h2>
                         <div className="grid gap-x-6 gap-y-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-6">
                             {
-                                ongoingEvents.data?.length > 0 ?
-                                    ongoingEvents.data.map((event:any) => (
+                                ongoingEvents?.data ?
+                                    ongoingEvents.data.map((event) => (
                                         <EventsCards
                                             key={event.id}
                                             // id={event.id}
                                             title={event.title}
                                             dateTime={event.dateTime}
                                             desciption={event.description}
                                             mode={event.mode}
-                                        // imgUrl={event.imgUrl}
+                                            imgUrl={event.img}
                                         />
                                     ))
                                     :
@@ -68,16 +68,16 @@ export default async function Page() {
                         <h2 className="text-2xl">Upcoming events</h2>
                         <div className="grid gap-x-4 gap-y-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-6">
                             {
-                                upcomingEvents.data?.length > 0 ?
-                                    upcomingEvents.data.map((event:any) => (
+                                upcomingEvents.data ?
+                                    upcomingEvents.data.map((event) => (
                                         <EventsCards
                                             key={event.id}
                                             // id={event.id}
                                             title={event.title}
                                             dateTime={event.dateTime}
                                             desciption={event.description}
                                             mode={event.mode}
-                                        // imgUrl={event.imgUrl}
+                                            imgUrl={event.img}
                                         />
                                     ))
                                     :
@@ -93,16 +93,16 @@ export default async function Page() {
                         <h2 className="text-2xl">Past events</h2>
                         <div className="grid gap-x-4 gap-y-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-6">
                             {
-                                pastEvents.data?.length > 0 ?
-                                    pastEvents.data.map((event:any) => (
+                                pastEvents.data ?
+                                    pastEvents.data.map((event) => (
                                         <EventsCards
                                             key={event.id}
                                             // id={event.id}
                                             title={event.title}
                                             dateTime={event.dateTime}
                                             desciption={event.description}
                                             mode={event.mode}
-                                        // imgUrl={event.imgUrl}
+                                            imgUrl={event.img}
                                         />
                                     ))
                                     :

diff --git a/components/CloudinaryImg.tsx b/components/CloudinaryImg.tsx
@@ -0,0 +1,17 @@
+"use client";
+import { CldImage } from 'next-cloudinary';
+
+export default function CloudinaryImg({ src }: { src: string }) {
+
+    return (
+        <CldImage
+            className="overflow-hidden object-cover rounded-t-md"
+            height="0"
+            sizes="100vw"
+            src={src}
+            style={{ width: '100%', height: 'auto' }}
+            width="0"
+            alt="Description of my image"
+        />
+    )
+}
diff --git a/components/EventForm.tsx b/components/EventForm.tsx
@@ -4,6 +4,7 @@ import { useFormState } from 'react-dom'
 import { postEvent } from "@/lib/actions/events.action"
 import Button from "./Button";
 import { BiSolidError } from "react-icons/bi"
+import { CldUploadWidget } from 'next-cloudinary';
 
 const initialState = {
     error: false,
@@ -38,8 +39,19 @@ const EventForm = () => {
                 </section>
 
                 <section className="w-full md:w-1/2">
+                    {/* <CldUploadWidget uploadPreset="gdsc-iiitt">
+                        {({ open }) => {
+                            console.log(open);
+
+                            return (
+                                <button onClick={() => open()}>
+                                    Upload an Image
+                                </button>
+                            );
+                        }}
+                    </CldUploadWidget> */}
                     <label htmlFor="imgUrl">Image URL:</label>
-                    <Input type='file' accept='.jpg, .png' name="img" required />
+                    <Input type='file' id="imgUrl" accept='.jpg, .png' name="img" required />
                 </section>
             </div>
 

diff --git a/components/EventsCards.tsx b/components/EventsCards.tsx
@@ -7,24 +7,18 @@ import {
     CardTitle,
 } from "@/components/ui/card"
 import { Button } from "./ui/button";
-import Image from "next/image";
 import Link from "next/link";
+import CloudinaryImg from "./CloudinaryImg";
 
-export default function EventsCards({ title, dateTime, desciption, img,mode }: { title: string, dateTime: Date,  desciption: string, mode: string, img?: string }) {
+export default function EventsCards({ title, dateTime, desciption, imgUrl, mode }: { title: string, dateTime: Date, desciption: string, mode: string, imgUrl?: string }) {
     const link = `/events/`
     return (
         <Card className="flex flex-col" style={{ boxShadow: "5px 5px 10px #cdcfcf, -5px -3px 5px #fff" }}>
             <CardHeader
                 className="p-0 relative flex justify-center items-center rounded-t-lg"
             >
-                <Image
-                    src={img || "/profile/pro-pic.jpeg"}
-                    alt=""
-                    width={0}
-                    height={0}
-                    sizes="100vw"
-                    style={{ width: '100%', height: 'auto' }}
-                    className="overflow-hidden object-cover rounded-t-md"
+                <CloudinaryImg
+                    src={imgUrl || "/profile/pro-pic.jpeg"}
                 />
             </CardHeader>
             <CardHeader className="py-3">

diff --git a/components/admin/Admin.tsx b/components/admin/Admin.tsx
@@ -20,12 +20,13 @@ export default function LeaderBoardUpload() {
                             <TabsTrigger value="users">Modify Users</TabsTrigger>
                         </TabsList>
                     </div>
-
-                    <TabsContent value="home"><Home /></TabsContent>
-                    <TabsContent value="events"><UploadEvents /></TabsContent>
-                    <TabsContent value="team"> <ModifyTeam /></TabsContent>
-                    <TabsContent value="leader-board"><ModifyLeaderBoard /></TabsContent>
-                    <TabsContent value="users"><ModifyUsers /></TabsContent>
+                    <div className="h-[70vh]">
+                        <TabsContent value="home"><Home /></TabsContent>
+                        <TabsContent value="events"><UploadEvents /></TabsContent>
+                        <TabsContent value="team"> <ModifyTeam /></TabsContent>
+                        <TabsContent value="leader-board"><ModifyLeaderBoard /></TabsContent>
+                        <TabsContent value="users"><ModifyUsers /></TabsContent>
+                    </div>
                 </Tabs>
             </MaxWidthWrapper>
         </main>

diff --git a/components/admin/ModifyEvents.tsx b/components/admin/ModifyEvents.tsx
@@ -14,30 +14,37 @@ import { getEvents } from '@/lib/actions/events.action'
 import { Event } from '@/utils/types'
 import Trash from '../Trash';
 import moment from 'moment';
+import CloudinaryImg from '../CloudinaryImg';
 
 export default async function ModifyEvents() {
-    const events:any = await getEvents();
+    const events: any = await getEvents();
 
     const rows = events.data.map((event: Event) => {
-        const mobj = moment(event.dateTime , "YYYY-MM-DD HH:mm:ss") as any;
-        const samay = mobj.format().slice(0,10) as any
-        
+        const mobj = moment(event.dateTime, "YYYY-MM-DD HH:mm:ss") as any;
+        const samay = mobj.format().slice(0, 10) as any
+
         return (
             <TableRow key={event.id}>
                 <TableCell>{samay}</TableCell>
+                <TableCell>
+                    <div className="p-0 relative flex justify-center items-center rounded-t-lg">
+                        <CloudinaryImg src={event.img} />
+                    </div>
+                </TableCell>
                 <TableCell>{event.title.substring(0, 50)} {event.title.split("").length > 50 && "..."}</TableCell>
                 <TableCell>{new Date(event.dateTime) > new Date() ? <Badge variant='default'>Ongoing</Badge> : <Badge variant='destructive'>Expired</Badge>}</TableCell>
                 <TableCell>{event.mode}</TableCell>
-                <TableCell><Trash id={event.id}/></TableCell>
-            </TableRow> 
+                <TableCell><Trash id={event.id} /></TableCell>
+            </TableRow>
         )
-    }) 
+    })
     return (
         <Table>
             <TableCaption>A list of GDSC Events.</TableCaption>
             <TableHeader>
                 <TableRow>
                     <TableHead>Date</TableHead>
+                    <TableHead>Image</TableHead>
                     <TableHead>Title</TableHead>
                     <TableHead>Status</TableHead>
                     <TableHead>Mode</TableHead>