Refactor job list

2021-02-08 22:32:47 -08:00
parent fafd2225ad
commit 2437808c33
9 changed files with 75 additions and 547 deletions
--- a/components/job-list-item/job-list-item.component.jsx
+++ b/components/job-list-item/job-list-item.component.jsx
@@ -1,10 +1,9 @@
 import { Ionicons } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
-import Dinero from "dinero.js";
-import { Card, CardItem, H3 } from "native-base";
+import { Body, H3, Icon, ListItem, Right } from "native-base";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { StyleSheet, Text, View } from "react-native";
+import { Text } from "react-native";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import Swipeable from "react-native-gesture-handler/Swipeable";
 import { connect } from "react-redux";
@@ -23,7 +22,8 @@ const mapDispatchToProps = (dispatch) => ({
 export function JobListItem({ setCameraJob, setCameraJobId, item }) {
  const { t } = useTranslation();
  const navigation = useNavigation();
-  const RenderRightAction = (props) => {
+
+  const RenderRightAction = () => {
    const navigation = useNavigation();
    const { t } = useTranslation();
    return (
@@ -36,12 +36,13 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
        }}
      >
        <Ionicons name="ios-camera" size={24} color="white" />
-        <Text style={styles.swipe_text}>
+        {/* <Text style={styles.swipe_text}>
          {t("joblist.actions.swipecamera")}
-        </Text>
+        </Text> */}
      </TouchableOpacity>
    );
  };
+
  const onPress = () => {
    navigation.push("JobDetail", {
      jobId: item.id,
@@ -52,48 +53,23 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
  return (
    <Swipeable renderRightActions={() => <RenderRightAction />}>
      <TouchableOpacity onPress={onPress}>
-        <Card>
-          <CardItem header bordered first button>
-            <View style={localStyles.item_header}>
-              <H3 style={localStyles.item_header_content}>
-                {item.ro_number || t("general.labels.na")}
-              </H3>
-              <Text style={localStyles.item_header_margin}>
-                {item.clm_no || ""}
-              </Text>
-            </View>
-          </CardItem>
-          <CardItem bordered last button>
-            <View>
-              <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>
-            <View style={[{ width: 150 }, localStyles.card_content_margin]}>
-              <Text numberOfLines={1}>{item.ins_co_nm || ""}</Text>
-              <Text>
-                {Dinero({
-                  amount: Math.round(item.clm_total * 100),
-                }).toFormat() || ""}
-              </Text>
-            </View>
-          </CardItem>
-        </Card>
+        <ListItem>
+          <H3>{item.ro_number || t("general.labels.na")}</H3>
+
+          <Body style={{ marginLeft: 10 }}>
+            <Text>{`${item.ownr_fn || ""} ${item.ownr_ln || ""} ${
+              item.ownr_co_nm || ""
+            } - ${item.v_model_yr || ""} ${item.v_make_desc || ""} ${
+              item.v_model_desc || ""
+            }`}</Text>
+          </Body>
+          <Right>
+            <Icon active name="arrow-forward" />
+          </Right>
+        </ListItem>
      </TouchableOpacity>
    </Swipeable>
  );
 }
-const localStyles = StyleSheet.create({
-  item_header: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  item_header_margin: { marginLeft: 10 },
-  card_content_margin: {
-    marginLeft: 15,
-  },
-});
+
 export default connect(mapStateToProps, mapDispatchToProps)(JobListItem);
--- a/components/job-list/job-list.component.jsx
+++ b/components/job-list/job-list.component.jsx
@@ -7,9 +7,8 @@ import { createStructuredSelector } from "reselect";
 import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 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";
+import LoadingDisplay from "../loading-display/loading-display.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -38,7 +37,6 @@ export function JobListComponent({ bodyshop }) {
      style={{ flex: 1 }}
      data={data ? data.jobs : []}
      renderItem={(object) => <JobListItem item={object.item} />}
-      //ItemSeparatorComponent={FlatListItemSeparator}
    />
  );
 }
--- a/components/screen-camera/screen-camera.jsx
+++ b/components/screen-camera/screen-camera.jsx
@@ -1,4 +1,4 @@
-import { useFocusEffect, useNavigation } from "@react-navigation/native";
+import { useFocusEffect } from "@react-navigation/native";
 import { Camera } from "expo-camera";
 import * as FileSystem from "expo-file-system";
 import React, { useEffect, useRef, useState } from "react";
@@ -21,8 +21,7 @@ const mapDispatchToProps = (dispatch) => ({
  addPhoto: (photo) => dispatch(addPhoto(photo)),
 });

-export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
-  const navigation = useNavigation();
+export function ScreenCamera({ cameraJobId, addPhoto }) {
  const [hasPermission, setHasPermission] = useState(null);
  const [state, setState] = useState({
    flashMode: Camera.Constants.FlashMode.off,
--- a/components/screen-main/screen-main.component.jsx
+++ b/components/screen-main/screen-main.component.jsx
@@ -1,11 +1,10 @@
 import { Ionicons } from "@expo/vector-icons";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { createDrawerNavigator } from "@react-navigation/drawer";
 import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
 import i18n from "i18next";
 import React, { useEffect } from "react";
-import { useTranslation } from "react-i18next";
+import { SafeAreaView } from "react-native-safe-area-context";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
@@ -33,7 +32,6 @@ const MessagingStack = createStackNavigator();
 const MediaCacheStack = createStackNavigator();
 const MoreStack = createStackNavigator();
 const BottomTabs = createBottomTabNavigator();
-const Drawer = createDrawerNavigator();

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -47,11 +45,11 @@ const mapDispatchToProps = (dispatch) => ({
  signOutStart: () => dispatch(signOutStart()),
 });

-const JobStackNavigator = ({ navigation }) => (
+const JobStackNavigator = () => (
  <JobStack.Navigator initialRouteName="JobList">
    <JobStack.Screen
      name="JobList"
-      options={({ route }) => ({
+      options={() => ({
        title: `${i18n.t("joblist.labels.activejobs")}`,
      })}
      component={ScreenJobList}
@@ -68,7 +66,7 @@ const JobStackNavigator = ({ navigation }) => (
  </JobStack.Navigator>
 );

-const CameraStackNavigator = ({ navigation }) => (
+const CameraStackNavigator = () => (
  <CameraStack.Navigator initialRouteName="TabCameraScreen">
    <CameraStack.Screen
      name="TabCameraScreen"
@@ -78,7 +76,7 @@ const CameraStackNavigator = ({ navigation }) => (
  </CameraStack.Navigator>
 );

-const MediaCacheStackNavigator = ({ navigation }) => (
+const MediaCacheStackNavigator = () => (
  <MediaCacheStack.Navigator initialRouteName="TabMediaCache">
    <MediaCacheStack.Screen
      name="MediaCache"
@@ -88,7 +86,7 @@ const MediaCacheStackNavigator = ({ navigation }) => (
  </MediaCacheStack.Navigator>
 );

-const MessagingStackNavigator = ({ navigation }) => (
+const MessagingStackNavigator = () => (
  <MessagingStack.Navigator>
    <MessagingStack.Screen
      name="MessagingList"
@@ -100,7 +98,7 @@ const MessagingStackNavigator = ({ navigation }) => (
    />
  </MessagingStack.Navigator>
 );
-const MoreStackNavigator = ({ navigation }) => (
+const MoreStackNavigator = () => (
  <MoreStack.Navigator>
    <MoreStack.Screen
      name="Settings"
@@ -115,7 +113,8 @@ const MoreStackNavigator = ({ navigation }) => (
 const BottomTabsNavigator = () => (
  <BottomTabs.Navigator
    screenOptions={({ route }) => ({
-      tabBarIcon: ({ focused, color, size }) => {
+      // eslint-disable-next-line react/display-name
+      tabBarIcon: ({ color, size }) => {
        let iconName;
        if (route.name === "JobTab") {
          iconName = "ios-list";
@@ -174,8 +173,6 @@ export function ScreenMainComponent({
    checkUserSession();
  }, [checkUserSession]);

-  const { t } = useTranslation();
-
  return (
    <NavigationContainer>
      {currentUser.authorized === null ? (