map board routes to search tags

packages/frontend/src/MobileApp.tsx

@@ -7,11 +7,11 @@ import {
     IonTabs,
 } from "@ionic/react";
 import { IonReactRouter } from "@ionic/react-router";
-import { Redirect, Route, useLocation } from "react-router-dom";
+import { Redirect, Route } from "react-router-dom";
 import { ReactComponent as MarketsSVG } from "src/assets/svg/markets.svg";
 import { ReactComponent as PortfolioSVG } from "src/assets/svg/portfolio.svg";
 import { ReactComponent as SuperfeedSVG } from "src/assets/svg/superfeed.svg";
-import { useAuth } from "./api/hooks";
+import { useAuth, useMobileRouteUpdater } from "./api/hooks";
 import CONFIG from "./config";
 import ToastContainer from "./containers/toasts/ToastContainer";
 import "@alphaday/ui-kit/global.scss";
@@ -41,14 +41,9 @@ const CustomNavTab: React.FC<{
 );
 
 const RouterChild = () => {
-    const { pathname } = useLocation();
     const { isAuthenticated } = useAuth();
-    const isTabBarHidden = !!mobileRoutes.find(
-        (route) =>
-            route.type !== "fallback" &&
-            route.path === pathname &&
-            route?.hideTabBar
-    );
+    const { isTabBarHidden } = useMobileRouteUpdater();
+
     return (
         <IonTabs>
             <IonRouterOutlet ionPage>

packages/frontend/src/api/hooks/index.ts

@@ -33,3 +33,4 @@ export * from "./useValueWatcher";
 export * from "./useOnScreen";
 export * from "./usePullToRefresh";
 export * from "./useHistory";
+export * from "./useMobileRouteUpdater";

packages/frontend/src/api/hooks/useMobileRouteUpdater.ts

@@ -0,0 +1,39 @@
+import { useHistory, useLocation } from "react-router";
+import { mobileRoutes } from "src/routes";
+import { TKeyword } from "../types";
+import { useResolvedView } from "./useResolvedView";
+import { useViewRoute } from "./useViewRoute";
+
+interface IMobileRouteInfo {
+    isTabBarHidden: boolean;
+    isBoardRoute: boolean;
+}
+
+export const useMobileRouteUpdater = (): IMobileRouteInfo => {
+    const history = useHistory();
+    const { pathname } = useLocation();
+    const { pathContainsHashOrSlug } = useViewRoute();
+    const isTabBarHidden = !!mobileRoutes.find(
+        (route) =>
+            route.type !== "fallback" &&
+            route.path === pathname &&
+            route?.hideTabBar
+    );
+    const resolvedView = useResolvedView();
+
+    if (resolvedView.currentData !== undefined) {
+        const { keywords } = resolvedView.currentData;
+        const searchSlugs = keywords.map((kw: TKeyword) => kw.tag.slug);
+
+        const newRoute = `/superfeed/search/${[...new Set(searchSlugs)].join(",")}`;
+
+        if (pathContainsHashOrSlug && pathname !== newRoute) {
+            history.push(newRoute);
+        }
+    }
+
+    return {
+        isTabBarHidden,
+        isBoardRoute: pathContainsHashOrSlug,
+    };
+};

packages/frontend/src/routes.ts

@@ -41,7 +41,7 @@ export interface IRoute {
     exact?: boolean;
     isFullsize?: boolean;
     redirectTo?: string;
-    type: string;
+    type: "regular" | "redirect";
 }
 
 /**
@@ -125,6 +125,7 @@ export enum EMobileTabRoutePaths {
 
 export enum EMobileRoutePaths {
     Base = BASE_TABS_ROUTE,
+    Boards = `${BASE_TABS_ROUTE}b/:slug`,
     Superfeed = `${BASE_TABS_ROUTE}superfeed`,
     Search = `${BASE_TABS_ROUTE}superfeed/search/:tags`,
     UserSettings = `${BASE_TABS_ROUTE}superfeed/user-settings`,
@@ -175,6 +176,12 @@ export const mobileRoutes: TMobileRoute[] = [
         exact: true,
         type: "regular",
     },
+    {
+        path: EMobileRoutePaths.Boards,
+        component: SuperfeedPage,
+        exact: true,
+        type: "regular",
+    },
     {
         path: EMobileRoutePaths.Search,
         component: SuperfeedPage,