feat: adjust signin to be able to fit notifications later on

- Signin flow is now not controlled by splash screen
- Convert some files to ts and tsx files
- Remove unused screen
- change the isAuthenticatedUser state to authState which
holds 3 different states, pending, signed_in and signed_out

Author: karlknowit

ios/Mitt Helsingborg.xcodeproj/project.pbxproj

@@ -654,7 +654,7 @@
 			);
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-MittHelsingborg-MittHelsingborgTests/Pods-MittHelsingborg-MittHelsingborgTests-frameworks.sh",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL/OpenSSL.framework/OpenSSL",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL-Universal/OpenSSL.framework/OpenSSL",
 			);
 			name = "[CP] Embed Pods Frameworks";
 			outputPaths = (
@@ -744,7 +744,7 @@
 			);
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-MittHelsingborg/Pods-MittHelsingborg-frameworks.sh",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL/OpenSSL.framework/OpenSSL",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL-Universal/OpenSSL.framework/OpenSSL",
 			);
 			name = "[CP] Embed Pods Frameworks";
 			outputPaths = (

ios/Mitt Helsingborg.xcworkspace/contents.xcworkspacedata

@@ -585,7 +585,7 @@ SPEC CHECKSUMS:
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
   FBLazyVector: 7b423f9e248eae65987838148c36eec1dbfe0b53
-  FBReactNativeSpec: e684313f7bad785e52bef46967b2161b87fa64d7
+  FBReactNativeSpec: 51246358c40fe0d0c678a8ed1ba40fbd60f8fae3
   Flipper: d3da1aa199aad94455ae725e9f3aa43f3ec17021
   Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
   Flipper-Folly: 755929a4f851b2fb2c347d533a23f191b008554c
@@ -650,4 +650,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 47660d4d544cbf2e0e1da1d1089da4066473d1e6
 
-COCOAPODS: 1.10.1
+COCOAPODS: 1.11.2

ios/Podfile.lock

@@ -73,7 +73,6 @@
     "react-native-safe-area-context": "^3.1.9",
     "react-native-screens": "^2.16.1",
     "react-native-storybook-loader": "^2.0.4",
-    "react-native-swiper": "^1.6.0",
     "react-native-tab-view": "^2.15.2",
     "react-native-vector-icons": "^7.1.0",
     "react-native-web": "^0.14.10",

package.json

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from "react";
+import { createStackNavigator } from "@react-navigation/stack";
+import Onboarding from "../screens/onboarding";
+import LoginScreen from "../screens/LoginScreen";
+
+import StorageService, {
+  ONBOARDING_DISABLED,
+} from "../services/StorageService";
+
+const Stack = createStackNavigator();
+
+const AuthStack = (): JSX.Element | null => {
+  const [initialRouteName, setInitialRouteName] = useState<
+    string | undefined
+  >();
+
+  useEffect(() => {
+    const trySetInitialRouteName = async () => {
+      try {
+        const isOnboardingDisabled = await StorageService.getData(
+          ONBOARDING_DISABLED
+        );
+        setInitialRouteName(isOnboardingDisabled ? "Login" : "Onboarding");
+      } catch (error) {
+        setInitialRouteName("Onboarding");
+      }
+    };
+
+    void trySetInitialRouteName();
+  }, []);
+
+  if (initialRouteName === undefined) return null;
+
+  return (
+    <Stack.Navigator
+      initialRouteName={initialRouteName}
+      screenOptions={{ headerShown: false }}
+    >
+      <Stack.Screen name="Onboarding" component={Onboarding} />
+      <Stack.Screen name="Login" component={LoginScreen} />
+    </Stack.Navigator>
+  );
+};
+
+export default AuthStack;

source/navigator/AuthStack.js

@@ -1,17 +1,21 @@
-import React, { useContext } from 'react';
-import env from 'react-native-config';
-import styled from 'styled-components/native';
+import React, { useContext } from "react";
+import env from "react-native-config";
+import styled from "styled-components/native";
 import {
   NavigationHelpersContext,
   useNavigationBuilder,
   StackRouter,
   DefaultRouterOptions,
-} from '@react-navigation/native';
-import { Modal } from 'react-native';
-import AuthContext from '../store/AuthContext';
-import Card from '../components/molecules/Card/Card';
-import Text from '../components/atoms/Text/Text';
-import useTouchActivity, { UseTouchParameters } from '../hooks/useTouchActivity';
+} from "@react-navigation/native";
+import { Modal } from "react-native";
+import AuthContext from "../store/AuthContext";
+import Card from "../components/molecules/Card/Card";
+import Text from "../components/atoms/Text/Text";
+import useTouchActivity, {
+  UseTouchParameters,
+} from "../hooks/useTouchActivity";
+
+import AUTH_STATE from "../store/types";
 
 const FlexWrapper = styled.View`
   flex: 1;
@@ -59,18 +63,18 @@ const CustomStackNavigator = ({
   children,
   screenOptions,
   contentStyle,
-}: Props) => {
+}: Props): JSX.Element[] => {
   const { state, navigation, descriptors } = useNavigationBuilder(StackRouter, {
     children,
     screenOptions,
     initialRouteName,
   });
-  const { handleLogout, isAuthenticated, handleRefreshSession } = useContext(AuthContext);
+  const { handleLogout, authState, handleRefreshSession } =
+    useContext(AuthContext);
 
   const handleEndUserSession = async () => {
-    if (isAuthenticated) {
+    if (authState === AUTH_STATE.SIGNED_IN) {
       await handleLogout();
-      navigation.navigate('Start');
     }
   };
 
@@ -99,14 +103,17 @@ const CustomStackNavigator = ({
   };
 
   const NavigatorContextComponent = (
-    <NavigationHelpersContext.Provider key="navigationHelpersContext" value={navigation}>
+    <NavigationHelpersContext.Provider
+      key="navigationHelpersContext"
+      value={navigation}
+    >
       <FlexWrapper {...panResponder.panHandlers} style={[contentStyle]}>
         {descriptors[state.routes[state.index].key].render()}
       </FlexWrapper>
     </NavigationHelpersContext.Provider>
   );
 
-  const showInactivityModal = !isActive && isAuthenticated;
+  const showInactivityModal = !isActive && authState === AUTH_STATE.SIGNED_IN;
 
   const InactivityDialogComponent = (
     <Modal
@@ -123,13 +130,16 @@ const CustomStackNavigator = ({
               <Card.Body>
                 <Card.Title>Är du fortfarande där?</Card.Title>
                 <Card.Text>
-                  Du har varit inaktiv under en längre tid, för att fortsätta använda appen behöver
-                  du göra ett aktivt val.
+                  Du har varit inaktiv under en längre tid, för att fortsätta
+                  använda appen behöver du göra ett aktivt val.
                 </Card.Text>
                 <Card.Button colorSchema="red" onClick={handleEndUserSession}>
                   <Text>Nej</Text>
                 </Card.Button>
-                <Card.Button colorSchema="green" onClick={handleContinueUserSession}>
+                <Card.Button
+                  colorSchema="green"
+                  onClick={handleContinueUserSession}
+                >
                   <Text>Ja</Text>
                 </Card.Button>
               </Card.Body>

source/navigator/AuthStack.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 import { createStackNavigator } from "@react-navigation/stack";
 import { SplashScreen, FormCaseScreen, DevFeaturesScreen } from "../screens";
 import AuthStack from "./AuthStack";
@@ -7,6 +7,9 @@ import BottomBarNavigator from "./BottomBarNavigator";
 
 import FeatureModal from "../screens/featureModalScreens/FeatureModalNavigator";
 
+import AuthContext from "../store/AuthContext";
+import AUTH_STATE from "../store/types";
+
 const MainStack = createStackNavigator();
 const RootStack = createStackNavigator();
 
@@ -17,22 +20,29 @@ const forFade = ({ current }) => ({
   },
 });
 
-const MainStackScreen = (): JSX.Element => (
-  <CustomStackNavigator
-    initialRouteName="Start"
-    screenOptions={{ headerShown: false }}
-  >
-    <>
-      <MainStack.Screen name="Start" component={SplashScreen} />
-      <MainStack.Screen
-        name="Auth"
-        component={AuthStack}
-        options={{ cardStyleInterpolator: forFade }}
-      />
+const MainStackScreen = (): JSX.Element => {
+  const { authState } = useContext(AuthContext);
+
+  if (authState === AUTH_STATE.PENDING) {
+    return <SplashScreen />;
+  }
+
+  if (authState === AUTH_STATE.SIGNED_OUT) {
+    return <AuthStack />;
+  }
+
+  return (
+    <CustomStackNavigator
+      initialRouteName="App"
+      screenOptions={{ headerShown: false }}
+    >
       <MainStack.Screen
         name="App"
         component={BottomBarNavigator}
-        options={{ cardStyleInterpolator: forFade, gestureEnabled: false }}
+        options={{
+          cardStyleInterpolator: forFade,
+          gestureEnabled: false,
+        }}
       />
       <MainStack.Screen
         name="Form"
@@ -48,12 +58,13 @@ const MainStackScreen = (): JSX.Element => (
           gestureEnabled: false,
         }}
       />
-    </>
-  </CustomStackNavigator>
-);
+    </CustomStackNavigator>
+  );
+};
 
 const RootStackScreen = (): JSX.Element => (
   <RootStack.Navigator
+    initialRouteName="Main"
     mode="modal"
     screenOptions={{
       cardStyle: { backgroundColor: "transparent" },

source/navigator/CustomStackNavigator.tsx

@@ -1,14 +1,14 @@
-import FormList from 'app/components/organisms/FormList/FormList';
-import AuthContext from 'app/store/AuthContext';
-import { CaseDispatch } from 'app/store/CaseContext';
-import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
-import styled from 'styled-components/native';
-import env from 'react-native-config';
-import { Button, Text } from '../components/atoms';
-import Header from '../components/molecules/Header';
-import ScreenWrapper from '../components/molecules/ScreenWrapper';
-import StorageService from '../services/StorageService';
+import PropTypes from "prop-types";
+import React, { useContext } from "react";
+import styled from "styled-components/native";
+import env from "react-native-config";
+import { CaseDispatch } from "../store/CaseContext";
+import AuthContext from "../store/AuthContext";
+import FormList from "../components/organisms/FormList/FormList";
+import { Button, Text } from "../components/atoms";
+import Header from "../components/molecules/Header";
+import ScreenWrapper from "../components/molecules/ScreenWrapper";
+import StorageService from "../services/StorageService";
 
 const Container = styled.ScrollView`
   flex: 1;
