Code Cleanup & Minor Bug Fixes

App.js

@@ -19,7 +19,7 @@ Sentry.init({
   dsn:
     "https://8d6c3de1940a4e4f8b81cf4d2150bdea@o492140.ingest.sentry.io/5558869",
   enableInExpoDevelopment: true,
-  debug: true, // Sentry will try to print out useful debugging information if something goes wrong with sending an event. Set this to `false` in production.
+  // debug: true, // Sentry will try to print out useful debugging information if something goes wrong with sending an event. Set this to `false` in production.
 });
 
 Sentry.Native.nativeCrash();
@@ -38,11 +38,6 @@ export default class App extends React.Component {
       ...Ionicons.font,
     });
     this.setState({ isReady: true });
-    // await FileSystem.makeDirectoryAsync(
-    //   FileSystem.documentDirectory + "photos"
-    // ).catch((e) => {
-    //   console.log(e, "Directory already exists");
-    // });
   }
 
   render() {

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({
+const mapStateToProps = createStructuredSelector({});
-  //currentUser: selectCurrentUser
-});
 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();
-
+  const _swipeableRow = useRef(null);
-  // 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 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>

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

@@ -2,16 +2,15 @@ import { useQuery } from "@apollo/client";
 import { Tab, Tabs } from "native-base";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Text } from "react-native";
 import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
 import ErrorDisplay from "../error-display/error-display.component";
-import JobTombstone from "../job-tombstone/job-tombstone.component";
-import LoadingDisplay from "../loading-display/loading-display.component";
-import JobNotes from "../job-notes/job-notes.component";
 import JobDocuments from "../job-documents/job-documents.component";
 import JobLines from "../job-lines/job-lines.component";
+import JobNotes from "../job-notes/job-notes.component";
+import JobTombstone from "../job-tombstone/job-tombstone.component";
+import LoadingDisplay from "../loading-display/loading-display.component";
 
-export default function ScreenJobDetail({ navigation, route, ...restProps }) {
+export default function ScreenJobDetail({ route }) {
   const {
     params: { jobId },
   } = route;

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

@@ -4,6 +4,7 @@ import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
 import i18n from "i18next";
 import React, { useEffect } from "react";
+import { SafeAreaView } from "react-native-safe-area-context";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
@@ -15,21 +16,14 @@ import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
-//import ScreenCamera from "../screen-camera/screen-camera";
 import ScreenJobDetail from "../screen-job-detail/screen-job-detail.component";
 import ScreenJobList from "../screen-job-list/screen-job-list.component";
 import ScreenMediaBrowser from "../screen-media-browser/screen-media-browser.component";
-//import ScreenMediaCache from "../screen-media-cache/screen-media-cache.component";
-//import ScreenMessagingConversation from "../screen-messaging-conversation/screen-messaging-conversation.component";
-//import ScreenMessagingList from "../screen-messaging-list/screen-messaging-list.component";
 import ScreenSettingsComponent from "../screen-settings/screen-settings.component";
 import ScreenSignIn from "../screen-sign-in/screen-sign-in.component";
 import ScreenSplash from "../screen-splash/screen-splash.component";
 
 const JobStack = createStackNavigator();
-//const CameraStack = createStackNavigator();
-//const MessagingStack = createStackNavigator();
-//const MediaCacheStack = createStackNavigator();
 const MoreStack = createStackNavigator();
 const BottomTabs = createBottomTabNavigator();
 const MediaBrowserStack = createStackNavigator();
@@ -64,38 +58,9 @@ const JobStackNavigator = () => (
           i18n.t("joblist.labels.detail"),
       })}
     />
-    {/* <JobStack.Screen
-      name="MediaBrowser"
-      component={ScreenMediaBrowser}
-      // options={({ route }) => ({
-      //   title:
-      //     (route.params && route.params.title) ||
-      //     i18n.t("joblist.labels.detail"),
-      // })}
-    /> */}
   </JobStack.Navigator>
 );
 
