diff --git a/src/components/OrderListEntry.js b/src/components/OrderListEntry.js index dbbe769..a2d6771 100644 --- a/src/components/OrderListEntry.js +++ b/src/components/OrderListEntry.js @@ -2,6 +2,7 @@ import React, { Children } from 'react' import { View } from 'react-native' import { Text, Button, Input, Image, ListItem } from 'react-native-elements' import Icon from 'react-native-vector-icons/FontAwesome' +import { SERVER } from '../pages/config' import OrderInfo from '../pages/Feed/Mypage/OrderInfo/OrderInfo' @@ -10,18 +11,18 @@ export default class OrderListEntry extends React.Component { super(props) } render() { - let { orderInfo, navigation } = this.props - let { title, price, image } = orderInfo.product + let { order, navigation } = this.props + let { title, price, image } = order.products[0] return ( navigation.navigate('ProductDetail', { info: orderInfo.product })}> - + - {title} + {title.toUpperCase()} {price}원 - {orderInfo.quantity}개 - {Number(orderInfo.quantity) * price}원 + {order.order_quantity}개 + {order.amount}원 diff --git a/src/components/ProductListEntry.js b/src/components/ProductListEntry.js index 68f783f..78ed2be 100644 --- a/src/components/ProductListEntry.js +++ b/src/components/ProductListEntry.js @@ -5,6 +5,7 @@ import { ScrollView } from 'react-native-gesture-handler' import Icon from 'react-native-vector-icons/FontAwesome' import Carousel, { Pagination } from 'react-native-snap-carousel'; import LinearGradient from 'react-native-linear-gradient' +import { SERVER } from '../pages/config' export default class ProductListEntry extends React.Component { @@ -19,7 +20,7 @@ export default class ProductListEntry extends React.Component { _renderItem = ({ item, index }) => { return ( - + ); } @@ -27,7 +28,7 @@ export default class ProductListEntry extends React.Component { const { activeSlide } = this.state; return ( navigation.navigate('ProductDetail', { info: productInfo, handleVisible: this.props.handleVisible })}> + onPress={() => navigation.navigate('ProductDetail', { info: productInfo, handleVisible: this.props.handleVisible, images: this.props.images })} + > { this._carousel = c; }} inactiveSlideScale={0.9} - data={this.props.productInfo.image} + data={this.props.images} renderItem={this._renderItem} sliderWidth={sliderWidth} itemWidth={itemWidth} diff --git a/src/components/SellerInfoHome.js b/src/components/SellerInfoHome.js index 5643b52..398a399 100644 --- a/src/components/SellerInfoHome.js +++ b/src/components/SellerInfoHome.js @@ -1,8 +1,10 @@ +import Axios from 'axios'; import React from 'react' import { View, StyleSheet } from 'react-native' import { Text, Button } from 'react-native-elements' import { BoxShadow } from 'react-native-shadow'; import Icon from 'react-native-vector-icons/FontAwesome'; +import { SERVER } from '../pages/config'; @@ -11,9 +13,9 @@ export default class SellerInfoHome extends React.Component { super(props) this.state = { sellerInfo: [ - { Rate: "8.6" }, + { Rate: (Math.random() * 10).toFixed(1) }, { Products: "193" }, - { Followers: "12.1k" } + { Followers: `${(Math.random() * 10).toFixed(1)}k` } ] } } diff --git a/src/components/SellerItemEntry.js b/src/components/SellerItemEntry.js index d2435a6..bd2746a 100644 --- a/src/components/SellerItemEntry.js +++ b/src/components/SellerItemEntry.js @@ -2,6 +2,7 @@ import React from 'react' import { View, StyleSheet } from 'react-native' import { Text, Image } from 'react-native-elements' import LinearGradient from 'react-native-linear-gradient'; +import { SERVER } from '../pages/config'; @@ -15,7 +16,7 @@ export default class SellerItemEntry extends React.Component { let { navigation } = this.props let { navigate } = navigation let { itm } = this.props - let imgSrc = itm.image[0] + let imgSrc = itm.image return ( { navigate('ProductDetail', { info: itm }); }} diff --git a/src/pages/Feed/Mypage/OrderInfo/OrderInfo.js b/src/pages/Feed/Mypage/OrderInfo/OrderInfo.js index 3e366cd..ed333b0 100644 --- a/src/pages/Feed/Mypage/OrderInfo/OrderInfo.js +++ b/src/pages/Feed/Mypage/OrderInfo/OrderInfo.js @@ -1,92 +1,46 @@ +import Axios from 'axios' import React from 'react' import { View } from 'react-native' import { Text, Button, Input, ListItem, Card } from 'react-native-elements' import { ScrollView } from 'react-native-gesture-handler' +import LinearGradient from 'react-native-linear-gradient' import OrderListEntry from '../../../../components/OrderListEntry' +import { SERVER } from '../../../config' export default class OrderInfo extends React.Component { constructor(props) { super(props) - this.dummyOrder = [{ - id: "81272", - product: { name: "봉구비어", id: "1005", email: "seller5@test.com", image: ["https://image.thehyundai.com/static/3/1/7/20/A1/hnm40A1207139_01_0948433_001_001_848.jpg", 'https://image.thehyundai.com/static/3/1/7/20/A1/hnm40A1207139_01_0948433_001_003_848.jpg', "https://image.thehyundai.com/static/3/1/7/20/A1/hnm40A1207139_02_0948433_001_001_848.jpg"], title: "Product 5", body: "선물하고싶은 상품", price: 5000 }, - quantity: 3, - address: "서울특별시 강남구 봉은사로 1", - phoneNum: "010-0000-0000", - status: "yet" - }, - { - id: "81273", - product: { name: "맥도날드", id: "1001", email: "seller1@test.com", image: ["https://image.thehyundai.com/static/8/6/8/18/A1/hnm40A1188689_0901685003_202002_LB_0661_Q8_L_1120x868_srgb_848.jpg", "https://image.thehyundai.com/static/8/6/8/18/A1/hnm40A1188689_02_0901685_003_001_848.jpg"], title: "Product 1", body: "대단한 상품", price: 860000 }, - quantity: 1, - address: "서울특별시 강남구 봉은사로 1", - phoneNum: "010-0000-0000", - status: "yet" - }, - { - id: "81274", - product: { name: "다이소", id: "1002", email: "seller2@test.com", image: ['https://cdn2.chrono24.com/images/uhren/16000731-5d7hntuyfucwgmqbuxikbm3u-Zoom.jpg', "https://cdn2.chrono24.com/images/uhren/16000731-w99felxi7r8kz35j2rgbiomy-Zoom.jpg", "https://cdn2.chrono24.com/images/uhren/16000731-nwj6pphl2uxobwbrqm15doii-Zoom.jpg"], title: "Product 2", body: "멋진 상품", price: 5100000 }, - quantity: 2, - address: "서울특별시 강남구 봉은사로 1", - phoneNum: "010-0000-0000", - status: "done" - }, - { - id: "81275", - product: { name: "홈플러스", id: "1003", email: "seller3@test.com", image: ["https://assetsprx.matchesfashion.com/img/product/1381554_1_zoom.jpg", 'https://assetsprx.matchesfashion.com/img/product/1381554_5_zoom.jpg', "https://assetsprx.matchesfashion.com/img/product/1381554_6_zoom.jpg"], title: "Product 4", body: "갖고싶은 상품", price: 150000 }, - quantity: 5, - address: "서울특별시 강남구 봉은사로 1", - phoneNum: "010-0000-0000", - status: "done" - }, - { - id: "81275", - product: { name: "경발원", id: "1004", email: "seller4@test.com", image: ["https://assetsprx.matchesfashion.com/img/product/1360764_1_zoom.jpg", 'https://assetsprx.matchesfashion.com/img/product/outfit_1360764_1_zoom.jpg', "https://assetsprx.matchesfashion.com/img/product/1360764_3_zoom.jpg"], title: "Product 3", body: "좋은 상품", price: 60000 }, - quantity: 15, - address: "서울특별시 강남구 봉은사로 1", - phoneNum: "010-0000-0000", - status: "done" - }, - ] + this.state = { + orders: null + } + } + + componentDidMount = () => { + Axios.get(`${SERVER}/myorder`).then(data => { this.setState({ orders: data.data }); console.log(data.data) }) } render() { return ( - - 처리중인 주문 - {this.dummyOrder.map(order => { - if (order.status === "yet") { - return - - - - - Order# : {order.id} - Address : {order.address} - Contact : {order.phoneNum} - Status : {order.status} - - } - }) - } - 완료된 주문 - {this.dummyOrder.map(order => { - if (order.status === "done") { - return - - - - - Order# : {order.id} - Address : {order.address} - Contact : {order.phoneNum} - Status : {order.status} - - } - }) - } - + + + Orders + + {this.state.orders && this.state.orders.map((order, key) => { + return + + + + + Order Number : {order.id} + Address : {order.address + order.addressDtail} + Status : {order.payment_status} + + }) + } + + + ) } } diff --git a/src/pages/Feed/ProductList/ProductList.js b/src/pages/Feed/ProductList/ProductList.js index 0aa045d..087aeeb 100644 --- a/src/pages/Feed/ProductList/ProductList.js +++ b/src/pages/Feed/ProductList/ProductList.js @@ -1,3 +1,4 @@ +import Axios from 'axios' import React from 'react' import { View, Image, StyleSheet } from 'react-native' import { Text, Button, Input, Header } from 'react-native-elements' @@ -5,35 +6,22 @@ import { ScrollView } from 'react-native-gesture-handler' import LinearGradient from 'react-native-linear-gradient' import { CustomHeader } from '../../../components/CustomHeader' import ProductListEntry from '../../../components/ProductListEntry' +import { SERVER } from '../../config' export default class ProductList extends React.Component { constructor(props) { super(props) + this.state = { + products: null + } } - list = [ - { - name: "ANYA HINDMARCH", id: "1", email: "seller5@test.com", image: ["https://assetsprx.matchesfashion.com/img/product/1337372_1_zoom.jpg", 'https://assetsprx.matchesfashion.com/img/product/outfit_1337372_1_zoom.jpg', "https://assetsprx.matchesfashion.com/img/product/1337372_4_zoom.jpg"], title: "츄잉 검 캔들", - body: "
그린 글라스 용기에 브랜드 시그니처인 아이 아플리케를 장식하고 왁스를 손으로 부어 영국에서 제작했습니다. 디자이너의 학창 시절을 떠올리며 영감을 얻은 민트와 핑크 페퍼, 타임, 카시스 펄프 등이 어우러진 향이 특징입니다. 따사로운 햇볕이 느껴지는 여유로운 오후에 향을 피워 어릴 적 소중한 순간을 추억해보세요.
", price: "5,000" - }, - { name: "& Other Stories", id: "2", email: "seller1@test.com", image: ["https://image.thehyundai.com/static/8/6/8/18/A1/hnm40A1188689_0901685003_202002_LB_0661_Q8_L_1120x868_srgb_848.jpg", "https://image.thehyundai.com/static/8/6/8/18/A1/hnm40A1188689_02_0901685_003_001_848.jpg"], title: "크롭 버튼 업 니트 스웨터", body: "크롭 실루엣의 롱 슬리브 스웨터예요. 케이블 니트 룩과 메인 패브릭 소재로 감싼 단추가 특징이랍니다.", price: "860,000" }, - { - name: "Cartier", id: "3", email: "seller2@test.com", image: ['https://cdn2.chrono24.com/images/uhren/16000731-5d7hntuyfucwgmqbuxikbm3u-Zoom.jpg', "https://cdn2.chrono24.com/images/uhren/16000731-w99felxi7r8kz35j2rgbiomy-Zoom.jpg", "https://cdn2.chrono24.com/images/uhren/16000731-nwj6pphl2uxobwbrqm15doii-Zoom.jpg"], title: "크래쉬 워치", - body: "1967년 '스윙잉 런던(Swinging London)'의 한복판에서 탄생한 크래쉬 워치는 당대의 역동적이고 자유로운 분위기를 반영하고 있으며, 새로운 형태를 창조하는 워치메이커 까르띠에와 순응주의를 거부하는 반항적이면서도 유쾌한 팝 정신이 만나 탄생한 모델입니다.", price: "5,100,000" - }, - { - name: "Bottega Veneta", id: "4", email: "seller3@test.com", image: ["https://assetsprx.matchesfashion.com/img/product/1381554_1_zoom.jpg", 'https://assetsprx.matchesfashion.com/img/product/1381554_5_zoom.jpg', "https://assetsprx.matchesfashion.com/img/product/1381554_6_zoom.jpg"], title: "스트레치 스퀘어 토 가죽 뮬", - body: "스퀘어 토 실루엣으로 보테가 베네타(Bottega Veneta)를 이끄는 다니엘 리(Daniel Lee) 고유의 디자인 미학을 담아낸 크림 색상 스트레치 뮬을 만나보세요. 부드러운 가죽으로 넓은 앞면 스트랩을 구성하고 가느다란 스틸레토 힐을 세팅한 이탈리아 제작 상품이며 안정적인 착화감을 위해 밑창에 고무 그립을 더했습니다. 테일러드 룩에 우아한 포인트 아이템으로 매치해보세요.", price: "150,000" - }, - { - name: "Bottega Veneta", id: "5", email: "seller4@test.com", image: ["https://assetsprx.matchesfashion.com/img/product/1360764_1_zoom.jpg", "https://assetsprx.matchesfashion.com/img/product/1360764_3_zoom.jpg", 'https://assetsprx.matchesfashion.com/img/product/outfit_1360764_1_zoom.jpg'], title: "더 숄더 파우치 라지 가죽 백", - body: "볼륨감 있는 모던한 실루엣이 돋보이는 보테가 베네타(Bottega Veneta)의 탠 브라운 더 숄더 파우치 백을 살펴보세요. 이탈리아에서 부드러운 가죽으로 제작했으며, 넉넉한 내부 공간의 중앙 부분에서 시작되는 주름 장식과 로고 디테일이 브랜드 고유의 디자인을 완성합니다 뉴트럴 톤으로 스타일링한 룩에 들어 군더더기 없이 담백한 감성을 표현해보세요.", price: "60,000" - }, - { - name: "& Other Stories", id: "6", email: "seller5@test.com", image: ["https://image.thehyundai.com/static/3/1/7/20/A1/hnm40A1207139_01_0948433_001_001_848.jpg", 'https://image.thehyundai.com/static/3/1/7/20/A1/hnm40A1207139_01_0948433_001_003_848.jpg', "https://image.thehyundai.com/static/3/1/7/20/A1/hnm40A1207139_02_0948433_001_001_848.jpg"], title: "릴렉스드 퍼지 버블 니트 스웨터", - body: "롱 슬리브의 니트 스웨터예요. 릴렉스드 버블 실루엣, 그리고 솜털 같은 텍스처가 특징이에요.", price: "5,000" - }, - ] + componentDidMount = () => { + Axios.get(`${SERVER}/allitem`).then(data => { + console.log(data.data) + this.setState({ products: data.data }) + }) + } render() { return ( @@ -47,7 +35,13 @@ export default class ProductList extends React.Component { }}>SHOP TRENDING - {this.list.map((product, index, array) => )} + {this.state.products && this.state.products.map((product, index, array) => { + let images = []; + if (product.image) { images.push(product.image) } + if (product.image2) { images.push(product.image2) } + if (product.image3) { images.push(product.image3) } + return + })} diff --git a/src/pages/ProductDetail/ProductDetail.js b/src/pages/ProductDetail/ProductDetail.js index 16632ce..202a159 100644 --- a/src/pages/ProductDetail/ProductDetail.js +++ b/src/pages/ProductDetail/ProductDetail.js @@ -26,21 +26,25 @@ export default class ProductDetail extends React.Component { isPaymentPending: false, // request payment 메소드에 대응하는 state 추가 activeSlide: 0, orderInfo: { - quantity: this.quantity, + quantity: null, productId: this.props.route.params.info.id, - amount: this.quantity * this.props.route.params.info.price, - sellerId: this.props.route.params.info.userId - } + amount: null, + sellerId: this.props.route.params.info.userId, + }, + sellerItem: null, } this.handleButtonPress = this.handleButtonPress.bind(this) - this._renderItem = this._renderItem.bind(this) + // this._renderItem = this._renderItem.bind(this) } componentDidMount() { + console.log(this.props) this.refs._scrollView.scrollTo({ x: 0, y: 0, animated: true }); if (this.props.route.params.previous !== "Watching") { this.props.route.params.handleVisible(); } + Axios.post(`${SERVER}/selleritem`, { userId: this.props.route.params.info.userId }) + .then(data => this.setState({ sellerItem: data.data })) } componentWillUnmount() { @@ -49,6 +53,7 @@ export default class ProductDetail extends React.Component { handleOpenPayment = () => { this.setState({ isPaymentPending: true }); + this.setState({ orderInfo: Object.assign(this.state.orderInfo, { quantity: this.state.quantity, amount: (this.state.quantity * this.props.route.params.info.price) }) }) requestPayment(this.state.orderInfo); } @@ -77,7 +82,7 @@ export default class ProductDetail extends React.Component { _renderItem = ({ item, index }) => { return ( - + ); } @@ -85,7 +90,7 @@ export default class ProductDetail extends React.Component { const { activeSlide } = this.state; return ( { this._carousel = c; }} - data={this.props.route.params.info.image} + data={this.props.route.params.images} renderItem={this._renderItem} sliderWidth={sliderWidth} itemWidth={itemWidth} @@ -160,14 +164,16 @@ export default class ProductDetail extends React.Component { }} /> - {this.props.route.params.info.name.toUpperCase()} - + {this.props.route.params.info.seller_nickname.toUpperCase()} + - {this.props.route.params.list ? + {this.state.sellerItem && - {this.props.route.params.list.map((itm) => )} - - : no image to render} + {this.state.sellerItem.map((itm, idx) => )} + } diff --git a/src/pages/Streaming/OnAir/OnAir.js b/src/pages/Streaming/OnAir/OnAir.js index a49af7f..2ef946e 100644 --- a/src/pages/Streaming/OnAir/OnAir.js +++ b/src/pages/Streaming/OnAir/OnAir.js @@ -160,6 +160,7 @@ export default class OnAir extends React.Component { let { liveStatus, count, messages } = this.state let deviceHeight = Dimensions.get('window').height - StatusBar.currentHeight let deviceWidth = Dimensions.get('window').width + let outputURL = `${RTMP_SERVER}/live/${userName}` // 영상을 전송받을 URL을 정의 return ( diff --git a/src/payments/api.js b/src/payments/api.js index bbb213a..78ec052 100644 --- a/src/payments/api.js +++ b/src/payments/api.js @@ -6,15 +6,12 @@ export const doPayment = (amount, tokenId, accessToken) => { amount: amount, tokenId: tokenId, }; - const headers = { - 'Content-Type': 'application/json', - }; return axios - .post(`${SERVER}/api/doPayment`, body, { headers }) + .post(`${SERVER}/api/doPayment`, body) .then(({ data }) => { return data; }) .catch(error => { - return Promise.reject('Error in making payment', error); + return console.log(error); }) }; diff --git a/src/payments/payment.js b/src/payments/payment.js index 1430097..b4bd0a4 100644 --- a/src/payments/payment.js +++ b/src/payments/payment.js @@ -10,23 +10,30 @@ stripe.setOptions({ module.exports = { requestPayment: (orderInfo) => { + console.log(orderInfo) return stripe .paymentRequestWithCardForm() .then(stripeTokenInfo => { console.log('cardform request response', stripeTokenInfo) - return doPayment(orderInfo.amount, stripeTokenInfo.tokenId); + return doPayment(5000, stripeTokenInfo.tokenId); }) .then(() => { - Axios.post(`${SERVER}/addrrder`, orderInfo) - .then(() => alert("결제와 주문이 성공적으로 처리되었습니다.")) + Axios.post(`${SERVER}/addorder`, orderInfo) + .then((data) => { + console.log(data) + alert("결제와 주문이 성공적으로 처리되었습니다.") + }) .catch((err) => { alert("주문처리 과정에서 문제가 발생했습니다, ") console.log(err) + return false; }) console.warn('Payment succeeded!'); + return true; }) .catch(error => { console.warn('Payment failed', { error }); + }) } }