added senior page mock and apollo client

.expo/packager-info.json

@@ -1,8 +1,8 @@
 {
   "devToolsPort": 19002,
-  "expoServerPort": null,
-  "packagerPort": null,
-  "packagerPid": null,
+  "expoServerPort": 19000,
+  "packagerPort": 19001,
+  "packagerPid": 37016,
   "expoServerNgrokUrl": null,
   "packagerNgrokUrl": null,
   "ngrokPid": null,

App.tsx

@@ -1,20 +1,34 @@
 import React from 'react';
 import {NavigationContainer, StackActions} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
+import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'
 
 import Splash from './components/Splash';
 import StartingPage from './components/StartingPage';
 import SeniorSignup from './components/SeniorSignup';
+import SeniorDash from './components/SeniorDash';
+import JuniorSignup from './components/JuniorSignup';
+
+
+const client = new ApolloClient({
+  uri: 'https://localhost:3000/graphql',
+  cache: new InMemoryCache()
+})
+
 
 export default function App() {
   return (
-    <NavigationContainer>
-      <Stack.Navigator>
-        <Stack.Screen name="Splash" component={Splash} />
-        <Stack.Screen name="StartingPage" component={StartingPage} />
-        <Stack.Screen name="SeniorSignup" component={SeniorSignup} />
-      </Stack.Navigator>
-    </NavigationContainer>
+    <ApolloProvider client={client}>
+      <NavigationContainer>
+        <Stack.Navigator>
+          <Stack.Screen name="Splash" component={Splash} />
+          <Stack.Screen name="StartingPage" component={StartingPage} />
+          <Stack.Screen name="SeniorSignup" component={SeniorSignup} />
+          <Stack.Screen name="SeniorDash" component={SeniorDash} />
+          <Stack.Screen name="JuniorSignup" component={JuniorSignup} />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </ApolloProvider>
   );
 }
 const Stack = createStackNavigator();

components/Feed.tsx

@@ -0,0 +1,15 @@
+import React, { PureComponent } from 'react'
+import { Text, View } from 'react-native'
+import SeniorTicket from './SeniorTicket'
+
+export default class Feed extends PureComponent {
+  render() {
+    return (
+      <View>
+        <SeniorTicket/>
+        <SeniorTicket/>
+        <SeniorTicket/>
+      </View>
+    )
+  }
+}

components/JuniorSignup.tsx

@@ -0,0 +1,110 @@
+import React, { useState } from 'react'
+import { StyleSheet, Text, View, TouchableWithoutFeedback, TextInput, Keyboard, TouchableOpacity } from 'react-native'
+
+const JuniorSignup = ({navigation}) => {
+  const initialState = {
+    firstName: '',
+    lastName: '',
+    email: '',
+    phoneNumber: '',
+    zipCode: '',
+    password: '',
+  };
+
+  // state for the forms
+  const [form, setForm] = useState(initialState);
+  return (
+    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+      <View style={styles.container}>
+        <Text style={styles.labels}>First Name</Text>
+        <TextInput
+          style={styles.inputFields}
+          placeholder="First Name"
+          onChangeText={text => setForm({...form, firstName: text})}
+          value={form.firstName}
+        />
+        <Text style={styles.labels}>Last Name</Text>
+        <TextInput
+          style={styles.inputFields}
+          placeholder="Last Name"
+          onChangeText={text => setForm({...form, lastName: text})}
+          value={form.lastName}
+        />
+        <Text style={styles.labels}>Email</Text>
+        <TextInput
+          style={styles.inputFields}
+          placeholder="[email protected]"
+          onChangeText={text => setForm({...form, email: text})}
+          value={form.email}
+        />
+        <Text style={styles.labels}>Phone Number</Text>
+        <TextInput
+          style={styles.inputFields}
+          keyboardType={'phone-pad'}
+          placeholder="1234567890"
+          onChangeText={text => setForm({...form, phoneNumber: text})}
+          value={form.phoneNumber}
+        />
+        <Text style={styles.labels}>Zip Code</Text>
+        <TextInput
+          style={styles.inputFields}
+          placeholder="Zip Code"
+          keyboardType={'numeric'}
+          onChangeText={text => setForm({...form, zipCode: text})}
+          value={form.zipCode}
+        />
+        <Text style={styles.labels}>Password</Text>
+        <TextInput
+          style={styles.inputFields}
+          secureTextEntry={true}
+          placeholder="Password"
+          onChangeText={text => setForm({...form, password: text})}
+          value={form.password}
+        />
+
+        <TouchableOpacity 
+          style={styles.button}
+          onPress={() => navigation.navigate('SeniorDash')}>
+          <Text style={styles.buttonText}>Submit</Text>
+        </TouchableOpacity>
+      </View>
+    </TouchableWithoutFeedback>
+  )
+}
+
+export default JuniorSignup
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+  },
+
+  inputFields: {
+    width: '70%',
+    borderColor: 'lightblue',
+    borderStyle: 'solid',
+    borderWidth: 1,
+    fontSize: 25,
+    marginBottom: 10,
+  },
+  labels: {
+    fontSize: 25,
+    marginBottom: 5,
+  },
+
+  button: {
+    backgroundColor: 'lightblue',
+    borderColor: 'lightblue',
+    borderStyle: 'solid',
+    borderWidth: 1,
+    padding: 10,
+    marginTop: 10,
+  },
+
+  buttonText: {
+    fontSize: 20,
+  },
+});