-// const CameraStackNavigator = () => (
-//   <CameraStack.Navigator initialRouteName="TabCameraScreen">
-//     <CameraStack.Screen
-//       name="TabCameraScreen"
-//       options={{ headerShown: false }}
-//       component={ScreenCamera}
-//     />
-//   </CameraStack.Navigator>
-// );
-
-// const MediaCacheStackNavigator = () => (
-//   <MediaCacheStack.Navigator initialRouteName="TabMediaCache">
-//     <MediaCacheStack.Screen
-//       name="MediaCache"
-//       options={{ title: i18n.t("mediacache.titles.mediacachetab") }}
-//       component={ScreenMediaCache}
-//     />
-//   </MediaCacheStack.Navigator>
-// );
-
 const MediaBrowserStackNavigator = () => (
   <MediaBrowserStack.Navigator initialRouteName="MediaBrowser">
     <MediaBrowserStack.Screen
@@ -106,19 +71,6 @@ const MediaBrowserStackNavigator = () => (
   </MediaBrowserStack.Navigator>
 );
 
-// const MessagingStackNavigator = () => (
-//   <MessagingStack.Navigator>
-//     <MessagingStack.Screen
-//       name="MessagingList"
-//       component={ScreenMessagingList}
-//     />
-//     <MessagingStack.Screen
-//       name="MessagingConversation"
-//       component={ScreenMessagingConversation}
-//     />
-//   </MessagingStack.Navigator>
-// );
-
 const MoreStackNavigator = () => (
   <MoreStack.Navigator>
     <MoreStack.Screen
@@ -139,16 +91,9 @@ const BottomTabsNavigator = () => (
         let iconName;
         if (route.name === "JobTab") {
           iconName = "ios-list";
-        } else if (route.name === "MessagingTab") {
-          iconName = "ios-chatboxes";
         } else if (route.name === "MoreTab") {
           iconName = "ios-settings";
-        } else if (route.name === "CameraTab") {
+        } else if (route.name === "MediaBrowserTab") {
-          iconName = "ios-camera";
-        } else if (
-          route.name === "MediaCacheTab" ||
-          route.name === "MediaBrowserTab"
-        ) {
           iconName = "ios-photos";
         } else {
           //iconName = "customerservice";
@@ -172,20 +117,6 @@ const BottomTabsNavigator = () => (
       options={{ title: i18n.t("mediabrowser.titles.mediabrowsertab") }}
       component={MediaBrowserStackNavigator}
     />
-    {/* <BottomTabs.Screen
-      name="MediaCacheTab"
-      options={{ title: i18n.t("mediacache.titles.mediacachetab") }}
-      component={MediaCacheStackNavigator}
-    /> */}
-    {/* <BottomTabs.Screen
-      name="CameraTab"
-      options={{ title: i18n.t("camera.titles.cameratab") }}
-      component={CameraStackNavigator}
-    />   <BottomTabs.Screen
-      name="MessagingTab"
-      options={{ title: i18n.t("messaging.titles.messagingtab") }}
-      component={MessagingStackNavigator}
-    /> */}
     <BottomTabs.Screen
       name="MoreTab"
       options={{ title: i18n.t("more.titles.moretab") }}
@@ -204,6 +135,7 @@ export function ScreenMainComponent({
   }, [checkUserSession]);
 
   return (
+    <SafeAreaView style={{ flex: 1 }}>
       <NavigationContainer>
         {currentUser.authorized === null ? (
           <ScreenSplash />
@@ -217,6 +149,7 @@ export function ScreenMainComponent({
           <ScreenSignIn />
         )}
       </NavigationContainer>
+    </SafeAreaView>
   );
 }
 export default connect(

components/screen-media-browser/screen-media-browser.component.jsx

@@ -3,6 +3,7 @@ import { AssetsSelector } from "expo-images-picker";
 import * as MediaLibrary from "expo-media-library";
 import _ from "lodash";
 import { H3 } from "native-base";
+import plimit from "p-limit";
 import React, { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { StyleSheet, Text, View } from "react-native";
@@ -20,7 +21,6 @@ import { handleUpload } from "../../util/document-upload.utility";
 import CameraSelectJob from "../camera-select-job/camera-select-job.component";
 import UploadDeleteSwitch from "../upload-delete-switch/upload-delete-switch.component";
 import UploadProgress from "../upload-progress/upload-progress.component";
-import plimit from "p-limit";
 
 const limit = plimit(2);
 
@@ -31,7 +31,6 @@ const mapStateToProps = createStructuredSelector({
   deleteAfterUpload: selectDeleteAfterUpload,
 });
 
-export default connect(mapStateToProps, null)(ImageBrowserScreen);
 export function ImageBrowserScreen({
   currentUser,
   bodyshop,
@@ -49,6 +48,7 @@ export function ImageBrowserScreen({
   const forceRerender = useCallback(() => {
     setTick((tick) => tick + 1);
   }, []);
+
   async function handleOnSuccess(uri, id) {
     console.log("Succesful upload!", uri);
     if (deleteAfterUpload) {
@@ -70,9 +70,6 @@ export function ImageBrowserScreen({
       //Appears to work for android.
       //iOS provides the filename, android doe snot.
       filename = p.filename || p.uri.split("/").pop();
-
-      //File name for ios
-
       actions.push(
         limit(
           handleUpload(
@@ -130,7 +127,7 @@ export function ImageBrowserScreen({
             //maxSelections: 5,
             margin: 3,
             portraitCols: 4,
-            landscapeCols: 5,
+            landscapeCols: 6,
             widgetWidth: 100,
             widgetBgColor: "white",
             selectedBgColor: "#adadad",
@@ -209,3 +206,5 @@ const styles = StyleSheet.create({
 function handleOnError(...props) {
   console.log("HandleOnError", props);
 }
+
+export default connect(mapStateToProps, null)(ImageBrowserScreen);

components/screen-settings/screen-settings.component.jsx

@@ -1,15 +1,12 @@
 import React from "react";
-import { View, Text, SafeAreaView, Button } from "react-native";
+import { Button, View } from "react-native";
-import SignOutButton from "../sign-out-button/sign-out-button.component";
 import { purgeStoredState } from "redux-persist";
+import SignOutButton from "../sign-out-button/sign-out-button.component";
 export default function ScreenSettingsComponent() {
   return (
-    <SafeAreaView>
     <View>
-        <Text>The settings Screen</Text>
       <SignOutButton />
       <Button title="Purge State" onPress={() => purgeStoredState()} />
     </View>
-    </SafeAreaView>
   );
 }

components/styles.js

@@ -17,8 +17,8 @@ export default StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     width: 100,
-    marginTop: 5,
+    // marginTop: 5,
-    marginBottom: 5,
+    //marginBottom: 5,
   },
   swipe_view_blue: {
     backgroundColor: "dodgerblue",

components/upload-delete-switch/upload-delete-switch.component.jsx

@@ -7,19 +7,19 @@ import { toggleDeleteAfterUpload } from "../../redux/app/app.actions";
 import { selectDeleteAfterUpload } from "../../redux/app/app.selectors";
 
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
   deleteAfterUpload: selectDeleteAfterUpload,
 });
+
 const mapDispatchToProps = (dispatch) => ({
   toggleDeleteAfterUpload: () => dispatch(toggleDeleteAfterUpload()),
 });
-export default connect(mapStateToProps, mapDispatchToProps)(UploadDeleteSwitch);
 
 export function UploadDeleteSwitch({
   deleteAfterUpload,
   toggleDeleteAfterUpload,
 }) {
   const { t } = useTranslation();
+
   return (
     <View style={styles.container}>
       <Text style={styles.text}>
@@ -47,3 +47,4 @@ const styles = StyleSheet.create({
     flex: 1,
   },
 });
+export default connect(mapStateToProps, mapDispatchToProps)(UploadDeleteSwitch);

redux/root.reducer.js

@@ -8,10 +8,8 @@ import userReducer from "./user/user.reducer";
 const persistConfig = {
   key: "root",
   storage: AsyncStorage,
-  whitelist: ["photos"],
+  // whitelist: ["photos"],
-  blacklist: ["user", "app"],
+  blacklist: ["user"],
-  //   whitelist: ["messaging", "tech", "application"],
-  //   blacklist: ["user", "email", "modals"],
 };
 
 const rootReducer = combineReducers({

redux/store.js

@@ -1,8 +1,7 @@
-import { createStore, applyMiddleware, compose } from "redux";
+import { applyMiddleware, compose, createStore } from "redux";
 import { persistStore } from "redux-persist";
-import { createLogger } from "redux-logger";
+//import { createLogger } from "redux-logger";
 import createSagaMiddleware from "redux-saga";
-
 import rootReducer from "./root.reducer";
 import rootSaga from "./root.saga";
 
@@ -35,4 +34,4 @@ sagaMiddleWare.run(rootSaga);
 
 export const persistor = persistStore(store);
 
-export default { store, persistStore };
+export default { store };