Merge pull request #20631 from AmbrishRamachandiran/bazaar-decending

Adding descending sort (Z-A) in a bazaar plugin

.changeset/heavy-rings-play.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-bazaar': patch
+---
+
+Adding descending sort in a bazaar plugin

plugins/bazaar/src/components/SortMethodSelector/SortMethodSelector.tsx

@@ -50,7 +50,8 @@ export const SortMethodSelector = ({
       >
         <MenuItem value={0}>Latest updated</MenuItem>
         <MenuItem value={1}>A-Z</MenuItem>
-        <MenuItem value={2}>Most members</MenuItem>
+        <MenuItem value={2}>Z-A</MenuItem>
+        <MenuItem value={3}>Most members</MenuItem>
       </Select>
     </FormControl>
   );

plugins/bazaar/src/components/SortView/SortView.tsx

@@ -27,7 +27,12 @@ import { BazaarProject } from '../../types';
 import { bazaarApiRef } from '../../api';
 import { Alert } from '@material-ui/lab';
 import SearchBar from 'material-ui-search-bar';
-import { sortByDate, sortByMembers, sortByTitle } from '../../util/sortMethods';
+import {
+  sortByDate,
+  sortByMembers,
+  sortByTitle,
+  sortByTitleDescending,
+} from '../../util/sortMethods';
 import { SortMethodSelector } from '../SortMethodSelector';
 import { fetchCatalogItems } from '../../util/fetchMethods';
 import { parseBazaarProject } from '../../util/parseMethods';
@@ -78,7 +83,12 @@ export const SortView = (props: SortViewProps) => {
   const bazaarApi = useApi(bazaarApiRef);
   const catalogApi = useApi(catalogApiRef);
   const classes = useStyles();
-  const sortMethods = [sortByDate, sortByTitle, sortByMembers];
+  const sortMethods = [
+    sortByDate,
+    sortByTitle,
+    sortByTitleDescending,
+    sortByMembers,
+  ];
   const [sortMethodNbr, setSortMethodNbr] = useState(0);
   const [openAdd, setOpenAdd] = useState(false);
   const [searchValue, setSearchValue] = useState('');

plugins/bazaar/src/util/sortMethods.ts

@@ -27,12 +27,11 @@ export const sortByDate = (a: BazaarProject, b: BazaarProject): number => {
 };
 
 export const sortByTitle = (a: BazaarProject, b: BazaarProject) => {
-  if (a.title < b.title) {
-    return -1;
-  } else if (a.title > b.title) {
-    return 1;
-  }
-  return 0;
+  return a.title.localeCompare(b.title);
+};
+
+export const sortByTitleDescending = (a: BazaarProject, b: BazaarProject) => {
+  return b.title.localeCompare(a.title);
 };
 
 export const sortByMembers = (a: BazaarProject, b: BazaarProject) => {