trying to connect mutation still

.expo/packager-info.json

@@ -2,7 +2,7 @@
   "devToolsPort": 19002,
   "expoServerPort": 19000,
   "packagerPort": 19003,
-  "packagerPid": 44594,
+  "packagerPid": 48085,
   "expoServerNgrokUrl": null,
   "packagerNgrokUrl": null,
   "ngrokPid": null,

App.tsx

@@ -1,7 +1,7 @@
 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 {ApolloClient, InMemoryCache, ApolloProvider} from '@apollo/client';
 
 import Splash from './components/Splash';
 import StartingPage from './components/StartingPage';
@@ -15,18 +15,14 @@ import NewTicketDesc from './components/NewTicketDesc';
 
 
 
-
-
-
 const client = new ApolloClient({
   uri: 'http://localhost:3000/graphql',
-  cache: new InMemoryCache()
-})
+  cache: new InMemoryCache(),
+});
 
 const Stack = createStackNavigator();
 
 export default function App() {
-  console.log('random');
   return (
     <ApolloProvider client={client}>
       <NavigationContainer>
@@ -43,6 +39,5 @@ export default function App() {
         </Stack.Navigator>
       </NavigationContainer>
     </ApolloProvider>
-  )
+  );
 }
-

components/JuniorDash.tsx

@@ -1,63 +1,66 @@
-import React from 'react'
-import { StyleSheet, Text, View, TouchableOpacity, ScrollView } from 'react-native'
-import Feed from './Feed'
-import { useQuery, gql } from '@apollo/client';
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {FontAwesome} from '@expo/vector-icons';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 
-// const GET_TEST = gql`
-//   query helpers {
-//     tasks {
-//       taskType
-//       taskDescription
-//     }
-//   }`
+import JuniorFeed from './JuniorFeed';
+import JuniorTickets from './JuniorTickets';
+import JuniorProfile from './JuniorProfile';
 
+const Tab = createBottomTabNavigator();
 
 export default function JuniorDash() {
-  // 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}>
-      <Text>Dashboard</Text>
-      <Feed/>
-      <View
-        style={styles.buttonView}
-      >
-        <TouchableOpacity 
-          style={styles.tabs}
-          >
-          <Text>Open</Text>
-        </TouchableOpacity>
-        <TouchableOpacity 
-          style={styles.tabs}
-          >
-          <Text>Closed</Text>
-        </TouchableOpacity>
-      </View>
-    </View>
-  )
+    <Tab.Navigator
+      screenOptions={({route}) => ({
+        tabBarIcon: ({focused, color, size}) => {
+          let iconName;
+
+          if (route.name === 'Feed') {
+            iconName = 'feed';
+            color = focused ? 'red' : 'black';
+          } else if (route.name === 'JuniorTickets') {
+            iconName = 'ticket';
+            color = focused ? 'red' : 'black';
+          } else if (route.name === 'JuniorProfile') {
+            iconName = 'user';
+            color = focused ? 'red' : 'black';
+          }
+
+          // You can return any component that you like here!
+          return <FontAwesome name={iconName} size={size} color={color} />;
+        },
+      })}
+      tabBarOptions={{
+        activeTintColor: 'tomato',
+        inactiveTintColor: 'gray',
+        showLabel: false,
+      }}>
+      <Tab.Screen name="Feed" component={JuniorFeed} />
+      <Tab.Screen name="JuniorTickets" component={JuniorTickets} />
+      <Tab.Screen name="JuniorProfile" component={JuniorProfile} />
+    </Tab.Navigator>
+  );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'center'
+    alignItems: 'center',
   },
   submit: {
     width: '80%',
-    backgroundColor: 'lightgreen'
+    backgroundColor: 'lightgreen',
   },
   tabs: {
     flex: 1,
     alignSelf: 'flex-end',
     width: '40%',
     backgroundColor: 'red',
-    height: 20
+    height: 20,
   },
   buttonView: {
     flexDirection: 'row',
     justifyContent: 'space-around',
-  }
-})
+  },
+});

