fix: Mobile App Routing (#414)

Co-authored-by: v-almonacid <[email protected]>
AlphadayHQ · Apr 25, 2024 · 400334c · 400334c
1 parent 7cd8aee
commit 400334c
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 76 deletions.
diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
@@ -77,7 +77,7 @@ const AppRoutes = () => {
         location.reload();
     }
 
-    if (window.location.pathname === EDesktopRoutePaths.Superfeed) {
+    if (isSuperfeed) {
         return (
             <Redirect
                 key={EDesktopRoutePaths.Superfeed}

diff --git a/packages/frontend/src/MobileApp.tsx b/packages/frontend/src/MobileApp.tsx
@@ -62,14 +62,11 @@ const CustomNavTab: React.FC<{
 const RouterChild = () => {
     const { pathname } = useLocation();
     const history = useHistory();
-    const { pathContainsHashOrSlug, routeInfo } = useViewRoute();
+    const { pathContainsHashOrSlug, routeInfo, isRoot } = useViewRoute();
 
     const { isAuthenticated } = useAuth();
     const isTabBarHidden = !!mobileRoutes.find(
-        (route) =>
-            route.type !== "fallback" &&
-            route.path === pathname &&
-            route?.hideTabBar
+        (route) => route.path === pathname && route?.hideTabBar
     );
 
     if (pathContainsHashOrSlug && routeInfo?.value) {
@@ -79,50 +76,54 @@ const RouterChild = () => {
         return null;
     }
 
+    if (isRoot) {
+        return (
+            <Redirect
+                key={EMobileRoutePaths.Base}
+                path={EMobileRoutePaths.Base}
+                to={EMobileRoutePaths.Superfeed}
+                exact
+                push
+            />
+        );
+    }
+
     return (
         <IonTabs>
             <IonRouterOutlet ionPage>
                 {mobileRoutes.map((route) => {
-                    if (route.type === "redirect") {
-                        return (
-                            <Redirect
-                                key={route.path}
-                                path={route.path}
-                                to={route.redirectTo}
-                                exact={route.exact ?? false}
-                                push
-                            />
-                        );
-                    }
-                    if (route.type === "fallback") {
-                        return (
-                            <Redirect
-                                key="fallback"
-                                to={route.redirectTo}
-                                push
-                            />
-                        );
-                    }
-                    // if the route is authwalled, let's just redirect to superfeed page.
-                    if (route.authWalled && !isAuthenticated) {
-                        return (
-                            <Redirect
-                                key={route.path}
-                                path={route.path}
-                                to={EMobileRoutePaths.Superfeed}
-                                exact={route.exact ?? false}
-                            />
-                        );
-                    }
                     return (
                         <Route
                             key={route.path}
                             path={route.path}
                             exact={route.exact ?? false}
-                            render={() => <route.component />}
+                            render={() =>
+                                route.authWalled && !isAuthenticated ? (
+                                    <Redirect
+                                        key={route.path}
+                                        path={route.path}
+                                        to={EMobileRoutePaths.Superfeed}
+                                        exact={route.exact ?? false}
+                                    />
+                                ) : (
+                                    <route.component />
+                                )
+                            }
                         />
                     );
                 })}
+                <Route
+                    render={() => (
+                        <Redirect
+                            key="*"
+                            path="*"
+                            to={EMobileRoutePaths.Superfeed}
+                            exact
+                            push
+                        />
+                    )}
+                    exact
+                />
             </IonRouterOutlet>
             <IonTabBar
                 style={{

diff --git a/packages/frontend/src/api/hooks/useViewRoute.ts b/packages/frontend/src/api/hooks/useViewRoute.ts
@@ -2,6 +2,7 @@ import { useMemo } from "react";
 import { useLocation } from "react-router-dom";
 import { isHash } from "src/api/utils/helpers";
 import CONFIG from "src/config/config";
+import { EMobileRoutePaths } from "src/routes";
 import { FULLSIZE_ROUTES_ARR } from "src/types";
 
 enum ERouteType {
@@ -121,7 +122,7 @@ export const useViewRoute = (): IViewRouteInfo => {
         isFullSize: fullSizeWidgetPath !== undefined,
         isViewHash,
         isRoot: location.pathname === "/",
-        isSuperfeed: location.pathname.includes("/superfeed"),
+        isSuperfeed: location.pathname.includes(EMobileRoutePaths.Superfeed),
     };
 };
 

diff --git a/packages/frontend/src/routes.ts b/packages/frontend/src/routes.ts
@@ -155,35 +155,17 @@ export enum EMobileRoutePaths {
     Market = `${BASE_TABS_ROUTE}market`,
 }
 
-type TMobileRoute =
-    | {
-          path: string;
-          component: React.FC;
-          exact?: boolean;
-          authWalled?: boolean;
-          redirectTo?: string;
-          type: "regular";
-          hideTabBar?: boolean;
-      }
-    | {
-          path: string;
-          redirectTo: string;
-          exact?: boolean;
-          type: "redirect";
-          hideTabBar?: boolean;
-      }
-    | {
-          redirectTo: string;
-          type: "fallback";
-          hideTabBar?: boolean;
-      };
+type TMobileRoute = {
+    path: string;
+    component: React.FC;
+    exact?: boolean;
+    authWalled?: boolean;
+    redirectTo?: string;
+    type: "regular";
+    hideTabBar?: boolean;
+};
+
 export const mobileRoutes: TMobileRoute[] = [
-    {
-        path: EMobileRoutePaths.Base,
-        redirectTo: EMobileRoutePaths.Superfeed,
-        exact: true,
-        type: "redirect",
-    },
     {
         path: EMobileRoutePaths.Superfeed,
         component: SuperfeedPage,
@@ -274,13 +256,4 @@ export const mobileRoutes: TMobileRoute[] = [
         exact: true,
         type: "regular",
     },
-    /**
-     * Fallback route.
-     *
-     * This redirects all non-existing routes to the superfeed tab.
-     */
-    {
-        redirectTo: EMobileRoutePaths.Superfeed,
-        type: "fallback",
-    },
 ];