signup auth, claim tickets, see claimed tickets

App.tsx

@@ -13,20 +13,16 @@ import LoginPage from './components/LoginPage';
 import NewTicket from './components/NewTicket';
 import NewTicketDesc from './components/NewTicketDesc';
 
-
-
 const client = new ApolloClient({
   uri: 'http://localhost:3000/graphql',
   cache: new InMemoryCache(),
 });
 
-
-
 const Stack = createStackNavigator();
 // export const AuthContext = createContext({});
 export default function App() {
   // global state for whoever's ID
-  const [authID, setAuthID] = useState(1);
+  const [authID, setAuthID] = useState(null);
   return (
     <ApolloProvider client={client}>
       <NavigationContainer>

components/JuniorDash.tsx

@@ -37,13 +37,23 @@ export default function JuniorDash({authID}) {
         inactiveTintColor: 'gray',
         showLabel: false,
       }}>
-      <Tab.Screen name="Feed" component={JuniorFeed} />
-      <Tab.Screen name="JuniorTickets" component={JuniorTickets} />
+      <Tab.Screen name="Feed">
+        {props => <JuniorFeed {...props} authID={authID} />}
+      </Tab.Screen>
+      <Tab.Screen name="JuniorTickets">
+        {props => <JuniorTickets {...props} authID={authID} />}
+      </Tab.Screen>
       <Tab.Screen name="JuniorProfile" component={JuniorProfile} />
     </Tab.Navigator>
   );
 }
 
+/*<Stack.Screen name="JuniorSignup">
+{props => (
+  <JuniorSignup {...props} authID={authID} setAuthID={setAuthID} />
+)}
+</Stack.Screen>
+*/
 const styles = StyleSheet.create({
   container: {
     flex: 1,

components/JuniorFeed.tsx

@@ -14,8 +14,8 @@ const GET_TASKS = gql`
   }
 `;
 
-
-const JuniorFeed = () => {
+const JuniorFeed = ({authID}) => {
+  console.log('authID in JuniorFeed', authID);
   const {loading, error, data} = useQuery(GET_TASKS);
   if (loading) return <Text>Loading...</Text>;
   if (error) {
@@ -25,7 +25,9 @@ const JuniorFeed = () => {
   // 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} />);
+  const tickets = data.tasks.map(task => (
+    <Ticket task={task} key={task.id} authID={authID} />
+  ));
   // console.log('tickets', tickets)
   return (
     <ScrollView style={styles.container}>

components/JuniorSignup.tsx

@@ -69,8 +69,9 @@ const JuniorSignup = ({navigation, authID, setAuthID}) => {
           zipCode: numberedZip,
         },
       });
-      console.log('data', data);
-      setAuthID(2);
+      console.log('data', data.addHelper.id);
+      const uID = Number(data.addHelper.id);
+      setAuthID(uID);
       setForm(initialState);
       navigation.navigate('JuniorDash');
     } catch (error) {

components/JuniorTickets.tsx

@@ -1,20 +1,48 @@
 import React from 'react';
-import {StyleSheet, Text, View} from 'react-native';
+import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
+import {gql, useQuery} from '@apollo/client';
 
+import Ticket from './Ticket';
 // 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>
-  );
+const GET_TASK_FOR_HELPER = gql`
+  query Helper($id: Int!) {
+    helper(id: $id) {
+      tasks {
+        seniorname
+        description
+        type
+      }
+    }
+  }
+`;
+
+const JuniorTickets = ({authID}) => {
+  console.log('authID in junior ticketss', authID);
+  const {loading, error, data} = useQuery(GET_TASK_FOR_HELPER, {
+    // userID hardcoded to 34, we need to figure out why dynamic authID isn't working
+    variables: {id: 34},
+  });
+  if (error) return <Text>`Error! ${error.message}`</Text>;
+
+  console.log('data from query', data);
+
+  const tickets = data.helper.tasks.map(task => (
+    <Ticket task={task} key={task.id} />
+  ));
+
+  return <View style={styles.container}>{tickets}</View>;
 };
 
 export default JuniorTickets;
 
 const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
   text: {
-    fontSize: 20,
+    marginVertical: 10,
+    fontSize: 25,
+    alignSelf: 'center',
   },
 });

components/Ticket.tsx

@@ -1,18 +1,47 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {Text, View, StyleSheet, TouchableOpacity} from 'react-native';
+import {gql, useMutation} from '@apollo/client';
+
+const ADD_HELPER_TO_TASK = gql`
+  mutation addHelperToTask($helperid: Int!, $taskid: Int!) {
+    addHelperToTask(helperid: $helperid, taskid: $taskid) {
+      id
+    }
+  }
+`;
 
 const Ticket = props => {
+  const [claimed, setClaimed] = useState(false);
+  const [addHelperToTask, {data, error}] = useMutation(ADD_HELPER_TO_TASK);
+
   // destucturing the props
-  const {task} = props;
+  const {task, authID} = props;
   const {seniorname, type, description, id} = task;
   // handle claim submit button
-  const handleClaim = () => {};
+  const handleClaim = async () => {
+    // id is taskID and authID is userID
+    console.log('authID in Ticket', authID);
+    console.log('taskID in Ticket', id);
+
+    try {
+      const {data} = await addHelperToTask({
+        variables: {
+          helperid: authID,
+          taskid: id,
+        },
+      });
+      setClaimed(true);
+    } catch (error) {
+      console.log('error', error);
+    }
+  };
   return (
     <View style={styles.container}>
       <Text style={styles.text}>Who: {seniorname}</Text>
       <Text style={styles.text}>Type: {type}</Text>
       <Text style={styles.text}>Description: {description}</Text>
-      <TouchableOpacity style={styles.button}>
+
+      <TouchableOpacity style={styles.button} onPress={handleClaim}>
         <Text style={styles.buttonText}>Claim</Text>
       </TouchableOpacity>
     </View>