chore: Remove sorting button (#1392) (#1396)

chore: Remove sorting button (#1392)

packages/frontend/src/components/FosToolbar/FosToolbar.tsx

@@ -1,29 +1,22 @@
-import { ArrowsUpDownIcon, BookmarkIcon, PlusIcon } from '@navikt/aksel-icons';
+import { BookmarkIcon, PlusIcon } from '@navikt/aksel-icons';
 import { useTranslation } from 'react-i18next';
 import { ProfileButton } from '../ProfileButton';
 
 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')}

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';

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",

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",

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}
         />

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') || '';
 };