Skip to content

Commit

Permalink
Initial implementation for new Bot UI (#1412, #1413, #1405, #1406) wi…
Browse files Browse the repository at this point in the history 
…thout location metadata (address is used temporary)
  • Loading branch information
aksonov committed Oct 23, 2017
1 parent 19c3bb0 commit 485fc20
Show file tree
Hide file tree
Showing 14 changed files with 391 additions and 215 deletions.
16 changes: 12 additions & 4 deletions index.ios.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const {AppRegistry} = React;
import App from './src/App';

AppRegistry.registerComponent('Chat', () => App);

//
// in case isolated work, comment line above and uncomment lines below
// import React from 'react';
// import botFactory from './src/factory/botFactory';
Expand All @@ -13,12 +13,20 @@ AppRegistry.registerComponent('Chat', () => App);
// import BotDetails from './src/components/BotDetails';
// import {Text, AppRegistry, View} from 'react-native';
// import locationStore from './src/store/locationStore';
// import {Router, Scene, Stack} from 'react-native-router-flux';
//
// const owner = new Profile('123');
// owner.handle = 'aksonov';
// owner.image = { source: require('./images/iconBotAdded.png')};
// locationStore.location = new Location({latitude: 12, longitude: 12});
// const bot = botFactory.create({id: '123', owner, followersSize: 123, description: '123123123fsd fsd fsdf sdf',
// title: 'Wow my test bot rules!', location: {latitude: 10, longitude: 10}, visibility: 100});
// const App = () => <BotDetails item='123' isNew />;
// const bot = botFactory.create({id: '123', owner, address: 'Los Angeles, US', followersSize: 123, description: '123123123fsd fsd fsdf sdf',
// title: 'Wow my test bot rules!', location: {latitude: 45.547289, longitude: 13.7333244}, visibility: 100});
// bot.image = {source: require('./images/iconAddcover.png')};
// const App = () => <Router>
// <Stack>
// <Scene item='123' isNew component={BotDetails} scale={0.5} />
// </Stack>
// </Router>;
//
// AppRegistry.registerComponent('App', () => App);
//
12 changes: 5 additions & 7 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,18 +70,17 @@ import ChatsScreen from './components/ChatsScreen';
import ChatScreen from './components/ChatScreen';
import BotNoteScene from './components/BotNote';
import BotCompose from './components/BotCompose';
import BotCreate from './components/BotCreate';
import BotCreate from './components/map/BotCreate';
import BotDetails from './components/BotDetails';
import BotMap from './components/BotMap';
import BotsScreen from './components/BotsScreen';
import BotShareSelectFriends from './components/BotShareSelectFriends';
import BotShareCompleted from './components/BotShareCompleted';
import ExploreNearBy from './components/ExploreNearBy';
import ExploreNearBy from './components/map/ExploreNearBy';
import TestRegister from './components/TestRegister';
import CodePushScene from './components/CodePushScene';
import OnboardingSlideshow from './components/OnboardingSlideshowScene';
import LocationWarning from './components/LocationWarning';
import BotAddressScene from './components/BotAddressScene';
import BotAddressScene from './components/map/BotAddressScene';
import * as peopleLists from './components/people-lists';
import ReportUser from './components/report-modals/ReportUser';
import ReportBot from './components/report-modals/ReportBot';
Expand Down Expand Up @@ -174,7 +173,7 @@ when(
() => model.connected && model.profile && model.profile.handle,
() => {
setTimeout(() => {
Actions.botDetails({item: '8bfee86e-9d1a-11e7-bd78-0a580a020377'});
// Actions.botDetails({item: '8bfee86e-9d1a-11e7-bd78-0a580a020377'});
// Actions.subscribers({item: 'd1b08da4-3429-11e7-93e4-0e78520e044a'});
// Actions.botShareSelectFriends({item: '9b2a4590-8e7e-11e7-8720-0eea5386eb69'});
// setTimeout(() => Actions.botPhotoSwiper({item: 'aa567e14-5795-11e7-9926-0e78520e044a', index: 1}), 1000);
Expand Down Expand Up @@ -284,14 +283,13 @@ const App = () => (
<Scene key='camera' component={Camera} clone hideNavBar />
<Scene key='botEdit' component={BotCompose} clone back edit navTransparent right={() => null} />
<Scene key='codePush' component={CodePushScene} title='CodePush' clone back />
<Scene key='botDetails' component={BotDetails} clone back right={() => null} />
<Scene key='botDetails' component={BotDetails} scale={0.5} clone back right={() => null} />
<Scene key='botShareSelectFriends' component={BotShareSelectFriends} title='Share' clone back right={() => null} />
<Scene key='subscribers' component={peopleLists.BotSubscriberList} clone back right={() => null} navTransparent={false} title='Saves' />
<Scene key='botNote' component={BotNoteScene} clone leftTitle={'Cancel'} onLeft={Actions.pop} navTransparent={false} />
<Scene key='botAddress' component={BotAddressScene} clone hideNavBar back />
<Scene key='profileDetails' component={ProfileDetail} clone back navTransparent={false} />
<Scene key='myAccount' component={MyAccount} editMode clone back />
<Scene key='botMap' component={BotMap} map clone back navigationBarStyle={{backgroundColor: 'white', height: 100}} />
<Scene key='followers' component={peopleLists.FollowersList} clone title='Followers' back />
<Scene key='following' component={peopleLists.FollowingList} clone title='Following' back />
<Scene key='blocked' component={peopleLists.BlockedList} clone title='Blocked Users' back right={() => null} />
Expand Down
101 changes: 40 additions & 61 deletions src/components/BotDetails/BotDetailsHeader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,21 @@ import {observable} from 'mobx';
import Popover from 'react-native-popover';
import {observer} from 'mobx-react/native';
import botFactory from '../../factory/botFactory';
import {k, width, defaultCover} from '../Global';
import {k, width, height, defaultCover} from '../Global';
import botStore from '../../store/botStore';
import locationStore from '../../store/locationStore';
import {colors} from '../../constants';
import BotButtons from './BotButtons';
import UserInfoRow from './UserInfoRow';
import Bot from '../../model/Bot';
import {RText} from '../common';
import Map from '../Map';
import MapView from 'react-native-maps';
import BotDetailsMap from '../map/BotDetailsMap';
import {Actions} from 'react-native-router-flux';

type Props = {
botId: string,
flashPopover: Function,
scale: number,
};

type State = {
Expand Down Expand Up @@ -47,7 +48,6 @@ class BotDetailsHeader extends React.Component {
isVisible: false,
fadeAnim: new Animated.Value(0),
buttonRect: {},
fullMap: false,
};
}

Expand Down Expand Up @@ -108,70 +108,49 @@ class BotDetailsHeader extends React.Component {
const isOwn = !owner || owner.isOwn;
return (
<View style={{flex: 1}}>
<View style={{height: width, backgroundColor: 'white'}}>
<Map
location={bot.location}
showOnlyBot
scrollEnabled={this.state.fullMap}
rotateEnabled={this.state.fullMap}
pitchEnabled={this.state.fullMap}
marker={this.state.fullMap ? null :
<TouchableWithoutFeedback onPress={() => this.setState({fullMap: true})}>
<View style={{
height: width,
width,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'transparent',
}}>
<TouchableWithoutFeedback onPress={() => alert('!')}>
<View style={{height: 70, width: 70, backgroundColor: 'red'}}/>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
}
<View style={{height: this.props.scale === 0 ? height - (80 * k) : width, backgroundColor: 'white'}}>
<BotDetailsMap
bot={bot}
onMapPress={() => Actions.refresh({scale: 0})}
onImagePress={() => Actions.refresh({scale: this.props.scale === 1 ? 0.5 : this.props.scale + 0.5})}
scale={this.props.scale}
/>
{/*<TouchableWithoutFeedback onPress={this.handleImagePress}>*/}
{/*{bot.image && bot.image.source ? (*/}
{/*<Image style={{height: width, width}} resizeMode='contain' source={bot.image.source} />*/}
{/*) : (*/}
{/*<Image style={{height: width, width}} source={defaultCover[bot.coverColor % 4]} resizeMode='contain' />*/}
{/*)}*/}
{/*</TouchableWithoutFeedback>*/}
<Animated.View pointerEvents='none' style={[{opacity: this.state.fadeAnim}, styles.botAddedContainer]}>
<Image source={require('../../../images/iconBotAdded.png')} />
</Animated.View>
</View>
<BotButtons isOwn={isOwn} bot={bot} subscribe={this.subscribe} unsubscribe={this.unsubscribe} isSubscribed={bot.isSubscribed} afterCopy={this.showPopover} />
<UserInfoRow flashPopover={this.props.flashPopover} bot={bot} owner={owner} ref={r => (this.userInfo = r)} />
{!!bot.description && (
<View style={styles.descriptionContainer}>
<RText numberOfLines={0} size={16} weight='Light' color={locationStore.isDay ? colors.DARK_PURPLE : colors.WHITE}>
{bot.description}
{this.props.scale > 0 && <View>
<BotButtons isOwn={isOwn} bot={bot} subscribe={this.subscribe} unsubscribe={this.unsubscribe} isSubscribed={bot.isSubscribed} afterCopy={this.showPopover} />
<UserInfoRow flashPopover={this.props.flashPopover} bot={bot} owner={owner} ref={r => (this.userInfo = r)} />
{!!bot.description && (
<View style={styles.descriptionContainer}>
<RText numberOfLines={0} size={16} weight='Light' color={locationStore.isDay ? colors.DARK_PURPLE : colors.WHITE}>
{bot.description}
</RText>
</View>
)}
<View style={{height: 8.5, width}} />
<View style={{height: 45, width, flexDirection: 'row', alignItems: 'center', backgroundColor: 'white'}}>
<Image style={{marginLeft: 14, width: 14, height: 14}} source={require('../../../images/postsIcon.png')} />
<RText size={15} color={colors.DARK_PURPLE} style={{marginLeft: 7, letterSpacing: 0.3}}>
Posts
</RText>

<RText size={12} color={colors.DARK_GREY} style={{marginLeft: 7}}>
{bot.totalItems}
</RText>
</View>
)}
<View style={{height: 8.5, width}} />
<View style={{height: 45, width, flexDirection: 'row', alignItems: 'center', backgroundColor: 'white'}}>
<Image style={{marginLeft: 14, width: 14, height: 14}} source={require('../../../images/postsIcon.png')} />
<RText size={15} color={colors.DARK_PURPLE} style={{marginLeft: 7, letterSpacing: 0.3}}>
Posts
</RText>

<RText size={12} color={colors.DARK_GREY} style={{marginLeft: 7}}>
{bot.totalItems}
</RText>
</View>
<View style={{height: 1, width}} />
<Popover
isVisible={this.state.isVisible}
fromRect={this.state.buttonRect}
contentStyle={{backgroundColor: colors.DARK_PURPLE}}
placement='bottom'
// onClose={this.closePopover}
>
<Text style={styles.popoverText}>Address copied to clipboard</Text>
</Popover>
<View style={{height: 1, width}} />
<Popover
isVisible={this.state.isVisible}
fromRect={this.state.buttonRect}
contentStyle={{backgroundColor: colors.DARK_PURPLE}}
placement='bottom'
// onClose={this.closePopover}
>
<Text style={styles.popoverText}>Address copied to clipboard</Text>
</Popover>
</View>}
</View>
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/BotDetails/UserInfoRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ class UserInfoRow extends React.Component {
{locationStore.location &&
bot.location && (
<View>
<TouchableOpacity onLongPress={this.showPopover} ref={r => (this.button = r)} onPress={() => Actions.botMap({item: bot.id})} style={styles.botLocationButton}>
<TouchableOpacity onLongPress={this.showPopover} ref={r => (this.button = r)} onPress={() => Actions.refresh({scale: 0})} style={styles.botLocationButton}>
<View style={{paddingRight: 2 * k, paddingLeft: 5 * k}}>
<Image style={{width: 11 * k, height: 14 * k}} source={require('../../../images/iconBotLocation2.png')} />
</View>
Expand Down
7 changes: 3 additions & 4 deletions src/components/BotDetails/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ class BotDetails extends BotNavBarMixin(React.Component) {
};
}

_headerComponent = () => <BotDetailsHeader botId={this.bot && this.bot.id} flashPopover={this.flashPopover} />;
_headerComponent = () => <BotDetailsHeader botId={this.bot && this.bot.id} scale={this.props.scale} flashPopover={this.flashPopover} {...this.props} />;

_footerComponent = () =>
(this.bot.posts.length > 0 ? <ListFooter footerImage={require('../../../images/graphicEndPosts.png')} finished={this.bot.posts.length === this.bot.totalItems} /> : null);
Expand Down Expand Up @@ -75,7 +75,7 @@ class BotDetails extends BotNavBarMixin(React.Component) {
);
};

getData = () => (this.bot ? this.bot.posts.filter(post => post.content || (post.image && post.image.loaded)) : []);
getData = () => (this.bot && this.props.scale > 0 ? this.bot.posts.filter(post => post.content || (post.image && post.image.loaded)) : []);

scrollToEnd = () => {
this.setState({numToRender: this.getData().length});
Expand All @@ -93,7 +93,6 @@ class BotDetails extends BotNavBarMixin(React.Component) {
return (
<View style={styles.container}>
<FlatList
style={{marginBottom: 50 * k}}
data={this.getData()}
ref={r => (this.list = r)}
contentContainerStyle={{flexGrow: 1, paddingBottom: this.post ? this.post.imgContainerHeight : 0}}
Expand All @@ -116,7 +115,7 @@ class BotDetails extends BotNavBarMixin(React.Component) {
// };
// }}
/>
<AddBotPost bot={bot} ref={a => (this.post = a)} scrollToEnd={this.scrollToEnd} />
{this.props.scale > 0 && <AddBotPost bot={bot} ref={a => (this.post = a)} scrollToEnd={this.scrollToEnd} /> }
</View>
);
}
Expand Down
83 changes: 0 additions & 83 deletions src/components/BotMap.js
View file

This file was deleted.

22 changes: 11 additions & 11 deletions src/components/BotAddress.js → src/components/map/BotAddress.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,19 @@ import React from 'react';
import {View, Image, TextInput, ListView, TouchableOpacity, Text, StyleSheet} from 'react-native';

import Map from './Map';
import location, {METRIC, IMPERIAL} from '../store/locationStore';
import {width, k} from './Global';
import location, {METRIC, IMPERIAL} from '../../store/locationStore';
import {width, k} from '../Global';
import {observer} from 'mobx-react/native';
import {observable, autorun, when} from 'mobx';
import NativeEnv from 'react-native-native-env';
import Separator from './Separator';
import Separator from '../Separator';
// import {Actions} from 'react-native-router-flux';
import bot from '../store/botStore';
import Address from '../model/Address';
import Button from './Button';
import geocoding from '../store/geocodingStore';
import {colors} from '../constants';
import * as log from '../utils/log';
import bot from '../../store/botStore';
import Address from '../../model/Address';
import Button from '../Button';
import geocoding from '../../store/geocodingStore';
import {colors} from '../../constants/index';
import * as log from '../../utils/log';

const SYSTEM = NativeEnv.get('NSLocaleUsesMetricSystem') ? METRIC : IMPERIAL;
location.setMetricSystem(SYSTEM);
Expand Down Expand Up @@ -126,7 +126,7 @@ class BotAddress extends React.Component {
onPress={({nativeEvent}) => this.redirectToLocation(nativeEvent.coordinate)}
/>}
<View style={styles.imageContainer}>
<Image source={require('../../images/iconBotLocation.png')} />
<Image source={require('../../../images/iconBotLocation.png')} />
<TextInput
style={styles.textInput}
ref='input'
Expand Down Expand Up @@ -164,7 +164,7 @@ class BotAddress extends React.Component {
backgroundColor: 'rgba(255,255,255,0.9)',
}}
>
<Image style={{width: 14}} source={require('../../images/iconBotLocation.png')} />
<Image style={{width: 14}} source={require('../../../images/iconBotLocation.png')} />
<Text
style={{
flex: 1,
Expand Down
Loading

0 comments on commit 485fc20

Please sign in to comment.