Permalink
Browse files

Use a regular timer and implement retry on save.

  • Loading branch information...
dblock committed Jul 28, 2018
1 parent 2a5212f commit 0f1df4c1c8036934874973480d7bf5ac37d86aa2
Showing with 97 additions and 12,443 deletions.
  1. +95 −29 app/screens/Record.js
  2. +0 −12,399 package-lock.json
  3. +0 −2 package.json
  4. +2 −13 yarn.lock
@@ -1,10 +1,8 @@
import React from 'react';
import { StyleSheet, View, Text, SafeAreaView, Button, ScrollView } from 'react-native';
import { Alert, StyleSheet, View, Text, SafeAreaView, ScrollView } from 'react-native';

import HideableView from 'react-native-hideable-view';
import Icon from 'react-native-vector-icons/Ionicons';

import TimerMachine from 'react-timer-machine';
import moment from "moment";
import momentDurationFormatSetup from "moment-duration-format";
momentDurationFormatSetup(moment);
@@ -13,12 +11,27 @@ import { CreateMeetingMutation } from '../mutations';
import localStorage from 'react-native-sync-localstorage';

import { withMappedNavigationProps } from 'react-navigation-props-mapper';
import { RetryOnError } from '../components';

@withMappedNavigationProps()
export default class Record extends React.Component {
state = {
isMeetingStarted: false,
meetingStartedAt: null
isMeetingRecording: false,
meetingStartedAt: null,
meetingFinishedAt: null,
error: null,
timer: null
}

static navigationOptions = {
headerLeft: null
}

constructor(props) {
super(props);
this._tick = this._tick.bind(this);
this._retrySave = this._retrySave.bind(this);
}

componentWillMount() {
@@ -29,24 +42,70 @@ export default class Record extends React.Component {
})
}

_cancelWithPrompt() {
if (this.state.isMeetingStarted) {
Alert.alert(
'Cancel Meeting',
'Are you sure?',
[
{ text: 'No', style: 'cancel' },
{ text: 'Yes', onPress: () => this._cancel() },
],
{ cancelable: true }
)
} else {
this._cancel();
}
}

_clearTimer() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
}

_cancel() {
this._clearTimer();
this.props.navigation.goBack();
}

_start() {
this.setState({ isMeetingStarted: true, meetingStartedAt: moment() })
this.setState({ isMeetingStarted: true, meetingStartedAt: moment() }, () => {
this.timer = setInterval(this._tick, 1000);
})
}

_stop() {
this.setState({ isMeetingStarted: false, meetingStartedAt: null })
this._clearTimer();
this.setState({ isMeetingRecording: true, isMeetingStarted: false, meetingFinishedAt: moment(), error: null }, () => {
this._save()
})
}

_tick() {
this.setState({ elapsedTime: moment().diff(this.state.meetingStartedAt) })
}

_retrySave() {
this.setState({ error: null }, () => {
this._save();
})
}

_save() {
const environment = this.props.relay.environment;
CreateMeetingMutation.commit(this.state.user.id, {
environment,
input: {
title: 'Untitled Meeting',
started: this.state.meetingStartedAt.toDate(),
finished: moment().toDate()
finished: this.state.meetingFinishedAt.toDate()
}
}).then(response => {
this.props.navigation.navigate('Main')
}).catch(error => {
alert(error.message);
this.setState({ error: error.message })
});
}

@@ -58,37 +117,42 @@ export default class Record extends React.Component {
}
}

_timerText() {
if (this.state.error) {
return <RetryOnError message={this.state.error} retry={this._retrySave} />
} else if (this.state.isMeetingRecording) {
return <Text style={styles.timerText}>Saving ...</Text>
} else if (this.state.isMeetingStarted) {
return(
<Text style={styles.timerText}>
{ moment.duration(this.state.elapsedTime, "milliseconds").format("h [hours], m [minutes], s [seconds]") }
</Text>
)
} else {
return <Text style={styles.timerText}>GPS location coming soon.</Text>
}
}

render() {
return (
<SafeAreaView style={styles.container}>
<ScrollView contentContainerStyle={styles.infoContainer}>
<HideableView visible={!this.state.isMeetingStarted}>
<Text>GPS location coming soon.</Text>
</HideableView>
<HideableView visible={this.state.isMeetingStarted} style={styles.timer}>
<Text style={styles.timerText}>
<TimerMachine
timeStart={1000}
started={this.state.isMeetingStarted}
countdown={false}
interval={1000}
formatTimer={(time, ms) =>
moment.duration(moment().diff(this.state.meetingStartedAt), "milliseconds").format("h [hours], m [minutes], s [seconds]")
}
>
</TimerMachine>
</Text>
</HideableView>
{ this._timerText() }
</ScrollView>
<View style={styles.actions}>
<Icon.Button
name={ this.state.isMeetingStarted ? 'ios-radio-button-off' : 'ios-radio-button-on' }
name={ this.state.isMeetingStarted || this.state.error ? 'ios-radio-button-off' : 'ios-radio-button-on' }
size={64}
padding={0}
paddingLeft={16}
color='red'
backgroundColor='transparent'
onPress={() => this._toggle()} />
<Text
style={styles.link}
onPress={() => this._cancelWithPrompt()}>
Cancel
</Text>
</View>
</SafeAreaView>
);
@@ -104,12 +168,14 @@ const styles = StyleSheet.create({
justifyContent: 'center',
alignItems: 'center'
},
timer: {
alignItems: 'center'
},
timerText: {
fontSize: 16
},
link: {
padding: 10,
fontWeight: '500',
textDecorationLine: 'underline'
},
actions: {
alignItems: 'center',
borderTopWidth: 1,
Oops, something went wrong.

0 comments on commit 0f1df4c

Please sign in to comment.