Skip to content

Commit

Permalink
Merge pull request #55 from skiser/Chase
Browse files Browse the repository at this point in the history 
bottom bar
  • Loading branch information
@ChaseTeichmann
ChaseTeichmann committed Oct 16, 2019
2 parents b9dc86c + 1143cab commit 5ede008
Show file tree
Hide file tree
Showing 2 changed files with 145 additions and 107 deletions.
59 changes: 59 additions & 0 deletions Routinely/app/components/calendar_components/BottomBar.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import React, {Component} from 'react';
import {
AppRegistry,
View,
StyleSheet,
TouchableHighlight,
Image,
} from 'react-native';

export default class BottomBar extends Component {
render() {
return (
<View style={styles.container}>
<View style={{flexDirection: 'row'}}>
<TouchableHighlight
onPress={() => this.props.navigation.navigate('Calendar')}>
<Image
style={styles.contain}
source={require('../img/calendar.png')}
/>
</TouchableHighlight>
<TouchableHighlight
onPress={() => this.props.navigation.navigate('Alarm')}>
<Image
style={styles.contain}
source={require('../img/alarm.png')}
/>
</TouchableHighlight>
<TouchableHighlight
onPress={() => {
this.signOut;
}}>
<Image
style={styles.contain}
source={require('../img/logout.png')}
/>
</TouchableHighlight>
<TouchableHighlight
onPress={() => this.props.navigation.navigate('Event')}>
<Image
style={styles.contain}
source={require('../img/plus.png')}
/>
</TouchableHighlight>
</View>
</View>
);
}
}
AppRegistry.registerComponent('BottomBar', () => BottomBar);

