Start handling mobile auth workflows

apps/rufferal/src/app/App.tsx

@@ -1,21 +1,7 @@
-import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { observer } from 'mobx-react-lite';
+import { Routes } from './Routes';
 
-import { AboutScreen } from '../screens/AboutScreen';
-import { HomeScreen } from '../screens/HomeScreen';
-
-const Stack = createNativeStackNavigator();
-
-const App = observer(() => {
-  return (
-    <NavigationContainer>
-      <Stack.Navigator initialRouteName="Home">
-        <Stack.Screen name="Home" component={HomeScreen} />
-        <Stack.Screen name="About" component={AboutScreen} />
-      </Stack.Navigator>
-    </NavigationContainer>
-  );
-});
+const App = () => {
+  return <Routes />;
+};
 
 export default App;

apps/rufferal/src/app/Routes.tsx

@@ -0,0 +1,46 @@
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { AuthStoreContext } from '@rufferal-frontend/store';
+import { useContext } from 'react';
+import { AboutScreen } from '../screens/AboutScreen';
+import { DashboardScreen } from '../screens/DashboardScreen';
+import { HomeScreen } from '../screens/HomeScreen';
+import { ProfileScreen } from '../screens/ProfileScreen';
+
+const Stack = createNativeStackNavigator();
+
+export const Routes = () => {
+  const authStore = useContext(AuthStoreContext);
+
+  return (
+    <NavigationContainer>
+      {/* <Stack.Navigator screenOptions={{ headerShown: false }}> */}
+      <Stack.Navigator>
+        {authStore.isLoggedIn ? (
+          <>
+            {/* My Profile - Owner */}
+            {/* AuthedSearchServices */}
+            {/* Pet Profiles + Care Plans */}
+            {/* Bookings */}
+            {/* Messaging */}
+            {/* Account Settings */}
+            {/* My Profile - Caretaker */}
+            {/* AuthedSearchGigs */}
+            <Stack.Screen name="Dashboard" component={DashboardScreen} />
+            <Stack.Screen name="Profile" component={ProfileScreen} />
+          </>
+        ) : (
+          <>
+            {/* Onboarding */}
+            {/* Login + Social Login */}
+            {/* SearchServices */}
+            {/* Sign Up */}
+            {/* SearchGigs */}
+            <Stack.Screen name="Home" component={HomeScreen} />
+            <Stack.Screen name="About" component={AboutScreen} />
+          </>
+        )}
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+};

apps/rufferal/src/screens/DashboardScreen.tsx

@@ -0,0 +1,5 @@
+import { RDashboard } from '@rufferal-frontend/store';
+
+export const DashboardScreen = () => {
+  return <RDashboard />;
+};

apps/rufferal/src/screens/ProfileScreen.tsx

@@ -0,0 +1,5 @@
+import { RProfile } from '@rufferal-frontend/store';
+
+export const ProfileScreen = () => {
+  return <RProfile />;
+};

apps/rufferal/tsconfig.json

@@ -1,3 +1,8 @@
+// Referenced projects must have the new composite setting enabled. This setting is needed to ensure TypeScript can quickly determine where to find the outputs of the referenced project. Enabling the composite flag changes a few things:
+
+// The rootDir setting, if not explicitly set, defaults to the directory containing thetsconfig file
+// All implementation files must be matched by an include pattern or listed in the files array. If this constraint is violated, tsc will inform you which files weren’t specified
+// declaration must be turned on
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {

apps/webApp/src/App.tsx

@@ -2,7 +2,7 @@ import { StrictMode } from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { ErrorPage } from './components/ErrorPage';
-import { About, Home } from './routes';
+import { About, Home, Dashboard, Profile } from './routes';
 
 const router = createBrowserRouter([
   {
@@ -15,6 +15,16 @@ const router = createBrowserRouter([
     element: <About />,
     errorElement: <ErrorPage />,
   },
+  {
+    path: 'dashboard',
+    element: <Dashboard />,
+    errorElement: <ErrorPage />,
+  },
+  {
+    path: 'profile',
+    element: <Profile />,
+    errorElement: <ErrorPage />,
+  },
 ]);
 
 const root = ReactDOM.createRoot(

apps/webApp/src/routes/Dashboard.tsx

@@ -0,0 +1,10 @@
+import { RDashboard } from '@rufferal-frontend/store';
+import { ProtectedRoute } from './ProtectedRoutes';
+
+export const Dashboard = () => {
+  return (
+    <ProtectedRoute>
+      <RDashboard />
+    </ProtectedRoute>
+  );
+};

apps/webApp/src/routes/Profile.tsx

@@ -0,0 +1,10 @@
+import { RProfile } from '@rufferal-frontend/store';
+import { ProtectedRoute } from './ProtectedRoutes';
+
+export const Profile = () => {
+  return (
+    <ProtectedRoute>
+      <RProfile />
+    </ProtectedRoute>
+  );
+};

apps/webApp/src/routes/ProtectedRoutes.tsx

@@ -3,13 +3,14 @@ import { PropsWithChildren, useContext } from 'react';
 import { Navigate } from 'react-router-dom';
 
 export const ProtectedRoute = ({ children }: PropsWithChildren) => {
-  const userStore = useContext(AuthStoreContext);
+  const authStore = useContext(AuthStoreContext);
   const toastStore = useContext(ToastStoreContext);
 
-  if (!userStore.bearerToken) {
-    // user is not authenticated
+  // user is not authenticated
+  if (!authStore.isLoggedIn) {
     toastStore.addMessage('Not logged in.');
     return <Navigate to="/" />;
   }
+
   return children;
 };

apps/webApp/src/routes/about.tsx

@@ -1,10 +1,5 @@
 import { RAbout } from '@rufferal-frontend/store';
-import { ProtectedRoute } from './ProtectedRoutes';
 
 export const About = () => {
-  return (
-    <ProtectedRoute>
-      <RAbout />
-    </ProtectedRoute>
-  );
+  return <RAbout />;
 };

apps/webApp/src/routes/index.ts

@@ -1,3 +1,5 @@
 export { About } from './About';
+export { Dashboard } from './Dashboard';
 export { Home } from './Home';
+export { Profile } from './Profile';
 export { ProtectedRoute } from './ProtectedRoutes';

apps/webApp/tsconfig.app.json

@@ -20,5 +20,5 @@
     "src/**/*.spec.jsx",
     "src/**/*.test.jsx"
   ],
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx", "src/routes/Dashboard"]
 }

shared/store/src/index.ts

@@ -1,4 +1,5 @@
 export * from './rufferal-design/components';
+export * from './rufferal-design/navigation';
 export * from './store';
 
 // import { GoogleSignin } from '@react-native-google-signin/google-signin';

shared/store/src/rufferal-design/components/organism/RFormLogin.tsx

@@ -29,7 +29,7 @@ export const RFormLogin = observer((): React.ReactElement => {
   const [error, setError] = useState<string>();
   const [status, setStatus] = useState(false);
 
-  const userStore = useContext(AuthStoreContext);
+  const authStore = useContext(AuthStoreContext);
   // BLARG - navigate cannot happen in mobile, how do you want to handle navigation differences between web and mobile
   // const navigate = useNavigate();
 
@@ -78,7 +78,7 @@ export const RFormLogin = observer((): React.ReactElement => {
         throw new Error(error.error);
       } else {
         const authHeader = response.headers.get('Authorization') || undefined;
-        authHeader && userStore.setToken(authHeader);
+        authHeader && authStore.setToken(authHeader);
         // console.log('BLARG authHeader', authHeader);
         setStatus(response.ok);
 
@@ -101,7 +101,7 @@ export const RFormLogin = observer((): React.ReactElement => {
         //     }
         // }
 
-        result.data.attributes && userStore.setUser(result.data.attributes);
+        result.data.attributes && authStore.setUser(result.data.attributes);
 
         console.log('result is: ', JSON.stringify(result, null, 4));
 

shared/store/src/rufferal-design/components/organism/RLogoutButton.tsx

@@ -11,7 +11,7 @@ export const RLogoutButton = observer(
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState<string>();
 
-    const userStore = useContext(AuthStoreContext);
+    const authStore = useContext(AuthStoreContext);
 
     /* BEHAVIORS */
     const handleLogout = async () => {
@@ -31,7 +31,7 @@ export const RLogoutButton = observer(
           headers: {
             Accept: 'application/json',
             'Content-Type': 'application/json',
-            Authorization: String(userStore.bearerToken),
+            Authorization: String(authStore.bearerToken),
           },
         });
 
@@ -41,7 +41,7 @@ export const RLogoutButton = observer(
         }
 
         const result = await response.json();
-        userStore.revokeAuth();
+        authStore.revokeAuth();
         console.log('result is: ', JSON.stringify(result, null, 4));
         // BLARG NAVIGATE
       } catch (err) {

shared/store/src/rufferal-design/components/organism/admin/RAccount.tsx

@@ -17,7 +17,7 @@ export const RAccount = ({ userId }: { userId: number }) => {
   );
   const [error, setError] = useState<string>();
 
-  const userStore = useContext(AuthStoreContext);
+  const authStore = useContext(AuthStoreContext);
 
   const url =
     Platform.OS === 'android'
@@ -32,7 +32,7 @@ export const RAccount = ({ userId }: { userId: number }) => {
         method: 'GET',
         headers: {
           Accept: 'application/json',
-          Authorization: String(userStore.bearerToken),
+          Authorization: String(authStore.bearerToken),
         },
       });
 

shared/store/src/rufferal-design/components/organism/admin/RAllAccounts.tsx

@@ -18,10 +18,10 @@ export const RAllAccounts = () => {
   const [data, setData] = useState([]);
   const [error, setError] = useState<string>();
 
-  const userStore = useContext(AuthStoreContext);
+  const authStore = useContext(AuthStoreContext);
   // console.log(
-  //   'BLARG String(userStore.bearerToken)',
-  //   String(userStore.bearerToken)
+  //   'BLARG String(authStore.bearerToken)',
+  //   String(authStore.bearerToken)
   // );
 
   const handleGetAccounts = async () => {
@@ -36,7 +36,7 @@ export const RAllAccounts = () => {
         method: 'GET',
         headers: {
           Accept: 'application/json',
-          Authorization: String(userStore.bearerToken),
+          Authorization: String(authStore.bearerToken),
         },
       });