implement App Reordering, refactor MainNav to functional.

folio-org · Jan 27, 2025 · cab6928 · cab6928
1 parent 92aa6e1
commit cab6928
Show file tree

Hide file tree

Showing 9 changed files with 142 additions and 234 deletions.
diff --git a/index.js b/index.js
@@ -15,6 +15,7 @@ export { default as useOkapiKy } from './src/useOkapiKy';
 export { default as withOkapiKy } from './src/withOkapiKy';
 export { default as useCustomFields } from './src/useCustomFields';
 export { default as createReactQueryClient } from './src/createReactQueryClient';
+export { useAppOrderContext } from './src/components/MainNav/AppOrderProvider';
 
 /* components */
 export { default as AppContextMenu } from './src/components/MainNav/CurrentApp/AppContextMenu';

diff --git a/src/RootWithIntl.js b/src/RootWithIntl.js
@@ -35,6 +35,7 @@ import {
   ForgotUserNameCtrl,
   AppCtxMenuProvider,
   SessionEventContainer,
+  AppOrderProvider,
 } from './components';
 import StaleBundleWarning from './components/StaleBundleWarning';
 import { StripesContext } from './StripesContext';
@@ -65,55 +66,57 @@ const RootWithIntl = ({ stripes, token = '', isAuthenticated = false, disableAut
                     <>
                       <MainContainer>
                         <AppCtxMenuProvider>
-                          <MainNav stripes={connectedStripes} queryClient={queryClient} />
-                          {typeof connectedStripes?.config?.staleBundleWarning === 'object' && <StaleBundleWarning />}
-                          <HandlerManager
-                            event={events.LOGIN}
-                            stripes={connectedStripes}
-                          />
-                          { (typeof connectedStripes.okapi !== 'object' || connectedStripes.discovery.isFinished) && (
-                            <ModuleContainer id="content">
-                              <OverlayContainer />
-                              {connectedStripes.config.useSecureTokens && <SessionEventContainer history={history} queryClient={queryClient} />}
-                              <Switch>
-                                <TitledRoute
-                                  name="home"
-                                  path="/"
-                                  key="root"
-                                  exact
-                                  component={<Front stripes={connectedStripes} />}
-                                />
-                                <TitledRoute
-                                  name="ssoRedirect"
-                                  path="/sso-landing"
-                                  key="sso-landing"
-                                  component={<SSORedirect stripes={connectedStripes} />}
-                                />
-                                <TitledRoute
-                                  name="oidcRedirect"
-                                  path="/oidc-landing"
-                                  key="oidc-landing"
-                                  component={<OIDCRedirect stripes={stripes} />}
-                                />
-                                <TitledRoute
-                                  name="logoutTimeout"
-                                  path="/logout-timeout"
-                                  component={<Logout />}
-                                />
-                                <TitledRoute
-                                  name="settings"
-                                  path="/settings"
-                                  component={<Settings stripes={connectedStripes} />}
-                                />
-                                <TitledRoute
-                                  name="logout"
-                                  path="/logout"
-                                  component={<Logout />}
-                                />
-                                <ModuleRoutes stripes={connectedStripes} />
-                              </Switch>
-                            </ModuleContainer>
-                          )}
+                          <AppOrderProvider>
+                            <MainNav stripes={connectedStripes} queryClient={queryClient} />
+                            {typeof connectedStripes?.config?.staleBundleWarning === 'object' && <StaleBundleWarning />}
+                            <HandlerManager
+                              event={events.LOGIN}
+                              stripes={connectedStripes}
+                            />
+                            { (typeof connectedStripes.okapi !== 'object' || connectedStripes.discovery.isFinished) && (
+                              <ModuleContainer id="content">
+                                <OverlayContainer />
+                                {connectedStripes.config.useSecureTokens && <SessionEventContainer history={history} queryClient={queryClient} />}
+                                <Switch>
+                                  <TitledRoute
+                                    name="home"
+                                    path="/"
+                                    key="root"
+                                    exact
+                                    component={<Front stripes={connectedStripes} />}
+                                  />
+                                  <TitledRoute
+                                    name="ssoRedirect"
+                                    path="/sso-landing"
+                                    key="sso-landing"
+                                    component={<SSORedirect stripes={connectedStripes} />}
+                                  />
+                                  <TitledRoute
+                                    name="oidcRedirect"
+                                    path="/oidc-landing"
+                                    key="oidc-landing"
+                                    component={<OIDCRedirect stripes={stripes} />}
+                                  />
+                                  <TitledRoute
+                                    name="logoutTimeout"
+                                    path="/logout-timeout"
+                                    component={<Logout />}
+                                  />
+                                  <TitledRoute
+                                    name="settings"
+                                    path="/settings"
+                                    component={<Settings stripes={connectedStripes} />}
+                                  />
+                                  <TitledRoute
+                                    name="logout"
+                                    path="/logout"
+                                    component={<Logout />}
+                                  />
+                                  <ModuleRoutes stripes={connectedStripes} />
+                                </Switch>
+                              </ModuleContainer>
+                            )}
+                          </AppOrderProvider>
                         </AppCtxMenuProvider>
                       </MainContainer>
                       <Callout ref={setCalloutDomRef} />

diff --git a/src/components/MainNav/AppList/AppList.js b/src/components/MainNav/AppList/AppList.js
@@ -91,7 +91,7 @@ class AppList extends Component {
         {
           apps.map(app => {
             const isHidden = hiddenItemIds.includes(app.id);
-
+            // const isHidden = false;
             return (
               <li
                 className={classnames(css.navItem, { [css.hidden]: isHidden })}

diff --git a/src/components/MainNav/AppList/components/AppListDropdown/AppListDropdown.js b/src/components/MainNav/AppList/components/AppListDropdown/AppListDropdown.js
@@ -20,7 +20,7 @@ const AppListDropdown = ({ toggleDropdown, apps, listRef, selectedApp }) => (
     striped
   >
     {
-      sortBy(apps, app => app.displayName.toLowerCase()).map(app => (
+      apps.map(app => (
         <NavListItem
           key={app.id}
           data-test-app-list-dropdown-item

diff --git a/src/components/MainNav/AppList/components/ResizeContainer/ResizeContainer.js b/src/components/MainNav/AppList/components/ResizeContainer/ResizeContainer.js
@@ -7,6 +7,7 @@ import classnames from 'classnames';
 import debounce from 'lodash/debounce';
 import PropTypes from 'prop-types';
 import css from './ResizeContainer.css';
+import isEqual from 'lodash/isEqual';
 
 class ResizeContainer extends React.Component {
   static propTypes = {
@@ -40,9 +41,12 @@ class ResizeContainer extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
+    const { currentAppId, items } = this.props;
     // Update hidden items when the current app ID changes
     // to make sure that no items are hidden behind the current app label
-    if (this.props.currentAppId && this.props.currentAppId !== prevProps.currentAppId) {
+    if (currentAppId !== prevProps.currentAppId ||
+      items !== prevProps.items
+    ) {
       this.updateHiddenItems();
     }
   }
@@ -79,7 +83,7 @@ class ResizeContainer extends React.Component {
    * Determine hidden items on mount and resize
    */
   updateHiddenItems = (callback) => {
-    const { hideAllWidth, offset } = this.props;
+    const { hideAllWidth, offset, items } = this.props;
     const { cachedItemWidths } = this.state;
     const shouldHideAll = window.innerWidth <= hideAllWidth;
     const wrapperEl = this.wrapperRef.current;
@@ -92,7 +96,7 @@ class ResizeContainer extends React.Component {
       shouldHideAll ? Object.keys(cachedItemWidths) :
 
         // Find items that should be hidden
-        Object.keys(cachedItemWidths).reduce((acc, id) => {
+        items.reduce((acc, { id }) => {
           const itemWidth = cachedItemWidths[id];
           const shouldBeHidden = (itemWidth + acc.accWidth + offset) > wrapperWidth;
           const hidden = shouldBeHidden ? acc.hidden.concat(id) : acc.hidden;
@@ -101,7 +105,8 @@ class ResizeContainer extends React.Component {
             hidden,
             accWidth: acc.accWidth + itemWidth,
           };
-        }, {
+        },
+        {
           hidden: [],
           accWidth: 0,
         }).hidden;