[bugfix/feature]: Improve ratings (#332)

* [bugfix/feature]: Improve ratings

Fix: add preventDefault/stopPropagation to prevent scrolling to top in queue
Feat: instead of double click for clear, click on same value

src/renderer/components/rating/index.tsx

@@ -1,12 +1,8 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import { MouseEvent } from 'react';
-import { Rating as MantineRating, RatingProps as MantineRatingProps } from '@mantine/core';
+import { useCallback } from 'react';
+import { Rating as MantineRating, RatingProps } from '@mantine/core';
+import debounce from 'lodash/debounce';
 import styled from 'styled-components';
-import { Tooltip } from '/@/renderer/components/tooltip';
-
-interface RatingProps extends Omit<MantineRatingProps, 'onClick'> {
-    onClick: (e: MouseEvent<HTMLDivElement>, value: number | undefined) => void;
-}
 
 const StyledRating = styled(MantineRating)`
     & .mantine-Rating-symbolBody {
@@ -16,18 +12,28 @@ const StyledRating = styled(MantineRating)`
     }
 `;
 
-export const Rating = ({ onClick, ...props }: RatingProps) => {
-    // const debouncedOnClick = debounce(onClick, 100);
+export const Rating = ({ onChange, ...props }: RatingProps) => {
+    const valueChange = useCallback(
+        (rating: number) => {
+            if (onChange) {
+                if (rating === props.value) {
+                    onChange(0);
+                } else {
+                    onChange(rating);
+                }
+            }
+        },
+        [onChange, props.value],
+    );
+
+    const debouncedOnChange = debounce(valueChange, 100);
 
     return (
-        <Tooltip
-            label="Double click to clear"
-            openDelay={1000}
-        >
-            <StyledRating
-                {...props}
-                onDoubleClick={(e) => onClick(e, props.value)}
-            />
-        </Tooltip>
+        <StyledRating
+            {...props}
+            onChange={(e) => {
+                debouncedOnChange(e);
+            }}
+        />
     );
 };

src/renderer/components/virtual-table/cells/rating-cell.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable import/no-cycle */
-import { MouseEvent } from 'react';
 import type { ICellRendererParams } from '@ag-grid-community/core';
 import { Rating } from '/@/renderer/components/rating';
 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
@@ -9,8 +8,6 @@ export const RatingCell = ({ value, node }: ICellRendererParams) => {
     const updateRatingMutation = useSetRating({});
 
     const handleUpdateRating = (rating: number) => {
-        if (!value) return;
-
         updateRatingMutation.mutate(
             {
                 query: {
@@ -27,32 +24,12 @@ export const RatingCell = ({ value, node }: ICellRendererParams) => {
         );
     };
 
-    const handleClearRating = (e: MouseEvent<HTMLDivElement>) => {
-        e.preventDefault();
-        e.stopPropagation();
-        updateRatingMutation.mutate(
-            {
-                query: {
-                    item: [value],
-                    rating: 0,
-                },
-                serverId: value?.serverId,
-            },
-            {
-                onSuccess: () => {
-                    node.setData({ ...node.data, userRating: 0 });
-                },
-            },
-        );
-    };
-
     return (
         <CellContainer $position="center">
             <Rating
                 size="xs"
                 value={value?.userRating}
                 onChange={handleUpdateRating}
-                onClick={handleClearRating}
             />
         </CellContainer>
     );