diff --git a/client/ios/Podfile.lock b/client/ios/Podfile.lock index 6be81c2..3cccd99 100644 --- a/client/ios/Podfile.lock +++ b/client/ios/Podfile.lock @@ -262,7 +262,7 @@ DEPENDENCIES: - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) SPEC REPOS: - https://github.com/cocoapods/specs.git: + trunk: - boost-for-react-native EXTERNAL SOURCES: @@ -359,4 +359,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: bc5504db07d1d3f06f9f466f10a44435981b361f -COCOAPODS: 1.7.2 +COCOAPODS: 1.8.4 diff --git a/client/js/assets/miscicons/X@3x.png b/client/js/assets/miscicons/xicon.png similarity index 100% rename from client/js/assets/miscicons/X@3x.png rename to client/js/assets/miscicons/xicon.png diff --git a/client/js/components/AccountLoginForm/AccountLoginForm.js b/client/js/components/AccountLoginForm/AccountLoginForm.js index 53d6d9f..11d05da 100644 --- a/client/js/components/AccountLoginForm/AccountLoginForm.js +++ b/client/js/components/AccountLoginForm/AccountLoginForm.js @@ -17,6 +17,7 @@ import gql from 'graphql-tag'; import {withNavigation} from 'react-navigation'; import {createViewer} from '../../config/models'; import InactiveButton from '../../assets/buttons/Inactivespacebutton.png'; +import activeButton from '../../assets/buttons/activespacebutton.png'; import {APOLLO_AUTH_ADDRESS} from '../../config/constant'; const LOGIN_MUTATION = gql` @@ -127,7 +128,7 @@ class AccountLoginForm extends Component { onPress={handleSubmit} style={styles.button}> Sign in diff --git a/client/js/components/AccountLoginForm/styles.js b/client/js/components/AccountLoginForm/styles.js index 001146d..66eac8b 100644 --- a/client/js/components/AccountLoginForm/styles.js +++ b/client/js/components/AccountLoginForm/styles.js @@ -48,6 +48,7 @@ const styles = StyleSheet.create({ fontSize: 20, fontWeight: 'bold', textAlign: 'center', + color: 'white', }, buttonHolder: { flex: 1, @@ -67,6 +68,7 @@ const styles = StyleSheet.create({ IconImage: { width: 20, height: 20, + resizeMode: 'contain', }, errorText: { diff --git a/client/js/components/AccountSignupForm/AccountSignupForm.js b/client/js/components/AccountSignupForm/AccountSignupForm.js index cb5fe1f..06cc256 100644 --- a/client/js/components/AccountSignupForm/AccountSignupForm.js +++ b/client/js/components/AccountSignupForm/AccountSignupForm.js @@ -19,6 +19,7 @@ import gql from 'graphql-tag'; import {withNavigation} from 'react-navigation'; import {createViewer} from '../../config/models'; import InactiveButton from '../../assets/buttons/Inactivespacebutton.png'; +import activeButton from '../../assets/buttons/activespacebutton.png'; import {APOLLO_AUTH_ADDRESS} from '../../config/constant'; const SIGNUP_MUTATION = gql` @@ -207,7 +208,7 @@ class AccountSignupForm extends Component { onPress={handleSubmit} style={styles.button}> Sign Up diff --git a/client/js/components/ListEvent/ListEvent.js b/client/js/components/ListEvent/ListEvent.js new file mode 100644 index 0000000..fda30c1 --- /dev/null +++ b/client/js/components/ListEvent/ListEvent.js @@ -0,0 +1,40 @@ +import React from 'react'; +import {View, TouchableOpacity, Image, Text} from 'react-native'; +//import AddToCalendar from '../CalendarButton'; +import styles from './styles'; +import moment from 'moment'; +import {withNavigation} from 'react-navigation'; +const ListEvent = ({event, navigation}) => { + const startDay = moment(event.startDate).format('MMM Do, YYYY'); + const endDay = moment(event.endDate).format('MMM Do, YYYY'); + const startTime = moment(event.startDate).format('h:mma'); + const endTime = moment(event.endDate).format('h:mma'); + + return ( + navigation.navigate('Event', {event: event})}> + + + {event.title} + {event.location} + + {startDay === endDay ? ( + <> + + {startTime} to {endTime} + + {startDay} + + ) : ( + + {startTime}, {startDay} to {endTime} {endDay} + + )} + {/* */} + + + ); +}; + +export default withNavigation(ListEvent); diff --git a/client/js/components/ListEvent/index.js b/client/js/components/ListEvent/index.js new file mode 100644 index 0000000..abbfe99 --- /dev/null +++ b/client/js/components/ListEvent/index.js @@ -0,0 +1,2 @@ +import ListEvent from './ListEvent'; +export default ListEvent; diff --git a/client/js/components/ListEvent/styles.js b/client/js/components/ListEvent/styles.js new file mode 100644 index 0000000..6ec97a2 --- /dev/null +++ b/client/js/components/ListEvent/styles.js @@ -0,0 +1,46 @@ +import {StyleSheet} from 'react-native'; +import {THEME} from '../../config'; +const { + colors: {black}, + formatting: {baseSpacing, containerWidth}, + typography: {headerFont, subHeaderText, smallText}, +} = THEME; + +const styles = StyleSheet.create({ + container: { + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + width: containerWidth, + paddingVertical: baseSpacing, + }, + textContainer: { + flexShrink: 1, + }, + image: { + width: '45%', + height: 'auto', + marginRight: '10%', + }, + borderBottom: { + borderWidth: 1, + borderColor: black, + width: '100%', + }, + title: { + fontFamily: headerFont, + fontSize: subHeaderText, + width: '100%', + flexShrink: 1, + }, + location: { + fontFamily: headerFont, + fontSize: smallText, + }, + text: { + fontFamily: headerFont, + paddingVertical: baseSpacing / 4, + }, +}); + +export default styles; diff --git a/client/js/components/MainAddCalendarButton/MainAddCalendarButton.js b/client/js/components/MainAddCalendarButton/MainAddCalendarButton.js deleted file mode 100644 index 96bbbf6..0000000 --- a/client/js/components/MainAddCalendarButton/MainAddCalendarButton.js +++ /dev/null @@ -1,2 +0,0 @@ -import React, {Component} from 'react'; -import styles from './styles'; diff --git a/client/js/components/MainAddCalendarButton/index.js b/client/js/components/MainAddCalendarButton/index.js deleted file mode 100644 index f0f3d78..0000000 --- a/client/js/components/MainAddCalendarButton/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import MainAddCalendarButton from './MainAddCalendarButton'; - -export default MainAddCalendarButton; diff --git a/client/js/components/MainAddCalendarButton/styles.js b/client/js/components/MainAddCalendarButton/styles.js deleted file mode 100644 index 24ee024..0000000 --- a/client/js/components/MainAddCalendarButton/styles.js +++ /dev/null @@ -1,5 +0,0 @@ -import {StyleSheet} from 'react-native'; - -const styles = StyleSheet.create({}); - -export default styles; diff --git a/client/js/components/MainSigninButton/styles.js b/client/js/components/MainSigninButton/styles.js index 2fe69d2..27f0a0a 100644 --- a/client/js/components/MainSigninButton/styles.js +++ b/client/js/components/MainSigninButton/styles.js @@ -38,7 +38,7 @@ const styles = StyleSheet.create({ buttonNoBackground: { alignItems: 'center', justifyContent: 'center', - marginTop: 25, + marginTop: 2, borderRadius: 40, borderWidth: 1, height: 45, diff --git a/client/js/components/MainSubscribeButton/MainSubscribeButton.js b/client/js/components/MainSubscribeButton/MainSubscribeButton.js index d177e48..72fccc0 100644 --- a/client/js/components/MainSubscribeButton/MainSubscribeButton.js +++ b/client/js/components/MainSubscribeButton/MainSubscribeButton.js @@ -24,9 +24,7 @@ const CAMPAIGN_SUBSCRIBE = gql` } `; - const MainSubscribeButton = ({CampaignId, navigation, userId}) => { - return ( {updateUser => { diff --git a/client/js/config/constant.js b/client/js/config/constant.js index 01524a3..02bfde5 100644 --- a/client/js/config/constant.js +++ b/client/js/config/constant.js @@ -1 +1,3 @@ export const APOLLO_AUTH_ADDRESS = 'http://157.245.224.214:8000/'; +export const APOLLO_SERVER_ADDRESS = + 'https://us1.prisma.sh/public-flintwanderer-148/server/dev'; diff --git a/client/js/config/models.js b/client/js/config/models.js index 5b3bce4..deca331 100644 --- a/client/js/config/models.js +++ b/client/js/config/models.js @@ -1,4 +1,5 @@ import AsyncStorage from '@react-native-community/async-storage'; +import Onboarding from '../screens/Onboarding/Onboarding'; export const queryViewer = async () => { try { @@ -35,3 +36,22 @@ export const deleteViewer = async () => { return new Error(error); } }; + +export const queryOnBoarding = async () => { + try { + let value = await AsyncStorage.getItem('onBoardingComplete'); + return JSON.parse(value); + } catch (error) { + console.log(error); + return new error(error); + } +}; + +export const onBoardingSet = async foo => { + try { + await AsyncStorage.setItem('onBoardingComplete', JSON.stringify(foo)); + return foo; + } catch (error) { + return new Error(error); + } +}; diff --git a/client/js/navigation/RootStackNavigator.js b/client/js/navigation/RootStackNavigator.js index 0078a89..61894e5 100644 --- a/client/js/navigation/RootStackNavigator.js +++ b/client/js/navigation/RootStackNavigator.js @@ -1,13 +1,19 @@ import {createAppContainer, createSwitchNavigator} from 'react-navigation'; import DrawerNavigation from './DrawerNavigation'; import ConfirmationModal from '../screens/Confirmation'; +import CampaignModal from '../screens/CampaignModal'; import {createStackNavigator} from 'react-navigation-stack'; import LoginScreen from '../screens/Login'; import SignupScreen from '../screens/Signup'; import AuthLoadingScreen from '../screens/AuthLoadingScreen'; +import Onboarding from '../screens/Onboarding'; const AuthStack = createStackNavigator( { + Onboarding: { + screen: Onboarding, + }, + Login: { screen: LoginScreen, }, @@ -24,6 +30,7 @@ const AppStack = createStackNavigator( { Layout: DrawerNavigation, Confirmation: ConfirmationModal, + CampaignModal: CampaignModal, }, { headerMode: 'none', diff --git a/client/js/navigation/config.js b/client/js/navigation/config.js index a7cb65e..c8a8089 100644 --- a/client/js/navigation/config.js +++ b/client/js/navigation/config.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useEffect, useState} from 'react'; import { View, TouchableOpacity, @@ -7,8 +7,12 @@ import { ImageBackground, } from 'react-native'; import {Header} from 'react-navigation-stack'; + import styles from './styles'; +import {queryViewer} from '../config/models'; + + const AppHeader = props => ( ( ); const ProfileButton = ({navigation}) => { + const [user, setUser] = useState(null); + + useEffect(() => { + const getUesr = async () => { + const user = await queryViewer(); + setUser(await user); + }; + getUesr(); + }); + return ( navigation.navigate('EditProfile')}> - + + + + {user && ( + + {user.name.substring(0, 2)} + + )} + ); diff --git a/client/js/screens/AuthLoadingScreen/AuthLoadingScreenContainer.js b/client/js/screens/AuthLoadingScreen/AuthLoadingScreenContainer.js index 547be1e..4eb2d10 100644 --- a/client/js/screens/AuthLoadingScreen/AuthLoadingScreenContainer.js +++ b/client/js/screens/AuthLoadingScreen/AuthLoadingScreenContainer.js @@ -8,6 +8,8 @@ import { } from 'react-native'; import AsyncStorage from '@react-native-community/async-storage'; import Loader from '../../components/Loader'; +import Onboarding from '../Onboarding/Onboarding'; +import {queryOnBoarding} from '../../config/models'; export default class AuthLoadingScreenContainer extends React.Component { constructor() { @@ -17,8 +19,12 @@ export default class AuthLoadingScreenContainer extends React.Component { _bootstrapAsync = async () => { const userToken = await AsyncStorage.getItem('user'); - - this.props.navigation.navigate(userToken ? 'App' : 'Auth'); + let onBoarding = await queryOnBoarding(); + if (onBoarding === !null) { + this.props.navigation.navigate(userToken ? 'App' : 'Login'); + } else { + this.props.navigation.navigate('Onboarding'); + } }; render() { diff --git a/client/js/screens/Campaign/Campaign.js b/client/js/screens/Campaign/Campaign.js index ecf2e16..816dac1 100644 --- a/client/js/screens/Campaign/Campaign.js +++ b/client/js/screens/Campaign/Campaign.js @@ -8,15 +8,13 @@ import { ScrollView, } from 'react-native'; import {withNavigation} from 'react-navigation'; - import styles from './styles'; import MainSubscribeButton from '../../components/MainSubscribeButton'; import MainUnsubscribeButton from '../../components/MainUnsubscribeButton'; import MrMoneyImage from '../../assets/artwork/mrmoney.png'; +import ListEvent from '../../components/ListEvent'; const Campaign = ({navigation, user}) => { - console.log('asdfawf', user); - const isSubscribed = navigation.state.params.campaign.subscribers.find( subscriber => subscriber.id === user.id, ); @@ -51,12 +49,19 @@ const Campaign = ({navigation, user}) => { + {/* End of Campaign Info */} + {/* Start of Campaign Info */} {navigation.state.params.campaign.description} - + { + navigation.navigate('CampaignModal', { + campaignData: navigation.state.params, + }); + }}> More @@ -83,28 +88,7 @@ const Campaign = ({navigation, user}) => { ( - navigation.navigate('Event', {event: item})}> - - - - - - - - {item.title} - - - {item.location} - - - - - )} + renderItem={({item}) => } keyExtractor={(item, index) => 'index' + index.toString()} /> ) : ( diff --git a/client/js/screens/Campaign/styles.js b/client/js/screens/Campaign/styles.js index ea896e5..3fe0ed4 100644 --- a/client/js/screens/Campaign/styles.js +++ b/client/js/screens/Campaign/styles.js @@ -20,6 +20,8 @@ const styles = StyleSheet.create({ fontSize: hugeText, fontFamily: headerFont, marginBottom: 20, + paddingLeft: 10, + maxWidth: '80%', }, campaignSingle: { alignSelf: 'center', @@ -129,5 +131,38 @@ const styles = StyleSheet.create({ eventInfoBoxLocation: { fontSize: 14, }, + titleContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + alignContent: 'center', + }, + backButtonX: { + height: 25, + resizeMode: 'contain', + }, + pageContainer: { + padding: 20, + }, + campaignImage: { + height: '50%', + resizeMode: 'contain', + alignItems: 'center', + marginTop: 20, + marginBottom: 20, + }, + campaignDetailsCampaignModal: { + flex: 1, + flexDirection: 'row', + justifyContent: 'space-between', + paddingBottom: 10, + }, + speakerContainer: { + flex: 1, + paddingTop: 25, + }, + contentContainer: { + alignItems: 'center', + flexDirection: 'column', + }, }); export default styles; diff --git a/client/js/screens/CampaignModal/CampaignModal.js b/client/js/screens/CampaignModal/CampaignModal.js index 44a14f6..2faf7ff 100644 --- a/client/js/screens/CampaignModal/CampaignModal.js +++ b/client/js/screens/CampaignModal/CampaignModal.js @@ -1,8 +1,89 @@ import React from 'react'; -import {Text} from 'react-native'; +import {Text, View, ScrollView, Image, Linking} from 'react-native'; +import {withNavigation} from 'react-navigation'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import styles from '../Campaign/styles'; +import PropTypes from 'prop-types'; +import BackButton from '../../assets/miscicons/xicon.png'; +import MainSubscribeButton from '../../components/MainSubscribeButton'; +import MainUnsubscribeButton from '../../components/MainUnsubscribeButton'; -const CampaignModal = props => { - return Event More Screen; +const CampaignModal = ({navigation, campaignData, user}) => { + return ( + + + + + + {campaignData.campaignData.campaign.title} + + + { + navigation.goBack(); + }}> + + + + + + {/* Start of Main Subscribe button */} + + {campaignData.campaignData.campaign.events.length > 0 ? ( + + ) : ( + + )} + + {/* Start of Main Subscribe button */} + {/* Start of Campaign Info */} + + + Category + + {campaignData.campaignData.campaign.category} + + + + + + {campaignData.campaignData.campaign.subscribers.length} + + Subscribers + + + + {campaignData.campaignData.campaign.events.length} + + Events + + + + {/* End of Campaign Info */} + + {/* Campaign Image Begin */} + + + + + {campaignData.campaignData.campaign.description} + + + {/* Campaign Image end */} + + + ); }; -export default CampaignModal; +export default withNavigation(CampaignModal); diff --git a/client/js/screens/CampaignModal/CampaignModalContainer.js b/client/js/screens/CampaignModal/CampaignModalContainer.js index b20fc67..0d754e9 100644 --- a/client/js/screens/CampaignModal/CampaignModalContainer.js +++ b/client/js/screens/CampaignModal/CampaignModalContainer.js @@ -1,9 +1,34 @@ import React, {Component} from 'react'; +import CampaignModal from './CampaignModal'; +import {queryViewer} from '../../config/models'; -import EventMore from './EventMore'; +class CampaignModalContainer extends Component { + constructor(props) { + super(props); + this.state = { + user: null, + }; + } + + componentDidMount() { + this.getUser(); + } + + getUser = async () => { + const user = await queryViewer(); + this.setState({user}); + }; -export default class CampaignModalContainer extends Component { render() { - return ; + return ( + this.state.user && ( + + ) + ); } } + +export default CampaignModalContainer; diff --git a/client/js/screens/CampaignModal/styles.js b/client/js/screens/CampaignModal/styles.js deleted file mode 100644 index 376eefe..0000000 --- a/client/js/screens/CampaignModal/styles.js +++ /dev/null @@ -1,3 +0,0 @@ -import {StyleSheet} from 'react-native'; -const styles = StyleSheet.create({}); -export default styles; diff --git a/client/js/screens/Event/styles.js b/client/js/screens/Event/styles.js index 26ec897..9dd5730 100644 --- a/client/js/screens/Event/styles.js +++ b/client/js/screens/Event/styles.js @@ -3,14 +3,7 @@ import {THEME} from '../../config'; const { colors: {black}, formatting: {baseSpacing, centeredChildren, containerWidth}, - typography: { - baseSize, - headerFont, - hugeText, - contentText, - mainFont, - subHeaderText, - }, + typography: {baseSize, headerFont, hugeText, contentText}, } = THEME; const styles = StyleSheet.create({ @@ -44,8 +37,8 @@ const styles = StyleSheet.create({ padding: baseSpacing, }, image: { - height: '100%', - width: '50%', + minHeight: 180, + width: '45%', resizeMode: 'cover', }, inputContainer: { diff --git a/client/js/screens/Onboarding/Onboarding.js b/client/js/screens/Onboarding/Onboarding.js index aa3f487..03b48f1 100644 --- a/client/js/screens/Onboarding/Onboarding.js +++ b/client/js/screens/Onboarding/Onboarding.js @@ -1,10 +1,21 @@ import React, {Component} from 'react'; -import {View, Text, Image, Button} from 'react-native'; +import { + View, + Text, + Image, + Button, + TouchableOpacity, + ImageBackground, +} from 'react-native'; import AppIntroSlider from 'react-native-app-intro-slider'; import microphoneImageSource from '../../assets/artwork/miclightningv.png'; import fistImageSource from '../../assets/artwork/Revolution.png'; import heartImageSource from '../../assets/artwork/heartart.png'; import styles from './styles'; +import activeButton from '../../assets/buttons/activespacebutton.png'; +import {withNavigation} from 'react-navigation'; + +import {onBoardingSet} from '../../config/models'; const slides = [ { @@ -44,6 +55,10 @@ export default class Onboarding extends Component { }; } + componentDidMount() { + this.onBoardingSet; + } + _renderItem = ({item, dimensions}) => { return ( @@ -54,7 +69,7 @@ export default class Onboarding extends Component { ); }; - render() { + render(navigation) { return ( { - return Skip; + return ( + { + this.props.navigation.navigate('Login'); + }} + style={styles.button}> + Skip + + ); }} renderDoneButton={() => { - return