Fixed hooks issue for useNavigation + added swipeable

babel-translations.babel

@@ -81,6 +81,32 @@
                             <folder_node>
                                 <name>joblist</name>
                                 <children>
+                                    <folder_node>
+                                        <name>actions</name>
+                                        <children>
+                                            <concept_node>
+                                                <name>swipecamera</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                        </children>
+                                    </folder_node>
                                     <folder_node>
                                         <name>labels</name>
                                         <children>
@@ -105,6 +131,27 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>detail</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
                                         </children>
                                     </folder_node>
                                     <folder_node>

components/flat-list-item-separator/flat-list-item-separator.component.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { View, Text } from "react-native";
+
+export default function FlatListItemSeparator() {
+  return (
+    <View
+      style={{
+        height: 1,
+        width: "100%",
+        backgroundColor: "#000",
+        opacity: 0.2,
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,64 @@
+import { Card, CardItem, H3, SwipeRow } from "native-base";
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { useNavigation } from "@react-navigation/native";
+import Swipeable from "react-native-gesture-handler/Swipeable";
+import { useTranslation } from "react-i18next";
+import { Ionicons } from "@expo/vector-icons";
+import styles from "../styles";
+
+const RenderRightAction = (props) => {
+  const { t } = useTranslation();
+  return (
+    <View style={[styles.swipe_view, styles.swipe_view_blue]}>
+      <Ionicons name="ios-camera" size={24} color="white" />
+      <Text style={styles.swipe_text}>{t("joblist.actions.swipecamera")}</Text>
+    </View>
+  );
+};
+
+export default function JobListItem({ item }) {
+  console.log("JobListItem -> item", item);
+  const navigation = useNavigation();
+
+  const onPress = () => {
+    navigation.push("JobDetail", {
+      jobId: item.id,
+      title: item.ro_number ? item.ro_number : `EST-${item.est_number}`,
+    });
+  };
+
+  return (
+    <Swipeable renderRightActions={() => <RenderRightAction />}>
+      <Card>
+        <CardItem header bordered first button onPress={onPress}>
+          <View style={localStyles.item_header}>
+            <H3 style={localStyles.item_header_content}>
+              {item.ro_number ? item.ro_number : `EST-${item.est_number}`}
+            </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>
+        </CardItem>
+      </Card>
+    </Swipeable>
+  );
+}
+const localStyles = StyleSheet.create({
+  item_header: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  item_header_margin: { marginLeft: 10 },
+});

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

@@ -1,30 +1,15 @@
+import { useQuery } from "@apollo/client";
 import React from "react";
-import {
+import { RefreshControl } from "react-native";
-  View,
+import { FlatList } from "react-native-gesture-handler";
-  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 { selectBodyshop } from "../../redux/user/user.selectors";
-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";
+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);

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

@@ -3,12 +3,10 @@ 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 }) {
+export default function LoadingDisplay({ count = 5 }) {
   return (
-    <Container>
+    <View>
-      <Content>
+      <BarIndicator count={count} color="dodgerblue" />
-        <BarIndicator size={size || "large"} count={count} />
+    </View>
-      </Content>
-    </Container>
   );
 }

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

@@ -1,4 +1,3 @@
-import { Container, Content } from "native-base";
 import React from "react";
 import JobListComponent from "../job-list/job-list.component.jsx";
 

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

@@ -5,7 +5,12 @@ import { createDrawerNavigator } from "@react-navigation/drawer";
 import i18n from "i18next";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { StatusBar as rnStatusBar, StyleSheet } from "react-native";
+import {
+  StatusBar as rnStatusBar,
+  StyleSheet,
+  View,
+  Button,
+} from "react-native";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
@@ -24,6 +29,7 @@ import ScreenMessagingList from "../screen-messaging-list/screen-messaging-list.
 import ScreenSignIn from "../screen-sign-in/screen-sign-in.component";
 import ScreenSettingsComponent from "../screen-settings/screen-settings.component";
 import ScreenSplash from "../screen-splash/screen-splash.component";
+import { Ionicons } from "@expo/vector-icons";
 
 const JobStack = createStackNavigator();
 const MessagingStack = createStackNavigator();
@@ -42,20 +48,40 @@ const mapDispatchToProps = (dispatch) => ({
   signOutStart: () => dispatch(signOutStart()),
 });
 
-const JobStackNavigator = () => (
+const LeftDrawerButton = (props, navigation) => (
-  <JobStack.Navigator>
+  <Ionicons
+    {...props}
+    name="ios-menu"
+    size={24}
+    color="dodgerblue"
+    style={{ marginLeft: 20 }}
+    onPress={() => navigation.toggleDrawer()}
+  />
+);
+
+const JobStackNavigator = ({ navigation }) => (
+  <JobStack.Navigator initialRouteName="JobList">
     <JobStack.Screen
       name="JobList"
       options={({ route }) => ({
         title: `${i18n.t("joblist.labels.activejobs")}`,
+        headerLeft: (props) => LeftDrawerButton(props, navigation),
       })}
       component={ScreenJobList}
     />
-    <JobStack.Screen name="JobDetail" component={ScreenJobDetail} />
+    <JobStack.Screen
+      name="JobDetail"
+      component={ScreenJobDetail}
+      options={({ route }) => ({
+        title:
+          (route.params && route.params.title) ||
+          i18n.t("joblist.labels.detail"),
+      })}
+    />
   </JobStack.Navigator>
 );
 
-const MessagingStackNavigator = () => (
+const MessagingStackNavigator = ({ navigation }) => (
   <MessagingStack.Navigator>
     <MessagingStack.Screen
       name="MessagingList"
@@ -69,7 +95,23 @@ const MessagingStackNavigator = () => (
 );
 
 const BottomTabsNavigator = () => (
-  <BottomTabs.Navigator>
+  <BottomTabs.Navigator
+    screenOptions={({ route }) => ({
+      tabBarIcon: ({ focused, color, size }) => {
+        let iconName;
+        if (route.name === "JobTab") {
+          iconName = "ios-list";
+        } else if (route.name === "MessagingTab") {
+          iconName = "ios-chatboxes";
+        }
+        return <Ionicons name={iconName} size={size} color={color} />;
+      },
+    })}
+    tabBarOptions={{
+      activeTintColor: "dodgerblue",
+      inactiveTintColor: "slategrey",
+    }}
+  >
     <BottomTabs.Screen
       name="JobTab"
       options={{ title: i18n.t("joblist.titles.jobtab") }}
@@ -83,12 +125,14 @@ const BottomTabsNavigator = () => (
   </BottomTabs.Navigator>
 );
 
-const DrawerNavigator = () => (
+const DrawerNavigator = ({ navigation }) => (
   <Drawer.Navigator>
     <Drawer.Screen name="Home" component={BottomTabsNavigator} />
     <Drawer.Screen
       name="Settings"
-      options={{ title: i18n.t("settings.titles.settings") }}
+      options={{
+        title: i18n.t("settings.titles.settings"),
+      }}
       component={ScreenSettingsComponent}
     />
   </Drawer.Navigator>

components/screen-sign-in/screen-sign-in.component.jsx

@@ -93,7 +93,7 @@ export function SignIn({ emailSignInStart, signingIn }) {
 
 const localStyles = StyleSheet.create({
   content: {
-    paddingBottom: 150,
+    paddingBottom: 200,
   },
   logo: { width: 100, height: 100 },
 });

components/styles.js

@@ -12,4 +12,19 @@ export default StyleSheet.create({
     justifyContent: "space-evenly",
     alignItems: "center",
   },
+
+  swipe_view: {
+    alignItems: "center",
+    justifyContent: "center",
+    width: 100,
+    marginTop: 5,
+    marginBottom: 5,
+  },
+  swipe_view_blue: {
+    backgroundColor: "dodgerblue",
+  },
+  swipe_text: {
+    textAlign: "center",
+    color: "white",
+  },
 });

translations/en-US/common.json

@@ -9,8 +9,12 @@
 			}
 		},
 		"joblist": {
+			"actions": {
+				"swipecamera": "Add Pictures/Video"
+			},
 			"labels": {
-				"activejobs": "All Active Jobs"
+				"activejobs": "Jobs",
+				"detail": "Job Detail"
 			},
 			"titles": {
 				"jobtab": "Jobs"

translations/es-MX/common.json

@@ -9,8 +9,12 @@
 			}
 		},
 		"joblist": {
+			"actions": {
+				"swipecamera": ""
+			},
 			"labels": {
-				"activejobs": ""
+				"activejobs": "",
+				"detail": ""
 			},
 			"titles": {
 				"jobtab": ""

translations/fr-CA/common.json

@@ -9,8 +9,12 @@
 			}
 		},
 		"joblist": {
+			"actions": {
+				"swipecamera": ""
+			},
 			"labels": {
-				"activejobs": ""
+				"activejobs": "",
+				"detail": ""
 			},
 			"titles": {
 				"jobtab": ""