LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Fix double-render of Category Pages when unauthenticated

Browse source 
## Scenario
`selectHasUnclaimedRefereeReward` updated --> `AppRouter` re-render --> `dynamicRoutes` regenerates (re-mounts) list of `DiscoverPage`s

## Fix
I think `selectHasUnclaimedRefereeReward` can be moved elsewhere and would solve the problem, but avoided that since I'm not familiar with rewards enough to do minimal testing.

Memoize the Category Page routes instead.
This commit is contained in:
infinite-persistence 2021-12-08 23:36:23 +08:00 committed by Thomas Zarebczan
parent eb5a6ccde9
commit ccf0d8e163
1 changed files with 11 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
ui/component/router/view.jsx
View file

@ -175,10 +175,18 @@ function AppRouter(props: Props) {
const hasLinkedCommentInUrl = urlParams.get(LINKED_COMMENT_QUERY_PARAM); const hasLinkedCommentInUrl = urlParams.get(LINKED_COMMENT_QUERY_PARAM);
const isLargeScreen = useIsLargeScreen(); const isLargeScreen = useIsLargeScreen();
const dynamicRoutes = React.useMemo(() => { const homeCategoryPages = React.useMemo(() => {
return GetLinksData(homepageData, isLargeScreen).filter( const dynamicRoutes = GetLinksData(homepageData, isLargeScreen).filter(
(potentialRoute: any) => potentialRoute && potentialRoute.route (potentialRoute: any) => potentialRoute && potentialRoute.route
); );
return dynamicRoutes.map((dynamicRouteProps: RowDataItem) => (
<Route
key={dynamicRouteProps.route}
path={dynamicRouteProps.route}
component={(routerProps) => <DiscoverPage {...routerProps} dynamicRouteProps={dynamicRouteProps} />}
/>
));
}, [homepageData, isLargeScreen]); }, [homepageData, isLargeScreen]);
// For people arriving at settings page from deeplinks, know whether they can "go back" // For people arriving at settings page from deeplinks, know whether they can "go back"
@ -269,14 +277,7 @@ function AppRouter(props: Props) {
<Route path={`/`} exact component={HomePage} /> <Route path={`/`} exact component={HomePage} />
<Route path={`/$/${PAGES.DISCOVER}`} exact component={DiscoverPage} /> <Route path={`/$/${PAGES.DISCOVER}`} exact component={DiscoverPage} />
{SIMPLE_SITE && <Route path={`/$/${PAGES.WILD_WEST}`} exact component={DiscoverPage} />} {SIMPLE_SITE && <Route path={`/$/${PAGES.WILD_WEST}`} exact component={DiscoverPage} />}
{/* $FlowFixMe */} {homeCategoryPages}
{dynamicRoutes.map((dynamicRouteProps: RowDataItem) => (
<Route
key={dynamicRouteProps.route}
path={dynamicRouteProps.route}
component={(routerProps) => <DiscoverPage {...routerProps} dynamicRouteProps={dynamicRouteProps} />}
/>
))}
<Route path={`/$/${PAGES.AUTH_SIGNIN}`} exact component={SignInPage} /> <Route path={`/$/${PAGES.AUTH_SIGNIN}`} exact component={SignInPage} />
<Route path={`/$/${PAGES.AUTH_PASSWORD_RESET}`} exact component={PasswordResetPage} /> <Route path={`/$/${PAGES.AUTH_PASSWORD_RESET}`} exact component={PasswordResetPage} />