Merge pull request #34 from OPGG-HACKTHON/feature/26

[#26] update fetching videos
OPGG-HACKTHON · Aug 18, 2021 · 8c0ee28 · 8c0ee28
2 parents bacdca3 + e6ffe61
commit 8c0ee28
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 66 deletions.
diff --git a/src/api/video/video.ts b/src/api/video/video.ts
@@ -0,0 +1,10 @@
+import axios from 'axios';
+
+// eslint-disable-next-line consistent-return
+const getVideos = async () => {
+  // FIX: address
+  const data = await axios.get(`${process.env.REACT_APP_SERVER}/videos`);
+  return data;
+};
+
+export default getVideos;
diff --git a/src/atom/videoListAtom.ts b/src/atom/videoListAtom.ts
@@ -1,25 +1,44 @@
 import { atom, RecoilValue, selector } from 'recoil';
 import { datas } from 'data/main';
+import getVideos from 'api/video/video';
 import { leftNavItemState } from './pageAtom';
 import { selectorState } from './selectorAtom';
 
-// eslint-disable-next-line import/prefer-default-export
-export const videoListState = atom({
+export const getVideoTrigger = atom({
+  key: '_getVideoTrigger',
+  default: 0,
+});
+
+export const videoListState = selector({
   key: 'videoListState',
-  default: datas.videos,
+  get: async ({ get }) => {
+    get(getVideoTrigger);
+    const response = await getVideos();
+    return response.data;
+  },
+  set: ({ set }) => {
+    set(getVideoTrigger, (v) => v + 1);
+  },
 });
 
 export const vListByCategoryState = selector({
   key: 'vListByCategoryState',
   get: ({ get }) => {
     const selectNavName = get(leftNavItemState);
+    const videos = get(videoListState);
     let returnArr: any[] | Promise<any[]> | RecoilValue<any[]> = [];
     if (selectNavName === 'lol') {
-      returnArr = datas.videos.filter((data) => data.category === 'lol');
+      returnArr = videos.filter(
+        (data: { category: string }) => data.category === 'lol'
+      );
     } else if (selectNavName === 'pubg') {
-      returnArr = datas.videos.filter((data) => data.category === 'pubg');
+      returnArr = videos.filter(
+        (data: { category: string }) => data.category === 'pubg'
+      );
     } else if (selectNavName === 'overwatch') {
-      returnArr = datas.videos.filter((data) => data.category === 'overwatch');
+      returnArr = videos.filter(
+        (data: { category: string }) => data.category === 'overwatch'
+      );
     }
     return returnArr;
   },

diff --git a/src/components/Greeting/Greeting.tsx b/src/components/Greeting/Greeting.tsx
@@ -1,8 +1,12 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import Main from 'components/Main';
 
 const Gretting = () => {
-  return <Main />;
+  return (
+    <Suspense fallback={<div>...loading</div>}>
+      <Main />
+    </Suspense>
+  );
 };
 
 export default Gretting;
diff --git a/src/components/Main/LazyItem.tsx b/src/components/Main/LazyItem.tsx
@@ -7,7 +7,7 @@ import { typography } from 'styles/theme';
 export interface Iprops {
   src: string;
   describe: string;
-  hashtag: string;
+  // hashtag: string;
   likes: number;
   comments: number;
   pName: string;
@@ -20,70 +20,70 @@ const LazyVideo = lazy(() => import('./LazyVideo'));
 const LazyItem = ({
   src,
   describe,
-  hashtag,
+  // hashtag,
   likes,
   comments,
   pName,
   pPic,
   pFollowNum,
 }: Iprops) => {
   const themeStyle = useContext(ThemeContext);
-  const splitedHashtags = hashtag.split(' ');
+  // const splitedHashtags = hashtag.split(' ');
   return (
     <VideoItem>
-      <Suspense fallback={<div>...loading</div>}>
-        <LazyVideo
-          src={src}
-          describe={describe}
-          hashtag={hashtag}
-          likes={likes}
-          comments={comments}
-          pName={pName}
-          pPic={pPic}
-          pFollowNum={pFollowNum}
-        />
-        <InfoWrapper>
-          <div className="poster_info">
-            <PosterImgBtn
-              className="poster_img"
-              onClick={() => console.log('posteruserspage')}
-            >
-              <img src={pPic} alt="alt" className="userPicImg" />
-            </PosterImgBtn>
-            <PosterNameBtn onClick={() => console.log('posteruserspage')}>
-              <div className="poster_name">{pName}</div>
-              <div className="poster_followers">팔로워 {pFollowNum}</div>
-            </PosterNameBtn>
-            <div className="follow_btn_div">
-              <Button
-                text="팔로우"
-                onClick={() => console.log('팔로우')}
-                fontColor={themeStyle.color.white}
-                bkgColor={themeStyle.color.yellow}
-                padding="0.8rem 0.7rem"
-                width={5.5}
-                height={2.3}
-                borderRadius={0.5}
-                fontStyle={typography.bodyRgBold}
-                hoverBkgColor={themeStyle.color.white}
-                hoverFontColor={themeStyle.color.yellow}
-              />
-            </div>
-          </div>
-          <div className="desc_div">
-            <span className="describe_span">{describe}</span>
-            {splitedHashtags.map((tag: string) => (
-              <Hashtag
-                onClick={() => console.log('팔로우')}
-                key={splitedHashtags.indexOf(`${tag}`)}
-              >
-                {tag}
-              </Hashtag>
-            ))}
+      {/* <Suspense fallback={<div>...loading</div>}> */}
+      <LazyVideo
+        src={src}
+        describe={describe}
+        // hashtag={hashtag}
+        likes={likes}
+        comments={comments}
+        pName={pName}
+        pPic={pPic}
+        pFollowNum={pFollowNum}
+      />
+      <InfoWrapper>
+        <div className="poster_info">
+          <PosterImgBtn
+            className="poster_img"
+            onClick={() => console.log('posteruserspage')}
+          >
+            <img src={pPic} alt="alt" className="userPicImg" />
+          </PosterImgBtn>
+          <PosterNameBtn onClick={() => console.log('posteruserspage')}>
+            <div className="poster_name">{pName}</div>
+            <div className="poster_followers">팔로워 {pFollowNum}</div>
+          </PosterNameBtn>
+          <div className="follow_btn_div">
+            <Button
+              text="팔로우"
+              onClick={() => console.log('팔로우')}
+              fontColor={themeStyle.color.white}
+              bkgColor={themeStyle.color.yellow}
+              padding="0.8rem 0.7rem"
+              width={5.5}
+              height={2.3}
+              borderRadius={0.5}
+              fontStyle={typography.bodyRgBold}
+              hoverBkgColor={themeStyle.color.white}
+              hoverFontColor={themeStyle.color.yellow}
+            />
           </div>
-        </InfoWrapper>
-        <Line />
-      </Suspense>
+        </div>
+        <div className="desc_div">
+          <span className="describe_span">{describe}</span>
+          {/* {splitedHashtags.map((tag: string) => (
+            <Hashtag
+              onClick={() => console.log('팔로우')}
+              key={splitedHashtags.indexOf(`${tag}`)}
+            >
+              {tag}
+            </Hashtag>
+          ))} */}
+        </div>
+      </InfoWrapper>
+      <Line />
+      {/* </Suspense> */}
     </VideoItem>
   );
 };

diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 import { EUploadStep } from 'enum/uploadStep.enum';
 import VideoWrapper from 'styles/mainStyles/videoComponents/videoWrapper';
 import ModalContainer from 'common/ModalContainer';
@@ -8,6 +8,7 @@ import MainWrapper from 'styles/mainStyles/videoComponents/MainWrapper';
 import Upload from 'components/Upload';
 import { uploadModalStep } from 'atom/uploadModalStepAtom';
 import { uploadModalPopState } from 'atom/uploadModalPopStateAtom';
+import { videoListState } from 'atom/videoListAtom';
 import VideoSelectBar from './VideoSelectBar';
 import VideoList from './VideoList';
 
@@ -16,8 +17,10 @@ const Main = () => {
     useRecoilState(uploadModalStep);
   const [isUploadModalPoped, setUploadModalPopState] =
     useRecoilState(uploadModalPopState);
+  const [_, refechVideoList] = useRecoilState(videoListState);
 
   const closeUploadModal = () => {
+    refechVideoList(0);
     setUploadModalPopState(false);
     setUploadModalStep(EUploadStep.FIRST_STEP);
   };

diff --git a/src/components/Main/VideoList.tsx b/src/components/Main/VideoList.tsx
@@ -22,7 +22,7 @@ const VideoList = () => {
               key={data.id}
               src={data.src}
               describe={data.describe}
-              hashtag={data.hashtag}
+              // hashtag={data.hashtag}
               likes={data.likes}
               comments={data.comments}
               pName={data.poster.name}
@@ -47,7 +47,7 @@ const VideoList = () => {
               key={data.id}
               src={data.src}
               describe={data.describe}
-              hashtag={data.hashtag}
+              // hashtag={data.hashtag}
               likes={data.likes}
               comments={data.comments}
               pName={data.poster.name}