restructure files onto electron-vite boilerplate

src/renderer/components/grid-carousel/index.tsx

@@ -1,3 +1,5 @@
+import { Group, Stack } from '@mantine/core';
+import throttle from 'lodash/throttle';
 import {
     isValidElement,
     memo,
@@ -9,14 +11,13 @@ import {
     useRef,
     useState,
 } from 'react';
-import { Group, Stack } from '@mantine/core';
-import throttle from 'lodash/throttle';
 import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
 import styled from 'styled-components';
 import { SwiperOptions, Virtual } from 'swiper';
 import 'swiper/css';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Swiper as SwiperCore } from 'swiper/types';
+
 import { Album, AlbumArtist, Artist, LibraryItem, RelatedArtist } from '/@/renderer/api/types';
 import { Button } from '/@/renderer/components/button';
 import { PosterCard } from '/@/renderer/components/card/poster-card';
@@ -44,14 +45,14 @@ const CarouselContainer = styled(Stack)`
 interface TitleProps {
     handleNext?: () => void;
     handlePrev?: () => void;
-    label?: string | ReactNode;
+    label?: ReactNode | string;
     pagination: {
         hasNextPage: boolean;
         hasPreviousPage: boolean;
     };
 }
 
-const Title = ({ label, handleNext, handlePrev, pagination }: TitleProps) => {
+const Title = ({ handleNext, handlePrev, label, pagination }: TitleProps) => {
     return (
         <Group position="apart">
             {isValidElement(label) ? (
@@ -69,18 +70,18 @@ const Title = ({ label, handleNext, handlePrev, pagination }: TitleProps) => {
                 <Button
                     compact
                     disabled={!pagination.hasPreviousPage}
+                    onClick={handlePrev}
                     size="lg"
                     variant="default"
-                    onClick={handlePrev}
                 >
                     <RiArrowLeftSLine />
                 </Button>
                 <Button
                     compact
                     disabled={!pagination.hasNextPage}
+                    onClick={handleNext}
                     size="lg"
                     variant="default"
-                    onClick={handleNext}
                 >
                     <RiArrowRightSLine />
                 </Button>
@@ -90,7 +91,7 @@ const Title = ({ label, handleNext, handlePrev, pagination }: TitleProps) => {
 };
 
 export interface SwiperGridCarouselProps {
-    cardRows: CardRow<Album>[] | CardRow<Artist>[] | CardRow<AlbumArtist>[];
+    cardRows: CardRow<Album>[] | CardRow<AlbumArtist>[] | CardRow<Artist>[];
     data: Album[] | AlbumArtist[] | Artist[] | RelatedArtist[] | undefined;
     isLoading?: boolean;
     itemType: LibraryItem;
@@ -100,7 +101,7 @@ export interface SwiperGridCarouselProps {
         children?: ReactNode;
         hasPagination?: boolean;
         icon?: ReactNode;
-        label: string | ReactNode;
+        label: ReactNode | string;
     };
     uniqueId: string;
 }
@@ -108,15 +109,15 @@ export interface SwiperGridCarouselProps {
 export const SwiperGridCarousel = ({
     cardRows,
     data,
+    isLoading,
     itemType,
     route,
     swiperProps,
     title,
-    isLoading,
     uniqueId,
 }: SwiperGridCarouselProps) => {
     const containerRef = useRef<HTMLDivElement>(null);
-    const swiperRef = useRef<SwiperCore | any>(null);
+    const swiperRef = useRef<any | SwiperCore>(null);
     const playButtonBehavior = usePlayButtonBehavior();
     const handlePlayQueueAdd = usePlayQueueAdd();
     const [slideCount, setSlideCount] = useState(4);
@@ -140,7 +141,7 @@ export const SwiperGridCarousel = ({
             itemType: LibraryItem;
             serverId: string;
         }) => {
-            const { id, itemType, isFavorite, serverId } = options;
+            const { id, isFavorite, itemType, serverId } = options;
             if (isFavorite) {
                 deleteFavoriteMutation.mutate({
                     query: {
@@ -205,7 +206,7 @@ export const SwiperGridCarousel = ({
     }, [slideCount, swiperProps?.slidesPerView]);
 
     const handleOnSlideChange = useCallback((e: SwiperCore) => {
-        const { slides, isEnd, isBeginning, params } = e;
+        const { isBeginning, isEnd, params, slides } = e;
         if (isEnd || isBeginning) return;
 
         const slideCount = (params.slidesPerView as number | undefined) || 4;
@@ -216,7 +217,7 @@ export const SwiperGridCarousel = ({
     }, []);
 
     const handleOnZoomChange = useCallback((e: SwiperCore) => {
-        const { slides, isEnd, isBeginning, params } = e;
+        const { isBeginning, isEnd, params, slides } = e;
         if (isEnd || isBeginning) return;
 
         const slideCount = (params.slidesPerView as number | undefined) || 4;
@@ -227,7 +228,7 @@ export const SwiperGridCarousel = ({
     }, []);
 
     const handleOnReachEnd = useCallback((e: SwiperCore) => {
-        const { slides, params } = e;
+        const { params, slides } = e;
 
         const slideCount = (params.slidesPerView as number | undefined) || 4;
         setPagination({
@@ -237,7 +238,7 @@ export const SwiperGridCarousel = ({
     }, []);
 
     const handleOnReachBeginning = useCallback((e: SwiperCore) => {
-        const { slides, params } = e;
+        const { params, slides } = e;
 
         const slideCount = (params.slidesPerView as number | undefined) || 4;
         setPagination({
@@ -279,8 +280,8 @@ export const SwiperGridCarousel = ({
 
     return (
         <CarouselContainer
-            ref={containerRef}
             className="grid-carousel"
+            ref={containerRef}
             spacing="md"
         >
             {title ? (
@@ -292,12 +293,7 @@ export const SwiperGridCarousel = ({
                 />
             ) : null}
             <Swiper
-                ref={swiperRef}
-                resizeObserver
                 modules={[Virtual]}
-                slidesPerView={slideCount}
-                spaceBetween={20}
-                style={{ height: '100%', width: '100%' }}
                 onBeforeInit={(swiper) => {
                     swiperRef.current = swiper;
                 }}
@@ -305,6 +301,11 @@ export const SwiperGridCarousel = ({
                 onReachEnd={handleOnReachEnd}
                 onSlideChange={handleOnSlideChange}
                 onZoomChange={handleOnZoomChange}
+                ref={swiperRef}
+                resizeObserver
+                slidesPerView={slideCount}
+                spaceBetween={20}
+                style={{ height: '100%', width: '100%' }}
                 {...swiperProps}
             >
                 {slides.map((slideContent, index) => {