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

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { View, Text } from "react-native";
+
+export default function ScreenJobDetail({ navigation, ...restProps }) {
+  return (
+    <View>
+      <Text>The is the detail of the job.</Text>
+    </View>
+  );
+}

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { View, Text } from "react-native";
+import { useTranslation } from "react-i18next";
+export default function ScreenJobList({ navigation }) {
+  const { t } = useTranslation();
+  return (
+    <View>
+      <Text>This is the Job List.</Text>
+      <Text>{t("joblist.labels.activejobs")}</Text>
+    </View>
+  );
+}

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,
+  },
+});

components/screen-messaging-conversation/screen-messaging-conversation.component.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { View, Text } from "react-native";
+
+export default function ScreenMessagingConversation({ navigation }) {
+  return (
+    <View>
+      <Text>The detailed conversation</Text>
+    </View>
+  );
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { View, Text } from "react-native";
+
+export default function ScreenMessagingList() {
+  return (
+    <View>
+      <Text>A list of conversations.</Text>
+    </View>
+  );
+}

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

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

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

@@ -0,0 +1,101 @@
+import { Formik } from "formik";
+import {
+  Input,
+  Header,
+  Item,
+  Label,
+  Form,
+  Button,
+  Text,
+  Container,
+  Content,
+} from "native-base";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { SafeAreaView, TextInput, View } from "react-native";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { emailSignInStart, signOutStart } from "../../redux/user/user.actions";
+import { selectCurrentUser } from "../../redux/user/user.selectors";
+import { StyleSheet } from "react-native";
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  emailSignInStart: (email, password) =>
+    dispatch(emailSignInStart({ email, password })),
+});
+
+export function SignIn({ emailSignInStart }) {
+  const { t } = useTranslation();
+
+  const formSubmit = (values) => {
+    const { email, password } = values;
+    emailSignInStart(email, password);
+  };
+
+  return (
+    <Container>
+      <Content
+        padder
+        contentContainerStyle={styles.contentContainer}
+        style={styles.content}
+      >
+        <Formik
+          initialValues={{ email: "", password: "" }}
+          onSubmit={formSubmit}
+        >
+          {({ handleChange, handleBlur, handleSubmit, values }) => (
+            <View>
+              <Form>
+                <Item>
+                  <Label>{t("signin.fields.email")}</Label>
+                  <Input
+                    autoCapitalize="none"
+                    keyboardType="email-address"
+                    onChangeText={handleChange("email")}
+                    onBlur={handleBlur("email")}
+                    value={values.email}
+                  />
+                </Item>
+
+                <Item>
+                  <Label>{t("signin.fields.password")}</Label>
+                  <Input
+                    secureTextEntry={true}
+                    onChangeText={handleChange("password")}
+                    onBlur={handleBlur("password")}
+                    value={values.password}
+                  />
+                </Item>
+
+                <Button full onPress={handleSubmit}>
+                  <Text>{t("signin.actions.signin")}</Text>
+                </Button>
+              </Form>
+            </View>
+          )}
+        </Formik>
+      </Content>
+    </Container>
+  );
+}
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    justifyContent: "center",
+    flex: 1,
+  },
+  content: {
+    paddingBottom: 150,
+    // flex: 1,
+    // backgroundColor: "#fff",
+    // alignItems: "center",
+    //justifyContent: "space-between",
+    // //justifyContent: "center",
+  },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(SignIn);

components/sign-out-button/sign-out-button.component.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "react-native";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { signOutStart } from "../../redux/user/user.actions";
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+  signOutStart: () => dispatch(signOutStart()),
+});
+
+export function SignOutButton({ signOutStart }) {
+  const { t } = useTranslation();
+  return (
+    <Button
+      onPress={() => signOutStart()}
+      title={t("general.actions.signout")}
+    />
+  );
+}
+export default connect(mapStateToProps, mapDispatchToProps)(SignOutButton);

components/signin.component.jsx

@@ -1,43 +0,0 @@
-import React from "react";
-import { View, Text, Button } from "react-native";
-import { createStructuredSelector } from "reselect";
-
-import {
-  selectBodyshop,
-  selectCurrentUser,
-} from "../redux/user/user.selectors";
-import { emailSignInStart, signOutStart } from "../redux/user/user.actions";
-import { connect } from "react-redux";
-
-const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
-  currentUser: selectCurrentUser,
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  emailSignInStart: (email, password) =>
-    dispatch(emailSignInStart({ email, password })),
-  signOutStart: () => dispatch(signOutStart()),
-});
-
-export function SignIn({
-  bodyshop,
-  currentUser,
-  emailSignInStart,
-  signOutStart,
-}) {
-  return (
-    <View>
-      <Text>The secondary view</Text>
-      <Text>{JSON.stringify(currentUser)}</Text>
-      <Button title="Testing." onPress={() => console.log("test")} />
-      <Button
-        title="Sign In"
-        onPress={() => emailSignInStart("patrick@imex.dev", "patrick")}
-      />
-      <Button title="Sign Out" onPress={() => signOutStart()} />
-    </View>
-  );
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(SignIn);