From 12bd4c45b82c0fd25664162227990a36fbf95b9f Mon Sep 17 00:00:00 2001 From: yejinleee Date: Sat, 9 Jul 2022 01:49:51 +0900 Subject: [PATCH 1/4] =?UTF-8?q?Style:=20=EB=84=A4=ED=8A=B8=EC=9B=8C?= =?UTF-8?q?=ED=81=AC=ED=99=94=EB=A9=B4,=20=ED=94=84=EB=A1=9C=ED=95=84?= =?UTF-8?q?=ED=85=8C=EB=91=90=EB=A6=AC,=20=EC=84=B1=EA=B3=B5=EC=B9=B4?= =?UTF-8?q?=EB=93=9C=20'=EB=AF=B8=EC=85=98=EC=84=B1=EA=B3=B5'=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=20=EB=93=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ConnectionError.tsx | 18 ++++++++++++++---- src/components/MissionNo.tsx | 2 +- src/components/MissionProcess.tsx | 4 ++-- src/components/MissionSuccessfulCard.tsx | 2 +- src/components/MissionUser.tsx | 2 ++ src/screens/Mission.tsx | 1 - 6 files changed, 20 insertions(+), 9 deletions(-) diff --git a/src/components/ConnectionError.tsx b/src/components/ConnectionError.tsx index 20ded6a..4855a82 100644 --- a/src/components/ConnectionError.tsx +++ b/src/components/ConnectionError.tsx @@ -1,6 +1,8 @@ import React, {FC} from 'react'; import {Image, Text, TouchableOpacity, View} from 'react-native'; import {DesignSystem} from '../assets/DesignSystem'; +import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'; +import {calHeight, calWidth} from '../assets/CalculateLength'; export type ConnectionErrorProps = { refetch: any; @@ -8,20 +10,28 @@ export type ConnectionErrorProps = { export const ConnectionError: FC = ({refetch}) => { return ( - + - + 연결에 실패했어요 - + 네트워크를 확인해주세요 { refetch(); }} > - 새로고침 + 새로고침 ); diff --git a/src/components/MissionNo.tsx b/src/components/MissionNo.tsx index ff10e4c..d0b9847 100644 --- a/src/components/MissionNo.tsx +++ b/src/components/MissionNo.tsx @@ -9,7 +9,7 @@ export type MissionNoProps = { export const MissionNo: FC = ({progressnow}) => { return ( - {progressnow === 0 ? '진행중인 미션이 없네요' : '진행한 미션이 없네요'} + {progressnow === 0 ? '진행중인 미션이 없어요!' : '완료한 미션이 없어요!'} {'홈화면에서 미션을 도전 해보세요 :)'} {progressnow === 0 ? ( diff --git a/src/components/MissionProcess.tsx b/src/components/MissionProcess.tsx index da12491..f934d30 100644 --- a/src/components/MissionProcess.tsx +++ b/src/components/MissionProcess.tsx @@ -55,8 +55,8 @@ const styles = StyleSheet.create({ processWrap: { alignItems: 'center', justifyContent: 'center', - marginTop: 19, - marginBottom: 14, + marginTop: 15, + marginBottom: 15, }, processTextRow: { flexDirection: 'row', diff --git a/src/components/MissionSuccessfulCard.tsx b/src/components/MissionSuccessfulCard.tsx index 52ef9ae..f75f87a 100644 --- a/src/components/MissionSuccessfulCard.tsx +++ b/src/components/MissionSuccessfulCard.tsx @@ -40,7 +40,7 @@ export const MissionSuccessfulCard: FC = ({ - {successDate.slice(5,7)}/{successDate.slice(8,10)} ({dayOfWeek}) • {'미션 성공'} + {successDate.slice(5,7)}/{successDate.slice(8,10)} ({dayOfWeek}) {storeName} {storeCategory} diff --git a/src/components/MissionUser.tsx b/src/components/MissionUser.tsx index c1a05e6..da92819 100644 --- a/src/components/MissionUser.tsx +++ b/src/components/MissionUser.tsx @@ -51,6 +51,8 @@ const styles = StyleSheet.create({ height: 56, borderRadius: 28, marginBottom: 8, + borderWidth: 1, + borderColor: '#DFDFDF', }, userWrap: { flex: 1, diff --git a/src/screens/Mission.tsx b/src/screens/Mission.tsx index 236dd8d..ef453c2 100644 --- a/src/screens/Mission.tsx +++ b/src/screens/Mission.tsx @@ -11,7 +11,6 @@ import {customAxios} from '../api/customAxios'; import {useRecoilValue} from 'recoil'; import {userToken} from '../state'; import {useQuery} from 'react-query'; -import {AxiosError} from 'axios'; export type DataUserType = { authentication: boolean; From 162586e6e36b246d5e54c9f89d6a7c378edba474 Mon Sep 17 00:00:00 2001 From: yejinleee Date: Sat, 9 Jul 2022 02:30:17 +0900 Subject: [PATCH 2/4] =?UTF-8?q?Feat:=20useInfiniteQuery=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0=20=EC=A4=91=20(=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1?= =?UTF-8?q?=20=EC=99=84=EB=A3=8C)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/screens/RegisterForm.tsx | 2 +- src/screens/my/MyPoint.tsx | 69 +++++++++++++++++++++++++++++------- 2 files changed, 57 insertions(+), 14 deletions(-) diff --git a/src/screens/RegisterForm.tsx b/src/screens/RegisterForm.tsx index ab61d62..17a88a6 100644 --- a/src/screens/RegisterForm.tsx +++ b/src/screens/RegisterForm.tsx @@ -49,7 +49,7 @@ const RegisterForm = ({navigation, route}: Props) => { diff --git a/src/screens/my/MyPoint.tsx b/src/screens/my/MyPoint.tsx index 7cf21b4..e080e0c 100644 --- a/src/screens/my/MyPoint.tsx +++ b/src/screens/my/MyPoint.tsx @@ -1,4 +1,4 @@ -import React, {useEffect, useState} from 'react'; +import React, {useState} from 'react'; import {View, StyleSheet, Text, TouchableOpacity, SafeAreaView, FlatList} from 'react-native'; import type {NativeStackScreenProps} from '@react-navigation/native-stack'; import {MyStackParamList} from '../../nav/MyNavigator'; @@ -7,10 +7,8 @@ import {MyPointList} from '../../components/My/MyPointList'; import {DesignSystem} from '../../assets/DesignSystem'; import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'; import {calHeight, calWidth} from '../../assets/CalculateLength'; -import {userToken} from '../../state'; -import {useRecoilValue} from 'recoil'; import {customAxios} from '../../api/customAxios'; -import {useQuery} from 'react-query'; +import {useInfiniteQuery} from 'react-query'; import {queryKey} from '../../api/queryKey'; type Props = NativeStackScreenProps; @@ -20,9 +18,12 @@ export type PointsListContent = { subTitle: string; title: string; }; + export type PointsListType = { - content: PointsListContent[]; - totalPoints: number; + result: PointsListContent[]; + isLast: boolean; + // nextPage: number; + pageNumber: number; }; const dummyMission = [ { @@ -50,21 +51,61 @@ const dummyMission = [ }, ]; export const MyPoint = ({navigation, route}: Props) => { - const token = useRecoilValue(userToken); const [point, setPoint] = useState(route.params.point); + // ```//한 페이지단위래 + // { + // result: { + // totalPoints: 0 + // point: { + // content: [ + // { + // date: . . + // } + // ], + // last: true, + // }, + // } + // } + // ``` //마이페이지 - 나의 포인트 내역 조회 const getPointsList = async () => { - const {data} = await customAxios(token).get('/api/v1/points/list/me'); - return data.result; + const {data} = await customAxios().get('/api/v1/points/list/me', { + params: { + pageNumber: 1, + }, + }); + // console.log('d', data.result.point.content[0].date); + return { + result: data.result.point.content, + isLast: data.result.point.last, //그페이지가 끝인건지 아닌지TF + // nextPage: pageParam + 1, + pageNumber: data.result.point.pageable.pageNumber, + totalPoints: data.result.totalPoints, + }; }; - const DataPointsList = useQuery([queryKey.POINTSLIST, token], getPointsList); + // const DataPointsList = useQuery(queryKey.POINTSLIST, getPointsList); // DataPointsList.content (//point없애줘..) 로 접근 // DataPointsList.totalPoints로 접근 + //inf시도 + const res = useInfiniteQuery(queryKey.POINTSLIST, getPointsList, { + //첫번째인자 - 호출된 가장 마지막에 있는 페이지 데이터 + //두번째인자 - 호출된 모든 페이지 데이터 + //(벨로그) 현재 받아온데이터 , 현재 쌓여있는 전체 데이터. 페이지정보 받아올수있다면 사용하면될것 + // lastPage(첫인자)엔 저 위에 getPointsList에서 리턴한 {result:~, isLAst ~~} + getNextPageParam: (lastPage, _allPages) => { + if (!lastPage.isLast) return lastPage.pageNumber + 1; //다음 페이지를 호출할 때 사용 될 pageParam + // if (!lastPage.isLast) return _allPages.length + 1; // ? _ ? + return undefined; + }, + }); + // + console.log('rrr', res.data.pages); const goBack = () => { navigation.goBack(); }; - + // 호출시 + // {res.data.pages[0].result[0].date} return ( <> @@ -74,8 +115,8 @@ export const MyPoint = ({navigation, route}: Props) => { 내 포인트 - - {point.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}P + + {res.data.pages[0].totalPoints.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}P {/* {DataPointsList.totalPoints.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}P */} @@ -109,6 +150,8 @@ export const MyPoint = ({navigation, route}: Props) => { )} ItemSeparatorComponent={() => } + //무한스크롤 + // onEndReached={ threshold에도달 시 실행할함수} /> From 7a8d1b1d3d527c98446489046b9b97b2196dbde4 Mon Sep 17 00:00:00 2001 From: yejinleee Date: Sat, 9 Jul 2022 13:55:15 +0900 Subject: [PATCH 3/4] Bug: MyPoint useinfiniteQuery --- src/screens/RegisterCategory.tsx | 3 +- src/screens/my/MyPoint.tsx | 76 ++++++++++++++++++++------------ 2 files changed, 49 insertions(+), 30 deletions(-) diff --git a/src/screens/RegisterCategory.tsx b/src/screens/RegisterCategory.tsx index 22b6f01..37cdfb1 100644 --- a/src/screens/RegisterCategory.tsx +++ b/src/screens/RegisterCategory.tsx @@ -83,9 +83,10 @@ const RegisterCategory = ({navigation, route}: Props) => { // }; const renderedCategories = () => { - return categoryList.map((item) => { + return categoryList.map((item, idx) => { return ( { if (selectedCategories.includes(item.id)) { setSelectedCategories((current) => diff --git a/src/screens/my/MyPoint.tsx b/src/screens/my/MyPoint.tsx index e080e0c..314eca9 100644 --- a/src/screens/my/MyPoint.tsx +++ b/src/screens/my/MyPoint.tsx @@ -10,6 +10,7 @@ import {calHeight, calWidth} from '../../assets/CalculateLength'; import {customAxios} from '../../api/customAxios'; import {useInfiniteQuery} from 'react-query'; import {queryKey} from '../../api/queryKey'; +import { resolvePath } from 'react-native-reanimated/lib/types/lib/reanimated2/animation/styleAnimation'; type Props = NativeStackScreenProps; export type PointsListContent = { @@ -69,43 +70,58 @@ export const MyPoint = ({navigation, route}: Props) => { // ``` //마이페이지 - 나의 포인트 내역 조회 const getPointsList = async () => { - const {data} = await customAxios().get('/api/v1/points/list/me', { + const response = await customAxios().get('/api/v1/points/list/me', { params: { - pageNumber: 1, + pageNumber: 0, }, }); + // console.log('받아아', response.data.result.point.content.length); //왜 20개씩 옵니까 ? + // console.log('여여ㅕㅇ',response);//response.data.result 하면 스웨커대로 + // console.log(data.result.point);x // console.log('d', data.result.point.content[0].date); - return { - result: data.result.point.content, - isLast: data.result.point.last, //그페이지가 끝인건지 아닌지TF - // nextPage: pageParam + 1, - pageNumber: data.result.point.pageable.pageNumber, - totalPoints: data.result.totalPoints, - }; + // return { + // result: data.result.point.content, + // isLast: data.result.point.last, //그페이지가 끝인건지 아닌지TF + // // nextPage: pageParam + 1, + // pageNumber: data.result.point.pageable.pageNumber, + // totalPoints: data.result.totalPoints, + // }; + // console.log(response.data); + //{"code": 1000, "isSuccess": true, "message": ["요청에 성공하였습 니다."], "result": {"point": {"content": [Array], "empty": false, "first": true, "last": false, "number": 0, "numberOfElements": 20, "pageable": [Object], "size": 20, "sort": [Object]}, "totalPoints": 750}} + return response; }; - // const DataPointsList = useQuery(queryKey.POINTSLIST, getPointsList); - // DataPointsList.content (//point없애줘..) 로 접근 - // DataPointsList.totalPoints로 접근 //inf시도 - const res = useInfiniteQuery(queryKey.POINTSLIST, getPointsList, { - //첫번째인자 - 호출된 가장 마지막에 있는 페이지 데이터 - //두번째인자 - 호출된 모든 페이지 데이터 - //(벨로그) 현재 받아온데이터 , 현재 쌓여있는 전체 데이터. 페이지정보 받아올수있다면 사용하면될것 - // lastPage(첫인자)엔 저 위에 getPointsList에서 리턴한 {result:~, isLAst ~~} - getNextPageParam: (lastPage, _allPages) => { - if (!lastPage.isLast) return lastPage.pageNumber + 1; //다음 페이지를 호출할 때 사용 될 pageParam - // if (!lastPage.isLast) return _allPages.length + 1; // ? _ ? - return undefined; + const {isLoading, data, hasNextPage, fetchNextPage} = useInfiniteQuery( + queryKey.POINTSLIST, + getPointsList, + { + //첫번째인자 - 호출된 가장 마지막에 있는 페이지 데이터 + //두번째인자 - 호출된 모든 페이지 데이터 + //(벨로그) 현재 받아온데이터 , 현재 쌓여있는 전체 데이터. 페이지정보 받아올수있다면 사용하면될것 + // lastPage(첫인자)엔 저 위에 getPointsList에서 리턴한 {result:~, isLAst ~~} + //getNextPageParam= retrives # of next page + getNextPageParam: (lastPage, _allPages) => { + // console.log('요건몰까',lastPage.data.result.point.last); //스웨거대로임 + if (!lastPage.data.result.point.last) return lastPage.data.result.point.pageable.pageNumber + 1; //다음 페이지를 호출할 때 사용 될 pageParam + // if (!lastPage.isLast) return _allPages.length + 1; // ? _ ? + return undefined; + }, }, - }); + ); + // console.log('dd',data?.pages[0].data.result.point.content[0]); //더미데이터같은형식 + console.log('총포인트', data?.pages[0].data.result.totalPoints); + const loadMore = () => { + if (hasNextPage) { + fetchNextPage(); + } + }; // - console.log('rrr', res.data.pages); + // console.log('rrr', res.data?.pages); + // [{"isLast": false, "pageNumber": 0, "result": [[Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object], [Object]], "totalPoints": 750}] const goBack = () => { navigation.goBack(); }; - // 호출시 - // {res.data.pages[0].result[0].date} return ( <> @@ -116,7 +132,7 @@ export const MyPoint = ({navigation, route}: Props) => { 내 포인트 - {res.data.pages[0].totalPoints.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}P + {data?.pages[0].data.result.totalPoints.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}P {/* {DataPointsList.totalPoints.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}P */} @@ -135,10 +151,12 @@ export const MyPoint = ({navigation, route}: Props) => { 포인트 내역 ( <> Date: Sat, 9 Jul 2022 14:50:43 +0900 Subject: [PATCH 4/4] =?UTF-8?q?Feat:=20add=20api=20for=20MyPage=20MyUser?= =?UTF-8?q?=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/My/MyUser.tsx | 2 +- src/screens/my/MyEditUserInfo.tsx | 20 ++++++++------------ src/screens/my/MyPage.tsx | 31 +++++++++++++++---------------- src/screens/my/MyPoint.tsx | 2 +- 4 files changed, 25 insertions(+), 30 deletions(-) diff --git a/src/components/My/MyUser.tsx b/src/components/My/MyUser.tsx index 191a40e..0a01c9e 100644 --- a/src/components/My/MyUser.tsx +++ b/src/components/My/MyUser.tsx @@ -37,7 +37,7 @@ export const MyUser: FC = ({authentication, email, name, point }) = {email} - navigation.navigate('MyEditUserInfo', {username: name, auth: statusMessage})}> + navigation.navigate('MyEditUserInfo', {username: name, email: email, auth: statusMessage})}> 회원정보 수정 ; export const MyEditUserInfo = ({navigation, route}: Props) => { const [username, setUsername] = useState(route.params.username); + const [email, setEmail] = useState(route.params.email); const [auth, setAuth] = useState(route.params.auth); - const [email, setEmail] = useState(''); const [focusedEmail, setFocusedEmail] = useState(false); const goBack = () => { @@ -49,22 +49,18 @@ export const MyEditUserInfo = ({navigation, route}: Props) => { 이메일 - { - setEmail(text); - }} - value={email.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')} - onBlur={() => setFocusedEmail(false)} - onFocus={() => setFocusedEmail(true)} - /> + {email} - 전화번호 + + 전화번호 + 🚨전화번호인증🚨 - {auth} + + {auth} + diff --git a/src/screens/my/MyPage.tsx b/src/screens/my/MyPage.tsx index 0b2beaf..2a7040d 100644 --- a/src/screens/my/MyPage.tsx +++ b/src/screens/my/MyPage.tsx @@ -25,11 +25,12 @@ export type MyPageData = { const MyPage = () => { const navigation = useNavigation(); const token = useRecoilValue(userToken); - // const getUserInfo = async () => { - // const {data} = await customAxios(token).get('/api/v1/users/me'); - // return data.result; - // }; - // const {data, isSuccess, isError, error} = useQuery(['userInfo', token], getUserInfo); + const getUserInfo = async () => { + const {data} = await customAxios(token).get('/api/v1/users/me'); + return data.result; + }; + const {data, isSuccess, isError, error} = useQuery(['userInfo', token], getUserInfo); + console.log('ssssssssss', data); // data.point 로 접근 const storeData = async (value: string) => { try { @@ -45,14 +46,7 @@ const MyPage = () => { ]); navigation.navigate('Login'); }; - console.log(AsyncStorage.getItem('userToken')); - - // 서버연결 후 수정 - const name = '밥풀이'; - const email = 'bobPlace@bob.com'; - const point = 2500; - const [authentication, setAuthentication] = useState(false); - // + console.log('async userToken', AsyncStorage.getItem('userToken')); return ( <> @@ -63,9 +57,14 @@ const MyPage = () => { 마이페이지 - - {/* 서버연결 예시 */} - {/* */} + {data !== undefined && ( + + )} navigation.navigate('MyReview')}> diff --git a/src/screens/my/MyPoint.tsx b/src/screens/my/MyPoint.tsx index 314eca9..0ea87ad 100644 --- a/src/screens/my/MyPoint.tsx +++ b/src/screens/my/MyPoint.tsx @@ -132,7 +132,7 @@ export const MyPoint = ({navigation, route}: Props) => { 내 포인트 - {data?.pages[0].data.result.totalPoints.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}P + {data?.pages[0].data.result.totalPoints.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')} P {/* {DataPointsList.totalPoints.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}P */}