Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Mobile App Routing #414

Merged
merged 5 commits into from
Apr 25, 2024
Merged

fix: Mobile App Routing #414

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fbef649
redirect only when necessary
Xavier-Charles Apr 25, 2024
c8011a9
remove unused routes
Xavier-Charles Apr 25, 2024
60c55f6
use useViewRoute for desktop
Xavier-Charles Apr 25, 2024
6e13197
remove comment
Xavier-Charles Apr 25, 2024
878f0a8
use enum instead of hardcoded route
v-almonacid Apr 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ const AppRoutes = () => {
location.reload();
}

if (window.location.pathname === EDesktopRoutePaths.Superfeed) {
if (isSuperfeed) {
return (
<Redirect
key={EDesktopRoutePaths.Superfeed}
Expand Down
75 changes: 38 additions & 37 deletions packages/frontend/src/MobileApp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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={{
Expand Down
3 changes: 2 additions & 1 deletion packages/frontend/src/api/hooks/useViewRoute.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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),
};
};

Expand Down
47 changes: 10 additions & 37 deletions packages/frontend/src/routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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",
},
];
Loading