From 581b85e06b9d2c4d68b9fd26c419842e252892f1 Mon Sep 17 00:00:00 2001 From: "duong.vu" Date: Mon, 4 Jun 2018 11:48:12 +0700 Subject: [PATCH] pagination complete --- package-lock.json | 213 +++++++++++++++++- package.json | 1 + src/container/Chat/index.js | 147 ++++++++++++ src/container/Chat/screen.js | 193 ++++++++++++++++ .../FriendProfileScreen/Details/Intro.js | 2 +- .../FriendProfileScreen/Details/Setting.js | 13 ++ src/container/Home/index.js | 46 ++-- src/container/Sidebar/index.js | 5 + src/navigator/routes.js | 7 + 9 files changed, 604 insertions(+), 23 deletions(-) create mode 100644 src/container/Chat/index.js create mode 100644 src/container/Chat/screen.js diff --git a/package-lock.json b/package-lock.json index 2302d18..913da90 100644 --- a/package-lock.json +++ b/package-lock.json @@ -248,6 +248,11 @@ "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.7.tgz", "integrity": "sha1-hgbCy/HEJs6MjsABdER/1Jtur8E=" }, + "after": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz", + "integrity": "sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=" + }, "ajv": { "version": "5.5.2", "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz", @@ -581,6 +586,11 @@ "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz", "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=" }, + "arraybuffer.slice": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz", + "integrity": "sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog==" + }, "arrify": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz", @@ -1673,6 +1683,11 @@ } } }, + "base64-arraybuffer": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz", + "integrity": "sha1-c5JncZI7Whl0etZmqlzUv5xunOg=" + }, "base64-js": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.2.3.tgz", @@ -1712,6 +1727,14 @@ "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.1.1.tgz", "integrity": "sha1-5tXqjF2tABMEpwsiY4RH9pyy+Ak=" }, + "better-assert": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/better-assert/-/better-assert-1.0.2.tgz", + "integrity": "sha1-QIZrnhueC1W0gYlDEeaPr/rrxSI=", + "requires": { + "callsite": "1.0.0" + } + }, "big-integer": { "version": "1.6.26", "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.26.tgz", @@ -1727,6 +1750,11 @@ "chainsaw": "0.1.0" } }, + "blob": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.4.tgz", + "integrity": "sha1-vPEwUspURj8w+fx+lbmkdjCpSSE=" + }, "blueimp-md5": { "version": "2.10.0", "resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.10.0.tgz", @@ -1893,6 +1921,11 @@ "callsites": "0.2.0" } }, + "callsite": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz", + "integrity": "sha1-KAOY5dZkvXQDi28JBRU+borxvCA=" + }, "callsites": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-0.2.0.tgz", @@ -2214,11 +2247,20 @@ "integrity": "sha512-4hAxDSBypT/yp2ySFD346So6Ragw5xmBn/e/agIGl3bZr6DLUqnoRZPusxKrXdYRZpgexO9daejmIenlq/wrIQ==", "dev": true }, + "component-bind": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz", + "integrity": "sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=" + }, "component-emitter": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz", - "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=", - "dev": true + "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=" + }, + "component-inherit": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz", + "integrity": "sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM=" }, "compressible": { "version": "2.0.13", @@ -2763,6 +2805,56 @@ "once": "1.4.0" } }, + "engine.io-client": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.2.1.tgz", + "integrity": "sha512-y5AbkytWeM4jQr7m/koQLc5AxpRKC1hEVUb/s1FUAWEJq5AzJJ4NLvzuKPuxtDi5Mq755WuDvZ6Iv2rXj4PTzw==", + "requires": { + "component-emitter": "1.2.1", + "component-inherit": "0.0.3", + "debug": "3.1.0", + "engine.io-parser": "2.1.2", + "has-cors": "1.1.0", + "indexof": "0.0.1", + "parseqs": "0.0.5", + "parseuri": "0.0.5", + "ws": "3.3.3", + "xmlhttprequest-ssl": "1.5.5", + "yeast": "0.1.2" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + }, + "ws": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/ws/-/ws-3.3.3.tgz", + "integrity": "sha512-nnWLa/NwZSt4KQJu51MYlCcSQ5g7INpOrOMt4XV8j4dqTXdmlUmSHQ8/oLC069ckre0fRsgfvsKwbTdtKLCDkA==", + "requires": { + "async-limiter": "1.0.0", + "safe-buffer": "5.1.1", + "ultron": "1.1.1" + } + } + } + }, + "engine.io-parser": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-2.1.2.tgz", + "integrity": "sha512-dInLFzr80RijZ1rGpx1+56/uFoH7/7InhH3kZt+Ms6hT8tNx3NGW/WNSA/f8As1WkOfkuyb3tnRyuXGxusclMw==", + "requires": { + "after": "0.8.2", + "arraybuffer.slice": "0.0.7", + "base64-arraybuffer": "0.1.5", + "blob": "0.0.4", + "has-binary2": "1.0.3" + } + }, "envinfo": { "version": "3.11.1", "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-3.11.1.tgz", @@ -4948,6 +5040,26 @@ "ansi-regex": "2.1.1" } }, + "has-binary2": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-binary2/-/has-binary2-1.0.3.tgz", + "integrity": "sha512-G1LWKhDSvhGeAQ8mPVQlqNcOB2sJdwATtZKl2pDKKHfpf/rYj24lkinxf69blJbnsvtqqNU+L3SL50vzZhXOnw==", + "requires": { + "isarray": "2.0.1" + }, + "dependencies": { + "isarray": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz", + "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=" + } + } + }, + "has-cors": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz", + "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=" + }, "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", @@ -5171,6 +5283,11 @@ "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=" }, + "indexof": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz", + "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=" + }, "inflight": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", @@ -7725,6 +7842,11 @@ "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, + "object-component": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/object-component/-/object-component-0.0.3.tgz", + "integrity": "sha1-8MaapQ78lbhmwYb0AKM3acsvEpE=" + }, "object-copy": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz", @@ -8025,6 +8147,22 @@ "integrity": "sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==", "dev": true }, + "parseqs": { + "version": "0.0.5", + "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.5.tgz", + "integrity": "sha1-1SCKNzjkZ2bikbouoXNoSSGouJ0=", + "requires": { + "better-assert": "1.0.2" + } + }, + "parseuri": { + "version": "0.0.5", + "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.5.tgz", + "integrity": "sha1-gCBKUNTbt3m/3G6+J3jZDkvOMgo=", + "requires": { + "better-assert": "1.0.2" + } + }, "parseurl": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz", @@ -9740,6 +9878,62 @@ "hoek": "4.2.1" } }, + "socket.io-client": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-2.1.1.tgz", + "integrity": "sha512-jxnFyhAuFxYfjqIgduQlhzqTcOEQSn+OHKVfAxWaNWa7ecP7xSNk2Dx/3UEsDcY7NcFafxvNvKPmmO7HTwTxGQ==", + "requires": { + "backo2": "1.0.2", + "base64-arraybuffer": "0.1.5", + "component-bind": "1.0.0", + "component-emitter": "1.2.1", + "debug": "3.1.0", + "engine.io-client": "3.2.1", + "has-binary2": "1.0.3", + "has-cors": "1.1.0", + "indexof": "0.0.1", + "object-component": "0.0.3", + "parseqs": "0.0.5", + "parseuri": "0.0.5", + "socket.io-parser": "3.2.0", + "to-array": "0.1.4" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + } + } + }, + "socket.io-parser": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.2.0.tgz", + "integrity": "sha512-FYiBx7rc/KORMJlgsXysflWx/RIvtqZbyGLlHZvjfmPTPeuD/I8MaW7cfFrj5tRltICJdgwflhfZ3NVVbVLFQA==", + "requires": { + "component-emitter": "1.2.1", + "debug": "3.1.0", + "isarray": "2.0.1" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + }, + "isarray": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz", + "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=" + } + } + }, "source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", @@ -10579,6 +10773,11 @@ "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz", "integrity": "sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE=" }, + "to-array": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz", + "integrity": "sha1-F+bBH3PdTz10zaek/zI46a2b+JA=" + }, "to-fast-properties": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz", @@ -11189,6 +11388,11 @@ "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.27.tgz", "integrity": "sha1-1QH5ezvbQDr4757MIFcxh6rawOk=" }, + "xmlhttprequest-ssl": { + "version": "1.5.5", + "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz", + "integrity": "sha1-wodrBhaKrcQOV9l+gRkayPQ5iz4=" + }, "xpipe": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/xpipe/-/xpipe-1.0.5.tgz", @@ -11237,6 +11441,11 @@ "camelcase": "4.1.0" } }, + "yeast": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz", + "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk=" + }, "zen-observable": { "version": "0.7.1", "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.7.1.tgz", diff --git a/package.json b/package.json index a8ef7d1..f735134 100755 --- a/package.json +++ b/package.json @@ -88,6 +88,7 @@ "redux-form": "7.3.0", "redux-thunk": "2.2.0", "rxjs": "^5.5.8", + "socket.io-client": "^2.1.1", "subscriptions-transport-ws": "^0.9.8", "validator": "9.4.1" } diff --git a/src/container/Chat/index.js b/src/container/Chat/index.js new file mode 100644 index 0000000..d7655c0 --- /dev/null +++ b/src/container/Chat/index.js @@ -0,0 +1,147 @@ +import React, { Component } from "react"; +import { Content, Header, Icon, Left, Button, Body, Title, Right, Container } from "native-base"; +import { + StyleSheet, + Text, + View, + TextInput, + Alert, + Image, + ActivityIndicator +} from "react-native"; +import Layout from "../../components/Layout"; +import io from "socket.io-client"; +import { NavigationActions } from "react-navigation"; +import { connect } from "react-redux"; + +class Chat extends Component { + constructor(props) { + super(props); + this.socket = io("http://localhost:3000"); + + this.socket.on("loggingFailed", () => { + Alert.alert( + "username already existed", + "try others", + [{ text: "OK", onPress: () => console.log("OK Pressed") }], + { cancelable: false } + ); + }); + + this.socket.on("loggingSucceed", async data => { + await this.setState({ + username: data + }), + await Alert.alert( + "Logging succeed", + "move on plz", + [ + { + text: "Cancel", + onPress: () => console.log("Cancel Pressed"), + style: "cancel" + }, + { + text: "OK", + onPress: () => + this.props.dispatch( + NavigationActions.navigate({ + routeName: "Screen", + params: { + account: this.state.account, + online: this.state.onlineUsers + } + }) + ) + } + ], + { cancelable: false } + ); + }); + + this.state = { + account: "", + username: "", + onlineUsers: [], + text: "", + data: [], + name: "", + typing: "" + }; + } + + login() { + this.socket.emit("logging", this.state.account); + } + render() { + if (this.props.loading) { + return ; + } + + return ( + + +
+ + + + + FakeYahoo + + +
+ + + + + + + Welcome to FakeYahoo {this.state.username} + this.setState({ account })} + value={this.state.account} + style={{ width: 300, marginTop: 20, borderWidth: 1, height: 50 }} + /> + + + + + + + + ); + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: "center", + alignItems: "center", + backgroundColor: "#F5FCFF" + }, + welcome: { + fontSize: 20, + textAlign: "center", + margin: 30 + }, + instructions: { + textAlign: "center", + color: "#333333", + marginBottom: 5 + } +}); + +const ChatWithData = connect(({ dispatch }) => ({ dispatch }))(Chat); + +export default ChatWithData; diff --git a/src/container/Chat/screen.js b/src/container/Chat/screen.js new file mode 100644 index 0000000..bda2b74 --- /dev/null +++ b/src/container/Chat/screen.js @@ -0,0 +1,193 @@ +import React, { Component } from "react"; +import { StyleSheet, Text, View, TextInput, ScrollView } from "react-native"; +import { Button } from "native-base"; +import io from "socket.io-client"; + +export default class Screen extends Component { + constructor(props) { + super(props); + this.socket = io("http://localhost:3000"); + + this.socket.emit("onlineUsers"); + + this.socket.on("onlineUsersQuery", data => { + this.setState({ + onlineUsers: data + }); + }); + + this.socket.on("roomsQuery", data => { + this.setState({ + roomNumber: data + }); + }); + + this.socket.on("createdRoom", data => { + this.setState({ + currentRoom: data + }); + }); + + this.socket.on("chattingQuery", data => { + this.state.chattingQuery.push(data); + this.setState(this.state); + }); + + this.socket.on("someoneType", data => { + this.setState({ + typing: data + }); + }); + + this.socket.on("someoneDoneType", data => { + this.setState({ + typing: "" + }); + }); + + this.state = { + account: "", + username: "", + onlineUsers: [], + text: "", + data: [], + name: "", + typing: "", + roomName: "", + roomNumber: [], + currentRoom: "", + chattingMessage: "", + chattingQuery: [], + fetchDataHistory: [] + }; + } + + logout(account) { + this.socket.emit("logout", account); + this.props.navigation.goBack(); + } + + createRoom() { + this.socket.emit("roomName", this.state.roomName); + } + + send(account) { + this.socket.emit("chatting", { + message: this.state.chattingMessage, + account: account + }); + this.setState({ + chattingMessage: "" + }); + } + + render() { + const account = this.props.navigation.state.params.account; + return ( + + Welcome to FakeYahoo {account} + + people online : + + {this.state.onlineUsers.map((e, i) => { + return ( + + {" "} + {e}{" "} + + ); + })} + + + Creat/Join a chat room you choose + this.setState({ roomName })} + value={this.state.roomName} + style={{ width: 350, borderWidth: 1, marginTop: 10, height: 50 }} + /> + + + + + + Available rooms : + {this.state.roomNumber.map((e, i) => { + return {e} ; + })} + + + + Current room : + {this.state.currentRoom} + + + + + + {this.state.chattingQuery.map((e, i) => { + return ( + + {" "} + {e.account} {e.message}{" "} + + ); + })} + + + {this.state.typing} + Chatting + + this.setState({ chattingMessage })} + onFocus={() => { + this.socket.emit("onTyping", account); + }} + onBlur={() => { + this.socket.emit("offTyping", account); + }} + value={this.state.chattingMessage} + /> + + + + + + + ); + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: "center", + alignItems: "center", + backgroundColor: "#F5FCFF" + }, + welcome: { + fontSize: 20, + textAlign: "center", + margin: 30 + }, + instructions: { + textAlign: "center", + color: "#333333", + marginBottom: 5 + } +}); diff --git a/src/container/FriendProfileScreen/Details/Intro.js b/src/container/FriendProfileScreen/Details/Intro.js index 7eedf16..849e739 100644 --- a/src/container/FriendProfileScreen/Details/Intro.js +++ b/src/container/FriendProfileScreen/Details/Intro.js @@ -17,7 +17,7 @@ class Intro extends Component { Sinh nhật: - {this.props.info.profile.dob === null ? "chưa cung cấp" : this.props.info.profile.dob}{" "} + {this.props.info.profile.dob === null ? "chưa cung cấp" : this.props.info.profile.dob.toString().split("T")[0]} diff --git a/src/container/FriendProfileScreen/Details/Setting.js b/src/container/FriendProfileScreen/Details/Setting.js index e41f481..81959e7 100644 --- a/src/container/FriendProfileScreen/Details/Setting.js +++ b/src/container/FriendProfileScreen/Details/Setting.js @@ -3,6 +3,7 @@ import { Text, Icon, Button } from "native-base"; import { View, Modal } from "react-native"; import { connect } from "react-redux"; import SettingOptions from "./SettingOptions"; +import { NavigationActions } from "react-navigation"; class Setting extends Component { constructor(props) { @@ -17,6 +18,13 @@ class Setting extends Component { edit() { this.setModalVisible(true); } + passwordChange(){ + this.props.dispatch( + NavigationActions.navigate({ + routeName: "ChangePasswordScreen" + }) + ); + } render() { const close = () => { this.setModalVisible(!this.state.modalVisible); @@ -31,6 +39,7 @@ class Setting extends Component { + ); } else { diff --git a/src/container/Home/index.js b/src/container/Home/index.js index 3d4bbf2..bfedaec 100755 --- a/src/container/Home/index.js +++ b/src/container/Home/index.js @@ -1,7 +1,7 @@ import React, { Component } from "react"; import { connect } from "react-redux"; import update from "immutability-helper"; -import { View, Card , Icon } from "native-base"; +import { View, Card, Icon } from "native-base"; import { graphql, compose, withApollo } from "react-apollo"; import { ActivityIndicator, FlatList, ScrollView, Text } from "react-native"; import Modal from "react-native-modal"; @@ -20,7 +20,7 @@ import POST_ADDED_SUBSCRIPTION from "../../graphql/subscriptions/postAdded"; import styles from "./styles"; import { colors } from "../../constants"; export const SAVE_USER_INFO = "SAVE_USER_INFO"; -// import Pagination, { Dot , Icon } from "react-native-pagination"; +import Pagination from "react-native-pagination"; class TextBanner extends Component { render() { @@ -152,6 +152,7 @@ class HomeScreen extends Component { sharingPostID: id }) + onViewableItemsChanged = ({ viewableItems, changed }) => this.setState({ viewableItems }) render() { const { getMe, getFeeds, getListEvents } = this.props; const { sharingModalVisible, refreshing, sharingPostID } = this.state; @@ -161,26 +162,31 @@ class HomeScreen extends Component { } else { feedsContent = ( - (!refreshing ? null : )} - keyExtractor={item => item._id} - renderItem={this._renderItem} - showsHorizontalScrollIndicator={false} - /> - {/* (this.refs = r)} + horizontal + contentContainerStyle={{ alignSelf: "stretch" }} + data={getFeeds.feeds.edges} + onEndReached={this._handleEnd} + onEndReachedThreshold={0.1} + refreshing={refreshing} + ListFooterComponent={() => (!refreshing ? null : )} + keyExtractor={item => item._id} + renderItem={this._renderItem} + showsHorizontalScrollIndicator={false} + onViewableItemsChanged={this.onViewableItemsChanged} //need this + style={{marginBottom:43}} + /> + this.refs=r}" to your list) - paginationVisibleItems={this.state.viewableItems}//needs to track what the user sees - paginationItems={this.props.getFeeds.edges}//pass the same list as data - paginationItemPadSize={3} //num of items to pad above and below your visable items - /> */} + listRef={this.refs} //to allow React Native Pagination to scroll to item when clicked (so add "ref={r=>this.refs=r}" to your list) + paginationVisibleItems={this.state.viewableItems} //needs to track what the user sees + paginationItems={getFeeds.edges} //pass the same list as data + paginationItemPadSize={0} //num of items to pad above and below your visable items + dotIconColorActive="rgba(85,186,255, 1)" + + /> ); } diff --git a/src/container/Sidebar/index.js b/src/container/Sidebar/index.js index 078aa76..0ef8b34 100755 --- a/src/container/Sidebar/index.js +++ b/src/container/Sidebar/index.js @@ -47,6 +47,11 @@ const routes = [ caption: "Tài khoản", drawerIcon: }, + { + route: "Chat", + caption: "Chat", + drawerIcon: + }, { route: "Logout", caption: "Đăng xuất", diff --git a/src/navigator/routes.js b/src/navigator/routes.js index b6f7416..272ead5 100644 --- a/src/navigator/routes.js +++ b/src/navigator/routes.js @@ -36,6 +36,8 @@ import EventDetailScreen from "../container/EventDetailContainer"; import ProfileScreen from "../container/ProfileScreen"; import ChangePasswordScreen from "../container/ChangePasswordScreen"; import BlankScreen from "../container/BlankScreen"; +import Chat from "../container/Chat"; +import Screen from "../container/Chat/screen"; /************* START CONFIG APP ROUTES *******************/ /*********** Tabs Batch Screens *********************/ @@ -98,6 +100,11 @@ const StackAppRouteConfig = StackNavigator( FriendProfileScreen: { screen: FriendProfileScreen }, ListEventsScreen: { screen: ListEventsScreen }, EventDetailScreen: { screen: EventDetailScreen }, + ChangePasswordScreen: { screen: ChangePasswordScreen }, + BlankScreen: { screen : BlankScreen}, + Chat: { screen : Chat}, + Screen: { screen : Screen} + }, { headerMode: "none"