perf(navigation): create NavigateProvider for improve navigate rerend…

…er components
stephane-r · Oct 12, 2023 · 150f305 · 150f305
1 parent 2d24382
commit 150f305
Show file tree

Hide file tree

Showing 16 changed files with 206 additions and 144 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -24,6 +24,8 @@ import { I18nextProvider } from "react-i18next";
 import { MobileNavigationContainer } from "../containers/MobileNavigation";
 import { PlayerModeProvider } from "../providers/PlayerMode";
 import { TrendingFiltersProvider } from "../providers/TrendingFilters";
+import { StableNavigateProvider } from "../providers/Navigate";
+import { Outlet } from "react-router-dom";
 
 const useStyles = createStyles(() => ({
   scrollArea: {
@@ -32,62 +34,62 @@ const useStyles = createStyles(() => ({
   },
 }));
 
-interface AppProps {
-  children: React.ReactNode;
-}
-
-export const App: React.FC<AppProps> = ({ children }) => {
+export const App = () => {
   const { cx, classes } = useStyles();
 
   return (
     <I18nextProvider i18n={i18n}>
       <QueryClientProvider client={queryClient}>
-        <SettingsProvider>
-          <SearchProvider>
-            <TrendingFiltersProvider>
-              <FavoriteProvider>
-                <PlaylistProvider>
-                  <PlayerProvider>
-                    <PreviousNextTrackProvider>
-                      <PlayerPlaylistProvider>
-                        <PlayerModeProvider>
-                          <HistoryProvider>
-                            <ColorSchemeProvider>
-                              <MantineProvider>
-                                <SpotlightProvider>
-                                  <Notifications />
-                                  <Flex>
-                                    <NavigationContainer />
-                                    <ScrollArea
-                                      className={cx(classes.scrollArea)}
-                                      style={{
-                                        position: "static",
-                                      }} // Stay in inline-styles for now
-                                    >
-                                      <Flex>
-                                        <Box style={{ flex: 1 }}>
-                                          <Header />
-                                          <Main>{children}</Main>
-                                          <MobileNavigationContainer />
-                                        </Box>
-                                        <DrawerPlayerContainer />
-                                      </Flex>
-                                      <PlayerContainer />
-                                    </ScrollArea>
-                                  </Flex>
-                                </SpotlightProvider>
-                              </MantineProvider>
-                            </ColorSchemeProvider>
-                          </HistoryProvider>
-                        </PlayerModeProvider>
-                      </PlayerPlaylistProvider>
-                    </PreviousNextTrackProvider>
-                  </PlayerProvider>
-                </PlaylistProvider>
-              </FavoriteProvider>
-            </TrendingFiltersProvider>
-          </SearchProvider>
-        </SettingsProvider>
+        <StableNavigateProvider>
+          <SettingsProvider>
+            <SearchProvider>
+              <TrendingFiltersProvider>
+                <FavoriteProvider>
+                  <PlaylistProvider>
+                    <PlayerProvider>
+                      <PreviousNextTrackProvider>
+                        <PlayerPlaylistProvider>
+                          <PlayerModeProvider>
+                            <HistoryProvider>
+                              <ColorSchemeProvider>
+                                <MantineProvider>
+                                  <SpotlightProvider>
+                                    <Notifications />
+                                    <Flex>
+                                      <NavigationContainer />
+                                      <ScrollArea
+                                        className={cx(classes.scrollArea)}
+                                        style={{
+                                          position: "static",
+                                        }} // Stay in inline-styles for now
+                                      >
+                                        <Flex>
+                                          <Box style={{ flex: 1 }}>
+                                            <Header />
+                                            <Main>
+                                              <Outlet />
+                                            </Main>
+                                            <MobileNavigationContainer />
+                                          </Box>
+                                          <DrawerPlayerContainer />
+                                        </Flex>
+                                        <PlayerContainer />
+                                      </ScrollArea>
+                                    </Flex>
+                                  </SpotlightProvider>
+                                </MantineProvider>
+                              </ColorSchemeProvider>
+                            </HistoryProvider>
+                          </PlayerModeProvider>
+                        </PlayerPlaylistProvider>
+                      </PreviousNextTrackProvider>
+                    </PlayerProvider>
+                  </PlaylistProvider>
+                </FavoriteProvider>
+              </TrendingFiltersProvider>
+            </SearchProvider>
+          </SettingsProvider>
+        </StableNavigateProvider>
         <AppUpdate />
       </QueryClientProvider>
     </I18nextProvider>

diff --git a/src/components/ButtonHistoryBack.tsx b/src/components/ButtonHistoryBack.tsx
@@ -2,10 +2,10 @@ import { ActionIcon, Tooltip } from "@mantine/core";
 import { IconArrowLeft } from "@tabler/icons-react";
 import { memo } from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
+import { useStableNavigate } from "../providers/Navigate";
 
 export const ButtonHistoryBack = memo(() => {
-  const navigate = useNavigate();
+  const navigate = useStableNavigate();
   const { t } = useTranslation();
 
   const handleClick = () => {

diff --git a/src/components/CardList.tsx b/src/components/CardList.tsx
@@ -1,6 +1,5 @@
 import { Box, createStyles, rem } from "@mantine/core";
 import { memo } from "react";
-import { useLocation } from "react-router-dom";
 import { Video } from "../types/interfaces/Video";
 import { Card } from "./Card";
 import { PlaylistCard } from "./PlaylistCard";
@@ -55,8 +54,6 @@ interface CardListProps {
 
 export const CardList: React.FC<CardListProps> = memo(
   ({ data, scrollable = false }) => {
-    const location = useLocation();
-    const currentPath = location.pathname.replace("/", "");
     const { classes } = useStyles();
 
     if (!data.length) return null;
@@ -65,7 +62,7 @@ export const CardList: React.FC<CardListProps> = memo(
       <Box className={scrollable ? classes.flexGrid : classes.grid}>
         {data.map((item, index) => (
           <Box
-            key={`${currentPath}—${item.title}-${index}`}
+            key={`${document.location.pathname}—${item.title}-${index}`}
             className={scrollable ? classes.flexColumn : classes.column}
           >
             {(() => {

diff --git a/src/components/ChannelCard.tsx b/src/components/ChannelCard.tsx
@@ -10,12 +10,12 @@ import {
 } from "@mantine/core";
 import { IconDiscountCheckFilled } from "@tabler/icons-react";
 import { memo } from "react";
-import { useNavigate } from "react-router-dom";
 import { VideoThumbnail } from "../types/interfaces/Video";
 import { Channel } from "../types/interfaces/Channel";
 import { useTranslation } from "react-i18next";
 import { CardImage } from "./CardImage";
 import { ButtonFavorite } from "./ButtonFavorite";
+import { useStableNavigate } from "../providers/Navigate";
 
 const useStyles = createStyles((theme) => ({
   card: {
@@ -32,7 +32,7 @@ interface ChannelCardProps {
 
 export const ChannelCard: React.FC<ChannelCardProps> = memo(({ channel }) => {
   const { classes } = useStyles();
-  const navigate = useNavigate();
+  const navigate = useStableNavigate();
   const { t } = useTranslation();
 
   const goToChannel = () => {

diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
@@ -1,21 +1,26 @@
-import { ColorScheme } from "@mantine/core";
+import { ColorScheme, UnstyledButton } from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";
 import { memo } from "react";
-import { Link } from "react-router-dom";
+import { useStableNavigate } from "../providers/Navigate";
 
 export const Logo = memo(() => {
   const [colorScheme] = useLocalStorage<ColorScheme>({
     key: "mantine-color-scheme",
   });
+  const navigate = useStableNavigate();
 
   const isDarkMode = colorScheme === "dark";
   const imageSrc = isDarkMode
     ? "/logo-holoplay-white.png"
     : "/logo-holoplay-blue.png";
 
   return (
-    <Link to="/" style={{ marginTop: 8 }}>
+    <UnstyledButton
+      component="a"
+      onClick={() => navigate("/")}
+      style={{ marginTop: 8 }}
+    >
       <img src={imageSrc} width={40} alt="Logo HoloPlay" />
-    </Link>
+    </UnstyledButton>
   );
 });
diff --git a/src/components/MobileNavigation.tsx b/src/components/MobileNavigation.tsx
@@ -1,15 +1,15 @@
 import { createStyles, Divider, Space } from "@mantine/core";
 import { memo } from "react";
-import { Box, NavLink } from "@mantine/core";
+import { Box } from "@mantine/core";
 import {
   IconHistory,
   IconInfoCircle,
   IconSettings,
   IconTrendingUp,
   IconUsers,
 } from "@tabler/icons-react";
-import { useNavigation } from "./Navigation";
 import { useTranslation } from "react-i18next";
+import { MobileNavbarLink } from "./NavbarLink";
 
 const useStyles = createStyles((theme) => ({
   container: {
@@ -27,39 +27,43 @@ interface MobileNavigationProps {
 export const MobileNavigation: React.FC<MobileNavigationProps> = memo(
   ({ onClose }) => {
     const { classes } = useStyles();
-    const { isActive } = useNavigation();
     const { t } = useTranslation();
 
     return (
       <Box className={classes.container} role="navigation">
         <Space h="xs" />
-        <NavLink
-          icon={<IconTrendingUp size={20} stroke={1.5} />}
+        <MobileNavbarLink
+          icon={IconTrendingUp}
           label={t("navigation.trending")}
-          {...isActive("/trending", onClose)}
+          onClose={onClose}
+          activePath="/trending"
         />
-        <NavLink
-          icon={<IconUsers size={20} stroke={1.5} />}
+        <MobileNavbarLink
+          icon={IconUsers}
           label={t("navigation.most-popular")}
-          {...isActive("/most-popular", onClose)}
+          onClose={onClose}
+          activePath="/most-popular"
         />
-        <NavLink
-          icon={<IconHistory size={20} stroke={1.5} />}
+        <MobileNavbarLink
+          icon={IconHistory}
           label={t("navigation.history")}
-          {...isActive("/history", onClose)}
+          onClose={onClose}
+          activePath="/history"
         />
         <Space h="xs" />
         <Divider />
         <Space h="xs" />
-        <NavLink
-          icon={<IconSettings size={20} stroke={1.5} />}
+        <MobileNavbarLink
+          icon={IconSettings}
           label={t("navigation.settings")}
-          {...isActive("/settings", onClose)}
+          onClose={onClose}
+          activePath="/settings"
         />
-        <NavLink
-          icon={<IconInfoCircle size={20} stroke={1.5} />}
+        <MobileNavbarLink
+          icon={IconInfoCircle}
           label={t("navigation.about")}
-          {...isActive("/about", onClose)}
+          onClose={onClose}
+          activePath="/about"
         />
         <Space h="xs" />
       </Box>

diff --git a/src/components/NavbarLink.tsx b/src/components/NavbarLink.tsx
@@ -1,4 +1,5 @@
 import {
+  NavLink,
   Tooltip,
   UnstyledButton,
   createStyles,
@@ -7,6 +8,8 @@ import {
 } from "@mantine/core";
 import { useMediaQuery } from "@mantine/hooks";
 import { memo } from "react";
+import { useStableNavigate } from "../providers/Navigate";
+import { useLocation } from "react-router-dom";
 
 const useStyles = createStyles((theme) => ({
   link: {
@@ -44,16 +47,44 @@ const useStyles = createStyles((theme) => ({
   },
 }));
 
+export type RoutePath =
+  | "/"
+  | "/search"
+  | "/favorites"
+  | "/trending"
+  | "/most-popular"
+  | "/playlists"
+  | "/history"
+  | "/about"
+  | "/settings";
+
 interface NavbarLinkProps {
   icon: any;
   label: string;
   active?: boolean;
   onClick?(): void;
+  activePath?: RoutePath;
 }
 
+const useNavbarLink = (routeName: string, callback?: () => void) => {
+  const navigate = useStableNavigate();
+  const location = useLocation();
+
+  return {
+    onClick: () => {
+      navigate(routeName);
+      if (callback) {
+        callback();
+      }
+    },
+    active: location.pathname === routeName,
+  };
+};
+
 export const NavbarLink = memo(
-  ({ icon: Icon, label, active, onClick }: NavbarLinkProps) => {
+  ({ icon: Icon, label, onClick, activePath }: NavbarLinkProps) => {
     const { classes, cx } = useStyles();
+    const link = useNavbarLink(activePath as RoutePath);
     const theme = useMantineTheme();
     const matches = useMediaQuery(
       `screen and (max-width: ${theme.breakpoints.sm})`
@@ -62,12 +93,31 @@ export const NavbarLink = memo(
     return (
       <Tooltip label={label} position="right" disabled={matches}>
         <UnstyledButton
-          onClick={onClick}
-          className={cx(classes.link, { [classes.active]: active })}
+          onClick={onClick ?? link.onClick}
+          className={cx(classes.link, { [classes.active]: link.active })}
         >
           <Icon stroke={1.5} />
         </UnstyledButton>
       </Tooltip>
     );
   }
 );
+
+interface MobileNavbarLinkProps extends NavbarLinkProps {
+  onClose: () => void;
+}
+
+export const MobileNavbarLink = memo(
+  ({ icon: Icon, label, activePath, onClose }: MobileNavbarLinkProps) => {
+    const link = useNavbarLink(activePath as RoutePath, onClose);
+
+    return (
+      <NavLink
+        icon={<Icon />}
+        label={label}
+        onClick={link.onClick}
+        active={link.active}
+      />
+    );
+  }
+);