Skip to content

Commit

Permalink
sdp-tech#116 fix : fix OrderPage relevant bug
Browse files Browse the repository at this point in the history
  • Loading branch information
@kimheonningg
kimheonningg committed Sep 30, 2024
1 parent 46dfb83 commit 92b6384
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 93 deletions.
37 changes: 6 additions & 31 deletions src/pages/Home.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,13 @@
import React, {
Fragment,
useEffect,
useState,
useRef,
forwardRef,
} from 'react';
import React, { Fragment, useState, useRef } from 'react';

import {
SafeAreaView,
Text,
View,
StyleSheet,
Alert,
FlatList,
} from 'react-native';
import { SafeAreaView, Text, View, Alert } from 'react-native';
import styled from 'styled-components/native';
import { Filter14M } from '../styles/GlobalText';
import { Tabs, MaterialTabBar } from 'react-native-collapsible-tab-view';
import {
StackScreenProps,
createStackNavigator,
} from '@react-navigation/stack';
import { TabProps } from '../../App';
import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
import { ScrollView } from 'react-native-gesture-handler';

import CustomHeader from '../common/CustomHeader';
import HomeTabView from '../components/Home/HomeMain';
Expand All @@ -45,20 +30,10 @@ import QuotationConfirm from '../components/Home/Quotation/QuotationConfirm';
import Rejection from '../components/Home/Quotation/Rejection';
import SentRejection from '../components/Home/Quotation/SentRejection';
import WriteReviewPage from '../components/Home/Market/WriteReviewPage';
import { BottomBarProvider } from '../../contexts/BottomBarContext';
import BottomSheet from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheet';
import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
import ComponentsTest from './ComponentsTest';
import { PURPLE } from '../styles/GlobalColor';
import { ProfileSection } from '../components/Home/Market/MarketTabView';
import ServicePage from '../components/Home/Market/ServicePage';
import ScrollToTopButton from '../common/ScrollToTopButtonFlat';
import ReviewPage from '../components/Home/Market/ReviewPage';
import ScrollTopButton from '../common/ScrollTopButton';
import Footer from '../common/Footer';
import { BLACK, White } from '../styles/GlobalColor';
import InfoPage from '../components/Home/Market/InfoPage';
import OrderPage from '../components/Home/Order/OrderPage';
// import OrderPage from '../components/Home/Order/OrderPage';
import OrderManagement from '../components/Home/Order/OrderManagement';
import ReformerMarket from '../components/Home/Market/ReformerMarket';
import Service from '../components/Home/Market/Service';
Expand All @@ -71,7 +46,7 @@ export type HomeStackParams = {
ServiceDetailPage: {
id?: number;
};
OrderPage: undefined;
// OrderPage: undefined;
OrderManagement: undefined;
GoodsDetailPage: undefined;
QuotationForm: undefined;
Expand Down Expand Up @@ -126,7 +101,7 @@ const HomeScreen = ({
<HomeStack.Screen name="QuotationForm" component={QuotationForm} />
<HomeStack.Screen name="QuotationPage" component={QuotationPage} />
<HomeStack.Screen name="SentQuotation" component={SentQuotation} />
<HomeStack.Screen name="OrderPage" component={OrderPage} />
{/* <HomeStack.Screen name="OrderPage" component={OrderPage} /> */}
<HomeStack.Screen name="OrderManagement" component={OrderManagement} />
<HomeStack.Screen
name="GoodsDetailPage"
Expand Down
184 changes: 122 additions & 62 deletions src/pages/MyPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,31 @@
import { Alert, Button, FlatList, Image, ImageBackground, SafeAreaView, ScrollView, Text, TouchableOpacity, View } from 'react-native';
import {
Alert,
FlatList,
Image,
ImageBackground,
SafeAreaView,
ScrollView,
View,
} from 'react-native';
import {
StackScreenProps,
createStackNavigator,
} from '@react-navigation/stack';
import { TabProps } from '../../App';
import {
getNickname,
removeAccessToken,
removeNickname,
removeRefreshToken,
} from '../common/storage';
import { useCallback, useContext, useEffect, useRef, useState } from 'react';
import { useContext, useEffect, useRef, useState } from 'react';
import { LoginContext } from '../common/Context';
import { useFocusEffect } from '@react-navigation/native';
import DetailScreenHeader from '../components/Home/components/DetailScreenHeader';
import { Caption11M, Title20B } from '../styles/GlobalText';
import { Title20B } from '../styles/GlobalText';
import TextToggle from '../common/TextToggle';
import { BLACK, BLACK2 } from '../styles/GlobalColor';
import ReviewComment from '../components/Home/components/ReviewComment';
import { BLACK } from '../styles/GlobalColor';
import { MaterialTabBar, Tabs } from 'react-native-collapsible-tab-view';
import OrderPage from '../components/Home/Order/OrderPage';
// import OrderPage from '../components/Home/Order/OrderPage';
// FIXME: OrderPage가 존재하지 않는 관계로 임시 주석 처리
import ServicePage from '../components/Home/Market/ServicePage';
import ScrollTopButton from '../common/ScrollTopButton';
import ReviewPage from '../components/Home/Market/ReviewPage';
Expand Down Expand Up @@ -58,48 +64,91 @@ const MyPageScreen = ({
);
};

const ProfileSection = ({ nickname, backgroundphoto, profile_image, editProfile, introduce }: { nickname: string, backgroundphoto: any, profile_image: PhotoType | any, editProfile: any, introduce: string }) => {

const ProfileSection = ({
nickname,
backgroundphoto,
profile_image,
editProfile,
introduce,
}: {
nickname: string;
backgroundphoto: any;
profile_image: PhotoType | any;
editProfile: any;
introduce: string;
}) => {
return (
<View style={{ alignItems: 'center' }}>
<DetailScreenHeader
title=''
leftButton='CustomBack'
onPressLeft={() => { }}
rightButton='Edit'
onPressRight={editProfile} />
title=""
leftButton="CustomBack"
onPressLeft={() => {}}
rightButton="Edit"
onPressRight={editProfile}
/>
<ImageBackground
style={{ width: '100%', height: 200 }}
imageStyle={{ height: 160 }}
source={{ uri: backgroundphoto }}>
<View style={{ width: '100%', height: 160, backgroundColor: '#00000066', opacity: 0.7 }} />
{(profile_image === undefined) || (profile_image.uri == undefined) ? ( // 전자는 편집페이지에서 사진 삭제했을 경우, 후자는 가장 처음에 로딩될 경우
<View
style={{
width: '100%',
height: 160,
backgroundColor: '#00000066',
opacity: 0.7,
}}
/>
{profile_image === undefined || profile_image.uri == undefined ? ( // 전자는 편집페이지에서 사진 삭제했을 경우, 후자는 가장 처음에 로딩될 경우
<Image
style={{
alignSelf: 'center',
width: 90,
height: 90,
borderRadius: 180,
position: 'absolute',
top: 110,
}}
source={{
uri: 'https://image.made-in-china.com/2f0j00efRbSJMtHgqG/Denim-Bag-Youth-Fashion-Casual-Small-Mini-Square-Ladies-Shoulder-Bag-Women-Wash-Bags.webp',
}}
/>
) : (
<Image
style={{ alignSelf: 'center', width: 90, height: 90, borderRadius: 180, position: 'absolute', top: 110 }}
source={{ uri: 'https://image.made-in-china.com/2f0j00efRbSJMtHgqG/Denim-Bag-Youth-Fashion-Casual-Small-Mini-Square-Ladies-Shoulder-Bag-Women-Wash-Bags.webp' }}
/>) : (<Image
style={{ alignSelf: 'center', width: 90, height: 90, borderRadius: 180, position: 'absolute', top: 110 }}
style={{
alignSelf: 'center',
width: 90,
height: 90,
borderRadius: 180,
position: 'absolute',
top: 110,
}}
source={{ uri: profile_image.uri }}
/>)
}
/>
)}
</ImageBackground>
<Title20B style={{ marginTop: 8 }}>{nickname}</Title20B>
<View style={{ padding: 20, paddingTop: 0, paddingBottom: 0 }}>
<TextToggle text={introduce} />
</View>
</View>
)
}
);
};

const MyPageMainScreen = ({ navigation, route }: MypageStackProps) => {
const request = Request();
const { isLogin, setLogin } = useContext(LoginContext);
const [userInfo, setUserInfo] = useState({
nickname: route.params?.nickname || '이하늘', backgroundphoto: 'https://image.made-in-china.com/2f0j00efRbSJMtHgqG/Denim-Bag-Youth-Fashion-Casual-Small-Mini-Square-Ladies-Shoulder-Bag-Women-Wash-Bags.webp',
profile_image: route.params?.profile_image || 'https://image.made-in-china.com/2f0j00efRbSJMtHgqG/Denim-Bag-Youth-Fashion-Casual-Small-Mini-Square-Ladies-Shoulder-Bag-Women-Wash-Bags.webp',
introduce: route.params?.introduce || "나는야 업씨러 이하늘 환경을 사랑하지요 눈누난나"
nickname: route.params?.nickname || '이하늘',
backgroundphoto:
'https://image.made-in-china.com/2f0j00efRbSJMtHgqG/Denim-Bag-Youth-Fashion-Casual-Small-Mini-Square-Ladies-Shoulder-Bag-Women-Wash-Bags.webp',
profile_image:
route.params?.profile_image ||
'https://image.made-in-china.com/2f0j00efRbSJMtHgqG/Denim-Bag-Youth-Fashion-Casual-Small-Mini-Square-Ladies-Shoulder-Bag-Women-Wash-Bags.webp',
introduce:
route.params?.introduce ||
'나는야 업씨러 이하늘 환경을 사랑하지요 눈누난나',
});
// 나중에 프로필수정 로직 구현되고 나면, profilepho랑 backgroundphoto 할당하면 됨
// 나중에 프로필수정 로직 구현되고 나면, profilepho랑 backgroundphoto 할당하면 됨

useEffect(() => {
if (route.params?.userInfo) {
Expand All @@ -116,9 +165,14 @@ const MyPageMainScreen = ({ navigation, route }: MypageStackProps) => {
console.log('User data fetched successfully:', response.data);
setUserInfo({
nickname: response.data.nickname,
backgroundphoto: 'https://image.made-in-china.com/2f0j00efRbSJMtHgqG/Denim-Bag-Youth-Fashion-Casual-Small-Mini-Square-Ladies-Shoulder-Bag-Women-Wash-Bags.webp',
profile_image: response.data.profile_image_url || 'https://image.made-in-china.com/2f0j00efRbSJMtHgqG/Denim-Bag-Youth-Fashion-Casual-Small-Mini-Square-Ladies-Shoulder-Bag-Women-Wash-Bags.webp',
introduce: response.data.introduce || '나는야 업씨러 이하늘 환경을 사랑하지요 눈누난나'
backgroundphoto:
'https://image.made-in-china.com/2f0j00efRbSJMtHgqG/Denim-Bag-Youth-Fashion-Casual-Small-Mini-Square-Ladies-Shoulder-Bag-Women-Wash-Bags.webp',
profile_image:
response.data.profile_image_url ||
'https://image.made-in-china.com/2f0j00efRbSJMtHgqG/Denim-Bag-Youth-Fashion-Casual-Small-Mini-Square-Ladies-Shoulder-Bag-Women-Wash-Bags.webp',
introduce:
response.data.introduce ||
'나는야 업씨러 이하늘 환경을 사랑하지요 눈누난나',
});
return response.data;
} else {
Expand All @@ -130,7 +184,7 @@ const MyPageMainScreen = ({ navigation, route }: MypageStackProps) => {
console.error('Error fetching user data:', error);
return null;
}
}
};

// useFocusEffect(
// useCallback(() => {
Expand All @@ -155,7 +209,7 @@ const MyPageMainScreen = ({ navigation, route }: MypageStackProps) => {
const [routes] = useState([
{ key: 'order', title: '주문' },
{ key: 'lookbook', title: '룩북' },
{ key: 'like', title: '좋아요' }
{ key: 'like', title: '좋아요' },
]);
const flatListRef = useRef<FlatList>(null);
const scrollRef = useRef<ScrollView | null>(null);
Expand All @@ -164,55 +218,61 @@ const MyPageMainScreen = ({ navigation, route }: MypageStackProps) => {
<SafeAreaView style={{ flex: 1 }}>
{/* 이 밑의 탭들은 더미 데이터 */}
<Tabs.Container
renderHeader={props => <View>
<ProfileSection nickname={userInfo.nickname} backgroundphoto={userInfo.backgroundphoto} profile_image={userInfo.profile_image}
editProfile={() => navigation.navigate('FixMyPage', { userInfo })} introduce={userInfo.introduce} />
{/* <Button onPress={goReformRegister} title="프로필 등록" />
renderHeader={props => (
<View>
<ProfileSection
nickname={userInfo.nickname}
backgroundphoto={userInfo.backgroundphoto}
profile_image={userInfo.profile_image}
editProfile={() => navigation.navigate('FixMyPage', { userInfo })}
introduce={userInfo.introduce}
/>
{/* <Button onPress={goReformRegister} title="프로필 등록" />
<Button onPress={handleLogout} title="로그아웃" /> */}
</View>}
</View>
)}
headerContainerStyle={{
shadowOpacity: 0,
borderBottomWidth: 1,
borderColor: '#D9D9D9'
borderColor: '#D9D9D9',
}}
renderTabBar={props => (
<MaterialTabBar
{...props}
indicatorStyle={{
backgroundColor: '#BDBDBD',
height: 2
height: 2,
}}
style={{
backgroundColor: 'white',
}}
labelStyle={{
color: BLACK,
fontWeight: '700',
fontSize: 16
fontSize: 16,
}}
onTabPress={() => Alert.alert('준비중입니다!ㅠㅠ')}
// 룩북, 좋아요 모아보기 기능 구현되면 위의 onTapPress는 삭제할 것
// 룩북, 좋아요 모아보기 기능 구현되면 위의 onTapPress는 삭제할 것
/>
)}
>
{routes.map(route =>
(<Tabs.Tab key={route.key} name={route.title}>
{route.key === 'order' && <OrderPage navigation={navigation} />}
{route.key === 'lookbook' &&
<View>
<ServicePage scrollViewRef={scrollRef} />
<ScrollTopButton scrollViewRef={scrollRef} />
</View>
}
{route.key === 'like' &&
<View>
<ReviewPage flatListRef={flatListRef} />
<ScrollToTopButton flatListRef={flatListRef} />
</View>}
</Tabs.Tab>)
)}
)}>
{routes.map(route => (
<Tabs.Tab key={route.key} name={route.title}>
{/* {route.key === 'order' && <OrderPage navigation={navigation} />} */}
{route.key === 'lookbook' && (
<View>
<ServicePage scrollViewRef={scrollRef} />
<ScrollTopButton scrollViewRef={scrollRef} />
</View>
)}
{route.key === 'like' && (
<View>
<ReviewPage flatListRef={flatListRef} />
<ScrollToTopButton flatListRef={flatListRef} />
</View>
)}
</Tabs.Tab>
))}
</Tabs.Container>

</SafeAreaView>
);
};
Expand Down

0 comments on commit 92b6384

Please sign in to comment.