@@ -21,12 +21,11 @@ const FieldWrapper = styled.View`
   margin-bottom: 8px;
 `;
 
-const DeveloperScreen = (props) => {
-  const { navigation } = props;
+const DeveloperScreen = ({ navigation }: any) => {
   const { createCase } = useContext(CaseDispatch);
   const authContext = useContext(AuthContext);
 
-  const colorSchema = 'neutral';
+  const colorSchema = "neutral";
 
   return (
     <ScreenWrapper>
@@ -39,7 +38,7 @@ const DeveloperScreen = (props) => {
             createCase(
               form,
               async (newCase) => {
-                navigation.navigate('Form', { caseData: newCase });
+                navigation.navigate("Form", { caseData: newCase });
               },
               true
             );
@@ -52,9 +51,8 @@ const DeveloperScreen = (props) => {
             variant="outlined"
             colorSchema={colorSchema}
             onClick={async () => {
-              StorageService.clearData();
+              void StorageService.clearData();
               await authContext.handleLogout();
-              navigation.navigate('Start');
             }}
           >
             <Text>Nollställ appdata</Text>
@@ -67,7 +65,7 @@ const DeveloperScreen = (props) => {
             variant="contained"
             colorSchema={colorSchema}
             onClick={async () => {
-              navigation.navigate('App');
+              navigation.navigate("App");
             }}
           >
             <Text>Tillbaka</Text>