Skip to content

Commit

Permalink
Merge pull request #110 from JSSolutions/tr-fix-styles
Browse files Browse the repository at this point in the history
Fix some styles
  • Loading branch information
terrysahaidak authored Jun 28, 2017
2 parents 07afcf9 + a00d5aa commit d4983e2
Show file tree
Hide file tree
Showing 20 changed files with 282 additions and 139 deletions.
5 changes: 5 additions & 0 deletions app/api/gitter.js
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,11 @@ export function getToken(code) {
/**
* Authed user stuff
*/

export function me(token) {
return callApi('user/me', token)
}

export function currentUser(token) {
return callApi('user', token)
}
Expand Down
14 changes: 12 additions & 2 deletions app/components/Loading/index.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import PropTypes from 'prop-types'
import React from 'react'
import {ActivityIndicator, View} from 'react-native';
import {ActivityIndicator, View, Text} from 'react-native';
import {THEMES} from '../../constants'
const {colors} = THEMES.gitterDefault

const Loading = ({size, height, color}) => (
const Loading = ({size, height, color, text}) => (
<View style={{
flex: height ? 0 : 1,
justifyContent: 'center',
Expand All @@ -15,6 +15,16 @@ const Loading = ({size, height, color}) => (
animating
size={size}
color={color || colors.raspberry}/>
{text && (
<Text style={{
fontSize: 18,
backgroundColor: 'transparent',
marginTop: 16,
color: color || colors.raspberry
}}>
{text}
</Text>
)}
</View>
)

Expand Down
18 changes: 18 additions & 0 deletions app/components/LoadingOverlay/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from 'react'
import {View, Text} from 'react-native'
import Loading from '../Loading'
import s from './styles'

const LoadingOverlay = ({text}) => (
<View style={s.loadingContainer}>
<View style={s.textContainer}>
<Loading text={text} color="white" />
</View>
</View>
)

LoadingOverlay.propTypes = {

}

export default LoadingOverlay
17 changes: 17 additions & 0 deletions app/components/LoadingOverlay/styles.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import {StyleSheet} from 'react-native'

const styles = StyleSheet.create({
loadingContainer: {
flex: 1,
position: 'absolute',
bottom: 0,
top: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(0,0,0,0.7)',
justifyContent: 'center',
alignItems: 'center'
}
})

export default styles
3 changes: 2 additions & 1 deletion app/constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,5 +53,6 @@ export const icons = {
'info-outline': {icon: 'info-outline', color: 'white', size: 24},
'back': {icon: iOS ? 'chevron-left' : 'arrow-back', color: 'white', size: 24},
'forward': iOS ? {icon: 'chevron-right', color: 'white', size: 40} : {icon: 'arrow-forward', color: 'white', size: 24},
'expand-more': {icon: 'expand-more', color: 'white', size: 24}
'expand-more': {icon: 'expand-more', color: 'white', size: 24},
'checkmark': {icon: 'check', color: 'white', size: 24}
}
54 changes: 49 additions & 5 deletions app/modules/auth.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,46 @@ import {setItem, removeItem} from '../utils/storage'
* Constants
*/

const TOKEN_REGEX = /^[a-z\d]*$/i

export const LOGINING = 'auth/LOGINING'
export const LOGINED_IN_SUCCESS = 'auth/LOGINED_IN_SUCCESS'
export const LOGIN_USER = 'auth/LOGIN_USER'
export const LOGIN_USER_BY_TOKEN = 'auth/LOGIN_USER_BY_TOKEN'
export const UNEXPECTED_ERROR = 'auth/UNEXPECTED_ERROR'
export const LOGOUT = 'auth/LOGOUT'
export const CHECK_TOKEN = 'auth/CHECK_TOKEN'
export const CHECK_TOKEN_OK = 'auth/CHECK_TOKEN_OK'
export const CHECK_TOKEN_ERROR = 'auth/CHECK_TOKEN_ERROR'

/**
* Action Creators
*/

export function checkToken({token}) {
return async dispatch => {
try {
dispatch({type: CHECK_TOKEN})

if (!TOKEN_REGEX.test(token)) {
throw new Error('Bad token.')
}

const user = await Api.me(token)

if (!!user.error) {
throw new Error('Unable to authenticate. Please try again.')
}

dispatch({type: CHECK_TOKEN_OK})

await dispatch(loginByToken({token}))
} catch (err) {
dispatch({type: CHECK_TOKEN_ERROR, error: err.message})
}
}
}

export function loginByToken({token, code}) {
return async dispatch => {
try {
Expand All @@ -37,9 +66,9 @@ export function loginByToken({token, code}) {
rootNavigator.startAppWithScreen({screen: 'gm.Launch'})
await dispatch(init())

dispatch({LOGINED_IN_SUCCESS})
dispatch({type: LOGINED_IN_SUCCESS})
} catch (err) {
dispatch({type: UNEXPECTED_ERROR, error: err})
dispatch({type: UNEXPECTED_ERROR, error: err.message})
}
}
}
Expand All @@ -66,7 +95,7 @@ const initialState = {
loginedIn: false,
token: '',
error: false,
errors: {}
errors: ''
}

export default function auth(state = initialState, action) {
Expand All @@ -75,7 +104,8 @@ export default function auth(state = initialState, action) {
if (!!action.token) {
return {...state,
loginedIn: true,
token: action.token
token: action.token,
error: false
}
} else {
return {...state,
Expand All @@ -84,12 +114,18 @@ export default function auth(state = initialState, action) {
}
}
}

case CHECK_TOKEN:
case LOGINING: {
return {...state,
logining: true
logining: true,
error: false,
errors: ''
}
}


case CHECK_TOKEN_OK:
case LOGINED_IN_SUCCESS: {
return {...state,
logining: false
Expand All @@ -103,6 +139,14 @@ export default function auth(state = initialState, action) {
}
}

case CHECK_TOKEN_ERROR:
case UNEXPECTED_ERROR:
return {...state,
error: true,
logining: false,
errors: action.error
}

case LOGOUT: {
return initialState
}
Expand Down
15 changes: 10 additions & 5 deletions app/screens/Drawer/ChannelListItem/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,20 @@ const ChannelListItem = ({
size={30} />

<View style={s.headingContainer}>
<Text style={[s.heading, {color: itemStyles.color}]}>{name}</Text>
<Text
numberOfLines={1}
ellipsizeMode="tail"
style={[s.heading, {color: itemStyles.color}]}>
{name}
</Text>
</View>
</View>

{(!!unreadItems || !!mentions || !!lurk) &&
<UnreadBadge
{(!!unreadItems || !!mentions || !!lurk) &&
<UnreadBadge
unreadItems={unreadItems}
mentions={mentions}
lurk={lurk} />}
</View>

</Button>
)
}
Expand Down
3 changes: 2 additions & 1 deletion app/screens/Drawer/ChannelListItem/styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ const styles = StyleSheet.create({
backgroundColor: 'white'
},
headingContainer: {
marginLeft: 10
marginLeft: 10,
flex: 1
},
heading: {
fontSize: 12,
Expand Down
8 changes: 6 additions & 2 deletions app/screens/Home/HomeRoomItem/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,13 @@ const HomeRoomItem = ({id, name, userCount, oneToOne, onPress, ...props}) => {
<Avatar
src={src}
size={50} />

<View style={s.infoContainer}>
<Text style={s.name}>{name}</Text>
<Text
numberOfLines={1}
ellipsizeMode="tail"
style={s.name}>
{name}
</Text>
<Text style={s.userCount}>{userCount} people</Text>
</View>
</Button>
Expand Down
2 changes: 2 additions & 0 deletions app/screens/Home/HomeRoomItem/styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {StyleSheet} from 'react-native'

const styles = StyleSheet.create({
container: {
flex: 1,
height: 80,
padding: 20,
paddingLeft: 20,
Expand All @@ -11,6 +12,7 @@ const styles = StyleSheet.create({
alignItems: 'center'
},
infoContainer: {
flex: 1,
flexDirection: 'column',
marginLeft: 16
},
Expand Down
19 changes: 12 additions & 7 deletions app/screens/Home/HomeRoomItemMy/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,22 @@ const HomeRoomItemMy = ({
size={50} />

<View style={s.headingContainer}>
<Text style={s.heading}>{name}</Text>
<Text
numberOfLines={1}
ellipsizeMode="tail"
style={s.heading}>
{name}
</Text>
<Text style={s.userCount}>{userCount} people</Text>
</View>

{(!!unreadItems || !!mentions || !!lurk) &&
<View style={s.unread}>
<UnreadBadge
unreadItems={unreadItems}
mentions={mentions}
lurk={lurk} />
</View>}
<UnreadBadge
unreadItems={unreadItems}
mentions={mentions}
lurk={lurk} />
</View>}

</Button>
)
}
Expand Down
2 changes: 1 addition & 1 deletion app/screens/Home/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ class HomeScreen extends Component {

homeNavigator = this.props.navigator

this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this))

this.props.navigator.setButtons({
leftButtons: [{
Expand Down
24 changes: 9 additions & 15 deletions app/screens/Login/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import {Text, Image, View, ToastAndroid} from 'react-native';
import {Text, View} from 'react-native';
import Button from '../../components/Button'
import s from './styles'
import {connect} from 'react-redux'
Expand All @@ -12,35 +12,29 @@ class LoginScreen extends Component {
render() {
const {navigator} = this.props
return (
<Image style={s.container}
source={require('../../images/gitter-background.jpg')}>
<View style={s.container}>
<Text style={s.logo}>
GitterMobile
</Text>
<Text style={s.hero}>
To start using Gitter mobile you should login first.
You can login by oauth2 through WebView or just
copy/paste authentication token.
</Text>
<View style={s.buttonGroup}>
<Button
style={[s.buttonStyle, {backgroundColor: colors.darkRed}]}
onPress={() => navigator.push({screen: 'gm.LoginByWebView', animated: true, title: 'Login by WebView'})}>
style={s.buttonStyle}
onPress={() => navigator.push({screen: 'gm.LoginByWebView', animated: true, title: 'Login'})}>
<Text pointerEvents="none"
style={s.buttonText}>
Login by WebView
Login
</Text>
</Button>
<Button
style={[s.buttonStyle, {backgroundColor: colors.darkRed}]}
onPress={() => navigator.push({screen: 'gm.LoginByToken', animated: true, title: 'Login by token'})}>
style={s.buttonStyle}
onPress={() => navigator.push({screen: 'gm.LoginByToken', animated: true, title: 'Paste token'})}>
<Text pointerEvents="none"
style={s.buttonText}>
Login by Token
Paste token
</Text>
</Button>
</View>
</Image>
</View>
)
}
}
Expand Down
Loading

0 comments on commit d4983e2

Please sign in to comment.