Sort the games

src/App.tsx

@@ -12,6 +12,7 @@ import { Genre } from "./hooks/useGenres";
 export interface GameQuery { 
   genre: Genre | null;
   platform: Platform | null;
+  sortOrder: string;
 }
 
 function App() {
@@ -39,7 +40,7 @@ function App() {
       <GridItem area="main">
         <HStack spacing={5} paddingLeft={2} marginBottom={5}>
           <PlatformSelector selectedPlatform={gameQuery.platform} onSelectPlatform={(platform) => setGameQuery({ ...gameQuery, platform}) } />
-          <SortSelector />
+          <SortSelector sortOrder={gameQuery.sortOrder} onSelectSortOrder={(sortOrder) => setGameQuery({ ...gameQuery, sortOrder })} />
         </HStack>
         <GameGrid gameQuery={gameQuery} />
       </GridItem>

src/components/SortSelector.tsx

@@ -1,22 +1,37 @@
-import { Button, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
+import { Button, Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react";
-import { BsChevronDown } from 'react-icons/bs';
+import { BsChevronDown } from "react-icons/bs";
+
+interface Props {
+  onSelectSortOrder: (sortOrder: string) => void;
+  sortOrder: string;
+}
+
+const SortSelector = ({ onSelectSortOrder, sortOrder }: Props) => {
+  const sortOrders = [
+    { value: "", label: "Relevance" },
+    { value: "-added", label: "Date added" },
+    { value: "name", label: "Name" },
+    { value: "-released", label: "Release date" },
+    { value: "-metacritic", label: "Popularity" },
+    { value: "-rating", label: "Average rating" },
+  ];
+
+  const currentSortOrder = sortOrders.find(order => order.value === sortOrder);
 
-const SortSelector = () => {
   return (
     <Menu>
       <MenuButton as={Button} rightIcon={<BsChevronDown />}>
-        Order by: Relevance
+        Order by: {currentSortOrder?.label || 'Relevance'}
       </MenuButton>
       <MenuList>
-        <MenuItem>Relevance</MenuItem>
+        {sortOrders.map((order) => (
-        <MenuItem>Date added</MenuItem>
+          <MenuItem onClick={() => onSelectSortOrder(order.value)} key={order.value} value={order.value}>
-        <MenuItem>Name</MenuItem>
+            {order.label}
-        <MenuItem>Release date</MenuItem>
+          </MenuItem>
-        <MenuItem>Popularity</MenuItem>
+        ))}
-        <MenuItem>Average rating</MenuItem>
       </MenuList>
     </Menu>
   );
-}
+};
 
-export default SortSelector
+export default SortSelector;

src/hooks/useGames.ts

@@ -23,6 +23,7 @@ const useGames = (gameQuery: GameQuery) =>
       params: {
         genres: gameQuery.genre?.id,
         platforms: gameQuery.platform?.id,
+        ordering: gameQuery.sortOrder
       },
     },
     [gameQuery]

src/services/image-url.ts

@@ -1,5 +1,7 @@
 
 const getCroppedImageUrl = (url: string) => {
+  if (!url) return '';
+  
   const target = 'media/';
   const index = url.indexOf(target) + target.length;
   return url.slice(0, index) + 'crop/600/400/' + url.slice(index);