Merge pull request #69 from ReDI-School/enhancement/rating-group-#68

Enhancement/rating group #68

Author: Christheoguipo

frontend/src/components/RatingGroup/RatingGroup.stories.tsx

@@ -12,30 +12,9 @@ export default meta;
 
 const createIconButtons = (size: 'small' | 'medium' | 'large') => {
   return [
-    <IconButton
-      key={0}
-      icon="thumbs-down"
-      size={size}
-      variant="outlined"
-      theme="primary"
-      selected
-    />,
-    <IconButton
-      key={1}
-      icon="thumbs-up"
-      size={size}
-      variant="outlined"
-      theme="primary"
-      selected={false}
-    />,
-    <IconButton
-      key={2}
-      icon="double-thumbs-up"
-      size={size}
-      variant="outlined"
-      theme="primary"
-      selected={false}
-    />,
+    <IconButton icon="thumbs-down" size={size} variant="outlined" theme="primary" />,
+    <IconButton icon="thumbs-up" size={size} variant="outlined" theme="primary" selected />,
+    <IconButton icon="double-thumbs-up" size={size} variant="outlined" theme="primary" />,
   ];
 };
 

frontend/src/components/RatingGroup/RatingGroup.tsx

@@ -1,6 +1,8 @@
-import type { RatingGroupProps } from './RatingGroup.types';
-import styles from './RatingGroup.module.css';
 import { cva } from 'class-variance-authority';
+import { cloneElement, useState } from 'react';
+
+import type { RatingGroupProps } from './index';
+import styles from './RatingGroup.module.css';
 
 const styledRatingGroup = cva(styles.ratingGroup, {
   variants: {
@@ -13,7 +15,24 @@ const styledRatingGroup = cva(styles.ratingGroup, {
 });
 
 const RatingGroup = ({ children, size = 'medium', className }: RatingGroupProps) => {
-  return <div className={styledRatingGroup({ size, className })}>{children}</div>;
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(
+    children.findIndex((c) => c.props.selected)
+  );
+
+  const handleItemClick = (index: number) => {
+    setSelectedIndex(index);
+  };
+
+  return (
+    <div className={styledRatingGroup({ size, className })}>
+      {children.map((iconButton, index) => {
+        return cloneElement(iconButton, {
+          onClick: () => handleItemClick(index),
+          selected: selectedIndex === index,
+        });
+      })}
+    </div>
+  );
 };
 
 export default RatingGroup;

frontend/src/components/RatingGroup/RatingGroup.types.ts

@@ -1,14 +1,14 @@
-import type React from 'react';
-import type { IconButton } from '../IconButton';
+import type { IconButtonProps } from '../IconButton';
+import type { ReactElement } from 'react';
 
 interface RatingGroupProps {
   /**
    * The array of IconButton Component to display
    */
-  children: React.ReactElement<typeof IconButton>[];
+  children: ReactElement<IconButtonProps>[];
 
   /**
-   * The array of IconButton Component to display
+   * The size of IconButton Components to display
    */
   size?: 'small' | 'medium' | 'large';