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

components/error-display/error-display.component.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { View, Text } from "react-native";
+
+export default function ErrorDisplay({ errorMessage }) {
+  return (
+    <View style={{ backgroundColor: "red" }}>
+      <Text>{errorMessage}</Text>
+    </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);

components/loading-display/loading-display.component.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { View, Text } from "react-native";
+import { BarIndicator } from "react-native-indicators";
+import { Container, Content } from "native-base";
+
+export default function LoadingDisplay({ size, count = 5 }) {
+  return (
+    <Container>
+      <Content>
+        <BarIndicator size={size || "large"} count={count} />
+      </Content>
+    </Container>
+  );
+}

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

@@ -1,18 +1,7 @@
+import { Container, Content } from "native-base";
 import React from "react";
-import { View, Text, Button } from "react-native";
-import { useTranslation } from "react-i18next";
-import { useQuery, useLazyQuery, useSubscription } from "@apollo/client";
-import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries.js";
+import JobListComponent from "../job-list/job-list.component.jsx";
+
 export default function ScreenJobList({ navigation }) {
-  const { t } = useTranslation();
-  const { loading, error, data } = useSubscription(QUERY_BODYSHOP);
-  console.log("ScreenJobList -> error", error);
-  console.log("ScreenJobList -> loading", loading);
-  console.log("BodyshopData", data);
-  return (
-    <View>
-      <Text>This is the Job List.</Text>
-      <Text>{t("joblist.labels.activejobs")}</Text>
-    </View>
-  );
+  return <JobListComponent />;
 }

components/screen-main/screen-main.component.jsx

@@ -47,9 +47,7 @@ const JobStackNavigator = () => (
     <JobStack.Screen
       name="JobList"
       options={({ route }) => ({
-        title: `${i18n.t("joblist.labels.activejobs")} ${
-          JSON.stringify(route.params) | "X"
-        }`,
+        title: `${i18n.t("joblist.labels.activejobs")}`,
       })}
       component={ScreenJobList}
     />
@@ -96,19 +94,32 @@ const DrawerNavigator = () => (
   </Drawer.Navigator>
 );
 
-export function ScreenMainComponent({ checkUserSession, currentUser }) {
+export function ScreenMainComponent({
+  checkUserSession,
+  currentUser,
+  bodyshop,
+}) {
   useEffect(() => {
     checkUserSession();
   }, [checkUserSession]);
 
   const { t } = useTranslation();
 
+  useEffect(() => {
+    if (currentUser.authorized) console.log("Authed");
+    //Do the saga shit.
+  }, [currentUser]);
+
   return (
     <NavigationContainer>
       {currentUser.authorized === null ? (
         <ScreenSplash />
       ) : currentUser.authorized ? (
-        <DrawerNavigator />
+        bodyshop ? (
+          <DrawerNavigator />
+        ) : (
+          <ScreenSplash />
+        )
       ) : (
         <ScreenSignIn />
       )}