Skip to content

Commit

Permalink
feat: report recruit, user layout, api - #49
Browse files Browse the repository at this point in the history
  • Loading branch information
@byein
byein committed Jan 18, 2023
1 parent 505c1fe commit 8e4d0ae
Show file tree
Hide file tree
Showing 5 changed files with 410 additions and 167 deletions.
13 changes: 12 additions & 1 deletion baedalmate/src/components/atoms/Report/ReportListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,14 @@ import {
} from 'themes/theme';
import {Fonts} from '../../../assets/Fonts';

const ReportListItem = ({type, item, onPress, selectedReportReason}) => {
const ReportListItem = ({
type,
item,
onPress,
selectedReportReason,
detailReport,
setDetailReport,
}) => {
return (
<View>
<TouchableOpacity style={styles.myPageListItem} onPress={onPress}>
Expand Down Expand Up @@ -65,6 +72,10 @@ const ReportListItem = ({type, item, onPress, selectedReportReason}) => {
color: '#313131',
padding: 15,
}}
value={detailReport}
onChangeText={v => {
setDetailReport(v);
}}
placeholder={'신고 사유를 작성해주세요. (100자 이내)'}
placeholderTextColor={'#C8C8C8'}
multiline
Expand Down
238 changes: 155 additions & 83 deletions baedalmate/src/components/pages/Report/ItemReport.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import React, {useState} from 'react';
import {ScrollView, View} from 'react-native';
import {KeyboardAvoidingView, Platform, ScrollView, View} from 'react-native';
import {DARK_GRAY_COLOR, PRIMARY_COLOR, WHITE_COLOR} from 'themes/theme';
import MyPageListItem from 'components/atoms/Setting/MyPageListItem';
import MyPageBar from 'components/atoms/Setting/MyPageBar';
import {TextKRBold, TextKRReg} from 'themes/text';
import BtnVerticalOrange from 'components/atoms/Button/BtnVerticalOrange';
import ReportListItem from 'components/atoms/Report/ReportListItem';

import {postReportRecruitAPI} from 'components/utils/api/Report';
import {UsePopup} from 'components/utils/usePopup';
import {postBlockAPI} from 'components/utils/api/Block';
export interface MyPageI {
userId: number;
nickname: string;
Expand All @@ -23,8 +25,10 @@ export const MyPageUserDummyData = {
};

const ItemReport = ({route, navigation}) => {
// const navigation = useNavigation();
const [selectedReportReason, setSelectedReportReason] = useState(-1);
const targetRecruitId = route.params.item.recruitId;
const [detailReport, setDetailReport] = useState('');
const userInfo = route.params.userInfo;
const ItemReportList = [
{
value: 0,
Expand Down Expand Up @@ -59,42 +63,83 @@ const ItemReport = ({route, navigation}) => {
name: '다른 문제가 있어요',
},
];
const [modal, setModal] = useState(false);
const handleModal = () => {
modal ? setModal(false) : setModal(true);
};
const blockUser = async () => {
if (userInfo?.userId) {
const result = await postBlockAPI(userInfo?.userId);
if (result) {
console.log('block user', result);
}
}
};
const successModalData = {
title: '신고가 완료되었습니다.',
description: `신고 심사 결과에 따라 처리됩니다.\n'${userInfo.nickname}'님을 차단하시겠습니까?`,
modal: modal,
handleModal: handleModal,
confirmEvent: blockUser,
choiceCnt: 2,
};
const errorModalData = {
title: '신고에 실패하였습니다.',
description: '',
modal: modal,
handleModal: handleModal,
confirmEvent: handleModal,
choiceCnt: 1,
};
const [modalData, setModalData] = useState<{
title: string;
description: string;
modal: boolean;
handleModal: () => void;
confirmEvent: any;
choiceCnt: number;
}>(successModalData);
const UserReportList = [
{
name: '사용자 신고하러 가기',
onPress: () => {
navigation.navigate('사용자 신고하기');
navigation.navigate('사용자 신고하기', {
userInfo: userInfo,
} as never);
},
},
];

// const renderItem = ({item}) => {
// return (
// <TouchableOpacity
// onPress={() => {
// setSelectedReportReason(item.value);
// }}
// style={{
// height: 52,
// width: '100%',
// paddingHorizontal: 15,
// justifyContent: 'center',
// borderBottomColor: LINE_GRAY_COLOR,
// borderBottomWidth: 1,
// }}>
// <TextKRReg
// style={{
// fontWeight: '400',
// fontSize: 16,
// lineHeight: 24,
// color:
// selectedReportReason === item.name ? PRIMARY_COLOR : '#666666',
// }}>
// {item.name}
// </TextKRReg>
// </TouchableOpacity>
// );
// };
const reportItem = async () => {
const result = await postReportRecruitAPI(
targetRecruitId,
ItemReportList[selectedReportReason].name,
detailReport,
);
console.log('report item ', result);
if ('result' in result) {
setModalData(successModalData);
handleModal();
} else {
if (result.response.data.code === 400) {
if (result.response.data.message === 'Api request body invalid') {
errorModalData.description = '필수 정보가 누락되었습니다.';
} else if (result.response.data.message === 'Already reported') {
errorModalData.description = '이미 신고하였습니다.';
} else if (
result.response.data.message === 'Users cannot report themselves'
) {
errorModalData.description = '자기 자신은 신고가 불가능합니다.';
}
} else if (result.response.data.code === 401) {
errorModalData.description = '토큰이 만료되었습니다.';
} else if (result.response.data.code === 403) {
errorModalData.description = '권한이 부족합니다.';
}
setModalData(errorModalData);
handleModal();
}
};
return (
<>
<ScrollView
Expand All @@ -105,59 +150,76 @@ const ItemReport = ({route, navigation}) => {
paddingVertical: 10,
backgroundColor: WHITE_COLOR,
}}>
<View style={{marginTop: 18, marginBottom: 35}}>
<TextKRBold
style={{
fontSize: 14,
lineHeight: 17,
color: PRIMARY_COLOR,
}}>
게시글을 신고하는 사유를 선택해주세요
</TextKRBold>
<TextKRReg
style={{
marginTop: 5,
marginBottom: 7,
fontSize: 12,
lineHeight: 18,
color: DARK_GRAY_COLOR,
}}>
신고 사유 검토후, 검토 결과에 따라 처리됩니다.{' '}
</TextKRReg>
<View>
{ItemReportList.map((v, i) => (
<View key={i}>
<MyPageBar height={1} />
<ReportListItem
type={'ITEM'}
item={v}
onPress={() => {
setSelectedReportReason(v.value);
}}
selectedReportReason={selectedReportReason}
/>
</View>
))}
<UsePopup
title={modalData.title}
description={modalData.description}
modal={modal}
handleModal={handleModal}
// 추가 필요
confirmEvent={modalData.confirmEvent}
choiceCnt={modalData.choiceCnt}
/>
<KeyboardAvoidingView
style={{flex: 1}}
behavior={Platform.select({ios: 'padding'})}
keyboardVerticalOffset={120}>
<View style={{marginTop: 18, marginBottom: 35}}>
<TextKRBold
style={{
fontSize: 14,
lineHeight: 17,
color: PRIMARY_COLOR,
}}>
게시글을 신고하는 사유를 선택해주세요
</TextKRBold>
<TextKRReg
style={{
marginTop: 5,
marginBottom: 7,
fontSize: 12,
lineHeight: 18,
color: DARK_GRAY_COLOR,
}}>
신고 사유 검토후, 검토 결과에 따라 처리됩니다.{' '}
</TextKRReg>
<View>
{ItemReportList.map((v, i) => (
<View key={i}>
<MyPageBar height={1} />
<ReportListItem
type={'ITEM'}
item={v}
onPress={() => {
setSelectedReportReason(v.value);
setDetailReport('');
}}
selectedReportReason={selectedReportReason}
detailReport={detailReport}
setDetailReport={setDetailReport}
/>
</View>
))}
</View>
</View>
</View>
<View style={{marginTop: 18}}>
<TextKRBold
style={{
fontSize: 14,
lineHeight: 17,
color: PRIMARY_COLOR,
}}>
‘캡스톤 디자인’ 님을 신고하고 싶으신가요?
</TextKRBold>
<View>
{UserReportList.map((v, i) => (
<View key={i}>
{i !== 0 && <MyPageBar height={1} />}
<MyPageListItem item={v} />
</View>
))}
<View style={{marginTop: 18}}>
<TextKRBold
style={{
fontSize: 14,
lineHeight: 17,
color: PRIMARY_COLOR,
}}>
‘{userInfo.nickname}’ 님을 신고하고 싶으신가요?
</TextKRBold>
<View>
{UserReportList.map((v, i) => (
<View key={i}>
{i !== 0 && <MyPageBar height={1} />}
<MyPageListItem item={v} />
</View>
))}
</View>
</View>
</View>
</KeyboardAvoidingView>
<View style={{height: 143, width: '100%'}} />
</ScrollView>
<View
Expand All @@ -167,7 +229,17 @@ const ItemReport = ({route, navigation}) => {
position: 'absolute',
bottom: 45,
}}>
<BtnVerticalOrange onPress={() => {}} text={'신고하기'} />
<BtnVerticalOrange
onPress={() => {
if (
selectedReportReason === -1 ||
(selectedReportReason === 7 && detailReport === '')
)
return;
reportItem();
}}
text={'신고하기'}
/>
</View>
</>
);
Expand Down
Loading

0 comments on commit 8e4d0ae

Please sign in to comment.