Added navigation to application, internationalization, and sign in screen.

2020-08-11 16:42:26 -07:00
parent c7344dd7a2
commit 767233cea3
19 changed files with 1258 additions and 161 deletions
--- a/components/screen-main/screen-main.component.jsx
+++ b/components/screen-main/screen-main.component.jsx
@@ -0,0 +1,113 @@
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { NavigationContainer } from "@react-navigation/native";
+import { createStackNavigator } from "@react-navigation/stack";
+import { createDrawerNavigator } from "@react-navigation/drawer";
+import i18n from "i18next";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { StatusBar as rnStatusBar, StyleSheet } from "react-native";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { emailSignInStart, signOutStart } 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 ScreenMessagingConversation from "../screen-messaging-conversation/screen-messaging-conversation.component";
+import ScreenMessagingList from "../screen-messaging-list/screen-messaging-list.component";
+import ScreenSignIn from "../screen-sign-in/screen-sign-in.component";
+import ScreenSettingsComponent from "../screen-settings/screen-settings.component";
+const JobStack = createStackNavigator();
+const MessagingStack = createStackNavigator();
+const BottomTabs = createBottomTabNavigator();
+const Drawer = createDrawerNavigator();
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  emailSignInStart: (email, password) =>
+    dispatch(emailSignInStart({ email, password })),
+  signOutStart: () => dispatch(signOutStart()),
+});
+
+const JobStackNavigator = () => (
+  <JobStack.Navigator>
+    <JobStack.Screen
+      name="JobList"
+      options={({ route }) => ({
+        title: `${i18n.t("joblist.labels.activejobs")} ${
+          JSON.stringify(route.params) | "X"
+        }`,
+      })}
+      component={ScreenJobList}
+    />
+    <JobStack.Screen name="JobDetail" component={ScreenJobDetail} />
+  </JobStack.Navigator>
+);
+
+const MessagingStackNavigator = () => (
+  <MessagingStack.Navigator>
+    <MessagingStack.Screen
+      name="MessagingList"
+      component={ScreenMessagingList}
+    />
+    <MessagingStack.Screen
+      name="MessagingConversation"
+      component={ScreenMessagingConversation}
+    />
+  </MessagingStack.Navigator>
+);
+
+const BottomTabsNavigator = () => (
+  <BottomTabs.Navigator>
+    <BottomTabs.Screen
+      name="JobTab"
+      options={{ title: i18n.t("joblist.titles.jobtab") }}
+      component={JobStackNavigator}
+    />
+    <BottomTabs.Screen
+      name="MessagingTab"
+      options={{ title: i18n.t("messaging.titles.messagingtab") }}
+      component={MessagingStackNavigator}
+    />
+  </BottomTabs.Navigator>
+);
+
+const DrawerNavigator = () => (
+  <Drawer.Navigator>
+    <Drawer.Screen name="Home" component={BottomTabsNavigator} />
+    <Drawer.Screen
+      name="Settings"
+      options={{ title: i18n.t("settings.titles.settings") }}
+      component={ScreenSettingsComponent}
+    />
+  </Drawer.Navigator>
+);
+
+export function ScreenMainComponent({ currentUser }) {
+  const { t } = useTranslation();
+  return (
+    <NavigationContainer>
+      {currentUser.authorized ? <DrawerNavigator /> : <ScreenSignIn />}
+    </NavigationContainer>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ScreenMainComponent);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingTop: Platform.OS === "android" ? rnStatusBar.currentHeight : 0,
+  },
+});