feat: dashboard and data fetch for events (#553)

src/components/Dashboard/DashboardEventCard.tsx

@@ -0,0 +1,67 @@
+import { DashboardEventType } from '@/lib/types';
+
+import Image from 'next/image';
+
+const DashboardEventCard = ({
+  _id,
+  name,
+  address,
+  image,
+  date,
+  tags,
+  logo,
+}: DashboardEventType) => {
+  return (
+    <div className="event-card group relative h-[250px] cursor-pointer overflow-hidden rounded-xl shadow-lg focus:outline-none focus:ring-4 focus:ring-rose-500">
+      <Image
+        src={image}
+        alt={name}
+        width={300}
+        height={300}
+        className="h-full w-full object-cover"
+        loading="lazy"
+      />
+      <div className="absolute inset-0 bg-black opacity-50"></div>
+      <div className="to-black-black/70 absolute inset-0 z-10 flex items-center justify-center bg-gradient-to-t from-black/70 p-2 hover:from-[rgb(231,65,123)] group-focus:to-primary">
+        <div className="text-center">
+          <button>Edit</button>
+          <button>Delete</button>
+          {logo && (
+            <Image
+              src={image}
+              alt={name}
+              height={80}
+              width={80}
+              className="mb-2 inline-block"
+              loading="lazy"
+            />
+          )}
+          <h3 className="text-3xl font-bold text-white">{name}</h3>
+          <h4 className="mt-5 text-base text-white">
+            <span className="block">
+              {new Date(date).toLocaleString('en-IN', {
+                day: 'numeric',
+                month: 'long',
+                year: 'numeric',
+              })}
+            </span>
+            <span className="block">
+              {!address.isOnline && address.location}
+            </span>
+          </h4>
+          <div className="grow">
+            <ul className="mb-3 flex list-inside list-disc flex-wrap text-color-pink">
+              {tags.map((tag: string, index: number) => (
+                <li key={index} className="px-2 py-1 text-sm capitalize">
+                  <span className="text-foreground">{tag}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardEventCard;

src/components/Dashboard/Events.tsx

@@ -0,0 +1,92 @@
+import { DashboardEventType } from '@/lib/types';
+
+import { Heading } from '@/components';
+import Button from '@/components/Buttons/Button';
+import DashboardEventCard from '@/components/Dashboard/DashboardEventCard';
+
+import 'react-toastify/dist/ReactToastify.css';
+import { useEffect, useState } from 'react';
+import React from 'react';
+import { toast, ToastContainer } from 'react-toastify';
+
+const DashboadEventPage = () => {
+  const [allEventsData, setAllEventsData] = useState<DashboardEventType[]>([]);
+  const [initialLoading, setInitialLoading] = useState<boolean>(true);
+
+  const getData = async () => {
+    setInitialLoading(true);
+    try {
+      const res = await fetch(`/api/events/allevents`).then((response) =>
+        response.json()
+      );
+      // console.log(res)
+      if (res.success) {
+        setAllEventsData(res.events);
+        setInitialLoading(false);
+      }
+    } catch (error) {
+      toast.success('Something went wrong. Please Try Again', {
+        position: 'top-right',
+        autoClose: 1000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        closeButton: false,
+      });
+    }
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <div className="relative z-10 rounded-3xl ">
+      <ToastContainer
+        position="top-right"
+        autoClose={1000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        closeButton={false}
+      />
+      {initialLoading ? (
+        <>loading</>
+      ) : (
+        <section className="layout flex flex-col gap-2 py-[100px]" id="add-Cfp">
+          <div className="flex items-stretch">
+            {' '}
+            <Heading title="All Events" />
+            <Button className="ml-20">Add Events</Button>
+          </div>
+
+          <div>
+            {allEventsData.length > 0 ? (
+              <div className="events grid grid-cols-auto-sm gap-7">
+                {allEventsData.map(
+                  (event: DashboardEventType, index: number) => (
+                    <DashboardEventCard {...event} key={index} />
+                  )
+                )}
+              </div>
+            ) : (
+              <div className="rounded-3xl bg-base-100/70 px-6 py-5 text-center text-xl text-transparent md:pb-20 md:pt-14 ">
+                <span className="bg-gradient-to-bl from-[rgb(178,15,255)] to-[#ff5100] bg-clip-text ">
+                  No events created
+                </span>
+              </div>
+            )}
+          </div>
+        </section>
+      )}
+    </div>
+  );
+};
+
+export default DashboadEventPage;

src/lib/types.ts

@@ -91,6 +91,16 @@ export type EventDataType = {
   logo?: string;
 };
 
+export type DashboardEventType = {
+  _id: string;
+  name: string;
+  address: { isOnline: boolean; location: string };
+  date: Date;
+  tags: string[];
+  link: string;
+  image: string;
+  logo?: string;
+};
 export type NewsLetterFormType = {
   email: string;
 };

src/pages/api/events/allevents.ts

@@ -0,0 +1,26 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  try {
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_API_ENDPOINT}/api/events`,
+      {
+        method: 'get',
+        headers: {
+          'Content-type': 'application/json',
+        },
+      }
+    ).then((resp) => {
+      if (resp.status === 500) {
+        throw 'Some error occurrend';
+      }
+      return resp.json();
+    });
+    res.status(200).json(response);
+  } catch (error) {
+    res.status(500).json({ success: false, error: error });
+  }
+}

src/pages/dashboard/index.tsx

@@ -1,11 +1,16 @@
 import { SettingsContext } from '@/lib/context/settings';
 
+import DashboadEventPage from '@/components/Dashboard/Events';
+
 import Image from 'next/image';
 import { useContext } from 'react';
+import { useState } from 'react';
+import React from 'react';
 import { ToastContainer } from 'react-toastify';
 
 const Dashboard = () => {
   const { theme } = useContext(SettingsContext);
+  const [selectedOption, setSelectedOption] = useState<string>('');
 
   return (
     <div className="flex flex-1">
@@ -89,6 +94,26 @@ const Dashboard = () => {
                   </svg>
                   Dashboard
                 </a>
+                <div
+                  className="group flex items-center rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-medium transition-all duration-200"
+                  onClick={() => setSelectedOption('events')}
+                >
+                  <svg
+                    className="mr-4 h-5 w-5 flex-shrink-0 "
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+                    />
+                  </svg>
+                  Events
+                </div>
 
                 <a
                   href="#"
@@ -318,7 +343,8 @@ const Dashboard = () => {
       <div className="flex flex-1 flex-col">
         <main>
           <div className="py-6">
-            <div className="mx-auto max-w-7xl px-4 sm:px-6 md:px-8"></div>
+            {selectedOption === 'events' && <DashboadEventPage />}
+            {/* <div className="mx-auto max-w-7xl px-4 sm:px-6 md:px-8 text-white"></div> */}
           </div>
         </main>
       </div>