feat: adding negative comments fetching

gptube/app/dashboard/videos/[videoId]/negative-comments/page.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { useParams } from 'next/navigation'
+
+import { useNegativeComments } from '@/hooks/use-negative-comments'
+import { VideoTopActions } from '@/components/videos/VideoTopActions'
+import { MainStatistics } from '@/components/videos/MainStatistics'
+
+// TODO: Set this page as protected route for new users
+function Video() {
+  const { videoId } = useParams<{ videoId: string }>()!
+  const {
+    comments,
+    isLoading: isLoadingVideos,
+    isError: isErrorVideos,
+    handleChangePage,
+    page,
+    totalPages,
+    isFetching,
+  } = useNegativeComments(videoId)
+
+  console.log(comments)
+
+  return (
+    <main className="w-full h-screen max-w-screen-lg px-6 py-6 mx-auto space-y-6">
+      <p>Negative comments</p>
+    </main>
+  )
+}
+
+export default Video

gptube/hooks/use-negative-comments.ts

@@ -0,0 +1,55 @@
+import { useQuery } from "@tanstack/react-query";
+import { useState, useEffect } from "react";
+import toast from "react-hot-toast";
+
+import { getVideoNegativeComments } from "@/services/get-video-negative-comments.service";
+import {
+  INITIAL_PAGE_VIDEOS_ANALYZED,
+  PAGE_SIZE_VIDEOS_ANALYZED,
+} from "@/constants/videos-analyzed.constants";
+import { videoQueryKeys } from "./video-query-keys";
+import { useAuth } from "./use-auth";
+
+export function useNegativeComments(videoId: string) {
+  const { user } = useAuth();
+  const [page, setPage] = useState(INITIAL_PAGE_VIDEOS_ANALYZED);
+  const [pageSize, setPageSize] = useState(PAGE_SIZE_VIDEOS_ANALYZED);
+
+  const query = useQuery({
+    queryFn: () => getVideoNegativeComments({ userId: "1", videoId, page, pageSize }),
+    queryKey: videoQueryKeys.videoNegativeComments({
+      userId: "1",
+      videoId,
+      page,
+      pageSize,
+    }),
+    enabled: user !== null,
+    keepPreviousData: true,
+  });
+
+  const totalComments = query.data?.count ?? 0;
+  const totalPages = totalComments / pageSize;
+
+  useEffect(() => {
+    if (query.error instanceof Error) {
+      toast.error(query.error.message);
+    }
+  }, [query.error, query.isError]);
+
+  const handleChangePage = (currentPage: number) => {
+    setPage(+currentPage);
+    // if (!query.data?.next) return
+
+    // const { page: pageSearch, page_size } = extractSearchParamsVideo(query.data.next)
+
+    // setPageSize(+page_size)
+  };
+
+  return {
+    comments: query.data?.results,
+    handleChangePage,
+    totalPages,
+    page,
+    ...query,
+  };
+}

gptube/hooks/use-videos-analyzed.ts

@@ -1,56 +1,55 @@
-import { useQuery } from "@tanstack/react-query";
-import { useEffect, useState } from "react";
-import toast from "react-hot-toast";
+import { useQuery } from '@tanstack/react-query'
+import { useEffect, useState } from 'react'
+import toast from 'react-hot-toast'
 
-import { getVideosAnalyzed } from "@/services/get-videos-analyzed.service";
+import { getVideosAnalyzed } from '@/services/get-videos-analyzed.service'
 import {
   INITIAL_PAGE_VIDEOS_ANALYZED,
   PAGE_SIZE_VIDEOS_ANALYZED,
-} from "@/constants/videos-analyzed.constants";
-import { extractSearchParamsVideo } from "@/utils/video.utils";
+} from '@/constants/videos-analyzed.constants'
 
-import { videoQueryKeys } from "./video-query-keys";
-import { useAuth } from "./use-auth";
+import { videoQueryKeys } from './video-query-keys'
+import { useAuth } from './use-auth'
 
 export function useVideosAnalyzed() {
-  const { user } = useAuth();
-  const [page, setPage] = useState(INITIAL_PAGE_VIDEOS_ANALYZED);
-  const [pageSize, setPageSize] = useState(PAGE_SIZE_VIDEOS_ANALYZED);
+  const { user } = useAuth()
+  const [page, setPage] = useState(INITIAL_PAGE_VIDEOS_ANALYZED)
+  const [pageSize, setPageSize] = useState(PAGE_SIZE_VIDEOS_ANALYZED)
 
   const query = useQuery({
-    queryFn: () => getVideosAnalyzed({ userId: "1", page, pageSize }),
+    queryFn: () => getVideosAnalyzed({ userId: '1', page, pageSize }),
     queryKey: videoQueryKeys.videosAnalyzed({
-      userId: "1",
+      userId: '1',
       page,
       pageSize,
     }),
     enabled: user !== null,
     keepPreviousData: true,
-  });
+  })
 
-  const totalVideos = query.data?.count ?? 0;
-  const totalPages = totalVideos / pageSize;
+  const totalVideos = query.data?.count ?? 0
+  const totalPages = totalVideos / pageSize
 
   useEffect(() => {
     if (query.error instanceof Error) {
-      toast.error(query.error.message);
+      toast.error(query.error.message)
     }
-  }, [query.error, query.isError]);
+  }, [query.error, query.isError])
 
   const handleChangePage = (currentPage: number) => {
-    setPage(+currentPage);
+    setPage(+currentPage)
     // if (!query.data?.next) return
 
     // const { page: pageSearch, page_size } = extractSearchParamsVideo(query.data.next)
 
     // setPageSize(+page_size)
-  };
+  }
 
   return {
     videos: query.data?.results,
     handleChangePage,
     totalPages,
     page,
     ...query,
-  };
+  }
 }

gptube/hooks/video-query-keys.ts

@@ -3,5 +3,11 @@ export const videoQueryKeys = {
   videosAnalyzed: (args: { userId: string; page: number; pageSize: number }) =>
     ['videos-analyzed', { ...args }] as const,
   videoStats: (args: { userId: string; videoId: string }) => ['video-stats', { ...args }] as const,
+  videoNegativeComments: (args: {
+    userId: string
+    videoId: string
+    page: number
+    pageSize: number
+  }) => ['video-negative-comments', { ...args }] as const,
   videoLanding: () => ['video-landing'] as const,
 }

gptube/services/get-video-negative-comments.service.ts

@@ -0,0 +1,32 @@
+import type { ApiYoutubeVideosVideoIdNegativeCommentsGetRequest } from '@/gptube-api'
+
+import { apiClient } from '@/gptube-api'
+import { handleError } from '@/utils/errors/handle-error'
+
+export async function getVideoNegativeComments({
+  userId,
+  videoId,
+  page,
+  pageSize,
+}: {
+  userId: string
+  videoId: string
+  page?: number
+  pageSize?: number
+}) {
+  try {
+    const params: ApiYoutubeVideosVideoIdNegativeCommentsGetRequest = {
+      userId: userId,
+      videoId: videoId,
+    }
+
+    if (page) params.page = page
+    if (pageSize) params.pageSize = pageSize
+
+    const data = await apiClient.apiYoutubeVideosVideoIdNegativeCommentsGet(params)
+
+    return data
+  } catch (error) {
+    handleError(error)
+  }
+}