From ef2f406daeb106302249c7c20ac0f8ac5ff58ead Mon Sep 17 00:00:00 2001 From: rendisaepul Date: Wed, 20 Sep 2017 15:25:36 +0700 Subject: [PATCH 1/4] add liblary react native element --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 5952f39f..e1ecff22 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "react-native": "0.46.4", "react-native-code-push": "^5.1.0-beta", "react-native-document-picker": "^2.0.0", + "react-native-elements": "^0.17.0", "react-native-facebook-account-kit": "^0.7.0", "react-native-file-upload": "^1.0.4", "react-native-form-validator": "^0.1.3", From 1107401b6ca8fa602c4fe13d1cf9d220552bd100 Mon Sep 17 00:00:00 2001 From: rendisaepul Date: Wed, 20 Sep 2017 15:27:14 +0700 Subject: [PATCH 2/4] initialing component connect --- app/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/index.js b/app/index.js index 3efa235a..c2eb53be 100644 --- a/app/index.js +++ b/app/index.js @@ -34,6 +34,7 @@ import PaymentDetail from './containers/PaymentDetail'; import BoothList from './containers/BoothList'; import BoothInfo from './containers/BoothInfo'; import Profile from './containers/Profile'; +import ConnectSosmed from './containers/Connect'; const RouterWithRedux = connect()(Router); const BackButtonImg = require('../assets/images/back.png'); @@ -91,6 +92,7 @@ export default class App extends Component { + From 97371910861ef822d777eb7d608d773732ed00fa Mon Sep 17 00:00:00 2001 From: rendisaepul Date: Wed, 20 Sep 2017 15:28:52 +0700 Subject: [PATCH 3/4] fix calling component connect --- app/containers/Settings/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/containers/Settings/index.js b/app/containers/Settings/index.js index 8aa46117..636fae3d 100644 --- a/app/containers/Settings/index.js +++ b/app/containers/Settings/index.js @@ -59,7 +59,7 @@ class Settings extends Component { block rounded style={styles.button} - onPress={() => Actions.profile()} + onPress={() => Actions.connectSosmed()} > Connect To Social Media From 5e21f29f8704771ef286b82a1acadc411e2f5ee9 Mon Sep 17 00:00:00 2001 From: rendisaepul Date: Wed, 20 Sep 2017 15:30:03 +0700 Subject: [PATCH 4/4] add component connect to social media --- app/containers/Connect/actions.js | 79 +++++++++++++++++++++++++++++ app/containers/Connect/constants.js | 3 ++ app/containers/Connect/index.js | 63 +++++++++++++++++++++++ app/containers/Connect/reducer.js | 32 ++++++++++++ app/containers/Connect/selectors.js | 18 +++++++ app/containers/Connect/styles.js | 76 +++++++++++++++++++++++++++ 6 files changed, 271 insertions(+) create mode 100644 app/containers/Connect/actions.js create mode 100644 app/containers/Connect/constants.js create mode 100644 app/containers/Connect/index.js create mode 100644 app/containers/Connect/reducer.js create mode 100644 app/containers/Connect/selectors.js create mode 100644 app/containers/Connect/styles.js diff --git a/app/containers/Connect/actions.js b/app/containers/Connect/actions.js new file mode 100644 index 00000000..c8c06ef8 --- /dev/null +++ b/app/containers/Connect/actions.js @@ -0,0 +1,79 @@ +import { + DevSummitAxios, + getAccessToken +} from '../../helpers'; + +import local from '../../../config/local'; +import { + FETCH_MATERIAL_LIST, + UPDATE_SINGLE_INPUT_FIELD, + UPDATE_MODAL_STATUS +} from './constants'; + +export function updateInputFields(field, value) { + return { + type: UPDATE_SINGLE_INPUT_FIELD, + field, + value + }; +} + +export function updateModalStatus(status) { + return { + type: UPDATE_MODAL_STATUS, + status + }; +} + +export function fetchMaterialList() { + return (dispatch) => { + getAccessToken() + .then((token) => { + const headers = { Authorization: token }; + DevSummitAxios.get('api/v1/documents', { headers }) + .then((response) => { + dispatch({ + type: FETCH_MATERIAL_LIST, + payloads: response.data.data + }); + }); + }); + }; +} + +export function saveMaterialList(image) { + return (dispatch, getState) => { + const { fields } = getState().get('materialList').toJS(); + const { + title, + summary, + file + } = fields || null; + getAccessToken() + .then((token) => { + // @TODO We need to change into dev-summit url + const url = local.API_BASE_URL.concat('api/v1/documents'); + const form = new FormData(); + + form.append('title', title); + form.append('summary', summary); + form.append('document_data', { + uri: file.uri, + type: file.type, + name: file.fileName + }); + + fetch(url, { + method: 'POST', + headers: { + Authorization: token + }, + body: form + }) + .then(resp => resp.json()) + .then((resp) => { + dispatch(updateModalStatus(false)); + }).catch(err => console.log(err)); + }); + }; +} diff --git a/app/containers/Connect/constants.js b/app/containers/Connect/constants.js new file mode 100644 index 00000000..8d5bf727 --- /dev/null +++ b/app/containers/Connect/constants.js @@ -0,0 +1,3 @@ +export const FETCH_MATERIAL_LIST = 'app/containers/Speaker/FETCH_MATERIAL_LIST'; +export const UPDATE_SINGLE_INPUT_FIELD = 'app/containers/MaterialList/UPDATE_SINGLE_INPUT_FIELD'; +export const UPDATE_MODAL_STATUS = 'app/containers/MaterialList/UPDATE_MODAL_STATUS'; diff --git a/app/containers/Connect/index.js b/app/containers/Connect/index.js new file mode 100644 index 00000000..3e77e051 --- /dev/null +++ b/app/containers/Connect/index.js @@ -0,0 +1,63 @@ +import React, { Component } from 'react'; +import { + Container, + Content, + Header, + Button, + Item, + Input, + Text, + Label, + Card, + CardItem, + Body, + Fab +} from 'native-base'; +import { Alert, View, Image, KeyboardAvoidingView, TouchableOpacity,TouchableHighlight, Modal } from 'react-native'; +import Icon from 'react-native-vector-icons'; +import { Actions } from 'react-native-router-flux'; +import { createStructuredSelector } from 'reselect'; +import { connect } from 'react-redux'; +import HeaderPoint from '../../components/Header'; +import ModalComponent from '../../components/ModalComponent'; +import { DocumentPicker, DocumentPickerUtil } from 'react-native-document-picker'; +import Toast from 'react-native-simple-toast'; +import styles from './styles'; +import * as selectors from './selectors'; +import * as actions from './actions'; +import { SocialIcon } from 'react-native-elements' + +class ConnectSosmed extends Component { + + render() { + return ( + + + + + + + + + + + ); + } +} + +const mapStateToProps = createStructuredSelector({ + +}); +export default connect(mapStateToProps, actions)(ConnectSosmed); diff --git a/app/containers/Connect/reducer.js b/app/containers/Connect/reducer.js new file mode 100644 index 00000000..de395f49 --- /dev/null +++ b/app/containers/Connect/reducer.js @@ -0,0 +1,32 @@ +import { fromJS } from 'immutable'; + +import { + FETCH_MATERIAL_LIST, + UPDATE_SINGLE_INPUT_FIELD, + UPDATE_MODAL_STATUS +} from './constants'; + +const initialState = fromJS({ + material: [], + visible: false, + fields: { + title: '', + summary: '', + file: null + } +}); + +function materialListReducer(state = initialState, action) { + switch (action.type) { + case FETCH_MATERIAL_LIST: + return state.set('material', action.payloads); + case UPDATE_MODAL_STATUS: + return state.set('visible', action.status); + case UPDATE_SINGLE_INPUT_FIELD: + return state.setIn([ 'fields', action.field ], action.value); + default: + return state; + } +} + +export default materialListReducer; diff --git a/app/containers/Connect/selectors.js b/app/containers/Connect/selectors.js new file mode 100644 index 00000000..e17c57ab --- /dev/null +++ b/app/containers/Connect/selectors.js @@ -0,0 +1,18 @@ +import { createSelector } from 'reselect'; + +const selectListMaterialReducer = () => state => state.get('materialList'); + +export const getListMaterial = () => createSelector( + selectListMaterialReducer(), + state => state.get('material') +); + +export const getInputFields = () => createSelector( + selectListMaterialReducer(), + state => state.get('inputFields').toJS() +); + +export const getModalStatus = () => createSelector( + selectListMaterialReducer(), + state => state.get('visible') +); diff --git a/app/containers/Connect/styles.js b/app/containers/Connect/styles.js new file mode 100644 index 00000000..607b9dd0 --- /dev/null +++ b/app/containers/Connect/styles.js @@ -0,0 +1,76 @@ +import { StyleSheet } from 'react-native'; + +const styles = StyleSheet.create({ + container: { + backgroundColor: 'rgb(255,255,255)' + }, + content: { + marginTop: -40, + paddingLeft: 5, + paddingRight: 5 + }, + bodySection: { + flex: 1, + flexDirection: 'row', + marginTop: 5 + }, + profileSection: { + flex: 2 + }, + nameSection: { + marginLeft: 15, + flex: 8 + }, + name: { + color: '#333', + fontSize: 18, + fontWeight: 'bold' + }, + summary: { + color: '#333', + paddingTop: 10 + }, + footerSection: { + flex: 1, + alignItems: 'flex-end', + justifyContent: 'flex-end' + }, + footerButton: { + borderRadius: 50, + height: 35, + alignItems: 'center', + justifyContent: 'center' + }, + icon: { + textAlign: 'center', + flex: 1, + fontSize: 18, + alignSelf: 'center' + }, + buttonSocialSection: { + flex: 1, + flexDirection: 'column', + marginLeft: 12, + marginRight: 12, + marginTop: 5, + marginBottom: 5 + }, + buttonSocial: { + justifyContent: 'center', + marginLeft: 5, + borderColor: 'transparent', + borderWidth: 1, + borderRadius: 30, + marginRight: 5, + flexDirection: 'row', + elevation: 0, + flex: 0.3, + marginTop: 5, + }, + buttonText: { + textAlign: 'center', + alignSelf: 'center' + } +}); + +export default styles;