Added login and logout

components/Buttons/create-time-ticket-button.component.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Text } from "react-native";
+import { Button } from "react-native-paper";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+
+// const mapDispatchToProps = (dispatch) => ({
+//   signOut: () => dispatch(employeeSignOut()),
+// });
+
+export function AddTimeTicketButton({ doOnPress }) {
+  const { t } = useTranslation();
+  return (
+    <Button
+      mode="text"
+      compact={true}
+      onPress={() => doOnPress()}
+      icon="plus"
+    >
+    <Text style={{fontSize: 12}}>{t("timeticketbrowser.actions.ticket")}</Text> 
+    </Button>
+  );
+}
+export default connect(null, null)(AddTimeTicketButton);

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { Text } from "react-native";
+import { Button } from "react-native-paper";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { employeeSignOut } from "../../redux/employee/employee.actions";
+
+const mapDispatchToProps = (dispatch) => ({
+  signOut: () => dispatch(employeeSignOut()),
+});
+
+export function SignOutButton({ signOut }) {
+  const { t } = useTranslation();
+  return (
+    <Button
+      mode="text"
+      compact={true}
+      onPress={() => signOut()}
+      icon="logout"
+    >
+    <Text style={{fontSize: 12}}>{t("general.actions.logout")}</Text> 
+    </Button>
+  );
+}
+export default connect(null, mapDispatchToProps)(SignOutButton);

components/screen-ap-time-ticket-list/screen-ap-time-ticket-list.component.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { View, Text } from "react-native";
+
+export default function ScreenApTimeTicketList() {
+  return (
+    <View>
+      <Text>Time Ticket List goes here</Text>
+      
+    </View>
+  );
+}

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

@@ -10,11 +10,10 @@ import { createStructuredSelector } from "reselect";
 import {
   selectCurrentEmployee,
   selectSigningIn,
-  selectSignInError
+  selectSignInError,
 } from "../../redux/employee/employee.selectors";
 
 import ErrorDisplay from "../error-display/error-display.component";
