fixes

json-server/db.json

@@ -719,6 +719,12 @@
       "userId": "1",
       "text": "sss",
       "id": "YIjywga"
+    },
+    {
+      "articleId": "3",
+      "userId": "1",
+      "text": "sdfsdffds",
+      "id": "oiKSMac"
     }
   ],
   "users": [
@@ -862,6 +868,13 @@
       "rate": 4,
       "feedback": "asdfdsfds",
       "id": "LGlKc2U"
+    },
+    {
+      "userId": "1",
+      "articleId": "3",
+      "rate": 4,
+      "feedback": "asaff",
+      "id": "8d_uUBp"
     }
   ]
 }

src/pages/MainPage/ui/MainPage.tsx

@@ -1,21 +1,11 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Counter } from "@/entities/Counter";
 import { Page } from "@/widgets/Page";
-import { RatingCard } from "@/entities/Rating";
 
 const MainPage = () => {
   const { t } = useTranslation("main");
 
-  return (
-    <Page data-testid="MainPage">
-      {t("main")}
-      <div>
-        <Counter />
-        <RatingCard hasFeedback />
-      </div>
-    </Page>
-  );
+  return <Page data-testid="MainPage">{t("main")}</Page>;
 };
 
 export default MainPage;

src/shared/ui/redesigned/Button/Button.tsx

@@ -1,4 +1,9 @@
-import { ButtonHTMLAttributes, memo, ReactNode } from "react";
+import {
+  ButtonHTMLAttributes,
+  ForwardedRef,
+  forwardRef,
+  ReactNode,
+} from "react";
 import { classNames, Mods } from "@/shared/lib/classNames/classNames";
 import cls from "./Button.module.scss";
 
@@ -40,43 +45,46 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   addonRight?: ReactNode;
 }
 
-export const Button = memo((props: ButtonProps) => {
-  const {
-    className,
-    children,
-    variant = "outline",
-    square,
-    disabled,
-    fullWidth,
-    size = "m",
-    addonLeft,
-    addonRight,
-    color = "normal",
-    ...otherProps
-  } = props;
+export const Button = forwardRef(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+  (props: ButtonProps, _ref: ForwardedRef<HTMLButtonElement>) => {
+    const {
+      className,
+      children,
+      variant = "outline",
+      square,
+      disabled,
+      fullWidth,
+      size = "m",
+      addonLeft,
+      addonRight,
+      color = "normal",
+      ...otherProps
+    } = props;
 
-  const mods: Mods = {
-    [cls.square]: square,
-    [cls.disabled]: disabled,
-    [cls.fullWidth]: fullWidth,
-    [cls.withAddon]: Boolean(addonLeft) || Boolean(addonRight),
-  };
+    const mods: Mods = {
+      [cls.square]: square,
+      [cls.disabled]: disabled,
+      [cls.fullWidth]: fullWidth,
+      [cls.withAddon]: Boolean(addonLeft) || Boolean(addonRight),
+    };
 
-  return (
-    <button
-      type="button"
-      className={classNames(cls.Button, mods, [
-        className,
-        cls[variant],
-        cls[size],
-        cls[color],
-      ])}
-      disabled={disabled}
-      {...otherProps}
-    >
-      <div className={cls.addonLeft}>{addonLeft}</div>
-      {children}
-      <div className={cls.addonRight}>{addonRight}</div>
-    </button>
-  );
-});
+    return (
+      <button
+        type="button"
+        className={classNames(cls.Button, mods, [
+          className,
+          cls[variant],
+          cls[size],
+          cls[color],
+        ])}
+        disabled={disabled}
+        {...otherProps}
+      >
+        <div className={cls.addonLeft}>{addonLeft}</div>
+        {children}
+        <div className={cls.addonRight}>{addonRight}</div>
+      </button>
+    );
+  }
+);

src/shared/ui/redesigned/Popups/components/ListBox/ListBox.tsx

