Merge pull request #97 from teamViNO/feature-075

feature-075: suspense 리팩토링
teamViNO · Feb 18, 2024 · ba0edce · ba0edce
2 parents 0ef689a + 4d7d28a
commit ba0edce
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 35 deletions.
diff --git a/src/apis/category.ts b/src/apis/category.ts
@@ -75,7 +75,7 @@ export const updateCategoryName = async (name: string, categoryId: number) => {
 
 // 비디오의 카테고리 위치 수정 API
 export const putVideoToOtherCategory = async (
-  video_id: number[],
+  video_id: number[] | undefined,
   categoryId: number,
 ) => {
   const response = await axiosInstance.patch(`/videos/${categoryId}/update`, {

diff --git a/src/apis/videos.ts b/src/apis/videos.ts
@@ -19,7 +19,7 @@ export const getVideoAPI = (
   return axios.get<APIResponse<IVideo>>(PREFIX + `/${videoId}/${versionId}`);
 };
 
-export const deleteVideos = async (videos: number[]) => {
+export const deleteVideos = async (videos: number[] | undefined) => {
   const response = await axiosInstance.delete('/videos/selectDelete', {
     data: { videos },
   });

diff --git a/src/components/category/CategoryTitle.tsx b/src/components/category/CategoryTitle.tsx
@@ -1,8 +1,8 @@
 import * as CategoryTitleStyles from '@/styles/category/CategoryTitle.style';
 
 interface ICategoryTitleProps {
-  name: string;
-  totalVideos: number;
+  name: string | undefined;
+  totalVideos: number | undefined;
 }
 
 const CategoryTitle = ({ name, totalVideos }: ICategoryTitleProps) => {

diff --git a/src/components/category/DefaultMenu.tsx b/src/components/category/DefaultMenu.tsx
@@ -5,7 +5,7 @@ import ChangeBottomSvg from '@/assets/icons/change-bottom.svg?react';
 import ChangeTopSvg from '@/assets/icons/change-top.svg?react';
 
 interface IDefaultMenuProps {
-  menus: ISubFolderProps[] | ITagProps[];
+  menus: ISubFolderProps[] | ITagProps[] | undefined;
   recentRegisterMode: boolean;
   selectedTags: string[];
   setSelectedTags: React.Dispatch<React.SetStateAction<string[]>>;
@@ -29,7 +29,7 @@ const DefaultMenu = ({
   return (
     <>
       <div style={{ display: 'flex' }}>
-        {menus.map((menu: ISubFolderProps | ITagProps) => (
+        {menus?.map((menu: ISubFolderProps | ITagProps) => (
           <div key={menu.name}>
             {'tag_id' in menu && (
               <Chip

diff --git a/src/components/category/VideoSelectMenu.tsx b/src/components/category/VideoSelectMenu.tsx
@@ -8,7 +8,7 @@ interface IVideoSelectMenuProps {
   categories: IFolderProps[];
   totalVideoCount: number;
   checkedVideos: number[];
-  setCheckedVideos: React.Dispatch<React.SetStateAction<number[]>>;
+  setCheckedVideos: React.Dispatch<React.SetStateAction<number[] | undefined>>;
   handleDeleteVideos: () => void;
   allCheckBtnHandler: () => void;
   onFileClick?: (categoryId: number) => void;

diff --git a/src/pages/CategoryPage.tsx b/src/pages/CategoryPage.tsx
@@ -13,22 +13,22 @@ import VideoSelectMenu from '@/components/category/VideoSelectMenu';
 import { putVideoToOtherCategory } from '@/apis/category';
 import handleVideo from '@/utils/handleVideo';
 import CategoryPageSkeleton from '@/components/skeleton/CategoryPageSkeleton';
+import DefaultMenu from '@/components/category/DefaultMenu';
 
 const CategoryTitle = React.lazy(
   () => import('@/components/category/CategoryTitle'),
 );
 const Card = React.lazy(() => import('@/components/category/Card'));
-const DefaultMenu = React.lazy(
-  () => import('@/components/category/DefaultMenu'),
-);
 
 const CategoryPage = () => {
   const params = useParams();
-  const [name, setName] = useState('');
-  const [menus, setMenus] = useState<ISubFolderProps[] | ITagProps[]>([]);
-  const [videos, setVideos] = useState<IVideoProps[]>([]);
+  const [name, setName] = useState<string | undefined>();
+  const [menus, setMenus] = useState<
+    ISubFolderProps[] | ITagProps[] | undefined
+  >();
+  const [videos, setVideos] = useState<IVideoProps[] | undefined>();
   const [recentRegisterMode, setRecentRegisterMode] = useState(false);
-  const [checkedVideos, setCheckedVideos] = useState<number[]>([]);
+  const [checkedVideos, setCheckedVideos] = useState<number[] | undefined>([]);
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
   const categories = useRecoilValue(categoryState);
 
@@ -52,8 +52,8 @@ const CategoryPage = () => {
   const handleDeleteVideos = async () => {
     const res = await deleteVideos(checkedVideos);
     if (res.isSuccess) {
-      const existVideos = videos.filter(
-        (video) => !checkedVideos.includes(video.video_id),
+      const existVideos = videos?.filter(
+        (video) => !checkedVideos?.includes(video.video_id),
       );
       setVideos(existVideos);
       setCheckedVideos([]);
@@ -63,10 +63,10 @@ const CategoryPage = () => {
   };
 
   const allCheckBtnHandler = async () => {
-    if (checkedVideos.length === videos.length) {
+    if (checkedVideos?.length === videos?.length) {
       handleDeleteVideos();
     } else {
-      setCheckedVideos(videos.map((video) => video.video_id));
+      setCheckedVideos(videos?.map((video) => video.video_id));
     }
   };
   const onFileClick = async (categoryId: number) => {
@@ -88,12 +88,12 @@ const CategoryPage = () => {
       fallback={<CategoryPageSkeleton isSubSkeleton={!!params.sub_folder} />}
     >
       <CategoryPageStyles.Container>
-        <CategoryTitle name={name} totalVideos={sortedVideos.length} />
+        <CategoryTitle name={name} totalVideos={sortedVideos?.length} />
         <CategoryPageStyles.MenuWrap>
-          {checkedVideos.length > 0 ? (
+          {checkedVideos !== undefined && checkedVideos.length > 0 ? (
             <VideoSelectMenu
               categories={categories}
-              totalVideoCount={sortedVideos.length}
+              totalVideoCount={sortedVideos!.length}
               checkedVideos={checkedVideos}
               setCheckedVideos={setCheckedVideos}
               handleDeleteVideos={handleDeleteVideos}
@@ -111,10 +111,8 @@ const CategoryPage = () => {
           )}
         </CategoryPageStyles.MenuWrap>
 
-        {(sortedVideos.length === 0 || sortedVideos === undefined) && (
-          <EmptyCard />
-        )}
-        {sortedVideos.length > 0 && (
+        {sortedVideos?.length === 0 && <EmptyCard />}
+        {sortedVideos !== undefined && sortedVideos.length > 0 && (
           <CardContainer>
             {sortedVideos.map((video) => {
               // 하위 카테고리에 있을 때 태그 선택된 것에 따라 비디오 보여지게하는 로직

diff --git a/src/utils/handleVideo.ts b/src/utils/handleVideo.ts
@@ -8,19 +8,24 @@ const handleVideo = async (
   topCategoryId: string | undefined,
   subCategoryId: string | undefined,
   setMenus: React.Dispatch<
-    React.SetStateAction<ISubFolderProps[] | ITagProps[]>
+    React.SetStateAction<ISubFolderProps[] | ITagProps[] | undefined>
   >,
-  setName: React.Dispatch<React.SetStateAction<string>>,
-  setVideos: React.Dispatch<React.SetStateAction<IVideoProps[]>>,
+  setName: React.Dispatch<React.SetStateAction<string | undefined>>,
+  setVideos: React.Dispatch<React.SetStateAction<IVideoProps[] | undefined>>,
 ) => {
+  subCategoryId &&
+    getCategoryTags(subCategoryId!).then((res) => {
+      if (res.isSuccess) setMenus(res.result.tags);
+      else setMenus([]);
+    });
   if (!topCategoryId) {
     await getRecentVideos().then((res) => {
       setVideos(res.result.videos);
       setName('최근 읽은 영상');
       setMenus([]);
     });
   } else {
-    await getVideoById(subCategoryId ?? topCategoryId).then(async (res) => {
+    await getVideoById(subCategoryId ?? topCategoryId).then((res) => {
       const topCategory = categories.find(
         (category) => category.categoryId === Number(topCategoryId),
       );
@@ -29,10 +34,6 @@ const handleVideo = async (
           (subFolder) => subFolder.categoryId === Number(subCategoryId),
         );
         setName(subName!.name);
-        await getCategoryTags(subCategoryId!).then((res) => {
-          if (res.isSuccess) setMenus(res.result.tags);
-          else setMenus([]);
-        });
       } else {
         setName(topCategory!.name);
         setMenus(topCategory!.subFolders);

diff --git a/src/utils/sortVideos.ts b/src/utils/sortVideos.ts
@@ -1,10 +1,10 @@
 import { IVideoProps } from 'types/videos';
 
 export const sortVideos = (
-  videos: IVideoProps[],
+  videos: IVideoProps[] | undefined,
   isRecentRegisterMode: boolean,
 ) => {
-  const sortedVideos = videos.sort((prevVideo, nextVideo) => {
+  const sortedVideos = videos?.sort((prevVideo, nextVideo) => {
     if (
       prevVideo[isRecentRegisterMode ? 'created_at' : 'youtube_created_at'] >
       nextVideo[isRecentRegisterMode ? 'created_at' : 'youtube_created_at']