Rename JSX to JS.

components/screen-main/screen-main.component.js

@@ -0,0 +1,218 @@
+import { Ionicons } from "@expo/vector-icons";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { NavigationContainer } from "@react-navigation/native";
+import { createStackNavigator } from "@react-navigation/stack";
+import { onAuthStateChanged } from "firebase/auth";
+import i18n from "i18next";
+import moment from "moment";
+import React, { useEffect } from "react";
+import { Button } from "react-native-paper";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { logImEXEvent } from "../../firebase/firebase.analytics";
+import { auth } from "../../firebase/firebase.utils";
+import { setCameraJob, setCameraJobId } from "../../redux/app/app.actions";
+import {
+  emailSignInStart,
+  signInSuccess,
+  signOutStart,
+  unauthorizedUser,
+} from "../../redux/user/user.actions";
+import {
+  selectBodyshop,
+  selectCurrentUser,
+} from "../../redux/user/user.selectors";
+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 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 MoreStack = createStackNavigator();
+const BottomTabs = createBottomTabNavigator();
+const MediaBrowserStack = createStackNavigator();
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  signInSuccess: (user) => dispatch(signInSuccess(user)),
+  unauthorizedUser: () => dispatch(unauthorizedUser()),
+  emailSignInStart: (email, password) =>
+    dispatch(emailSignInStart({ email, password })),
+  signOutStart: () => dispatch(signOutStart()),
+  setCameraJobId: (id) => dispatch(setCameraJobId(id)),
+  setCameraJob: (job) => dispatch(setCameraJob(job)),
+});
+
+const JobStackNavigator = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(({ setCameraJobId, setCameraJob }) => (
+  <JobStack.Navigator initialRouteName="JobList">
+    <JobStack.Screen
+      name="JobList"
+      options={() => ({
+        title: i18n.t("joblist.labels.activejobs"),
+      })}
+      component={ScreenJobList}
+    />
+    <JobStack.Screen
+      name="JobDetail"
+      component={ScreenJobDetail}
+      options={({ navigation, route }) => ({
+        title:
+          (route.params && route.params.title) ||
+          i18n.t("joblist.labels.detail"),
+        // eslint-disable-next-line react/display-name
+        headerRight: () => (
+          <Button
+            onPress={() => {
+              logImEXEvent("imexmobile_setcamerajobid_jobheader");
+              setCameraJobId(route.params.jobId);
+              setCameraJob(route.params.job);
+              navigation.navigate("MediaBrowserTab");
+            }}
+          >
+            <Ionicons name="ios-add" size={32} color="dodgerblue" />
+          </Button>
+        ),
+      })}
+    />
+  </JobStack.Navigator>
+));
+
+const MediaBrowserStackNavigator = () => (
+  <MediaBrowserStack.Navigator initialRouteName="MediaBrowser">
+    <MediaBrowserStack.Screen
+      name="MediaBrowser"
+      options={{ title: i18n.t("mediabrowser.titles.mediabrowsertab") }}
+      component={ScreenMediaBrowser}
+    />
+  </MediaBrowserStack.Navigator>
+);
+
+const MoreStackNavigator = () => (
+  <MoreStack.Navigator>
+    <MoreStack.Screen
+      name="Settings"
+      options={{
+        title: i18n.t("settings.titles.settings"),
+      }}
+      component={ScreenSettingsComponent}
+    />
+  </MoreStack.Navigator>
+);
+
+const BottomTabsNavigator = () => (
+  <BottomTabs.Navigator
+    screenOptions={({ route }) => ({
+      // tabBarActiveTintColor: "dodgerblue",
+      // tabBarInactiveTintColor: "slategrey",
+      // tabBarStyle: [
+      //   {
+      //     display: "flex",
+      //   },
+      //   null,
+      // ],
+
+      // eslint-disable-next-line react/display-name
+      tabBarIcon: ({ color, size }) => {
+        let iconName;
+        if (route.name === "JobTab") {
+          iconName = "ios-list";
+        } else if (route.name === "MoreTab") {
+          iconName = "ios-settings";
+        } else if (route.name === "MediaBrowserTab") {
+          iconName = "ios-camera";
+        } else {
+          //iconName = "customerservice";
+        }
+
+        return <Ionicons name={iconName} size={size} color={color} />;
+      },
+    })}
+  >
+    <BottomTabs.Screen
+      name="JobTab"
+      options={{
+        title: i18n.t("joblist.titles.jobtab"),
+
+        headerShown: false,
+      }}
+      component={JobStackNavigator}
+    />
+    <BottomTabs.Screen
+      name="MediaBrowserTab"
+      options={{
+        title: i18n.t("mediabrowser.titles.mediabrowsertab"),
+        headerShown: false,
+      }}
+      component={MediaBrowserStackNavigator}
+    />
+    <BottomTabs.Screen
+      name="MoreTab"
+      options={{ title: i18n.t("more.titles.moretab"), headerShown: false }}
+      component={MoreStackNavigator}
+    />
+  </BottomTabs.Navigator>
+);
+
+export function ScreenMainComponent({
+  signInSuccess,
+  unauthorizedUser,
+  currentUser,
+  bodyshop,
+}) {
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (user) => {
+      if (user) {
+        signInSuccess({
+          uid: user.uid,
+          email: user.email,
+          displayName: user.displayName,
+          photoURL: user.photoURL,
+          authorized: true,
+        });
+      } else {
+        unauthorizedUser();
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  const hasMobileAccess =
+    bodyshop &&
+    bodyshop.features &&
+    (bodyshop.features.allAccess === true ||
+      moment(bodyshop.features.mobile).isAfter(moment()));
+
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <NavigationContainer>
+        {currentUser.authorized === null ? (
+          <ScreenSplash />
+        ) : currentUser.authorized ? (
+          bodyshop && hasMobileAccess ? (
+            <BottomTabsNavigator />
+          ) : (
+            <ScreenSplash noAccess={bodyshop} />
+          )
+        ) : (
+          <ScreenSignIn />
+        )}
+      </NavigationContainer>
+    </SafeAreaView>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ScreenMainComponent);