Merge pull request #34 from terrysahaidak/room-info

Add room info screen; room users list screen

app/api/gitter.js

@@ -33,7 +33,7 @@ export function roomMessagesBefore(token, id, limit, beforeId) {
 }
 
 export function sendMessage(token, roomId, text) {
-  return callApi(`/rooms/${roomId}/chatMessages`, token, {
+  return callApi(`rooms/${roomId}/chatMessages`, token, {
     method: 'POST',
     body: JSON.stringify({
       text
@@ -42,7 +42,7 @@ export function sendMessage(token, roomId, text) {
 }
 
 export function joinRoom(token, uri) {
-  return callApi(`/rooms`, token, {
+  return callApi(`rooms`, token, {
     method: 'POST',
     body: JSON.stringify({
       uri
@@ -51,7 +51,7 @@ export function joinRoom(token, uri) {
 }
 
 export function changeFavoriteStatus(token, userId, roomId, status) {
-  return callApi(`/user/${userId}/rooms/${roomId}`, token, {
+  return callApi(`user/${userId}/rooms/${roomId}`, token, {
     method: 'PUT',
     body: JSON.stringify({
       favourite: status
@@ -60,19 +60,19 @@ export function changeFavoriteStatus(token, userId, roomId, status) {
 }
 
 export function leaveRoom(token, roomId, userId) {
-  return callApi(`/rooms/${roomId}/users/${userId}`, token, {
+  return callApi(`rooms/${roomId}/users/${userId}`, token, {
     method: 'DELETE'
   })
 }
 
 export function markAllAsRead(token, roomId, userId) {
-  return callApi(`/user/${userId}/rooms/${roomId}/unreadItems/all`, token, {
+  return callApi(`user/${userId}/rooms/${roomId}/unreadItems/all`, token, {
     method: 'DELETE'
   })
 }
 
 export function updateMessage(token, roomId, messageId, text) {
-  return callApi(`/rooms/${roomId}/chatMessages/${messageId}`, token, {
+  return callApi(`rooms/${roomId}/chatMessages/${messageId}`, token, {
     method: 'PUT',
     body: JSON.stringify({
       text
@@ -96,6 +96,29 @@ export function getUser(token, username) {
   return callApi(`users/${username}`, token)
 }
 
+export function getRepoInfo(token, repoName) {
+  const url = `repo-info?repo=${repoName}`
+  return fetch(`${apiUrl}/${url}`, {
+    method: 'get',
+    headers: {
+      'Authorization': `Bearer ${token}`,
+      'Content-Type': 'application/json'
+    }
+  })
+}
+
+export function getRoomUsers(token, roomId) {
+  return callApi(`rooms/${roomId}/users`, token)
+}
+
+export function getRoomUsersWithSkip(token, roomId, skip) {
+  return callApi(`rooms/${roomId}/users?skip=${skip}`, token)
+}
+
+export function searchRoomUsers(token, roomId, query) {
+  return callApi(`rooms/${roomId}/users?q=${query}`, token)
+}
+
 
 /**
  * Private functions
@@ -110,7 +133,7 @@ function callApi(endpoint, token, options = {method: 'get'}) {
       'Authorization': `Bearer ${token}`,
       'Content-Type': 'application/json'
     }
-  }).then(res => res.json())
+  }).then(res => {console.log(res); return res.text()}).then(res => JSON.parse(res))
 }
 // GET https://gitter.im/api/v1/user/555e610f15522ed4b3e0c169/suggestedRooms
 // GET https://gitter.im/api/v1/repo-info?repo=dev-ua%2Freactjs

app/components/CustomSearch.js

@@ -0,0 +1,70 @@
+import React, {
+  Component,
+  PropTypes,
+  TextInput,
+  Image,
+  View
+} from 'react-native'
+import s from '../styles/components/CustomSearchStyles'
+import Button from './Button'
+
+class CustomSearch extends Component {
+  constructor(props) {
+    super(props)
+
+    this.focus = this.focus.bind(this)
+    this.blur = this.blur.bind(this)
+  }
+
+  focus() {
+    this.refs.textInput.focus()
+  }
+
+  blur() {
+    this.refs.textInput.blur()
+  }
+
+  render() {
+    const {value, onChange, onBackPress, onClearPress} = this.props
+    return (
+      <View style={s.container}>
+        <Button
+          styles={s.button}
+          onPress={() => onBackPress()}>
+          <Image
+            style={s.buttonIcon}
+            source={require('image!ic_arrow_back_black_24dp')} />
+        </Button>
+        <View style={s.innerContainer}>
+          <TextInput
+            ref="textInput"
+            style={s.textInput}
+            value={value}
+            keyboardShouldPersistTaps={false}
+            underlineColorAndroid="white"
+            placeholderTextColor="gray"
+            onChange={onChange}
+            placeholder="Search" />
+        </View>
+        {!!value && value.length !== 0 && (
+          <Button
+            styles={s.button}
+            onPress={() => onClearPress()}>
+            <Image
+              style={s.buttonIcon}
+              source={require('image!ic_close_black_24dp')} />
+          </Button>
+        )}
+      </View>
+    )
+  }
+}
+
+CustomSearch.propTypes = {
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  onBackPress: PropTypes.func,
+  onClearPress: PropTypes.func
+}
+
+export default CustomSearch

app/components/Divider.js

@@ -0,0 +1,28 @@
+import React, {
+  PropTypes,
+  View
+} from 'react-native';
+
+const Divider = ({inset, style, light}) => {
+  return (
+    <View
+      style={[
+        {height: 1},
+        {marginLeft: inset ? 72 : 0},
+        {backgroundColor: light ? 'rgba(0,0,0,.12)' : 'rgba(255,255,255,.12)'},
+        style
+      ]} />
+  )
+}
+
+Divider.defaultProps = {
+  light: true
+}
+
+Divider.propTypes = {
+  inset: PropTypes.bool,
+  style: PropTypes.object,
+  light: PropTypes.bool
+}
+
+export default Divider

app/components/Drawer/ChannelListItem.js

@@ -1,6 +1,6 @@
 import React, {
   PropTypes,
-  TouchableHighlight,
+  TouchableNativeFeedback,
   View,
   Text
 } from 'react-native'
@@ -20,16 +20,16 @@ const ChannelListItem = ({
     : createGhAvatarLink(name.split('/')[0], 200)
 
   const itemStyles = activeRoom === id
-    ? {backgroundColor: colors.raspberry, color: colors.white, elevation: 2}
-    : {backgroundColor: colors.white, elevation: 0}
+    ? {backgroundColor: colors.androidGray, color: colors.raspberry}
+    : {backgroundColor: colors.white}
 
   return (
-    <TouchableHighlight
+    <TouchableNativeFeedback
       onPress={onRoomPress.bind(this, id)}
       onLongPress={onLongRoomPress.bind(this, id)}>
       <View style={[s.container,
-        { backgroundColor: itemStyles.backgroundColor,
-          elevation: itemStyles.elevation}]}
+        {backgroundColor: itemStyles.backgroundColor}
+      ]}
         key={id}>
 
         <Avatar
@@ -46,7 +46,7 @@ const ChannelListItem = ({
             mentions={mentions}
             lurk={lurk} />}
       </View>
-    </TouchableHighlight>
+    </TouchableNativeFeedback>
   )
 }
 

app/components/Drawer/ChannelListSection.js

@@ -1,13 +1,12 @@
 import React, {PropTypes, View, Text} from 'react-native'
 import s from '../../styles/screens/Drawer/ChannelListSectionStyles'
 import ChannelListItem from './ChannelListItem'
+import Heading from '../Heading'
 
 const ChannelListSection = ({name, items, onRoomPress, activeRoom, onLongRoomPress}) => {
   return (
     <View>
-      <View style={s.container}>
-        <Text style={s.heading}>{name}</Text>
-      </View>
+      <Heading text={name} styles={s.heading}/>
       <View style={s.itemSection}>
         {items && items.map(item => (
           <ChannelListItem

app/components/FailedToLoad.js

@@ -6,14 +6,14 @@ import React, {
 } from 'react-native'
 import s from '../styles/components/FailedToLoadStyles'
 
-const FailedToLoad = ({onPress, message}) => {
+const FailedToLoad = ({onRetry, message}) => {
   return (
     <View style={s.container}>
       <Text style={s.heading}>
         {message}
       </Text>
       <TouchableNativeFeedback
-        onPress={() => onPress()}>
+        onPress={() => onRetry()}>
         <View style={s.button}>
           <Text>Retry</Text>
         </View>

app/components/Heading.js

@@ -0,0 +1,36 @@
+import React, {
+  PropTypes,
+  View,
+  Text
+} from 'react-native'
+
+const Heading = ({text, color, styles}) => {
+  return (
+    <View style={[
+      {
+        height: 24,
+        padding: 16
+      },
+      styles
+    ]}>
+      <Text style={{
+        fontWeight: 'bold',
+        color
+      }}>
+        {text}
+      </Text>
+    </View>
+  )
+}
+
+Heading.defaultProps = {
+  color: 'black'
+}
+
+Heading.propTypes = {
+  text: PropTypes.string.isRequired,
+  color: PropTypes.string,
+  styles: PropTypes.object
+}
+
+export default Heading

app/components/Room/Message.js

@@ -90,11 +90,11 @@ class Message extends Component {
 
   render() {
     const {fromUser, sending, failed, readBy, isCollapsed,
-      text, status, onUsernamePress, onUserAvatarPress} = this.props
+      text, status, onUsernamePress, onUserAvatarPress, sent} = this.props
     const opacity = sending === true ? 0.4 : 1
 
     const backgroundColor = failed === true ? 'rgba(255, 0, 0, 0.2)' : 'transparent'
-    const readStatusOpacity = readBy === 0 ? 0 : 0.6
+    const readStatusOpacity = readBy === 0 || ['sending...', 'failed'].indexOf(sent) !== -1 ? 0 : 0.6
 
     if (!!status) {
       return (

app/components/RoomInfo/RepoInfo.js

@@ -0,0 +1,87 @@
+import React, {
+  PropTypes,
+  View,
+  Text
+} from 'react-native'
+import s from '../../styles/screens/RoomInfo/RepoInfoStyles'
+
+import Avatar from '../Avatar'
+import Divider from '../Divider'
+import Heading from '../Heading'
+import Button from '../Button'
+import ParsedText from '../ParsedText'
+
+const RepoInfo = ({name, owner, description, open_issues_count,
+  stargazers_count, watchers_count, html_url, handleUrlPress, onStatItemPress}) => {
+  return (
+    <View style={s.container}>
+      <View style={s.header}>
+        <Avatar
+          src={owner.avatar_url}
+          size={50} />
+        <View style={s.headerTextContainer}>
+          <Text style={s.name}>{name}</Text>
+          <Text style={s.owner}>by {owner.login}</Text>
+        </View>
+    </View>
+    <Divider />
+    {!!description && (
+      <View style={s.descriptionBlock}>
+        <Heading
+          text="Description" />
+        <View style={s.itemContainer}>
+          <ParsedText
+            text={description}
+            handleUrlPress={handleUrlPress} />
+        </View>
+        <Divider />
+      </View>
+    )}
+    <Heading
+      text="Statistics" />
+    <View style={s.itemContainer}>
+      <View style={s.statContainer}>
+        <Button
+          styles={s.button}
+          onPress={() => onStatItemPress(html_url, 'issues')}>
+          <View style={s.statItemContainer}>
+            <Text style={s.statTop}>{open_issues_count}</Text>
+            <Text style={s.statBotoom}>issues</Text>
+          </View>
+        </Button>
+        <Button
+          styles={s.button}
+          onPress={() => onStatItemPress(html_url, 'watchers')}>
+          <View style={s.statItemContainer}>
+            <Text style={s.statTop}>{watchers_count}</Text>
+            <Text style={s.statBotoom}>watchers</Text>
+          </View>
+        </Button>
+        <Button
+          styles={s.button}
+          onPress={() => onStatItemPress(html_url, 'stargazers')}>
+          <View style={s.statItemContainer}>
+            <Text style={s.statTop}>{stargazers_count}</Text>
+            <Text style={s.statBotoom}>star</Text>
+          </View>
+        </Button>
+      </View>
+    </View>
+    <Divider />
+  </View>
+  )
+}
+
+RepoInfo.propTypes = {
+  name: PropTypes.string,
+  owner: PropTypes.object,
+  description: PropTypes.string,
+  open_issues_count: PropTypes.number,
+  stargazers_count: PropTypes.number,
+  watchers_count: PropTypes.number,
+  html_url: PropTypes.string,
+  handleUrlPress: PropTypes.func,
+  onStatItemPress: PropTypes.func
+}
+
+export default RepoInfo