Fixed hooks issue for useNavigation + added swipeable

components/job-list/job-list.component.jsx

@@ -1,30 +1,15 @@
+import { useQuery } from "@apollo/client";
 import React from "react";
-import {
-  View,
-  Text,
-  ActivityIndicator,
-  ListView,
-  RefreshControl,
-} from "react-native";
-
+import { RefreshControl } from "react-native";
+import { FlatList } from "react-native-gesture-handler";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import { useQuery } from "@apollo/client";
 import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
-import styles from "../styles";
-import {
-  Container,
-  Content,
-  Card,
-  CardItem,
-  Icon,
-  Right,
-  H1,
-} from "native-base";
-import { FlatList } from "react-native-gesture-handler";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import ErrorDisplay from "../error-display/error-display.component";
 import LoadingDisplay from "../loading-display/loading-display.component";
+import JobListItem from "../job-list-item/job-list-item.component";
+import { useNavigation } from "@react-navigation/native";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -39,7 +24,7 @@ export function JobListComponent({ bodyshop }) {
   });
 
   const onRefresh = async () => {
-    await refetch();
+    return refetch();
   };
 
   if (loading) return <LoadingDisplay />;
@@ -52,32 +37,10 @@ export function JobListComponent({ bodyshop }) {
       }
       style={{ flex: 1 }}
       data={data ? data.jobs : []}
-      renderItem={renderItem}
+      renderItem={(object) => <JobListItem item={object.item} />}
+      //ItemSeparatorComponent={FlatListItemSeparator}
     />
   );
 }
-const renderItem = ({ item }) => {
-  return (
-    <CardItem>
-      <View>
-        <H1>{`${item.est_number}${
-          item.ro_number ? ` ${item.ro_number}` : ""
-        }`}</H1>
-        <Text>{`${item.ownr_fn || ""} ${item.ownr_ln || ""} ${
-          item.ownr_co_nm || ""
-        }`}</Text>
-        <Text>{`${item.v_model_yr || ""} ${item.v_make_desc || ""} ${
-          item.v_model_desc || ""
-        }`}</Text>
-      </View>
-      <Right>
-        <Text>{item.ded_amt}</Text>
-      </Right>
-      <Right>
-        <Icon name="arrow-forward" />
-      </Right>
-    </CardItem>
-  );
-};
 
 export default connect(mapStateToProps, null)(JobListComponent);