fix(anime-filters): add group separator to genres

hikka-io · May 11, 2024 · c3c9f37 · c3c9f37
1 parent df4d987
commit c3c9f37
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 32 deletions.
diff --git a/components/filters/anime-filters.tsx b/components/filters/anime-filters.tsx
@@ -2,7 +2,7 @@
 
 import clsx from 'clsx';
 import * as React from 'react';
-import { FC, useEffect, useState } from 'react';
+import { FC, Fragment, useEffect, useState } from 'react';
 import AntDesignClearOutlined from '~icons/ant-design/clear-outlined';
 import MaterialSymbolsSortRounded from '~icons/material-symbols/sort-rounded';
 
@@ -13,19 +13,19 @@ import { useQuery } from '@tanstack/react-query';
 import BadgeFilter from '@/components/filters/components/ui/badge-filter';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
+import { ScrollArea } from '@/components/ui/scroll-area';
 import {
     Select,
     SelectContent,
     SelectGroup,
     SelectItem,
     SelectList,
     SelectSearch,
+    SelectSeparator,
     SelectTrigger,
     SelectValue,
 } from '@/components/ui/select';
-import { ScrollArea } from '@/components/ui/scroll-area';
 import { Slider } from '@/components/ui/slider';
-import { Switch } from '@/components/ui/switch';
 import getAnimeGenres from '@/services/api/anime/getAnimeGenres';
 import {
     AGE_RATING,
@@ -37,6 +37,8 @@ import {
 import createQueryString from '@/utils/createQueryString';
 import { cn } from '@/utils/utils';
 
+import { Switch } from '../ui/switch';
+
 const YEARS: [number, number] = [1965, new Date().getFullYear()];
 
 interface Props {
@@ -222,21 +224,27 @@ const AnimeFilters: FC<Props> = ({ className, type }) => {
                                         Object.keys(
                                             genresList,
                                         ) as API.GenreType[]
-                                    ).map((type) => (
-                                        <SelectGroup
-                                            heading={GENRE_TYPES[type].title_ua}
-                                            key={type}
-                                        >
-                                            {genresList[type].map((genre) => (
-                                                <SelectItem
-                                                    key={genre.slug}
-                                                    value={genre.slug}
-                                                >
-                                                    {genre.name_ua ||
-                                                        genre.name_en}
-                                                </SelectItem>
-                                            ))}
-                                        </SelectGroup>
+                                    ).map((type, index) => (
+                                        <Fragment key={type}>
+                                            {index !== 0 && <SelectSeparator />}
+                                            <SelectGroup
+                                                heading={
+                                                    GENRE_TYPES[type].title_ua
+                                                }
+                                            >
+                                                {genresList[type].map(
+                                                    (genre) => (
+                                                        <SelectItem
+                                                            key={genre.slug}
+                                                            value={genre.slug}
+                                                        >
+                                                            {genre.name_ua ||
+                                                                genre.name_en}
+                                                        </SelectItem>
+                                                    ),
+                                                )}
+                                            </SelectGroup>
+                                        </Fragment>
                                     ))}
                             </SelectList>
                         </SelectContent>
@@ -326,6 +334,7 @@ const AnimeFilters: FC<Props> = ({ className, type }) => {
             >
                 <AntDesignClearOutlined /> Очистити
             </Button>
+            ; ;
         </ScrollArea>
     );
 };

diff --git a/components/ui/select.tsx b/components/ui/select.tsx
@@ -239,8 +239,10 @@ const SelectTrigger = React.forwardRef<
                 data-disabled={disabled}
                 {...props}
                 className={cn(
-                    !asChild && buttonVariants({ variant: 'outline', size: 'default' }),
-                    !asChild && 'flex h-auto min-h-12 items-center justify-between',
+                    !asChild &&
+                        buttonVariants({ variant: 'outline', size: 'default' }),
+                    !asChild &&
+                        'flex h-auto min-h-12 items-center justify-between',
                     disabled ? 'cursor-not-allowed opacity-50' : 'cursor-text',
                     className,
                 )}
@@ -310,7 +312,7 @@ const SelectValue = React.forwardRef<
         if (!multiple) {
             const item = itemCache ? itemCache[value[0]] : undefined;
 
-            console.log(item)
+            console.log(item);
 
             return (
                 <Fragment>
@@ -490,6 +492,7 @@ type SelectItemProps = ComponentPropsWithoutRef<typeof CommandItem> &
     Partial<SelectOptionItem> & {
         onSelect?: (value: string, item: SelectOptionItem) => void;
         onDeselect?: (value: string, item: SelectOptionItem) => void;
+        disableCheckbox?: boolean;
     };
 
 const SelectItem = React.forwardRef<
@@ -505,6 +508,7 @@ const SelectItem = React.forwardRef<
             label,
             disabled: disabledProp,
             className,
+            disableCheckbox,
             ...props
         },
         forwardedRef,
@@ -522,9 +526,7 @@ const SelectItem = React.forwardRef<
             return value
                 ? {
                       value,
-                      label:
-                          label ||
-                          children,
+                      label: label || children,
                   }
                 : undefined;
         }, [value, label, children]);
@@ -570,9 +572,14 @@ const SelectItem = React.forwardRef<
                 onSelect={!disabled && value ? handleClick : undefined}
                 ref={forwardedRef}
             >
-                <span className="size-4">
-                    <Checkbox className="border-secondary" checked={selected} />
-                </span>
+                {!disableCheckbox && (
+                    <span className="size-4">
+                        <Checkbox
+                            className="border-secondary"
+                            checked={selected}
+                        />
+                    </span>
+                )}
 
                 <span className="truncate">{children || label || value}</span>
             </CommandItem>

diff --git a/components/watchlist-button/watchlist-button.tsx b/components/watchlist-button/watchlist-button.tsx
@@ -38,11 +38,7 @@ const SETTINGS_BUTTON = {
     ),
     value: 'settings',
     disableCheckbox: true,
-    separator: true,
     title: 'Налаштування',
-    group: {
-        value: 'settings',
-    },
 };
 
 const OPTIONS = [
@@ -141,7 +137,7 @@ const Component = ({ slug, additional, disabled }: Props) => {
                     {watch && !watchError && (
                         <SelectGroup>
                             {watch && !watchError && (
-                                <SelectItem value="settings">
+                                <SelectItem disableCheckbox value="settings">
                                     {SETTINGS_BUTTON.label}
                                 </SelectItem>
                             )}