-// import Timer from "../../util/timer";
 
 const mapStateToProps = createStructuredSelector({
   currentEmployee: selectCurrentEmployee,
@@ -22,15 +21,18 @@ const mapStateToProps = createStructuredSelector({
   signingError: selectSignInError,
 });
 
-// JF add prop functions to call dispatch with actions
 const mapDispatchToProps = (dispatch) => ({
-  employeeSignInStart: (employeeId, pin) => dispatch(employeeSignInStart({ employeeId, pin })),
+  employeeSignInStart: (employeeId, pin) =>
+    dispatch(employeeSignInStart({ employeeId, pin })),
 });
 
-export function EmployeeSignIn({currentEmployee,signingError, signingIn, employeeSignInStart }) {
+export function EmployeeSignIn({
+  signingError,
+  signingIn,
+  employeeSignInStart,
+}) {
   const { t } = useTranslation();
 
-  //TODO add call to dispatch action
   const formSubmit = (values) => {
     const { employeeId, pin } = values;
     employeeSignInStart(employeeId, pin);
@@ -38,7 +40,6 @@ export function EmployeeSignIn({currentEmployee,signingError, signingIn, employe
 
   return (
     <View style={localStyles.content}>
-      {/* {currentEmployee ? <Redirect to={`/timeticketbrowser/landing`} /> : null} */}
       <View style={localStyles.signInContainer}>
         <Formik
           initialValues={{ employeeId: "", pin: "" }}
@@ -65,9 +66,7 @@ export function EmployeeSignIn({currentEmployee,signingError, signingIn, employe
                 value={values.pin}
                 style={[localStyles.input]}
               />
-              {signingError && (
-              <ErrorDisplay errorMessage={signingError} />
-            )}
+              {signingError && <ErrorDisplay errorMessage={signingError} />}
               <Button
                 mode="outlined"
                 loading={signingIn}

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

@@ -19,6 +19,9 @@ import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
+
+import { selectCurrentEmployee } from "../../redux/employee/employee.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";
@@ -28,6 +31,9 @@ import ScreenSplash from "../screen-splash/screen-splash.component";
 
 //TODO Inprogress JF add import for screens for time ticket browser here
 import EmployeeSignIn from "../screen-employee-sign-in/screen-employee-sign-in.component";
+import ScreenApTimeTicketList from "../screen-ap-time-ticket-list/screen-ap-time-ticket-list.component";
+import SignOutButton from "../Buttons/employee-sign-out-button.component";
+import AddTimeTicketButton from "../Buttons/create-time-ticket-button.component";
 
 const ActiveJobStack = createNativeStackNavigator();
 const MoreStack = createNativeStackNavigator();
@@ -51,6 +57,10 @@ const mapDispatchToProps = (dispatch) => ({
   setCameraJob: (job) => dispatch(setCameraJob(job)),
 });
 
+const mapStateToProps2 = createStructuredSelector({
+  currentEmployee: selectCurrentEmployee,
+});
+
 const JobsTabNavigator = connect(
   mapStateToProps,
   mapDispatchToProps
@@ -111,22 +121,44 @@ const MoreStackNavigator = () => (
 );
 
 //ADDED JF TimeTicketBrowserStackNavigator for navigating the stack
-const TimeTicketBrowserStackNavigator = () => (
-  <TimeTicketBrowserStack.Navigator initialRouteName="TimeTicketBrowser">
-    <TimeTicketBrowserStack.Screen
-      name="EmployeeSignIn"
-      options={() => ({
-        title: i18n.t("employeesignin.titles.signin"),
-      })}
-      component={EmployeeSignIn}
-    />
-    {/* <TimeTicketBrowserStack.Screen
-      name="TimeTicketBrowser"
-      options={{ title: i18n.t("timeticketbrowser.titles.timeticketbrowsertab") }}
-      component={ScreenMediaBrowser}
-    /> */}
-  </TimeTicketBrowserStack.Navigator>
-);
+const TimeTicketBrowserStackNavigator = connect(
+  mapStateToProps2,
+  mapDispatchToProps
+)(({ currentEmployee }) => {
+  return (
+    <TimeTicketBrowserStack.Navigator>
+      {currentEmployee === null ? (
+        <TimeTicketBrowserStack.Screen
+          name="EmployeeSignIn"
+          options={() => ({ title: i18n.t("employeesignin.titles.signin") })}
+          component={EmployeeSignIn}
+        />
+      ) : currentEmployee.authorized ? (
+        <TimeTicketBrowserStack.Screen
+          name="TimeTicketBrowser"
+          options={{
+            title: i18n.t("timeticketbrowser.titles.timeticketbrowsertab"),
+            headerRight: () => (
+              <>
+                <AddTimeTicketButton />
+                <SignOutButton />
+              </>
+            ),
+          }}
+          component={ScreenApTimeTicketList}
+        />
+      ) : (
+        <TimeTicketBrowserStack.Screen
+          name="EmployeeSignIn"
+          options={() => ({
+            title: i18n.t("employeesignin.titles.signin"),
+          })}
+          component={EmployeeSignIn}
+        />
+      )}
+    </TimeTicketBrowserStack.Navigator>
+  );
+});
 
 const BottomTabsNavigator = () => (
   <BottomTabs.Navigator
@@ -140,7 +172,8 @@ const BottomTabsNavigator = () => (
           iconName = "ios-settings";
         } else if (route.name === "MediaBrowserTab") {
           iconName = "ios-camera";
-        } else if (route.name === "TimeTicketBrowserTab") {//ADDED JF check for route.name for TimeTicketBrowserTab. Also icon ios-stopwatch-outline
+        } else if (route.name === "TimeTicketBrowserTab") {
+          //ADDED JF check for route.name for TimeTicketBrowserTab. Also icon ios-stopwatch-outline
           iconName = "ios-stopwatch-outline";
         } else {
           //iconName = "customerservice";

redux/employee/employee.actions.js

@@ -17,5 +17,4 @@ export const employeeSignInFailure = (error) => ({
 
 export const employeeSignOut = () => ({
   type: EmployeeActionTypes.EMPLOYEE_SIGN_OUT,
-  payload: error,
 });

redux/employee/employee.selectors.js

@@ -4,7 +4,7 @@ const selectEmployee = (state) => state.employee;
 
 export const selectCurrentEmployee = createSelector(
     [selectEmployee],
-    (employee) => employee.currentEmployee.technician
+    (employee) => employee.currentEmployee
   );
 export const selectSigningIn = createSelector(
     [selectEmployee],

redux/root.reducer.js

@@ -13,7 +13,6 @@ const persistConfig = {
   blacklist: ["user"],
 };
 
-//ADDED JF employee: employeeReducer
 const rootReducer = combineReducers({
   user: userReducer,
   app: appReducer,

translations/en-US/common.json

@@ -11,7 +11,8 @@
 		},
 		"general": {
 			"actions": {
-				"signout": "Sign Out"
+				"signout": "Sign Out",
+				"logout": "Logout"
 			},
 			"labels": {
 				"na": "N/A"
@@ -326,7 +327,8 @@
 			"actions": {
 				"refresh": "Refresh",
 				"upload": "Upload",
-				"activetickets": "Time Tickets",
+				"ticket":"Ticket",
+				"timetickets": "Time Tickets",
 				"detail": "Time Ticket Details",
 				"notickets": "There are no active tickets."
 			},

translations/es-MX/common.json

@@ -11,7 +11,8 @@
 		},
 		"general": {
 			"actions": {
-				"signout": ""
+				"signout": "",
+				"logout": ""
 			},
 			"labels": {
 				"na": ""
@@ -326,7 +327,8 @@
 			"actions": {
 				"refresh": "",
 				"upload": "",
-				"activetickets": "",
+				"ticket": "",
+				"timetickets": "",
 				"detail": "",
 				"notickets": ""
 			},

translations/fr-CA/common.json

@@ -11,7 +11,8 @@
 		},
 		"general": {
 			"actions": {
-				"signout": ""
+				"signout": "",
+				"logout": ""
 			},
 			"labels": {
 				"na": ""
@@ -326,7 +327,8 @@
 			"actions": {
 				"refresh": "",
 				"upload": "",
-				"activetickets": "",
+				"ticket": "",
+				"timetickets": "",
 				"detail": "",
 				"notickets": ""
 			},