fix: optimized suboptimal code

delta · Dec 12, 2023 · 53b0b3c · 53b0b3c
1 parent 9da9107
commit 53b0b3c
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 101 deletions.
diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx
@@ -15,7 +15,7 @@ import { getGallery } from '@/utils/events_cms';
 import { CMS_URL } from '@/config/config';
 
 const History = () => {
-    const [images, setImages] = useState([]);
+    const [images, setImages] = useState<GalleryType[]>([]);
 
     const getImages = async () => {
         const res = await getGallery();
@@ -143,35 +143,30 @@ const History = () => {
                         breakpoints={breakpoints}
                         className="h-[100%] w-[100%]"
                     >
-                        {images.map(
-                            (
-                                data: { url: number; eventId: number; eventName: string },
-                                ind: number,
-                            ) => (
-                                <SwiperSlide
-                                    key={ind}
-                                    className={`h-[100%] w-[23%] bg-black max-sm:rounded-xl`}
-                                >
-                                    <Image
-                                        src={data ? CMS_URL + data.url : virat}
-                                        layout="fill"
-                                        onClick={() => {
-                                            router.push(
-                                                `/eventcluster/${data ? data.eventId : 0}/${
-                                                    data ? data.eventName : ''
-                                                }`,
-                                            );
-                                        }}
-                                        objectFit="cover"
-                                        objectPosition="center"
-                                        className={
-                                            'max-sm:rounded-xl md:opacity-60 ' + 'carousel-torch'
-                                        }
-                                        alt="history"
-                                    />
-                                </SwiperSlide>
-                            ),
-                        )}
+                        {images.map((data: GalleryType, ind: number) => (
+                            <SwiperSlide
+                                key={ind}
+                                className={`h-[100%] w-[23%] bg-black max-sm:rounded-xl`}
+                            >
+                                <Image
+                                    src={data ? CMS_URL + data.url : virat}
+                                    layout="fill"
+                                    onClick={() => {
+                                        router.push(
+                                            `/eventcluster/${data ? data.eventId : 0}/${
+                                                data ? data.eventName : ''
+                                            }`,
+                                        );
+                                    }}
+                                    objectFit="cover"
+                                    objectPosition="center"
+                                    className={
+                                        'max-sm:rounded-xl md:opacity-60 ' + 'carousel-torch'
+                                    }
+                                    alt="history"
+                                />
+                            </SwiperSlide>
+                        ))}
                     </Swiper>
                 </div>
             </div>

diff --git a/src/app/gallery/type.d.ts b/src/app/gallery/type.d.ts
@@ -0,0 +1,7 @@
+type GalleryType = {
+    url: string;
+    width: number;
+    height: number;
+    eventId: string;
+    eventName: string;
+};
diff --git a/src/components/AuthLayout/type.d.ts b/src/components/AuthLayout/type.d.ts
@@ -1,13 +1,7 @@
-/* eslint-disable */
-
-interface AuthLayoutProps {
-    formType: 'LOGIN' | 'SIGN UP';
-}
-
 type FormType = 'LOGIN' | 'SIGN UP';
 
-interface SignupFormProps {
-    setForm: (form: FormType) => void;
+interface AuthLayoutProps {
+    formType: FormType;
 }
 
 interface FormProps {
@@ -60,6 +54,12 @@ interface LoginFormType {
     user_pass: string;
 }
 
+/* eslint-disable */
+interface SignupFormProps {
+    setForm: (form: FormType) => void;
+    // setForm: React.Dispatch<React.SetStateAction<FormType>>;
+}
+
 interface ReCaptchaState {
     handleFormFields: (field: string, value: string) => void;
 }
diff --git a/src/components/ClusterCarousel/ClusterCarousel.tsx b/src/components/ClusterCarousel/ClusterCarousel.tsx
@@ -1,9 +1,7 @@
-/* eslint-disable */
-
 'use client';
 
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Pagination, Navigation, Autoplay } from 'swiper/modules';
+import { Pagination, Navigation } from 'swiper/modules';
 
 import 'swiper/css';
 import 'swiper/css/navigation';
@@ -22,11 +20,12 @@ import { getClusterDetails } from '@/utils/events_cms';
 import { CMS_URL } from '@/config/config';
 
 const ClusterCarousel = ({ id, name }: { id: number; name: string }) => {
-    const [details, setDetails] = useState<any>([]);
+    const [details, setDetails] = useState<ClusterDetailType[]>([]);
     const [index, setIndex] = useState(0);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const [swiper, setSwiper] = useState<any>(null);
     const getDetails = async () => {
-        let res = await getClusterDetails(id);
+        const res = await getClusterDetails(id);
         setDetails(res);
     };
     const router = useRouter();
@@ -60,8 +59,6 @@ const ClusterCarousel = ({ id, name }: { id: number; name: string }) => {
         },
     };
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
     const handleSlideChange = (index: number) => {
         if (details.length > 0 && index) setIndex(index % details.length);
         const currentSlide = swiper?.slides[index];
@@ -117,35 +114,30 @@ const ClusterCarousel = ({ id, name }: { id: number; name: string }) => {
                 className="w-full lg:w-2/3 xl:w-3/4 h-full flex items-center justify-center z-10"
                 onSlideChange={swiper => handleSlideChange(swiper?.activeIndex)}
             >
-                {details.map(
-                    (
-                        data: { image: { url: string; height: number; width: number }; id: number },
-                        ind: number,
-                    ) => (
-                        <SwiperSlide
-                            key={ind}
-                            className={`flex justify-center items-center bg-transparent rounded-lg`}
-                        >
-                            <div className="w-full h-full lg:w-3/4 2xl:w-4/5 m-auto flex justify-center items-center">
-                                <Image
-                                    src={data.image ? CMS_URL + data.image?.url : temp}
-                                    width={data.image?.width}
-                                    height={Math.min(data.image?.height, 100)}
-                                    objectPosition="center"
-                                    objectFit="contain"
-                                    className={`rounded-lg lg:max-h[20vh] lg:max-w-[20vw]`}
-                                    alt="cluster"
-                                    onClick={() => {
-                                        router.push(`/events/${id}/${name}/${data.id}`);
-                                    }}
-                                />
-                            </div>
-                        </SwiperSlide>
-                    ),
-                )}
+                {details.map((data: ClusterDetailType, ind: number) => (
+                    <SwiperSlide
+                        key={ind}
+                        className={`flex justify-center items-center bg-transparent rounded-lg`}
+                    >
+                        <div className="w-full h-full lg:w-3/4 2xl:w-4/5 m-auto flex justify-center items-center">
+                            <Image
+                                src={data.image ? CMS_URL + data.image?.url : temp}
+                                width={data.image?.width}
+                                height={Math.min(data.image?.height, 100)}
+                                objectPosition="center"
+                                objectFit="contain"
+                                className={`rounded-lg lg:max-h[20vh] lg:max-w-[20vw]`}
+                                alt="cluster"
+                                onClick={() => {
+                                    router.push(`/events/${id}/${name}/${data.id}`);
+                                }}
+                            />
+                        </div>
+                    </SwiperSlide>
+                ))}
             </Swiper>
             <Image src={rightPortal} className="absolute w-80 max-lg:hidden right-0" alt="<" />
-            <div className="fixed bottom-[12vh] left-1/2 -translate-x-1/2 flex justify-center lg:justify-between items-center md:px-10 px-5">
+            <div className="fixed bottom-[12vh] left-1/2 -translate-x-1/2 flex justify-center lg:justify-between items-center md:px-10 px-5 z-10">
                 <div
                     className="absolute -left-10 w-10 hover:scale-110 animate-pulse hover:cursor-pointer"
                     onClick={goToPreviousSlide}

diff --git a/src/utils/events_cms.ts b/src/utils/events_cms.ts
@@ -1,17 +1,15 @@
-/* eslint-disable */
 import axios from 'axios';
 import { CMS_URL } from '@/config/config';
 
 export const getClusterDetails = async (id: number) => {
-    let res = await axios.get(
+    const res = await axios.get(
         `${CMS_URL}/api/clusters/${id}?populate[Cluster_Details][populate][Events][populate]=*`,
     );
     let detail = res.data.data;
-    //@ts-ignore
-    let details: any = [];
+    const details: ClusterDetailType[] = [];
     detail = detail.attributes.Cluster_Details;
-    let events = detail.Events;
-    //@ts-ignore
+    const events = detail.Events;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     events.forEach((content: any) => {
         details.push({
             content: [
@@ -31,31 +29,14 @@ export const getClusterDetails = async (id: number) => {
     return details;
 };
 
-export const getClusterNames = async () => {
-    let res = await axios.get(`${CMS_URL}/api/clusters?populate=*`);
-    let detailArray = res.data.data;
-    //@ts-ignore
-    let details: any = [];
-    // eslint-disable @typescript-eslint/ban-ts-comment
-    //@ts-ignore
-    detailArray.forEach((data: any) => {
-        let detail = data.attributes.Cluster_Details;
-        details.push({ name: detail.Cluster_Name, id: data.id });
-    });
-
-    return details;
-};
-
 export const getGallery = async () => {
-    let res = await axios.get(`${CMS_URL}/api/galleries?populate=*`);
-    let detailArray = res.data.data;
-    //@ts-ignore
-    let details: any = [];
-    // eslint-disable @typescript-eslint/ban-ts-comment
-    //@ts-ignore
+    const res = await axios.get(`${CMS_URL}/api/galleries?populate=*`);
+    const detailArray = res.data.data;
+    const details: GalleryType[] = [];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     detailArray.forEach((data: any) => {
-        let detail = data.attributes.gallery;
-        let dummy = detail.data[0].attributes;
+        const detail = data.attributes.gallery;
+        const dummy = detail.data[0].attributes;
         details.push({
             url: dummy.url,
             width: dummy.width,
@@ -66,3 +47,16 @@ export const getGallery = async () => {
     });
     return details;
 };
+
+export const getClusterNames = async () => {
+    const res = await axios.get(`${CMS_URL}/api/clusters?populate=*`);
+    const detailArray = res.data.data;
+    const details: ClusterName[] = [];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    detailArray.forEach((data: any) => {
+        const detail = data.attributes.Cluster_Details;
+        details.push({ name: detail.Cluster_Name, id: data.id });
+    });
+
+    return details;
+};
diff --git a/src/utils/type.d.ts b/src/utils/type.d.ts
@@ -0,0 +1,27 @@
+type ClusterDetailType = {
+    content: ClusterContentType[];
+    date: string;
+    location: string;
+    name: string;
+    price: string;
+    id: string;
+    image: ClusterImageType;
+};
+
+type ClusterContentType = {
+    Description: string;
+    Judging_criteria: string;
+    Rules: string;
+    Contact: string;
+};
+
+type ClusterImageType = {
+    url: string;
+    width: number;
+    height: number;
+};
+
+type ClusterName = {
+    id: string;
+    name: string;
+};