Merge pull request #101 from p33a33/fix_onairPageRender

[Client] Fix : onAir page component render 🎨
kimwunhae · Nov 1, 2020 · 308a2aa · 308a2aa
2 parents 82cd696 + a5b7e22
commit 308a2aa
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 43 deletions.
diff --git a/src/components/BankPicker.js b/src/components/BankPicker.js
@@ -18,7 +18,7 @@ export const BankPicker = (props) => {
                 }
             }
             }>
-            {props.bankList.map(item => <Picker.Item label={item} value={item} color="slategrey" />)}
+            {props.bankList.map((item, idx) => <Picker.Item label={item} value={item} key={idx} color="slategrey" />)}
         </Picker>
     );
 };
diff --git a/src/components/ChatInput.js b/src/components/ChatInput.js
@@ -1,5 +1,5 @@
 import React, { Children } from 'react'
-import { View, TextInput, Keyboard } from 'react-native'
+import { View, TextInput, Keyboard, SafeAreaView } from 'react-native'
 import { Input, Text, Button, Image, Icon } from 'react-native-elements'
 import { TouchableOpacity } from 'react-native-gesture-handler'
 import { KeyboardAccessoryView } from 'react-native-keyboard-accessory'
@@ -24,16 +24,18 @@ export default class ChatInput extends React.Component {
         return (
             <KeyboardAccessoryView
                 alwaysVisible={true}
-                androidAdjustResize={true}
-                style={{ height: 0, flex: 1, backgroundColor: "rgba(0, 0, 0, 0)" }}
+                androidAdjustResize
+                style={{ height: "100%", backgroundColor: "rgba(0, 0, 0, 0)", borderColor: "yellow", borderWidth: 2 }}
                 hideBorder={true}
             >
-                <ChatOutput messages={messages} />
-                <View style={{ width: `${100}%`, flexDirection: "row", alignItems: "center" }}>
+                <View style={{ width: "100%", height: 200, borderColor: "red", borderWidth: 2 }}>
+                    <ChatOutput messages={messages} />
+                </View>
+                <View style={{ width: `${100}%`, flexDirection: "row", alignItems: "center", alignSelf: "baseline" }}>
                     <TextInput
                         ref={r => this.chatInput = r}
                         placeholder="chat"
-                        style={{ width: `${75}%`, height: `${45}%`, backgroundColor: 'rgba(255, 255, 255, 0.3)', borderRadius: 25, margin: 15, marginRight: 0, paddingLeft: 13, textAlignVertical: "center" }}
+                        style={{ zIndex: 2, width: `${75}%`, height: `${45}%`, backgroundColor: 'rgba(255, 255, 255, 0.3)', borderRadius: 25, margin: 15, marginRight: 0, paddingLeft: 13, textAlignVertical: "center" }}
                         onChangeText={e => handleInputValue(e)}
                     />
                     <TouchableOpacity onPress={this.handlePressSend}>

diff --git a/src/components/ChatOutput.js b/src/components/ChatOutput.js
@@ -15,14 +15,16 @@ export default class ChatOutput extends React.Component {
 
     render() {
         return (
-            <ScrollView ref={r => this.scrollView = r} contentContainerStyle={{ height: `${100}%` }}>
-                {this.props.messages.map((message, key) =>
-                    <View key={key} style={{ backgroundColor: 'rgba(0, 0, 0, 0.0)', borderRadius: 15, margin: 5, padding: 5, flexDirection: "row" }}>
-                        <Text style={{ fontWeight: 'bold', fontSize: 16, marginRight: 10 }}>{message[0]}</Text>
-                        <Text>{message[1]}</Text>
-                    </View>
-                )}
-            </ScrollView>
+            <View style={{ height: 20 }}>
+                <ScrollView ref={r => this.scrollView = r} contentContainerStyle={{ height: 0 }}>
+                    {this.props.messages.map((message, key) =>
+                        <View key={key} style={{ backgroundColor: 'rgba(0, 0, 0, 0.0)', borderRadius: 15, margin: 5, padding: 5, flexDirection: "row" }}>
+                            <Text style={{ fontWeight: 'bold', fontSize: 16, marginRight: 10 }}>{message[0]}</Text>
+                            <Text>{message[1]}</Text>
+                        </View>
+                    )}
+                </ScrollView>
+            </View>
         )
     }
 }

diff --git a/src/components/SelectProductForStreaming.js b/src/components/SelectProductForStreaming.js
@@ -1,3 +1,4 @@
+import Axios from 'axios'
 import React, { Children } from 'react'
 import { View, Modal, StyleSheet, TouchableOpacity } from 'react-native'
 import { Text, Button, Input, Image, ListItem, ButtonGroup } from 'react-native-elements'

diff --git a/src/pages/Feed/Feed.js b/src/pages/Feed/Feed.js
@@ -138,7 +138,6 @@ const styles = StyleSheet.create({
         fontSize: 25,
         padding: 5,
         fontFamily: "sans-serif-light",
-
     },
     listItems: {
         height: 400,

diff --git a/src/pages/Feed/Mypage/MyItemList/AddItem/AddItem.js b/src/pages/Feed/Mypage/MyItemList/AddItem/AddItem.js
@@ -205,8 +205,8 @@ export default class AddItem extends React.Component {
                 </View>
                 <View style={{ flexDirection: "row", alignItems: "center", marginBottom: 30 }}>
                     {this.state.itemInfo.tags.length > 0 && this.state.itemInfo.tags.map((tag, index) =>
-                        <TouchableOpacity onPress={() => this.handleDeleteTag(index)}>
-                            <Card key={index} containerStyle={{ padding: 10, margin: 10 }}>
+                        <TouchableOpacity onPress={() => this.handleDeleteTag(index)} key={index}>
+                            <Card containerStyle={{ padding: 10, margin: 10 }}>
                                 <Text>{tag}</Text>
                             </Card>
                         </TouchableOpacity>)}

diff --git a/src/pages/ProductDetail/ProductDetail.js b/src/pages/ProductDetail/ProductDetail.js
@@ -24,7 +24,13 @@ export default class ProductDetail extends React.Component {
             inWishlist: false,
             quantity: 1,
             isPaymentPending: false, // request payment 메소드에 대응하는 state 추가
-            activeSlide: 0
+            activeSlide: 0,
+            orderInfo: {
+                quantity: this.state.quantity,
+                productId: this.props.route.params.info.id,
+                amount: this.state.quantity * this.props.route.params.info.price,
+                sellerId: this.props.route.params.info.userId
+            }
         }
         this.handleButtonPress = this.handleButtonPress.bind(this)
         this._renderItem = this._renderItem.bind(this)
@@ -43,8 +49,7 @@ export default class ProductDetail extends React.Component {
 
     handleOpenPayment = () => {
         this.setState({ isPaymentPending: true });
-        let amount = this.state.quantity * this.props.route.params.info.price
-        requestPayment(amount);
+        requestPayment(this.state.orderInfo);
     }
 
     handleButtonPress = (index) => {

diff --git a/src/pages/Streaming/OnAir/OnAir.js b/src/pages/Streaming/OnAir/OnAir.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Dimensions, PermissionsAndroid, SafeAreaView, TouchableOpacity, ScrollView, Image } from 'react-native';
+import { View, Dimensions, PermissionsAndroid, SafeAreaView, TouchableOpacity, ScrollView, Image, StatusBar } from 'react-native';
 import { Text, Button, Card } from 'react-native-elements';
 import { NodeCameraView } from 'react-native-nodemediaclient';
 import ChatInput from '../../../components/ChatInput';
@@ -157,7 +157,7 @@ export default class OnAir extends React.Component {
     render() {
         let userName = 'test'
         let { liveStatus, count, messages } = this.state
-        let deviceHeight = Dimensions.get('window').height
+        let deviceHeight = Dimensions.get('window').height - StatusBar.currentHeight
         let deviceWidth = Dimensions.get('window').width
         let outputURL = `${RTMP_SERVER}/live/${userName}` // 영상을 전송받을 URL을 정의
 
@@ -173,45 +173,45 @@ export default class OnAir extends React.Component {
                         video={{ preset: 1, bitrate: 400000, profile: 0, fps: 30, videoFrontMirror: false }}
                         autopreview={true}
                     />
-                    <HeaderBackButton
-                        onPress={this.handleGoback}
-                        tintColor="slategrey"
-                        style={{ padding: 10, }}
-                    />
-                    <View style={{ alignItems: "flex-start", marginLeft: '43%', flexDirection: "row" }}>
-                        <View style={{ padding: 3 }}>
+                    <View style={{ marginBottom: -10, flexDirection: "row", borderColor: "yellow", borderWidth: 2 }}>
+                        <HeaderBackButton
+                            onPress={this.handleGoback}
+                            tintColor="slategrey"
+                            style={{ padding: 10, }}
+                        />
+                        <View style={{ paddingLeft: "20%", flexDirection: "row", borderColor: "blue", borderWidth: 2 }}>
                             <Icon.Button
                                 name="camera"
                                 onPress={this.handleSwitchCamera}
                                 borderRadius={15}
-                                size={11.5}
-                                style={{ justifyContent: "center", backgroundColor: 'slateblue', width: 100, height: 35, alignSelf: "center", padding: 10 }}
+                                size={30}
+                                // style={{ justifyContent: "center", backgroundColor: 'slateblue', width: 60, height: 35, alignSelf: "center" }}
+                                backgroundColor={`rgba(0, 0, 0, 0)`}
                             >
-                                <Text style={{ color: "white", fontFamily: "sans-serif-thin", fontSize: 13 }}>카메라 전환</Text>
+                                {/* <Text style={{ color: "white", fontFamily: "sans-serif-thin", fontSize: 13 }}>카메라 전환</Text> */}
                             </Icon.Button>
-                        </View>
-                        <View style={{ padding: 3 }}>
                             <Icon.Button
                                 onPress={this.handleLiveStatus}
                                 name={liveStatus ? 'stop' : 'play'}
                                 borderRadius={15}
-                                size={11.5}
-                                style={{ justifyContent: "center", backgroundColor: 'slateblue', width: 90, height: 35, alignSelf: "center" }}
-                            ><Text style={{ color: "white", fontFamily: "sans-serif-thin", fontSize: 13 }}>{liveStatus ? '방송 종료' : '방송 시작'}</Text>
+                                size={30}
+                                // style={{ justifyContent: "center", backgroundColor: 'slateblue', width: 30, height: 35, alignSelf: "center" }}
+                                backgroundColor={`rgba(0, 0, 0, 0)`}
+                            >
+                                {/* <Text style={{ color: "white", fontFamily: "sans-serif-thin", fontSize: 13 }}>{liveStatus ? '방송 종료' : '방송 시작'}</Text> */}
                             </Icon.Button>
                         </View>
                     </View>
                 </View>
-                <FloatingHearts count={count} />
-                <View style={{ zIndex: 1, marginTop: 20 }}>
+                <View style={{ zIndex: 1, borderColor: "green", borderWidth: 2, height: 300 }} >
                     <ChatInput
                         handleInputValue={this.handleInputValue}
                         handleSendChat={this.handleSendChat}
                         handlePressHeart={this.handlePressHeart}
                         messages={messages}
                     />
                 </View>
-
+                <FloatingHearts count={count} />
             </SafeAreaView >
         )
     }

diff --git a/src/payments/payment.js b/src/payments/payment.js
@@ -1,4 +1,6 @@
+import Axios from 'axios';
 import stripe from 'tipsi-stripe';
+import { SERVER } from '../pages/config';
 import { doPayment } from './api';
 
 stripe.setOptions({
@@ -7,14 +9,20 @@ stripe.setOptions({
 
 module.exports = {
 
-    requestPayment: (amount) => {
+    requestPayment: (orderInfo) => {
         return stripe
             .paymentRequestWithCardForm()
             .then(stripeTokenInfo => {
                 console.log('cardform request response', stripeTokenInfo)
-                return doPayment(amount, stripeTokenInfo.tokenId);
+                return doPayment(orderInfo.amount, stripeTokenInfo.tokenId);
             })
             .then(() => {
+                Axios.post(`${SERVER}/addrrder`, orderInfo)
+                    .then(() => alert("결제와 주문이 성공적으로 처리되었습니다."))
+                    .catch((err) => {
+                        alert("주문처리 과정에서 문제가 발생했습니다, ")
+                        console.log(err)
+                    })
                 console.warn('Payment succeeded!');
             })
             .catch(error => {