Skip to content

Commit

Permalink
[#26] feat: Video src, description, category upload implemented
Browse files Browse the repository at this point in the history
  • Loading branch information
hanbin9775 committed Aug 15, 2021
1 parent ee240cc commit bda5eba
Show file tree
Hide file tree
Showing 6 changed files with 112 additions and 10 deletions.
7 changes: 7 additions & 0 deletions src/api/upload/upload.dto.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export type uploadDto = {
userId: string;
describe: string;
category: string;
description?: string;
video: string;
};
10 changes: 10 additions & 0 deletions src/api/upload/upload.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import customAxios from 'lib/axios';
import { uploadDto } from './upload.dto';

const upload = async (dto: uploadDto) => {
const data = await customAxios.post('/videos', dto);

return data;
};

export default upload;
4 changes: 4 additions & 0 deletions src/components/Upload/FirstContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,10 @@ import styled, { ThemeContext } from 'styled-components';
import UploadFind from 'assets/svg/upload_1.svg';
import LevelOne from 'assets/svg/upload_level_1.svg';
import Button from 'common/Button';
import useUpload from 'hooks/useUpload/useUpload';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { isNext } from 'atom/uploadIsNext';
import { myProfileAtom } from 'atom/profileAtom';
import { uploadModalStep } from 'atom/uploadModalAtom';
import { uploadSelectedFile } from 'atom/uploadSelectedFile';
import { EUploadStep } from 'enum/uploadStep.enum';
Expand All @@ -17,10 +19,12 @@ interface IActiveStyleProps {

const FirstContent = () => {
const themeStyle = useContext(ThemeContext);
const myProfile = useRecoilValue(myProfileAtom);
const [selectedFile, setSelectedFile] = useState<string | ArrayBuffer | null>(
''
);
const setRecoilSelectedFile = useSetRecoilState(uploadSelectedFile);

const onChange = (event: any) => {
const file = event.target.files[0];
const reader = new FileReader();
Expand Down
40 changes: 32 additions & 8 deletions src/components/Upload/SecondContent.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import { isNext } from 'atom/uploadIsNext';
import { uploadModalStep } from 'atom/uploadModalAtom';
import { uploadSelectedFile } from 'atom/uploadSelectedFile';
import React, { useContext, useState, useEffect } from 'react';
import styled, { ThemeContext } from 'styled-components';
import useUpload from 'hooks/useUpload/useUpload';
import Button from 'common/Button';
import React, { useContext, useState } from 'react';

import { useRecoilState, useRecoilValue } from 'recoil';
import styled, { ThemeContext } from 'styled-components';
import { uploadModalStep } from 'atom/uploadModalAtom';
import { myProfileAtom } from 'atom/profileAtom';
import { uploadSelectedFile } from 'atom/uploadSelectedFile';
import { isNext } from 'atom/uploadIsNext';

import {
enabledButtonStyle,
getButtonStyleByCondition,
Expand All @@ -16,31 +20,51 @@ interface IActiveStyleProps {
active: boolean;
}

const GAME_CATEGORY = ['리그오브레전드', '배틀그라운드', '오버워치'];

const SecondContent = () => {
const themeStyle = useContext(ThemeContext);
const isNextContent = useRecoilValue(isNext);

const useRecoilSeletedFile = useRecoilValue(uploadSelectedFile);
const selectedFile = useRecoilValue(uploadSelectedFile);
const myProfile = useRecoilValue(myProfileAtom);
const [currentStep, setCurrentStep] = useRecoilState(uploadModalStep);

const [text, setText] = useState('');
const [selectedButton, setSelectedButton] = useState(0);
const [readyToUpload, setReadyToUpload] = useState(false);

const { uploadObj, setUploadObj, handleUpload, uploadErrorStatus } =
useUpload();

const selectButton = (value: React.SetStateAction<number>) => {
console.log(uploadObj);
setUploadObj({
...uploadObj,
category: GAME_CATEGORY[selectedButton - 1],
});
setSelectedButton(value);
console.log(uploadObj);
};
const handleChange = (e: any) => {
setUploadObj({
...uploadObj,
description: e.target.value,
});
setText(e.target.value);
};
const onClickUpload = () => {
if (selectedButton > 0) setCurrentStep(currentStep + 1);
if (selectedButton > 0) {
handleUpload();
setCurrentStep(currentStep + 1);
}
};

return (
<ContentWrapper active={currentStep === EUploadStep.SECOND_STEP}>
<FlexWrapper>
<VideoWrapper>
<video autoPlay muted loop src={useRecoilSeletedFile as string} />
<video autoPlay muted loop src={selectedFile as string} />
</VideoWrapper>
<VideoContentWrapper>
<VideoContent>
Expand Down
7 changes: 5 additions & 2 deletions src/components/Upload/UploadContent.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,21 @@
import { isNext } from 'atom/uploadIsNext';
import React from 'react';
import { useRecoilValue } from 'recoil';
import { uploadModalStep } from 'atom/uploadModalAtom';
import styled from 'styled-components';
import { EUploadStep } from 'enum/uploadStep.enum';
import SecondContent from './SecondContent';
import FirstContent from './FirstContent';

interface IActiveStyleProps {
active: boolean;
}
const UploadContent = () => {
const currentStep = useRecoilValue(uploadModalStep);
return (
<ContentWrapper>
<FirstContent />
<SecondContent />
{currentStep === EUploadStep.FIRST_STEP && <FirstContent />}
{currentStep === EUploadStep.SECOND_STEP && <SecondContent />}
</ContentWrapper>
);
};
Expand Down
54 changes: 54 additions & 0 deletions src/hooks/useUpload/useUpload.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { useCallback, useState } from 'react';
import upload from 'api/upload/upload';
import useProfile from 'hooks/useProfile/useProfile';
import { uploadDto } from 'api/upload/upload.dto';

import { useRecoilValue } from 'recoil';
import { uploadSelectedFile } from 'atom/uploadSelectedFile';
import { myProfileAtom } from 'atom/profileAtom';

const useUpload = () => {
const myProfile = useRecoilValue(myProfileAtom);
const selectedFile = useRecoilValue(uploadSelectedFile);
const [uploadObj, setUploadObj] = useState<uploadDto>({
userId: myProfile?.id || '',
describe: '',
category: '',
description: '',
video: (selectedFile as string) || '',
});
const { handleMyProfile } = useProfile();

const [uploadErrorStatus, setUploadErrorStatus] = useState<number>(0);

const handleUpload = useCallback(async () => {
try {
const res = await upload(uploadObj);
const { data, status } = res;

if (status === 400) {
throw new Error('잘못된 입력');
}
if (status === 401) {
throw new Error('권한이 없음');
}

await handleMyProfile();

return data;
} catch (err) {
const { status } = err.response;
setUploadErrorStatus(status);
return err;
}
}, [handleMyProfile, uploadObj]);

return {
uploadObj,
setUploadObj,
handleUpload,
uploadErrorStatus,
};
};

export default useUpload;

0 comments on commit bda5eba

Please sign in to comment.