Code Cleanup & Minor Bug Fixes

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

@@ -1,7 +1,7 @@
 import { Ionicons } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
 import { Body, H3, Icon, ListItem, Right } from "native-base";
-import React from "react";
+import React, { useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Animated, Text } from "react-native";
 import { TouchableOpacity } from "react-native-gesture-handler";
@@ -11,9 +11,7 @@ import { createStructuredSelector } from "reselect";
 import { setCameraJob, setCameraJobId } from "../../redux/app/app.actions";
 import styles from "../styles";
 
-const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
-});
+const mapStateToProps = createStructuredSelector({});
 const mapDispatchToProps = (dispatch) => ({
   setCameraJobId: (id) => dispatch(setCameraJobId(id)),
   setCameraJob: (job) => dispatch(setCameraJob(job)),
@@ -22,34 +20,7 @@ const mapDispatchToProps = (dispatch) => ({
 export function JobListItem({ setCameraJob, setCameraJobId, item }) {
   const { t } = useTranslation();
   const navigation = useNavigation();
-
-  // useEffect(() => {
-  //   (async () => {
-  //     if (Platform.OS !== "web") {
-  //       const {
-  //         status,
-  //       } = await ImagePicker.requestMediaLibraryPermissionsAsync();
-  //       if (status !== "granted") {
-  //         alert("Sorry, we need camera roll permissions to make this work!");
-  //       }
-  //     }
-  //   })();
-  // }, []);
-
-  // const pickImage = async () => {
-  //   let result = await ImagePicker.launchImageLibraryAsync({
-  //     mediaTypes: ImagePicker.MediaTypeOptions.All,
-  //     allowsEditing: true,
-  //     aspect: [4, 3],
-  //     quality: 1,
-  //   });
-
-  //   console.log(result);
-
-  //   if (!result.cancelled) {
-  //     //  setImage(result.uri);
-  //   }
-  // };
+  const _swipeableRow = useRef(null);
 
   const RenderRightAction = (progress, dragX) => {
     const scale = dragX.interpolate({
@@ -64,51 +35,19 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
           setCameraJobId(item.id);
           setCameraJob(item);
           navigation.navigate("MediaBrowserTab");
+          _swipeableRow.current.close();
         }}
       >
         <Animated.View
           style={{
-            // color: "white",
-            // paddingHorizontal: 10,
-            // fontWeight: "600",
             transform: [{ scale }],
           }}
         >
-          <Ionicons name="ios-camera" size={24} color="white" />
+          <Ionicons name="ios-camera" size={64} color="white" />
         </Animated.View>
       </TouchableOpacity>
     );
   };
-  // const RenderLeftAction = (progress, dragX) => {
-  //   const scale = dragX.interpolate({
-  //     inputRange: [0, 100],
-  //     outputRange: [0, 1],
-  //     extrapolate: "clamp",
-  //   });
-
-  //   return (
-  //     <TouchableOpacity
-  //       style={[styles.swipe_view, styles.swipe_view_blue]}
-  //       onPress={() => {
-  //         setCameraJobId(item.id);
-  //         setCameraJob(item);
-  //         navigation.push("MediaBrowser");
-  //         //pickImage(item.id);
-  //       }}
-  //     >
-  //       <Animated.Text
-  //         style={{
-  //           // color: "white",
-  //           // paddingHorizontal: 10,
-  //           // fontWeight: "600",
-  //           transform: [{ scale }],
-  //         }}
-  //       >
-  //         Add
-  //       </Animated.Text>
-  //     </TouchableOpacity>
-  //   );
-  // };
 
   const onPress = () => {
     navigation.push("JobDetail", {
@@ -119,8 +58,9 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
 
   return (
     <Swipeable
-      //  renderLeftActions={RenderLeftAction}
+      ref={_swipeableRow}
       renderRightActions={RenderRightAction}
+      shouldCancelWhenOutside
     >
       <TouchableOpacity onPress={onPress}>
         <ListItem>