feat(onboarding): adds onboarding screen and xstate machine

Author: LFSCamargo

App.tsx

@@ -1,7 +1,13 @@
+import 'react-native-gesture-handler';
 import { Router } from "./src/router";
+import { MachinesProvider } from './src/context'
+import { StatusBar } from 'react-native';
 
 export default function App() {
   return (
-    <Router />
+    <MachinesProvider>
+      <StatusBar translucent barStyle={'default'} />
+      <Router />
+    </MachinesProvider>
   )
 }

package.json

@@ -16,14 +16,19 @@
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/stack": "^6.3.20",
     "@xstate/react": "^3.2.2",
+    "formik": "^2.4.5",
     "nativewind": "^2.0.11",
     "react": "18.2.0",
     "react-native": "0.72.6",
     "react-native-gesture-handler": "^2.13.4",
     "react-native-reanimated": "^3.5.4",
     "react-native-safe-area-context": "^4.7.4",
     "react-native-screens": "^3.27.0",
-    "xstate": "^4.38.3"
+    "xstate": "^4.38.3",
+    "xstate-logger": "^0.0.3",
+    "yup": "^1.3.2",
+    "zod": "^3.22.4",
+    "zod-formik-adapter": "^1.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

pnpm-lock.yaml

@@ -0,0 +1 @@
+export * from './machines.context'

src/context/index.ts

@@ -0,0 +1,19 @@
+import { createContext, useContext } from "react";
+import { InterpreterFrom } from 'xstate';
+import { userMachine } from '../machines'
+import { useInterpret } from "@xstate/react";
+import { xstateLogger} from 'xstate-logger'
+import { any } from "zod";
+
+export const MachinesContext = createContext({} as {
+  user: InterpreterFrom<typeof userMachine>
+})
+
+export function MachinesProvider({ children }: { children: React.ReactNode }) {
+  const user = useInterpret(userMachine).start().onTransition(state => xstateLogger(state as any));
+  return (
+    <MachinesContext.Provider value={{ user }}>
+      {children}
+    </MachinesContext.Provider>
+  )
+}

src/context/machines.context.tsx

@@ -0,0 +1,8 @@
+import { useContext } from 'react'
+import { MachinesContext } from '../context'
+
+export function useGlobalMachines() {
+  const machines = useContext(MachinesContext);
+  
+  return machines;
+}

src/hooks/globalMachines.hook.ts

@@ -0,0 +1,3 @@
+export * from './user.hook';
+export * from './globalMachines.hook'
+export * from './router.hook'

src/hooks/index.ts

@@ -0,0 +1,6 @@
+import { NavigationProp, useNavigation } from "@react-navigation/native";
+import { RootStackParamList } from "../types";
+
+export function useRouter() {
+  return useNavigation<NavigationProp<RootStackParamList>>();
+}

src/hooks/router.hook.ts

@@ -0,0 +1,31 @@
+import { useSelector } from "@xstate/react";
+import { useGlobalMachines } from "./globalMachines.hook";
+
+export function useUser() {
+  const { user } = useGlobalMachines();
+  
+  const isLoading = useSelector(user, state => state.matches("loading"));
+  const userData = useSelector(user, state => state.context.user);
+  
+  function logout() {
+    user.send("LOGOUT");
+  }
+
+  function onboard(name: string) {
+    user.send({
+      type: "ONBOARD",
+      data: {
+        name
+      }
+    });
+  }
+
+  return {
+    userData,
+    isLoading,
+    handlers: {
+      logout,
+      onboard
+    },
+  };
+}

src/hooks/user.hook.ts

@@ -0,0 +1 @@
+export * from './user.machine'

src/machines/index.ts

@@ -1,5 +1,5 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { assign, createMachine } from "xstate";
+import { assign, createMachine, InterpreterFrom } from "xstate";
 
 type UserMachineEvents = {
   type: "LOGOUT"
@@ -37,12 +37,14 @@ export const userMachine = createMachine({
   context: {
     user: null,
   },
+  predictableActionArguments: true,
   schema: {
     context: {} as UserMachineContext,
     events: {} as UserMachineEvents,
     services: {} as UserMachienServices
   },
   id: "user",
+  initial: "loading",
   states: {
     loading: {
       invoke: {
@@ -66,7 +68,8 @@ export const userMachine = createMachine({
       invoke: {
         src: "removeUser",
         onDone: {
-          target: "noUser"
+          target: "noUser",
+          actions: ["removeUser"]
         }
       }
     },
@@ -89,7 +92,10 @@ export const userMachine = createMachine({
   actions: {
     assignUser: assign({
       user: (_, event) => event.data
-    })
+    }),
+    removeUser: assign({
+      user: null
+    }),
   },
   services: {
     removeUser: async () => {
@@ -101,6 +107,8 @@ export const userMachine = createMachine({
     },
     getUser: async () => {
       const user = await AsyncStorage.getItem("user")
+      console.log('user', user);
+      
       if (!user) {
         throw new Error("No user")
       }

src/machines/user.machine.ts

@@ -1,13 +1,27 @@
 import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
 import { Welcome, Todos } from "./screens";
+import { useUser } from "./hooks";
+import { ActivityIndicator, View } from "react-native";
+import { RootStackParamList } from "./types";
 
-const Stack = createStackNavigator();
+const Stack = createStackNavigator<RootStackParamList>();
 
 export function Router() {
+  const { isLoading, userData } = useUser();
+
+  if (isLoading) {
+    return (
+      <View className="flex flex-1 items-center justify-center">
+        <ActivityIndicator />
+      </View>
+    )
+  }
+  
+
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{
+      <Stack.Navigator initialRouteName={!userData ? 'Welcome' : 'Todos'} screenOptions={{
         headerShown: false
       }}>
         <Stack.Screen name="Welcome" component={Welcome} />