const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'space-between',
padding: 10,
backgroundColor: 'blue',
},
});
193 changes: 86 additions & 107 deletions Routinely/app/screens/calendar.js
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,40 @@
import React, {Component} from 'react';
import {Platform,
import {
Alert,
Button,
Image,
Platform,
StyleSheet,
View,
Text,
TouchableOpacity,
Button,
TouchableHighlight,
Image,
TouchableOpacity,
View,
} from 'react-native';
import {
AgendaList,
CalendarProvider,
ExpandableCalendar,
AgendaList,
} from 'react-native-calendars';
import _ from 'lodash';
import moment from 'moment';
import * as AddCalendarEvent from 'react-native-add-calendar-event';
import firebase from '@react-native-firebase/app';
import firestore from '@react-native-firebase/firestore';
import '@react-native-firebase/auth';
import BottomBar from '../components/calendar_components/BottomBar';

const today = new Date().toISOString().split('T')[0];
const fastDate = getPastDate(3);
const futureDates = getFutureDates(9);
const dates = [fastDate, today].concat(futureDates);

var events = getallEvents();

const events = getallEvents();
/*
var events = [
{title: dates[0], data: [{hour: '12am', duration: '1h', title: 'Ashtanga Yoga'}]},
{title: dates[1], data: [{hour: '4pm', duration: '1h', title: 'Pilates ABC'}]},
];


*/
const utcDateToString = (momentInUTC: moment): string => {
let s = moment.utc(momentInUTC).format('YYYY-MM-DDTHH:mm:ss.SSS[Z]');
// console.warn(s);
return s;
return moment.utc(momentInUTC).format('YYYY-MM-DDTHH:mm:ss.SSS[Z]');
};

function getallEvents(){
Expand Down Expand Up @@ -69,16 +66,15 @@ function getPastDate(days) {
return new Date(Date.now() - 864e5 * days).toISOString().split('T')[0];
}


class CalendarScreen extends Component {
/* constructor(props) {
super(props);
this.state = {
events: [],
};
events = getallEvents();
} */

/*
constructor(props) {
super(props);
this.state = {
events: [],
};
events = getallEvents();
} */
onDateChanged = (/* date, updateSource */) => {
// console.warn('ExpandableCalendarScreen onDateChanged: ', date, updateSource);
// fetch and set data for date + week ahead
Expand All @@ -96,32 +92,49 @@ class CalendarScreen extends Component {
Alert.alert(id);
}

getallEvents(){
const eventsRef = firestore().collection('users').doc('skiser').collection('event');
const allEvents = eventsRef.get()
getallEvents() {
const eventsRef = firestore()
.collection('users')
.doc('skiser')
.collection('event');
const allEvents = eventsRef
.get()
.then(snapshot => {
snapshot.forEach(doc => {
events.push(doc);
console.log(doc.id, '=>', doc.data());
events.push(doc);
console.log(doc.id, '=>', doc.data());
});
})
.catch(err => {
console.log('Error getting docs', err);
});
}

componentDidMount() {
firestore()
.collection('users')
.doc('skiser')
.collection('event')
.get()
.then()
.then(querySnapshot => {
const data = querySnapshot.docs.map(doc => doc.data());
console.log(data); // array of objects
this.setState({event: data});
});
}
renderEmptyItem() {
return (
<View style={styles.emptyItem}>
<Text style={styles.emptyItemText}>No Events Planned</Text>
</View>
);
}

renderItem = (events) => {
renderItem = events => {
if (_.isEmpty(this.events)) {
return this.renderEmptyItem();
}

return (
<TouchableOpacity
onPress={() => this.itemPressed(item.title)}
Expand All @@ -136,18 +149,18 @@ class CalendarScreen extends Component {
</View>
</TouchableOpacity>
);
}
};

getMarkedDates = () => {
const marked = {};
for (var i = 0; i < events.length; i++){
for (var i = 0; i < events.length; i++) {
// only mark dates with data
if (item.data && item.data.length > 0 && !_.isEmpty(item.data[0])) {
marked[item.title] = {marked: true};
}
};
}
return marked;
}
};

getTheme = () => {
const themeColor = '#0059ff';
Expand Down Expand Up @@ -193,79 +206,45 @@ class CalendarScreen extends Component {
};

render() {
const {event} = this.state.event;
return (
<CalendarProvider
date={today}
onDateChanged={this.onDateChanged}
onMonthChange={this.onMonthChange}
theme={{todayButtonTextColor: '#0059ff'}}
showTodayButton
disabledOpacity={0.6}
// todayBottomMargin={16}
>
<TouchableHighlight
onPress={() => this.props.navigation.navigate('Event')}>
<Image
style={styles.plus}
source={require('../components/img/plus.png')}
/>
</TouchableHighlight>

<ExpandableCalendar
// horizontal={false}
// hideArrows
// disablePan
// hideKnob
// initialPosition={ExpandableCalendar.positions.OPEN}
firstDay={1}
//markedDates={this.getMarkedDates()} // {'2019-06-01': {marked: true}, '2019-06-02': {marked: true}, '2019-06-03': {marked: true}};
theme={this.getTheme()}
leftArrowImageSource={require('../components/img/previous.png')}
rightArrowImageSource={require('../components/img/next.png')}
// calendarStyle={styles.calendar}
// headerStyle={styles.calendar} // for horizontal only
/>
<AgendaList
sections={events}
extraData={events.notes}
renderItem={this.renderItem}
// sectionStyle={styles.section}
/>
<View style={styles.container}>
<View style={{flexDirection: 'row'}}>
<TouchableHighlight
onPress={() => this.props.navigation.navigate('Calendar')}>
<Image
style={styles.contain}
source={require('../components/img/calendar.png')}
/>
</TouchableHighlight>
<TouchableHighlight
onPress={() => this.props.navigation.navigate('Alarm')}>
<Image
style={styles.contain}
source={require('../components/img/alarm.png')}
/>
</TouchableHighlight>
<TouchableHighlight
onPress={() => {
this.signOut;
}}>
<Image
style={styles.contain}
source={require('../components/img/logout.png')}
/>
</TouchableHighlight>
<TouchableHighlight
onPress={() => this.props.navigation.navigate('Event')}>
<Image
style={styles.contain}
source={require('../components/img/plus.png')}
/>
</TouchableHighlight>
</View>
</View>
</CalendarProvider>
<View>
<div>
event.map(event => (<h5>event.title</h5>
);})
</div>
<CalendarProvider
date={today}
onDateChanged={this.onDateChanged}
onMonthChange={this.onMonthChange}
theme={{todayButtonTextColor: '#0059ff'}}
showTodayButton
disabledOpacity={0.6}
// todayBottomMargin={16}
>
<ExpandableCalendar
// horizontal={false}
// hideArrows
// disablePan
// hideKnob
// initialPosition={ExpandableCalendar.positions.OPEN}
firstDay={1}
//markedDates={this.getMarkedDates()} // {'2019-06-01': {marked: true}, '2019-06-02': {marked: true}, '2019-06-03': {marked: true}};
theme={this.getTheme()}
leftArrowImageSource={require('../components/img/previous.png')}
rightArrowImageSource={require('../components/img/next.png')}
// calendarStyle={styles.calendar}
// headerStyle={styles.calendar} // for horizontal only
/>
<AgendaList
sections={events}
extraData={events.notes}
renderItem={this.renderItem}
// sectionStyle={styles.section}
/>
<BottomBar />
</CalendarProvider>
</View>
);
}
}
Expand Down

0 comments on commit 5ede008

Please sign in to comment.