Simplify shop navigation state to avoid useless renderings (#7283)

Only show in developer changelog
4ian · Jan 6, 2025 · 5ab9c56 · 5ab9c56
1 parent e237fc4
commit 5ab9c56
Show file tree

Hide file tree

Showing 16 changed files with 255 additions and 258 deletions.
diff --git a/newIDE/app/src/AssetStore/AssetDetails.js b/newIDE/app/src/AssetStore/AssetDetails.js
@@ -201,11 +201,11 @@ export const AssetDetails = React.forwardRef<Props, AssetDetailsInterface>(
 
     React.useEffect(
       () => {
-        if (!asset) {
+        if (!asset || asset.id !== assetShortHeader.id) {
           loadAsset();
         }
       },
-      [asset, loadAsset]
+      [asset, loadAsset, assetShortHeader]
     );
 
     const loadAuthorPublicProfiles = React.useCallback(

diff --git a/newIDE/app/src/AssetStore/AssetStoreContext.js b/newIDE/app/src/AssetStore/AssetStoreContext.js
@@ -29,9 +29,9 @@ import {
   AssetSwappingAssetStoreSearchFilter,
 } from './AssetStoreSearchFilter';
 import {
-  type NavigationState,
   type AssetStorePageState,
   assetStoreHomePageState,
+  AssetStoreNavigatorContext,
 } from './AssetStoreNavigator';
 import { type ChosenCategory } from '../UI/Search/FiltersChooser';
 import AuthenticatedUserContext from '../Profile/AuthenticatedUserContext';
@@ -41,8 +41,6 @@ import {
 } from './AssetStoreUtils';
 import useAlertDialog from '../UI/Alert/useAlertDialog';
 
-const defaultSearchText = '';
-
 export type AssetFiltersState = {|
   animatedFilter: AnimatedAssetStoreSearchFilter,
   setAnimatedFilter: AnimatedAssetStoreSearchFilter => void,
@@ -78,12 +76,9 @@ type AssetStoreState = {|
   privateAssetPackListingDatasSearchResults: ?Array<PrivateAssetPackListingData>,
   fetchAssetsAndFilters: () => void,
   error: ?Error,
-  searchText: string,
-  setSearchText: string => void,
   assetFiltersState: AssetFiltersState,
   assetPackFiltersState: AssetPackFiltersState,
   clearAllFilters: () => void,
-  shopNavigationState: NavigationState,
   currentPage: AssetStorePageState,
   useSearchItem: (
     searchText: string,
@@ -108,8 +103,6 @@ export const initialAssetStoreState: AssetStoreState = {
   privateAssetPackListingDatasSearchResults: null,
   fetchAssetsAndFilters: () => {},
   error: null,
-  searchText: '',
-  setSearchText: () => {},
   assetFiltersState: {
     animatedFilter: new AnimatedAssetStoreSearchFilter(),
     setAnimatedFilter: filter => {},
@@ -131,30 +124,6 @@ export const initialAssetStoreState: AssetStoreState = {
     setTypeFilter: filter => {},
   },
   clearAllFilters: () => {},
-  shopNavigationState: {
-    getCurrentPage: () => assetStoreHomePageState,
-    isRootPage: true,
-    backToPreviousPage: () => assetStoreHomePageState,
-    openHome: () => assetStoreHomePageState,
-    openAssetSwapping: () => assetStoreHomePageState,
-    clearHistory: () => {},
-    clearPreviousPageFromHistory: () => {},
-    openSearchResultPage: () => {},
-    openTagPage: tag => {},
-    openShopCategoryPage: category => {},
-    openPackPage: ({ assetPack, previousSearchText }) => {},
-    openAssetDetailPage: ({ assetShortHeader, previousSearchText }) => {},
-    openPrivateAssetPackInformationPage: ({
-      privateAssetPackListingData,
-      previousSearchText,
-    }) => {},
-    openPrivateGameTemplateInformationPage: ({
-      privateGameTemplateListingData,
-      previousSearchText,
-    }) => {},
-    navigateInsideFolder: folder => {},
-    goBackToFolderIndex: index => {},
-  },
   currentPage: assetStoreHomePageState,
   useSearchItem: (searchText, chosenCategory, chosenFilters, searchFilters) =>
     null,
@@ -167,7 +136,6 @@ export const AssetStoreContext = React.createContext<AssetStoreState>(
 );
 
 type AssetStoreStateProviderProps = {|
-  shopNavigationState: NavigationState,
   children: React.Node,
 |};
 
@@ -189,9 +157,11 @@ const getPrivateAssetPackListingDataSearchTerms = (
 ) => privateAssetPack.name + '\n' + privateAssetPack.description;
 
 export const AssetStoreStateProvider = ({
-  shopNavigationState,
   children,
 }: AssetStoreStateProviderProps) => {
+  const shopNavigationState = React.useContext(AssetStoreNavigatorContext);
+  const { searchText } = shopNavigationState;
+
   const [assetShortHeadersById, setAssetShortHeadersById] = React.useState<?{
     [string]: AssetShortHeader,
   }>(null);
@@ -229,8 +199,6 @@ export const AssetStoreStateProvider = ({
   const initialPackOpened = React.useRef<boolean>(false);
   const { showAlert } = useAlertDialog();
 
-  const [searchText, setSearchText] = React.useState(defaultSearchText);
-
   const [
     animatedFilter,
     setAnimatedFilter,
@@ -403,7 +371,8 @@ export const AssetStoreStateProvider = ({
         if (assetPack) {
           shopNavigationState.openPackPage({
             assetPack,
-            previousSearchText: searchText,
+            storeSearchText: true,
+            clearSearchText: false,
           });
           initialPackOpened.current = false; // Allow to open the pack again if the effect run again.
           setInitialPackUserFriendlySlug(null);
@@ -421,7 +390,8 @@ export const AssetStoreStateProvider = ({
         if (privateAssetPackListingData) {
           shopNavigationState.openPrivateAssetPackInformationPage({
             privateAssetPackListingData,
-            previousSearchText: searchText,
+            storeSearchText: true,
+            clearSearchText: false,
           });
           initialPackOpened.current = false; // Allow to open the pack again if the effect run again.
           setInitialPackUserFriendlySlug(null);
@@ -441,7 +411,6 @@ export const AssetStoreStateProvider = ({
       shopNavigationState,
       showAlert,
       initialPackUserFriendlySlug,
-      searchText,
     ]
   );
 
@@ -606,10 +575,7 @@ export const AssetStoreStateProvider = ({
       environment,
       setEnvironment,
       error,
-      shopNavigationState,
       currentPage,
-      searchText,
-      setSearchText,
       assetFiltersState,
       assetPackFiltersState,
       clearAllFilters,
@@ -643,9 +609,7 @@ export const AssetStoreStateProvider = ({
       licenses,
       environment,
       error,
-      shopNavigationState,
       currentPage,
-      searchText,
       assetFiltersState,
       assetPackFiltersState,
       clearAllFilters,

diff --git a/newIDE/app/src/AssetStore/AssetStoreFilterPanel.js b/newIDE/app/src/AssetStore/AssetStoreFilterPanel.js
@@ -22,6 +22,7 @@ import { type RGBColor } from '../Utils/ColorTransformer';
 import { HexColorField } from './HexColorField';
 import Slider from '../UI/Slider';
 import AuthenticatedUserContext from '../Profile/AuthenticatedUserContext';
+import { AssetStoreNavigatorContext } from './AssetStoreNavigator';
 
 type Choice = {|
   label: React.Node,
@@ -229,8 +230,9 @@ export const AssetStoreFilterPanel = ({
     assetFiltersState,
     assetPackFiltersState,
     clearAllFilters,
-    shopNavigationState,
   } = React.useContext(AssetStoreContext);
+  const shopNavigationState = React.useContext(AssetStoreNavigatorContext);
+
   const { receivedAssetPacks } = React.useContext(AuthenticatedUserContext);
   const onChoiceChange = React.useCallback(
     () => {

diff --git a/newIDE/app/src/AssetStore/AssetStoreNavigator.js b/newIDE/app/src/AssetStore/AssetStoreNavigator.js
@@ -26,6 +26,8 @@ export type AssetStorePageState = {|
 |};
 
 export type NavigationState = {|
+  searchText: string,
+  setSearchText: string => void,
   getCurrentPage: () => AssetStorePageState,
   isRootPage: boolean,
   backToPreviousPage: () => AssetStorePageState,
@@ -38,19 +40,23 @@ export type NavigationState = {|
   openShopCategoryPage: string => void,
   openPackPage: ({|
     assetPack: PublicAssetPack | PrivateAssetPack,
-    previousSearchText: string,
+    storeSearchText: boolean,
+    clearSearchText: boolean,
   |}) => void,
   openPrivateAssetPackInformationPage: ({|
     privateAssetPackListingData: PrivateAssetPackListingData,
-    previousSearchText: string,
+    storeSearchText: boolean,
+    clearSearchText: boolean,
   |}) => void,
   openPrivateGameTemplateInformationPage: ({|
     privateGameTemplateListingData: PrivateGameTemplateListingData,
-    previousSearchText: string,
+    storeSearchText: boolean,
+    clearSearchText: boolean,
   |}) => void,
   openAssetDetailPage: ({|
     assetShortHeader: AssetShortHeader,
-    previousSearchText: string,
+    storeSearchText: boolean,
+    clearSearchText: boolean,
   |}) => void,
   navigateInsideFolder: string => void,
   goBackToFolderIndex: number => void,
@@ -111,14 +117,44 @@ type AssetStorePageHistory = {|
   previousPages: Array<AssetStorePageState>,
 |};
 
-export const useShopNavigation = (): NavigationState => {
+export const AssetStoreNavigatorContext = React.createContext<NavigationState>({
+  searchText: '',
+  setSearchText: () => {},
+  getCurrentPage: () => assetStoreHomePageState,
+  isRootPage: true,
+  backToPreviousPage: () => assetStoreHomePageState,
+  openHome: () => assetStoreHomePageState,
+  openAssetSwapping: () => assetStoreHomePageState,
+  clearHistory: () => {},
+  clearPreviousPageFromHistory: () => {},
+  openSearchResultPage: () => {},
+  openTagPage: string => {},
+  openShopCategoryPage: string => {},
+  openPackPage: () => {},
+  openPrivateAssetPackInformationPage: () => {},
+  openPrivateGameTemplateInformationPage: () => {},
+  openAssetDetailPage: () => {},
+  navigateInsideFolder: string => {},
+  goBackToFolderIndex: number => {},
+});
+
+type AssetStoreNavigatorStateProviderProps = {|
+  children: React.Node,
+|};
+
+export const AssetStoreNavigatorStateProvider = (
+  props: AssetStoreNavigatorStateProviderProps
+) => {
+  const [searchText, setSearchText] = React.useState<string>('');
   const [history, setHistory] = React.useState<AssetStorePageHistory>({
     previousPages: [assetStoreHomePageState],
   });
   const previousPages = history.previousPages;
 
-  return React.useMemo(
+  const state = React.useMemo(
     () => ({
+      searchText,
+      setSearchText,
       getCurrentPage: () => previousPages[previousPages.length - 1],
       isRootPage: previousPages.length <= 1,
       backToPreviousPage: () => {
@@ -244,10 +280,12 @@ export const useShopNavigation = (): NavigationState => {
       },
       openPackPage: ({
         assetPack,
-        previousSearchText,
+        storeSearchText,
+        clearSearchText,
       }: {|
         assetPack: PublicAssetPack | PrivateAssetPack,
-        previousSearchText: string,
+        storeSearchText: boolean,
+        clearSearchText: boolean,
       |}) => {
         setHistory(previousHistory => {
           const currentPage =
@@ -256,7 +294,7 @@ export const useShopNavigation = (): NavigationState => {
             ];
           const currentPageWithSearchText = {
             ...currentPage,
-            searchText: previousSearchText,
+            searchText: storeSearchText ? searchText : '',
           };
           const previousPagesWithoutCurrentPage = previousHistory.previousPages.slice(
             0,
@@ -297,13 +335,16 @@ export const useShopNavigation = (): NavigationState => {
             ],
           };
         });
+        if (clearSearchText) setSearchText('');
       },
       openPrivateAssetPackInformationPage: ({
         privateAssetPackListingData,
-        previousSearchText,
+        storeSearchText,
+        clearSearchText,
       }: {|
         privateAssetPackListingData: PrivateAssetPackListingData,
-        previousSearchText: string,
+        storeSearchText: boolean,
+        clearSearchText: boolean,
       |}) => {
         setHistory(previousHistory => {
           const currentPage =
@@ -312,7 +353,7 @@ export const useShopNavigation = (): NavigationState => {
             ];
           const currentPageWithSearchText = {
             ...currentPage,
-            searchText: previousSearchText,
+            searchText: storeSearchText ? searchText : '',
           };
           const previousPagesWithoutCurrentPage = previousHistory.previousPages.slice(
             0,
@@ -339,13 +380,16 @@ export const useShopNavigation = (): NavigationState => {
             ],
           };
         });
+        if (clearSearchText) setSearchText('');
       },
       openAssetDetailPage: ({
         assetShortHeader,
-        previousSearchText,
+        storeSearchText,
+        clearSearchText,
       }: {|
         assetShortHeader: AssetShortHeader,
-        previousSearchText: string,
+        storeSearchText: boolean,
+        clearSearchText: boolean,
       |}) => {
         setHistory(previousHistory => {
           const currentPage =
@@ -354,7 +398,7 @@ export const useShopNavigation = (): NavigationState => {
             ];
           const currentPageWithSearchText = {
             ...currentPage,
-            searchText: previousSearchText,
+            searchText: storeSearchText ? searchText : '',
           };
           const previousPagesWithoutCurrentPage = previousHistory.previousPages.slice(
             0,
@@ -381,13 +425,16 @@ export const useShopNavigation = (): NavigationState => {
             ],
           };
         });
+        if (clearSearchText) setSearchText('');
       },
       openPrivateGameTemplateInformationPage: ({
         privateGameTemplateListingData,
-        previousSearchText,
+        storeSearchText,
+        clearSearchText,
       }: {|
         privateGameTemplateListingData: PrivateGameTemplateListingData,
-        previousSearchText: string,
+        storeSearchText: boolean,
+        clearSearchText: boolean,
       |}) => {
         setHistory(previousHistory => {
           const currentPage =
@@ -396,7 +443,7 @@ export const useShopNavigation = (): NavigationState => {
             ];
           const currentPageWithSearchText = {
             ...currentPage,
-            searchText: previousSearchText,
+            searchText: storeSearchText ? searchText : '',
           };
           const previousPagesWithoutCurrentPage = previousHistory.previousPages.slice(
             0,
@@ -423,6 +470,7 @@ export const useShopNavigation = (): NavigationState => {
             ],
           };
         });
+        if (clearSearchText) setSearchText('');
       },
       navigateInsideFolder: (folderTag: string) => {
         setHistory(previousHistory => {
@@ -476,6 +524,12 @@ export const useShopNavigation = (): NavigationState => {
         });
       },
     }),
-    [previousPages]
+    [searchText, previousPages]
+  );
+
+  return (
+    <AssetStoreNavigatorContext.Provider value={state}>
+      {props.children}
+    </AssetStoreNavigatorContext.Provider>
   );
 };