@@ -1,14 +1,14 @@
-import { Fragment, ReactNode, useMemo } from 'react';
-import { Listbox as HListBox } from '@headlessui/react';
-import { classNames } from '@/shared/lib/classNames/classNames';
-import { DropdownDirection } from '@/shared/types/ui';
-import { HStack } from '../../../../redesigned/Stack';
-import { Button } from '../../../Button/Button';
-import cls from './ListBox.module.scss';
-import { mapDirectionClass } from '../../styles/consts';
-import popupCls from '../../styles/popup.module.scss';
-import ArrowIcon from '@/shared/assets/icons/arrow-bottom.svg';
-import { Icon } from '../../../Icon';
+import { Fragment, ReactNode, useMemo } from "react";
+import { Listbox as HListBox } from "@headlessui/react";
+import { classNames } from "@/shared/lib/classNames/classNames";
+import { DropdownDirection } from "@/shared/types/ui";
+import { HStack } from "../../../../redesigned/Stack";
+import { Button } from "../../../Button/Button";
+import cls from "./ListBox.module.scss";
+import { mapDirectionClass } from "../../styles/consts";
+import popupCls from "../../styles/popup.module.scss";
+import ArrowIcon from "@/shared/assets/icons/arrow-bottom.svg";
+import { Icon } from "../../../Icon";
 
 export interface ListBoxItem<T extends string> {
   value: T;
@@ -35,7 +35,7 @@ export function ListBox<T extends string>(props: ListBoxProps<T>) {
     defaultValue,
     onChange,
     readonly,
-    direction = 'bottom right',
+    direction = "bottom right",
     label,
   } = props;
 
@@ -46,53 +46,50 @@ export function ListBox<T extends string>(props: ListBoxProps<T>) {
   }, [items, value]);
 
   return (
-      <HStack gap="4">
-        {label && <span>{`${label}>`}</span>}
-        <HListBox
-            disabled={readonly}
-            as="div"
-            className={classNames(cls.ListBox, {}, [
-              className,
-              popupCls.popup,
-            ])}
-            value={value}
-            onChange={onChange}
+    <HStack gap="4">
+      {label && <span>{`${label}>`}</span>}
+      <HListBox
+        disabled={readonly}
+        as="div"
+        className={classNames(cls.ListBox, {}, [className, popupCls.popup])}
+        value={value}
+        onChange={onChange}
+      >
+        <HListBox.Button
+          as={Button}
+          disabled={readonly}
+          className={cls.trigger}
+          variant="filled"
+          addonRight={<Icon Svg={ArrowIcon} />}
         >
-          <HListBox.Button disabled={readonly} className={cls.trigger}>
-            <Button
-                variant="filled"
-                disabled={readonly}
-                addonRight={<Icon Svg={ArrowIcon} />}
+          {selectedItem?.content ?? defaultValue}
+        </HListBox.Button>
+        <HListBox.Options
+          className={classNames(cls.options, {}, optionsClasses)}
+        >
+          {items?.map((item) => (
+            <HListBox.Option
+              key={item.value}
+              value={item.value}
+              disabled={item.disabled}
+              as={Fragment}
             >
-              {selectedItem?.content ?? defaultValue}
-            </Button>
-          </HListBox.Button>
-          <HListBox.Options
-              className={classNames(cls.options, {}, optionsClasses)}
-          >
-            {items?.map((item) => (
-                <HListBox.Option
-                    key={item.value}
-                    value={item.value}
-                    disabled={item.disabled}
-                    as={Fragment}
+              {({ active, selected }) => (
+                <li
+                  className={classNames(cls.item, {
+                    [popupCls.active]: active,
+                    [popupCls.disabled]: item.disabled,
+                    [popupCls.selected]: selected,
+                  })}
                 >
-                  {({ active, selected }) => (
-                      <li
-                          className={classNames(cls.item, {
-                            [popupCls.active]: active,
-                            [popupCls.disabled]: item.disabled,
-                            [popupCls.selected]: selected,
-                          })}
-                      >
-                        {selected}
-                        {item.content}
-                      </li>
-                  )}
-                </HListBox.Option>
-            ))}
-          </HListBox.Options>
-        </HListBox>
-      </HStack>
+                  {selected}
+                  {item.content}
+                </li>
+              )}
+            </HListBox.Option>
+          ))}
+        </HListBox.Options>
+      </HListBox>
+    </HStack>
   );
 }