dispose widgets in both modes

algolia · Sep 13, 2023 · de926c3 · de926c3
1 parent 4bbd60a
commit de926c3
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 24 deletions.
diff --git a/examples/react/getting-started/src/App.css b/examples/react/getting-started/src/App.css
@@ -51,6 +51,7 @@ em {
 
 .search-panel {
   display: flex;
+  gap: 1rem;
 }
 
 .search-panel__filters {

diff --git a/examples/react/getting-started/src/App.tsx b/examples/react/getting-started/src/App.tsx
@@ -9,7 +9,8 @@ import {
   Pagination,
   RefinementList,
   SearchBox,
-  useRefinementList,
+  DynamicWidgets,
+  CurrentRefinements,
 } from 'react-instantsearch';
 
 import { Panel } from './Panel';
@@ -58,21 +59,22 @@ export function App() {
                 Toggle filters
               </button>
               {showFilters && (
-                <Panel header="brand">
-                  <RefinementList attribute="brand" />
-                </Panel>
+                <DynamicWidgets fallbackComponent={FallbackComponent} />
               )}
             </div>
 
             <div className="search-panel__results">
               <SearchBox placeholder="" className="searchbox" />
-              <CustomBrandRefinementList />
+              <CurrentRefinements />
               <Hits hitComponent={HitComponent} />
 
               <div className="pagination">
                 <Pagination />
               </div>
             </div>
+            <div className="search-panel__filters">
+              <DynamicWidgets fallbackComponent={FallbackComponent} />
+            </div>
           </div>
         </InstantSearch>
       </div>
@@ -97,25 +99,10 @@ function HitComponent({ hit }: HitProps) {
   );
 }
 
-function CustomBrandRefinementList() {
-  const { items } = useRefinementList({ attribute: 'brand' });
-  const selectedItems = items
-    .filter((item) => item.isRefined)
-    .map((item) => item.label);
-
+function FallbackComponent({ attribute }: any) {
   return (
-    <div
-      style={{
-        border: '1px solid gray',
-        padding: '1rem',
-        marginBottom: '1rem',
-      }}
-    >
-      <pre>{`useRefinementList({ attribute: 'brand' })`}</pre>
-      <small>
-        <strong>Selected brands: </strong>{' '}
-        {selectedItems.length ? selectedItems.join(', ') : 'none'}
-      </small>
-    </div>
+    <Panel header={attribute}>
+      <RefinementList attribute={attribute} />
+    </Panel>
   );
 }
diff --git a/packages/instantsearch.js/src/widgets/index/index.ts b/packages/instantsearch.js/src/widgets/index/index.ts
@@ -416,6 +416,15 @@ const index = (widgetParams: IndexWidgetParams): IndexWidget => {
             })
           );
         } else {
+          // Dispose all widgets without keeping the mutated state
+          widgets.forEach((widget) => {
+            widget.dispose!({
+              helper: helper!,
+              state: helper!.state,
+              parent: this,
+            });
+          });
+
           // Update helper state with previous localUiState
           const initialSearchParameters =
             new algoliasearchHelper.SearchParameters({