misc: use absolute imports

src/components/Carousel.tsx

@@ -1,51 +1,53 @@
 import * as React from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { EffectCoverflow } from "swiper";
+import { Card, CardPreview } from "@fluentui/react-components"
+import { useEffect, useState } from "react"
+import { useListItems } from "pnp-react-hooks/hooks/sp/useListItems"
+import { ListOptions } from "pnp-react-hooks/types/options/ListOptions"
+import { useSite } from "pnp-react-hooks/hooks/sp/useSite"
 
 // Import Swiper styles
-import "swiper/swiper.scss";
-import "swiper/modules/navigation/navigation.scss";
-import "swiper/modules/pagination/pagination.scss";
-import "swiper/modules/effect-coverflow/effect-coverflow.scss";
-import { Card, CardPreview } from "@fluentui/react-components";
-import { useEffect, useState } from "react";
-import { useListItems } from "pnp-react-hooks/hooks/sp/useListItems";
-import { ListOptions } from "pnp-react-hooks/types/options/ListOptions";
-import { AwardItems } from "../types/AwardItems";
-import styles from "../webparts/awardRecognition/components/AwardRecognition.module.scss";
-import { Content } from "./Content";
+import "swiper/swiper.scss"
+import "swiper/modules/navigation/navigation.scss"
+import "swiper/modules/pagination/pagination.scss"
+import "swiper/modules/effect-coverflow/effect-coverflow.scss"
+
+import { AwardItems } from "../types/AwardItems"
+import styles from "../webparts/awardRecognition/components/AwardRecognition.module.scss"
+import { Content } from "./Content"
 
 export const Carousel = () => {
-  const [awardList, setAwardList] = useState<AwardItems[]>([]);
-  const [selectedUser, setSelectedUser] = useState<AwardItems | null>(null);
+  const [awardList, setAwardList] = useState<AwardItems[]>([])
+  const [selectedUser, setSelectedUser] = useState<AwardItems | null>(null)
 
   const listItems = useListItems<AwardItems>("Award Recognition", {
     query: {
       select: ["ID", "Title", "Designation", "UserImage"],
     },
     mode: ListOptions.All,
-  });
+  })
+
+  const siteInfo = useSite()
 
   useEffect(() => {
     if (listItems && listItems.length > 0) {
       const parsedData = listItems.map((item) => {
-        const AppImageUrl = JSON.parse(item.UserImage);
-        const ImageUrl = `https://m365x24002320.sharepoint.com/sites/Aban/Lists/Award%20Recognition/Attachments/${item.ID}/${AppImageUrl.fileName}`;
-        return { ...item, ImageUrl };
-      });
-      setAwardList(parsedData);
+        const AppImageUrl = JSON.parse(item.UserImage)
+        const ImageUrl = `${siteInfo.Url}/Lists/Award%20Recognition/Attachments/${item.ID}/${AppImageUrl.fileName}`
+        return { ...item, ImageUrl }
+      })
+      setAwardList(parsedData)
       if (selectedUser === null) {
-        setSelectedUser(parsedData[0]);
+        setSelectedUser(parsedData[0])
       }
     }
-  }, [listItems, selectedUser]);
-
-  console.log(awardList);
+  }, [listItems, selectedUser, siteInfo])
 
   const handleSlideChange = (swiper: any) => {
-    const activeIndex = swiper.activeIndex;
-    setSelectedUser(awardList[activeIndex]);
-  };
+    const activeIndex = swiper.activeIndex
+    setSelectedUser(awardList[activeIndex])
+  }
 
   return (
     <div className={styles.container}>
@@ -54,7 +56,7 @@ export const Carousel = () => {
       </aside>
       <aside className={styles.carouselWrapper}>
         <Swiper
-          effect="coverflow"
+          effect='coverflow'
           grabCursor={true}
           coverflowEffect={{
             rotate: 0,
@@ -99,5 +101,5 @@ export const Carousel = () => {
         </Swiper>
       </aside>
     </div>
-  );
-};
+  )
+}

src/components/Content.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Text } from "@fluentui/react-components";
 import styles from "../webparts/awardRecognition/components/AwardRecognition.module.scss";
-import { ContentProps } from "../types/ContentProps";
+import { ContentProps } from "../types/ContentProps"
 import { useContext } from "react";
 import { WebpartContext } from "../webparts/awardRecognition/components/AwardRecognition";
 

src/webparts/awardRecognition/components/AwardRecognition.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { IAwardRecognitionProps } from "./IAwardRecognitionProps";
 import { FluentProvider, webLightTheme } from "@fluentui/react-components";
-import { Carousel } from "../../../components/Carousel";
+import { Carousel } from "src/components/Carousel"
 import { createContext } from "react";
 
 export const WebpartContext = createContext<IAwardRecognitionProps>(null);

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "./node_modules/@microsoft/rush-stack-compiler-4.5/includes/tsconfig-web.json",
   "compilerOptions": {
+    "baseUrl": ".",
     "target": "es5",
     "forceConsistentCasingInFileNames": true,
     "module": "esnext",
@@ -14,7 +15,7 @@
     "inlineSources": false,
     "strictNullChecks": false,
     "noImplicitAny": false,
-
+    "noUnusedLocals": false,
     "typeRoots": ["./node_modules/@types", "./node_modules/@microsoft"],
     "types": ["webpack-env"],
     "lib": ["es5", "dom", "es2015.collection", "es2015.promise"]