From bbb66cc0dae2b89ae6cfbe8c81f15edac4ca76f6 Mon Sep 17 00:00:00 2001
From: Alexander Midteide <144693023+alexdigdir@users.noreply.github.com>
Date: Mon, 25 Nov 2024 11:45:12 +0100
Subject: [PATCH] chore: Remove sorting button (#1392) (#1396)

chore: Remove sorting button (#1392)
---
 .../src/components/FosToolbar/FosToolbar.tsx  | 16 +---
 .../SortOrderDropdown/SortOrderDropdown.tsx   | 96 -------------------
 .../src/components/SortOrderDropdown/index.ts |  1 -
 .../sortOrderDropdown.module.css              | 26 -----
 packages/frontend/src/components/index.ts     |  1 -
 packages/frontend/src/i18n/resources/en.json  |  1 -
 packages/frontend/src/i18n/resources/nb.json  |  1 -
 packages/frontend/src/pages/Inbox/Inbox.tsx   | 43 +--------
 .../frontend/src/pages/Inbox/queryParams.ts   |  5 -
 .../sortOrderDropdown.stories.tsx             | 35 -------
 10 files changed, 6 insertions(+), 219 deletions(-)
 delete mode 100644 packages/frontend/src/components/SortOrderDropdown/SortOrderDropdown.tsx
 delete mode 100644 packages/frontend/src/components/SortOrderDropdown/index.ts
 delete mode 100644 packages/frontend/src/components/SortOrderDropdown/sortOrderDropdown.module.css
 delete mode 100644 packages/storybook/src/stories/SortOrderDropdown/sortOrderDropdown.stories.tsx

diff --git a/packages/frontend/src/components/FosToolbar/FosToolbar.tsx b/packages/frontend/src/components/FosToolbar/FosToolbar.tsx
index c23179b5..d987701a 100644
--- a/packages/frontend/src/components/FosToolbar/FosToolbar.tsx
+++ b/packages/frontend/src/components/FosToolbar/FosToolbar.tsx
@@ -1,4 +1,4 @@
-import { ArrowsUpDownIcon, BookmarkIcon, PlusIcon } from '@navikt/aksel-icons';
+import { BookmarkIcon, PlusIcon } from '@navikt/aksel-icons';
 import { useTranslation } from 'react-i18next';
 import { ProfileButton } from '../ProfileButton';
 
@@ -6,24 +6,17 @@ import styles from './fosToolbar.module.css';
 
 interface FosToolbarProps {
   onFilterBtnClick?: () => void;
-  onSortBtnClick?: () => void;
   onSaveBtnClick: () => void;
   hideSaveButton?: boolean;
 }
 /*
  * FosToolbar is a floating toolbar that is only visible on mobile and contains action buttons for filtering, sorting and saving search.
  * @param onFilterBtnClick - Function that is called when the filter button is clicked.
- * @param onSortBtnClick - Function that is called when the sort button is clicked.
  * @param onSaveBtnClick - Function that is called when the save button is clicked.
  * @param hideSaveButton - Optional boolean that determines if the save button should be hidden. Default is false
  * @returns A floating toolbar with action buttons for filtering, sorting and saving search.
  */
-export const FosToolbar = ({
-  onFilterBtnClick,
-  onSaveBtnClick,
-  onSortBtnClick,
-  hideSaveButton = false,
-}: FosToolbarProps) => {
+export const FosToolbar = ({ onFilterBtnClick, onSaveBtnClick, hideSaveButton = false }: FosToolbarProps) => {
   const { t } = useTranslation();
   return (
     <div className={styles.fosToolbar}>
@@ -33,11 +26,6 @@ export const FosToolbar = ({
             <PlusIcon fontSize="1.5rem" /> {t('fos.buttons.filter')}
           </ProfileButton>
         )}
-        {onSortBtnClick && (
-          <ProfileButton onClick={onSortBtnClick} size="sm" variant="tertiary">
-            <ArrowsUpDownIcon fontSize="1.5rem" /> {t('fos.buttons.sort')}
-          </ProfileButton>
-        )}
         {hideSaveButton ? null : (
           <ProfileButton onClick={onSaveBtnClick} size="sm" variant="tertiary">
             <BookmarkIcon fontSize="1.5rem" /> {t('fos.buttons.save_search')}
diff --git a/packages/frontend/src/components/SortOrderDropdown/SortOrderDropdown.tsx b/packages/frontend/src/components/SortOrderDropdown/SortOrderDropdown.tsx
deleted file mode 100644
index a5b5f8a1..00000000
--- a/packages/frontend/src/components/SortOrderDropdown/SortOrderDropdown.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { ArrowsUpDownIcon, CheckmarkIcon, ChevronDownIcon } from '@navikt/aksel-icons';
-import cx from 'classnames';
-import { t } from 'i18next';
-import { type ForwardedRef, forwardRef, useImperativeHandle, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Backdrop } from '../Backdrop';
-import { DropdownList, DropdownMobileHeader } from '../DropdownMenu';
-import { MenuItem } from '../MenuBar';
-import { ProfileButton } from '../ProfileButton';
-import styles from './sortOrderDropdown.module.css';
-
-export type SortingOrder = 'updated_desc' | 'updated_asc';
-
-export type SortOrderDropdownRef = {
-  openSortOrder: () => void;
-};
-
-interface SortOrderDropdownOption {
-  label: string;
-  id: SortingOrder;
-}
-interface SortOrderDropdownProps {
-  onSelect: (selectedSortOrder: SortingOrder) => void;
-  selectedSortOrder: SortingOrder;
-  options?: SortOrderDropdownOption[];
-  btnClassName?: string;
-}
-
-const defaultSortOrderOptions = [
-  {
-    id: 'updated_desc' as SortingOrder,
-    label: t('sort_order.updated_desc'),
-  },
-  {
-    id: 'updated_asc' as SortingOrder,
-    label: t('sort_order.updated_asc'),
-  },
-];
-
-export const SortOrderDropdown = forwardRef(
-  (
-    { onSelect, selectedSortOrder, options = defaultSortOrderOptions, btnClassName }: SortOrderDropdownProps,
-    ref: ForwardedRef<SortOrderDropdownRef>,
-  ): JSX.Element => {
-    useImperativeHandle(ref, () => ({
-      openSortOrder() {
-        setIsOpen(true);
-      },
-    }));
-
-    const [isOpen, setIsOpen] = useState<boolean>(false);
-    const { t } = useTranslation();
-    const selectedOptionLabel = options.find((option) => option.id === selectedSortOrder)?.label;
-
-    return (
-      <div className={cx({ [styles.isOpen]: isOpen })}>
-        <ProfileButton
-          onClick={() => setIsOpen(!isOpen)}
-          className={cx(styles.openBtn, btnClassName)}
-          variant="secondary"
-          size="xs"
-        >
-          <ArrowsUpDownIcon fontSize="1.25rem" />
-          {selectedOptionLabel}
-        </ProfileButton>
-        <DropdownList className={styles.positionedRight} isExpanded={isOpen}>
-          <DropdownMobileHeader
-            onClickButton={() => {
-              setIsOpen(false);
-            }}
-            buttonText={t('sort_order.choose.label')}
-            buttonIcon={<ChevronDownIcon fontSize="1.5rem" />}
-          />
-          {options.map((option) => (
-            <MenuItem
-              key={option.id}
-              onClick={() => {
-                setIsOpen(false);
-                onSelect(option.id);
-              }}
-              count={0}
-              leftContent={
-                <MenuItem.LeftContent>
-                  <span className={styles.checkMarkHolder}>{option.id === selectedSortOrder && <CheckmarkIcon />}</span>
-                  <span className={styles.filterListLabel}>{option.label}</span>
-                </MenuItem.LeftContent>
-              }
-              isActive={option.id === selectedSortOrder}
-            />
-          ))}
-        </DropdownList>
-        <Backdrop show={isOpen} onClick={() => setIsOpen(false)} />
-      </div>
-    );
-  },
-);
diff --git a/packages/frontend/src/components/SortOrderDropdown/index.ts b/packages/frontend/src/components/SortOrderDropdown/index.ts
deleted file mode 100644
index dc179206..00000000
--- a/packages/frontend/src/components/SortOrderDropdown/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { SortOrderDropdown } from './SortOrderDropdown.tsx';
diff --git a/packages/frontend/src/components/SortOrderDropdown/sortOrderDropdown.module.css b/packages/frontend/src/components/SortOrderDropdown/sortOrderDropdown.module.css
deleted file mode 100644
index 1261b73b..00000000
--- a/packages/frontend/src/components/SortOrderDropdown/sortOrderDropdown.module.css
+++ /dev/null
@@ -1,26 +0,0 @@
-.checkMarkHolder {
-  min-width: 1.5rem;
-
-  svg {
-    height: 1.5rem;
-    width: auto;
-  }
-}
-
-.positionedRight {
-  right: 0;
-}
-
-.filterListLabel {
-  font-size: 1rem;
-  margin-left: 0.5rem;
-}
-
-.content {
-  display: flex;
-  align-items: center;
-}
-
-.isOpen button {
-  z-index: 999;
-}
diff --git a/packages/frontend/src/components/index.ts b/packages/frontend/src/components/index.ts
index 3ede01d4..4928e1f7 100644
--- a/packages/frontend/src/components/index.ts
+++ b/packages/frontend/src/components/index.ts
@@ -8,7 +8,6 @@ export * from './FilterBar';
 export * from './BottomDrawer';
 export * from './PageLayout';
 export * from './DropdownMenu';
-export * from './SortOrderDropdown';
 export * from './Snackbar';
 export * from './HorizontalLine';
 export * from './Badge';
diff --git a/packages/frontend/src/i18n/resources/en.json b/packages/frontend/src/i18n/resources/en.json
index 7d47c0ff..bd8ec959 100644
--- a/packages/frontend/src/i18n/resources/en.json
+++ b/packages/frontend/src/i18n/resources/en.json
@@ -54,7 +54,6 @@
   "footer.nav.service_messages": "Service messages",
   "fos.buttons.filter": "Filter",
   "fos.buttons.save_search": "Save",
-  "fos.buttons.sort": "Sort",
   "header.searchPlaceholder": "Search in inbox",
   "inbox.attachment.count": "{count, plural, =0 {No attachments} one {# attachment} other {# attachments}}",
   "inbox.attachment.link": "Link as attachment",
diff --git a/packages/frontend/src/i18n/resources/nb.json b/packages/frontend/src/i18n/resources/nb.json
index 6522011b..4baca75f 100644
--- a/packages/frontend/src/i18n/resources/nb.json
+++ b/packages/frontend/src/i18n/resources/nb.json
@@ -54,7 +54,6 @@
   "footer.nav.service_messages": "Driftsmeldinger",
   "fos.buttons.filter": "Filter",
   "fos.buttons.save_search": "Lagre",
-  "fos.buttons.sort": "Sorter",
   "header.searchPlaceholder": "Søk i innboks",
   "inbox.attachment.count": "{count, plural, =0 {Ingen vedlegg} one {# vedlegg} other {# vedlegg}}",
   "inbox.attachment.link": "Lenke som vedlegg",
diff --git a/packages/frontend/src/pages/Inbox/Inbox.tsx b/packages/frontend/src/pages/Inbox/Inbox.tsx
index 1b20c43a..4a73f29d 100644
--- a/packages/frontend/src/pages/Inbox/Inbox.tsx
+++ b/packages/frontend/src/pages/Inbox/Inbox.tsx
@@ -16,7 +16,6 @@ import {
   InboxItem,
   InboxItems,
   PartyDropdown,
-  SortOrderDropdown,
   useSearchString,
   useSelectedDialogs,
   useSnackbar,
@@ -25,14 +24,13 @@ import type { FilterBarRef } from '../../components/FilterBar/FilterBar.tsx';
 import { FosToolbar } from '../../components/FosToolbar';
 import { InboxItemsHeader } from '../../components/InboxItem/InboxItemsHeader.tsx';
 import { SaveSearchButton } from '../../components/SavedSearchButton/SaveSearchButton.tsx';
-import type { SortOrderDropdownRef, SortingOrder } from '../../components/SortOrderDropdown/SortOrderDropdown.tsx';
 import { QUERY_KEYS } from '../../constants/queryKeys.ts';
 import { FeatureFlagKeys, useFeatureFlag } from '../../featureFlags';
 import { useFormat } from '../../i18n/useDateFnsLocale.tsx';
 import { InboxSkeleton } from './InboxSkeleton.tsx';
 import { filterDialogs, getFilterBarSettings } from './filters.ts';
 import styles from './inbox.module.css';
-import { clearFiltersInQueryParams, getFiltersFromQueryParams, getSortingOrderFromQueryParams } from './queryParams.ts';
+import { clearFiltersInQueryParams, getFiltersFromQueryParams } from './queryParams.ts';
 
 interface InboxProps {
   viewType: InboxViewType;
@@ -69,30 +67,19 @@ interface DialogCategory {
   items: InboxItemInput[];
 }
 
-const sortDialogs = (dialogs: InboxItemInput[], sortOrder: SortingOrder): InboxItemInput[] => {
-  return dialogs.sort((a, b) => {
-    if (sortOrder === 'updated_desc') {
-      return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
-    }
-    return new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime();
-  });
-};
-
 export const Inbox = ({ viewType }: InboxProps) => {
   const format = useFormat();
   const filterBarRef = useRef<FilterBarRef>(null);
-  const sortOrderDropdownRef = useRef<SortOrderDropdownRef>(null);
   const queryClient = useQueryClient();
 
   const disableBulkActions = useFeatureFlag<boolean>(FeatureFlagKeys.DisableBulkActions);
 
   const location = useLocation();
   const { t } = useTranslation();
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams] = useSearchParams();
   const { selectedItems, setSelectedItems, selectedItemCount, inSelectionMode } = useSelectedDialogs();
   const { openSnackbar } = useSnackbar();
   const [isSavingSearch, setIsSavingSearch] = useState<boolean>(false);
-  const [selectedSortOrder, setSelectedSortOrder] = useState<SortingOrder>('updated_desc');
 
   const { selectedParties } = useParties();
   const { searchString } = useSearchString();
@@ -112,8 +99,8 @@ export const Inbox = ({ viewType }: InboxProps) => {
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: Full control of what triggers this code is needed
   const itemsToDisplay = useMemo(() => {
-    return sortDialogs(filterDialogs(dataSource, activeFilters, format), selectedSortOrder);
-  }, [dataSource, activeFilters, selectedSortOrder]);
+    return filterDialogs(dataSource, activeFilters, format);
+  }, [dataSource, activeFilters]);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: Full control of what triggers this code is needed
   useEffect(() => {
@@ -125,19 +112,8 @@ export const Inbox = ({ viewType }: InboxProps) => {
   // biome-ignore lint/correctness/useExhaustiveDependencies: Full control of what triggers this code is needed
   useEffect(() => {
     setInitialFilters(getFiltersFromQueryParams(searchParams));
-    const sortBy = getSortingOrderFromQueryParams(searchParams);
-    if (sortBy && sortBy !== selectedSortOrder) {
-      setSelectedSortOrder(getSortingOrderFromQueryParams(searchParams));
-    }
   }, [location.pathname]);
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: Full control of what triggers this code is needed
-  useEffect(() => {
-    const newSearchParams = new URLSearchParams(searchParams);
-    newSearchParams.set('sortBy', selectedSortOrder);
-    setSearchParams(newSearchParams, { replace: true });
-  }, [selectedSortOrder]);
-
   const shouldShowSearchResults = !isFetchingSearchResults && showingSearchResults;
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: Full control of what triggers this code is needed
@@ -283,14 +259,6 @@ export const Inbox = ({ viewType }: InboxProps) => {
               activeFilters={activeFilters}
             />
           </div>
-          <div className={styles.sortOrderContainer}>
-            <SortOrderDropdown
-              ref={sortOrderDropdownRef}
-              onSelect={setSelectedSortOrder}
-              selectedSortOrder={selectedSortOrder}
-              btnClassName={styles.hideForSmallScreens}
-            />
-          </div>
         </div>
         <FosToolbar
           onFilterBtnClick={
@@ -300,9 +268,6 @@ export const Inbox = ({ viewType }: InboxProps) => {
                 }
               : undefined
           }
-          onSortBtnClick={() => {
-            sortOrderDropdownRef?.current?.openSortOrder();
-          }}
           onSaveBtnClick={handleSaveSearch}
           hideSaveButton={savedSearchDisabled}
         />
diff --git a/packages/frontend/src/pages/Inbox/queryParams.ts b/packages/frontend/src/pages/Inbox/queryParams.ts
index 4221a7c8..b07aa30d 100644
--- a/packages/frontend/src/pages/Inbox/queryParams.ts
+++ b/packages/frontend/src/pages/Inbox/queryParams.ts
@@ -1,5 +1,4 @@
 import type { Filter } from '../../components';
-import type { SortingOrder } from '../../components/SortOrderDropdown/SortOrderDropdown.tsx';
 
 export const getFiltersFromQueryParams = (searchParams: URLSearchParams): Filter[] => {
   const compressedData = searchParams.get('filters');
@@ -12,10 +11,6 @@ export const clearFiltersInQueryParams = (): void => {
   window.history.replaceState({}, '', `${window.location.pathname}?${searchParams}`);
 };
 
-export const getSortingOrderFromQueryParams = (searchParams: URLSearchParams): SortingOrder => {
-  return searchParams.get('sortBy') as SortingOrder;
-};
-
 export const getSearchStringFromQueryParams = (searchParams: URLSearchParams): string => {
   return searchParams.get('search') || '';
 };
diff --git a/packages/storybook/src/stories/SortOrderDropdown/sortOrderDropdown.stories.tsx b/packages/storybook/src/stories/SortOrderDropdown/sortOrderDropdown.stories.tsx
deleted file mode 100644
index 27e29b6e..00000000
--- a/packages/storybook/src/stories/SortOrderDropdown/sortOrderDropdown.stories.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { Meta } from '@storybook/react';
-import { SortOrderDropdown } from 'frontend';
-import { useState } from 'react';
-import { withRouter } from 'storybook-addon-react-router-v6';
-
-export default {
-  title: 'Components/SortOrderDropdown',
-  component: SortOrderDropdown,
-  decorators: [
-    withRouter,
-    (Story) => {
-      return (
-        <div style={{ padding: 20 }}>
-          <Story />
-        </div>
-      );
-    },
-  ],
-  tags: ['autodocs'],
-} as Meta<typeof SortOrderDropdown>;
-
-export const Example = () => {
-  const [selectedSortOrder, setSelectedSortOrder] = useState<string>('name');
-  return (
-    <SortOrderDropdown
-      onSelect={(selectedSortOrder: string) => setSelectedSortOrder(selectedSortOrder)}
-      selectedSortOrder={selectedSortOrder}
-      options={[
-        { label: 'Sorter etter navn', id: 'name' },
-        { label: 'Sorter etter dato', id: 'date' },
-        { label: 'Sorter etter størrelse', id: 'size' },
-      ]}
-    />
-  );
-};