feat : apply fetched data to video list

#6
PopFilterBubble · May 17, 2023 · c961470 · c961470
1 parent 2bae0a9
commit c961470
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 38 deletions.
diff --git a/src/content/index.tsx b/src/content/index.tsx
@@ -6,10 +6,20 @@ import VideoList from '../popup/components/VideoList';
 import { getDummy,popFilterAPI } from '../apis/service';
 console.info('pop-filterbubble-client content script');
 
-/*interface VideoData {
-  channelId: string;
-}*/
+export interface VideoListDto {
+  videoId: string
+  title: string
+  description: string
+  thumbnailUrl: string
+  publishedAt: string
+  channelId: string
+  channelTitle: string
+}
+
 let videoLength = 0;
+let videos: VideoListDto[] | null = null;
+
+
 function extractVideoData(): void {
   const videoList = document.querySelectorAll<HTMLDivElement>('#contents ytd-rich-item-renderer');
   const videoDataList: string[] = [];
@@ -27,20 +37,20 @@ function extractVideoData(): void {
 
   const chanelIdArr = videoDataList.slice(videoLength);
   console.log(chanelIdArr);
-  getDummyAPI(chanelIdArr);
-
+
   videoLength = videoDataList.length;
-
-
+  if(videoLength !== 0) getDummyAPI(chanelIdArr);
 }
 
 async function getDummyAPI(channelIdArr: string[]) {
 
     const response = await getDummy(channelIdArr);
-    console.log(response);
+    console.log(response.data.videoListDTO);
 
     if (response.status === 200) {
       console.log("API SUCCESS!");
+      videos = response.data.videoListDTO;
+      insertCustomComponent();
     } else {
       console.log("API Error:", response.status);
     }
@@ -79,9 +89,11 @@ function observeScrollEnd(): void {
 }
 
 observeScrollEnd();
-// insertCustomComponent();
 
 window.addEventListener('resize', () => {
+  if(!videos) {
+    return;
+  }
   insertCustomComponent();
 });
 
@@ -110,14 +122,14 @@ function insertCustomComponent() {
 
     // Create a root and render the React component into the container
     const root = createRoot(container);
-    root.render(<VideoList />);
+    root.render(<VideoList videos={videos!}/>);
   } else {
     console.warn('Element with ID "next-element-id" not found.'); // replace 'next-element-id' with the actual ID
   }
 }
 
 // Initial insert
-insertCustomComponent();
+//insertCustomComponent();
 
 
 
diff --git a/src/popup/PieChartComponent.tsx b/src/popup/PieChartComponent.tsx
@@ -3,11 +3,11 @@ import { PieChart, Pie, Legend, Sector, Cell, ResponsiveContainer } from 'rechar
 
 const PieChartComponent = () => {
   const data = [
-    { name: '진보', value: 700 },
-    { name: '보수', value: 500 },
+    { name: '진보', value: 5 },
+    { name: '보수', value: 4 },
   ];
 
-  const COLORS = ['#0088FE', '#00C49F'];
+  const COLORS = ['#1077BA','#E50127'];
 
   const RADIAN = Math.PI / 180;
   const renderCustomizedLabel = ({

diff --git a/src/popup/components/VideoList.tsx b/src/popup/components/VideoList.tsx
@@ -1,12 +1,22 @@
 import { useState } from 'react';
 import { sampleVideoList } from './sample';
+export interface VideoListDto {
+  videoId: string
+  title: string
+  description: string
+  thumbnailUrl: string
+  publishedAt: string
+  channelId: string
+  channelTitle: string
+}
 
-export const VideoList = () => {
+
+export const VideoList = ({videos}  : { videos: VideoListDto[]}) => {
   return (
     <div className='mx-8'>
       <h1 className='ml-7 mt-8 mb-4 text-[24px] font-semibold'>팝필터버블이 추천하는 영상 리스트</h1>
       <div className="p-4 flex overflow-x-auto ">
-        {sampleVideoList.map((video, index) => (
+        {videos.map((video, index) => (
           <div key={index} className="flex mx-3">
             <VideoComponent {...video} />
           </div>
@@ -16,23 +26,15 @@ export const VideoList = () => {
   );
 };
 
-type VideoRowProps = {
-  thumbnail: string;
-  preview: string;
-  title: string;
-  channelName: string;
-  views: string;
-  uploadedAt: string;
-};
-
 const VideoComponent = ({
-  thumbnail,
-  preview,
+  videoId,
   title,
-  channelName,
-  views,
-  uploadedAt,
-}: VideoRowProps) => {
+  description,
+  thumbnailUrl,
+  publishedAt,
+  channelId,
+  channelTitle,
+}: VideoListDto) => {
   const [isHovered, setIsHovered] = useState(false);
   const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>(null);
 
@@ -56,19 +58,19 @@ const VideoComponent = ({
       onMouseOver={handleMouseOver}
       onMouseOut={handleMouseOut}
     >
-      <a href="https://www.youtube.com" className="w-[356px]  flex-shrink-0 relative">
+      <a href="https://www.youtube.com" className="w-[359px]  flex-shrink-0 relative">
         <img
-          src={thumbnail}
+          src={thumbnailUrl}
           alt="video thumbnail"
-          className="object-fill rounded-[12px] transition-opacity duration-500"
+          className="object-cover w-[359px] h-[202px] rounded-[12px] transition-opacity duration-500"
         />
-        <img
+        {/* <img
           src={preview}
           alt="video preview"
           className={`object-fill rounded-[12px] absolute top-0 left-0 transition-opacity duration-500 ${
             isHovered ? 'opacity-100' : 'opacity-0'
           }`}
-        />
+        /> */}
       </a>
 
       <div className="flex mt-3">
@@ -87,9 +89,9 @@ const VideoComponent = ({
             {title}
           </h2>
           <div>
-            <p className="text-[14px] cursor-pointer leading-6 mb-2">{channelName}</p>
+            <p className="text-[14px] cursor-pointer leading-6 mb-2">{channelTitle}</p>
             <p className="text-[14px] cursor-pointer leading-5">
-              조회수 {views} · {uploadedAt}
+              조회수 {/*{views}*/} · {publishedAt}
             </p>
           </div>
         </div>