components/JuniorFeed.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import {StyleSheet, Text, ScrollView} from 'react-native';
+import Ticket from './Ticket';
+import {useQuery, gql, useApolloClient} from '@apollo/client';
+
+const GET_TASKS = gql`
+  query {
+    tasks {
+      id
+      seniorname
+      description
+      type
+    }
+  }
+`;
+const JuniorFeed = () => {
+  const {loading, error, data} = useQuery(GET_TASKS);
+  if (loading) return <Text>Loading...</Text>;
+  if (error) {
+    console.log('error', error);
+    return <Text>Error :( </Text>;
+  }
+  // console.log('data', data);
+
+  // const tickets = data.helpers[0].map( task => <SeniorTicket task={task}/>)
+  const tickets = data.tasks.map(task => <Ticket task={task} key={task.id} />);
+  // console.log('tickets', tickets)
+  return (
+    <ScrollView style={styles.container}>
+      {tickets}
+      {/* <SeniorTicket/>
+        <SeniorTicket/>
+        <SeniorTicket/> */}
+    </ScrollView>
+  );
+};
+
+export default JuniorFeed;
+
+const styles = StyleSheet.create({
+  container: {
+    width: '80%',
+  },
+});

components/JuniorProfile.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+
+const JuniorProfile = () => {
+  return (
+    <View>
+      <Text>Profile Page!</Text>
+    </View>
+  );
+};
+
+export default JuniorProfile;
+
+const styles = StyleSheet.create({});

components/JuniorSignup.tsx

@@ -1,34 +1,89 @@
-import React, { useState } from 'react'
-import { StyleSheet, Text, View, TouchableWithoutFeedback, TextInput, Keyboard, TouchableOpacity } from 'react-native'
+import React, {useState} from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  TouchableWithoutFeedback,
+  TextInput,
+  Keyboard,
+  TouchableOpacity,
+} from 'react-native';
+import {gql, useMutation} from '@apollo/client';
+
+interface signupState {
+  name: string;
+  email: string;
+  phoneNumber: string;
+  password: string;
+  zipCode: string;
+}
+// TODO: change occupation to zip code when Andy modifies DB
+const ADD_HELPER = gql`
+  mutation addHelper(
+    $name: String!
+    $email: String!
+    $phone: String!
+    $password: String!
+    $occupation: String
+  ) {
+    addHelper(
+      name: $name
+      email: $email
+      phone: $phone
+      password: $password
+      occupation: $occupation
+    ) {
+      id
+    }
+  }
+`;
 
 const JuniorSignup = ({navigation}) => {
-  const initialState = {
-    firstName: '',
-    lastName: '',
+  const initialState: signupState = {
+    name: '',
     email: '',
     phoneNumber: '',
-    zipCode: '',
     password: '',
+    zipCode: '',
   };
 
   // state for the forms
-  const [form, setForm] = useState(initialState);
+  const [form, setForm] = useState<signupState>(initialState);
+
+  // mutation hook to send form data to backend
+  const [addHelper, {data, error}] = useMutation(ADD_HELPER);
+
+  const handleSubmit = async () => {
+    const {name, email, phoneNumber, password, zipCode} = form;
+
+    // TODO : need some sort of validation for the forms before we send to DB
+    try {
+      const {data} = await addHelper({
+        variables: {
+          name,
+          email,
+          phone: phoneNumber,
+          password,
+          occupation: zipCode,
+        },
+      });
+      setForm(initialState);
+      navigation.navigate('JuniorDash');
+    } catch (error) {
+      console.log('error', error);
+    }
+
+    // TODO: once id returns, need to set it to global auth state (maybe use onCompleted for useMutation?)
+  };
   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>
+        <Text style={styles.labels}>Name</Text>
         <TextInput
           style={styles.inputFields}
-          placeholder="Last Name"
-          onChangeText={text => setForm({...form, lastName: text})}
-          value={form.lastName}
+          placeholder="Name"
+          onChangeText={text => setForm({...form, name: text})}
+          value={form.name}
         />
         <Text style={styles.labels}>Email</Text>
         <TextInput
@@ -62,17 +117,15 @@ const JuniorSignup = ({navigation}) => {
           value={form.password}
         />
 
-        <TouchableOpacity 
-          style={styles.button}
-          onPress={() => navigation.navigate('JuniorDash')}>
+        <TouchableOpacity style={styles.button} onPress={handleSubmit}>
           <Text style={styles.buttonText}>Submit</Text>
         </TouchableOpacity>
       </View>
     </TouchableWithoutFeedback>
-  )
-}
+  );
+};
 
-export default JuniorSignup
+export default JuniorSignup;
 
 const styles = StyleSheet.create({
   container: {

components/JuniorTickets.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+
+// TODO: get ID of whoever is logged in so that we can query the tasks assigned to specific id
+
+const JuniorTickets = () => {
+  return (
+    <View>
+      <Text style={styles.text}>My Tickets</Text>
+    </View>
+  );
+};
+
+export default JuniorTickets;
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 20,
+  },
+});

components/NewTicket.tsx

@@ -7,21 +7,21 @@ const NewTicket = ({navigation}) => {
       <Text style={styles.choiceText}>What do you need help with?</Text>
       <TouchableOpacity 
         style={styles.choices}
-        onPress={() => navigation.navigate('NewTicketDesc', {type: 'Food'})}
+        onPress={() => navigation.navigate('NewTicketDesc', {typeid: 100})}
         >
-        <Text style={styles.choiceText}>Food / Groceries</Text>
+        <Text style={styles.choiceText}>Errands</Text>
       </TouchableOpacity>
       <TouchableOpacity 
         style={styles.choices}
-        onPress={() => navigation.navigate('NewTicketDesc', {type: 'Connection'})}
+        onPress={() => navigation.navigate('NewTicketDesc', {typeid: 200})}
         >
-        <Text style={styles.choiceText}>Connection</Text>
+        <Text style={styles.choiceText}>Conversation</Text>
       </TouchableOpacity>
       <TouchableOpacity 
         style={styles.choices}
-        onPress={() => navigation.navigate('NewTicketDesc', {type: 'Errands'})}
+        onPress={() => navigation.navigate('NewTicketDesc', {typeid: 300})}
         >
-        <Text style={styles.choiceText}>Errands</Text>
+        <Text style={styles.choiceText}>Household Chores</Text>
       </TouchableOpacity>
     </View>
   )