components/SeniorDash.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
+import Feed from './Feed'
+import { useQuery, gql } from '@apollo/client';
+
+// const GET_TEST = gql`
+//   query helpers {
+//     tasks {
+//       taskType
+//       taskDescription
+//     }
+//   }`
+
+
+export default function SeniorDash() {
+  // const { loading, error, data } = useQuery(GET_TEST);
+  // if (loading) return <Text>Loading...</Text>;
+  // if (error) return <Text>Error :( </Text>;
+
+  // console.log('data', data)
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity 
+        style={styles.submit}
+        >
+        <Text>New Ticket</Text>
+      </TouchableOpacity>
+      <View
+        style={styles.buttonView}
+      >
+        <TouchableOpacity 
+          style={styles.tabs}
+          >
+          <Text>Open</Text>
+        </TouchableOpacity>
+        <TouchableOpacity 
+          style={styles.tabs}
+          >
+          <Text>Closed</Text>
+        </TouchableOpacity>
+      </View>
+      <Feed/>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center'
+  },
+  submit: {
+    width: '80%',
+    backgroundColor: 'lightgreen'
+  },
+  tabs: {
+    width: '40%',
+    backgroundColor: 'red',
+    height: 20
+  },
+  buttonView: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  }
+})

components/SeniorSignup.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react-native';
 import {TextInput} from 'react-native-gesture-handler';
 
-const SeniorSignup = () => {
+const SeniorSignup = ({navigation}) => {
   // inital state for the forms
   const initialState = {
     firstName: '',
@@ -41,8 +41,8 @@ const SeniorSignup = () => {
         <TextInput
           style={styles.inputFields}
           placeholder="Last Name"
-          onChangeText={text => setForm({...form, firstName: text})}
-          value={form.firstName}
+          onChangeText={text => setForm({...form, lastName: text})}
+          value={form.lastName}
         />
         <Text style={styles.labels}>Phone Number</Text>
         <TextInput
@@ -68,8 +68,9 @@ const SeniorSignup = () => {
           onChangeText={text => setForm({...form, password: text})}
           value={form.password}
         />
-
-        <TouchableOpacity style={styles.button}>
+        <TouchableOpacity 
+          style={styles.button}
+          onPress={() => navigation.navigate('SeniorDash')}>
           <Text style={styles.buttonText}>Submit</Text>
         </TouchableOpacity>
       </View>

components/SeniorTicket.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Text, View, StyleSheet } from 'react-native'
+
+
+const SeniorTicket = () => {
+  return (
+    <View>
+        <Text>Title</Text>
+        <Text>Helpers [array]</Text>
+        <Text>Location</Text>
+        <Text>Type</Text>
+        <Text>Description</Text>
+      </View>
+    )
+  }
+
+const styles = StyleSheet.create({})
+
+export default SeniorTicket

components/StartingPage.tsx

@@ -11,7 +11,8 @@ const StartingPage = ({navigation}) => {
         onPress={() => navigation.navigate('SeniorSignup')}>
         <Text style={styles.buttonText}>Yes</Text>
       </TouchableOpacity>
-      <TouchableOpacity style={styles.button}>
+      <TouchableOpacity style={styles.button}
+        onPress={() => navigation.navigate('JuniorSignup')}>
         <Text style={styles.buttonText}>No</Text>
       </TouchableOpacity>
     </View>