SRmgYdgg

1import React, { useState, Component} from 'react';
2import {
3    Button,
4    StatusBar,
5    StyleSheet,
6    Text,
7    View,
8    Dimensions,
9    Alert
10} from 'react-native';
11
12import { NavigationContainer } from '@react-navigation/native';
13import { createStackNavigator } from '@react-navigation/stack';
14import { createDrawerNavigator } from '@react-navigation/drawer';
15
16import Tabletop from 'tabletop'; // Tabletop is used for parsing the Google Sheets API response
17
18class GoogleData {
19    constructor(googleData) {
20        this.googleData = googleData
21    }
22
23    get currentData() {
24        return this.googleData;
25    }
26
27    set currentData(data) {
28        this.googleData = data;
29    }
30}
31
32// create a cool titlebar
33function HeaderBar(props) {
34    /*
35        desc: Creates a nice header bar at the top
36        props: title
37    */
38
39    return (
40        <View style={styles.header}>
41            <Text style={styles.title}>{props.title}</Text>
42        </View>
43    )
44}
45
46function ScheduleScreen({navigation}) {
47    return (
48        <View style={styles.container}>
49            <StatusBar style={styles.header} />
50            <HeaderBar title="Schedule" />
51            <Text style={styles.text}>This is the schedule screen.</Text>
52        </View>
53    )
54}
55
56function PlannerScreen({navigation}) {
57    return (
58        <View style={styles.container}>
59            <StatusBar backgroundColor={styles.header.backgroundColor}/>
60            <HeaderBar title="My Planner" />
61            <Text style = {styles.text}>This is the planner screen.</Text>
62        </View>
63    );
64}
65
66function ResourcesScreen({navigation}) {
67    let class_instance = new GoogleData(null);
68
69    let getDataFromAPI = new Promise((resolve, reject) => {
70        Tabletop.init({
71            key: '1dPcGKs0K6RqiD8B_ZPfihHG2Rrr2GtTAepW-m2c23NM',
72            callback: googleData => {
73                if (googleData.length > 0) {
74                    class_instance.currentData = googleData;
75                    resolve(googleData);
76                } else {
77                    reject("aaaa");
78                }
79            },
80
81            simpleSheet: true
82        })
83    })
84
85    getDataFromAPI.then((data) => {
86        Alert.alert(String(data));
87    }).catch((err) => {
88        Alert.alert(err);
89    })
90
91    return (
92        <View style={styles.container}>
93            <StatusBar style={styles.header} />
94            <HeaderBar title="Resources" />
95            <Text style={styles.text}>{String(class_instance.currentData)}</Text>
96        </View>
97    )
98}
99
100const Drawer = createDrawerNavigator();
101
102// had to change this from a function
103export default class App extends Component {
104    render () {
105        return (
106            <NavigationContainer>
107                <Drawer.Navigator initialRouteName="Planner">
108                    <Drawer.Screen
109                        name="Planner"
110                        component={PlannerScreen}
111                        options = {{
112                            title: 'Planner',
113                            headerStyle: {
114                                backgroundColor: styles.header.backgroundColor,
115                                color: styles.text.color
116                            },
117                            headerTintColor: 'white',
118                        }}
119                    />
120
121                    <Drawer.Screen
122                        name="Schedule"
123                        component={ScheduleScreen}
124                        options = {{
125                            title: 'Schedule',
126                            headerStyle: {
127                                backgroundColor: styles.header.backgroundColor,
128                                color: styles.text.color
129                            },
130                            headerTintColor: 'white',
131                        }}
132                    />
133
134                    <Drawer.Screen
135                        name="Resources"
136                        component={ResourcesScreen}
137                        options = {{
138                            title: 'Resources',
139                            headerStyle: {
140                                backgroundColor: styles.header.backgroundColor,
141                                color: styles.text.color
142                            },
143                            headerTintColor: 'white',
144                        }}
145                    />
146                </Drawer.Navigator>
147            </NavigationContainer>
148        );
149    }
150}
151
152const styles = StyleSheet.create({
153    center: {
154        alignItems: 'center'
155    },
156    text: {
157        color: 'white'
158    },
159    title: {
160        color: 'white',
161        fontSize: 30,
162        paddingTop: 30,
163        paddingLeft: 20,
164        paddingBottom: 30
165    },
166    header: {
167        backgroundColor: '#191919',
168        color: 'white',
169        flex: 1,
170        position: 'absolute',
171        top: 0,
172        width: Dimensions.get('window').width
173    },
174    container: {
175        flex: 1,
176        backgroundColor: '#212121',
177        alignItems: 'center',
178        justifyContent: 'center',
179    },
180});