From e6ffe61bfb7a4f5814a7d9ca5a317d56ccae4099 Mon Sep 17 00:00:00 2001 From: gigibean Date: Wed, 18 Aug 2021 17:41:58 +0900 Subject: [PATCH] [#26] update fetching videos --- src/api/video/video.ts | 10 +++ src/atom/videoListAtom.ts | 31 ++++++-- src/components/Greeting/Greeting.tsx | 8 +- src/components/Main/LazyItem.tsx | 110 +++++++++++++-------------- src/components/Main/Main.tsx | 5 +- src/components/Main/VideoList.tsx | 4 +- 6 files changed, 102 insertions(+), 66 deletions(-) create mode 100644 src/api/video/video.ts diff --git a/src/api/video/video.ts b/src/api/video/video.ts new file mode 100644 index 0000000..72f7851 --- /dev/null +++ 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 index 4233363..c9b628c 100644 --- 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 | RecoilValue = []; 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 index 8ef2690..186d236 100644 --- 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
; + return ( + ...loading}> +
+ + ); }; export default Gretting; diff --git a/src/components/Main/LazyItem.tsx b/src/components/Main/LazyItem.tsx index 61f3eea..1a4269c 100644 --- 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,7 +20,7 @@ const LazyVideo = lazy(() => import('./LazyVideo')); const LazyItem = ({ src, describe, - hashtag, + // hashtag, likes, comments, pName, @@ -28,62 +28,62 @@ const LazyItem = ({ pFollowNum, }: Iprops) => { const themeStyle = useContext(ThemeContext); - const splitedHashtags = hashtag.split(' '); + // const splitedHashtags = hashtag.split(' '); return ( - ...loading}> - - -
- console.log('posteruserspage')} - > - alt - - console.log('posteruserspage')}> -
{pName}
-
팔로워 {pFollowNum}
-
-
-
-
-
- {describe} - {splitedHashtags.map((tag: string) => ( - console.log('팔로우')} - key={splitedHashtags.indexOf(`${tag}`)} - > - {tag} - - ))} + {/* ...loading
}> */} + + +
+ console.log('posteruserspage')} + > + alt + + console.log('posteruserspage')}> +
{pName}
+
팔로워 {pFollowNum}
+
+
+
- - - +
+
+ {describe} + {/* {splitedHashtags.map((tag: string) => ( + console.log('팔로우')} + key={splitedHashtags.indexOf(`${tag}`)} + > + {tag} + + ))} */} +
+
+ + {/*
*/}
); }; diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx index 2fda25e..56a902b 100644 --- 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 index 020b25f..499a265 100644 --- 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}