- Fixes spacing issue with collection ordering select

- Fixes issue where order is not updated when selecting the same item
game-node-app · Oct 22, 2024 · 83fa929 · 83fa929
1 parent ee9a4e9
commit 83fa929
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 28 deletions.
diff --git a/src/components/collection/collection-entry/view/CollectionEntriesView.tsx b/src/components/collection/collection-entry/view/CollectionEntriesView.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { CollectionEntry, Game } from "@/wrapper/server";
-import { Skeleton, Stack } from "@mantine/core";
+import { Flex, Skeleton, Stack } from "@mantine/core";
 import GameView from "@/components/game/view/GameView";
 import CenteredLoading from "@/components/general/CenteredLoading";
 import { Box, Space } from "@mantine/core";
@@ -53,21 +53,27 @@ const CollectionEntriesView = ({
                     mt={"md"}
                 >
                     <Box className="w-full flex justify-between mb-8">
-                        <SelectWithOrdering
-                            description={"Order by"}
-                            data={[
-                                {
-                                    value: "addedDate",
-                                    label: "Added Date",
-                                },
-                                { value: "releaseDate", label: "Release Date" },
-                            ]}
-                            defaultValue={"addedDate"}
-                            onChange={onChangeOrder}
-                        />
-                        <Box>
-                            <GameViewLayoutSwitcher setLayout={setLayout} />
+                        <Box className={"max-w-40"}>
+                            <SelectWithOrdering
+                                description={"Order by"}
+                                data={[
+                                    {
+                                        value: "addedDate",
+                                        label: "Added Date",
+                                    },
+                                    {
+                                        value: "releaseDate",
+                                        label: "Release Date",
+                                    },
+                                ]}
+                                defaultValue={"addedDate"}
+                                onChange={onChangeOrder}
+                            />
                         </Box>
+
+                        <Flex className={""}>
+                            <GameViewLayoutSwitcher setLayout={setLayout} />
+                        </Flex>
                     </Box>
                     <GameView.Content items={games!}>
                         {isLoading && buildLoadingSkeletons()}

diff --git a/src/components/general/input/select/SelectWithOrdering.tsx b/src/components/general/input/select/SelectWithOrdering.tsx
@@ -2,7 +2,8 @@ import React, { useState } from "react";
 import { Group, Select, SelectProps, Text } from "@mantine/core";
 import { IconSortAscending, IconSortDescending } from "@tabler/icons-react";
 
-interface Props extends Omit<SelectProps, "onChange" | "value"> {
+interface Props
+    extends Omit<SelectProps, "onChange" | "value" | "allowDeselect"> {
     defaultValue: string;
     onChange: (value: string, order: "ASC" | "DESC") => void;
 }
@@ -23,28 +24,31 @@ const SelectWithOrdering = ({
         "ASC" | "DESC"
     >("DESC");
 
+    console.log(internalSelectedItem, internalSelectedOrdering);
+
     return (
         <Select
             {...others}
+            value={internalSelectedItem}
             defaultValue={defaultValue}
-            allowDeselect={false}
             data={data}
+            // Necessary to trigger "onChange" when selecting the same option
+            allowDeselect={true}
             onChange={(v) => {
+                // v != null -> new value selected
                 if (v) {
                     // Only changes value when selecting another option
-                    if (v !== internalSelectedItem) {
-                        onChange(v, internalSelectedOrdering);
-                        setInternalSelectedItem(v);
-                        return;
-                    }
-
-                    const updatedOrdering =
-                        internalSelectedOrdering === "ASC" ? "DESC" : "ASC";
-
-                    setInternalSelectedOrdering(updatedOrdering);
-                    onChange(v, updatedOrdering);
+                    onChange(v, internalSelectedOrdering);
+                    setInternalSelectedItem(v);
                     return;
                 }
+
+                const updatedOrdering =
+                    internalSelectedOrdering === "ASC" ? "DESC" : "ASC";
+
+                setInternalSelectedOrdering(updatedOrdering);
+                onChange(internalSelectedItem, updatedOrdering);
+                return;
             }}
             renderOption={({ option, checked }) => {
                 return (