Added bodyshop querying before starting application. Basic job query and list view.

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

@@ -0,0 +1,83 @@
+import React from "react";
+import {
+  View,
+  Text,
+  ActivityIndicator,
+  ListView,
+  RefreshControl,
+} from "react-native";
+
+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 ErrorDisplay from "../error-display/error-display.component";
+import LoadingDisplay from "../loading-display/loading-display.component";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+export function JobListComponent({ bodyshop }) {
+  const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
+    variables: {
+      statuses: bodyshop.md_ro_statuses.open_statuses || ["Open", "Open*"],
+    },
+    skip: !bodyshop,
+  });
+
+  const onRefresh = async () => {
+    await refetch();
+  };
+
+  if (loading) return <LoadingDisplay />;
+  if (error) return <ErrorDisplay errorMessage={error.message} />;
+
+  return (
+    <FlatList
+      refreshControl={
+        <RefreshControl refreshing={loading} onRefresh={onRefresh} />
+      }
+      style={{ flex: 1 }}
+      data={data ? data.jobs : []}
+      renderItem={renderItem}
+    />
+  );
+}
+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);