From bd0a7009a326c24cbcba5e9b4d9a550071cf26da Mon Sep 17 00:00:00 2001
From: Mo Tarbin <mhed.t91@gmail.com>
Date: Sun, 22 Dec 2024 15:37:45 -0500
Subject: [PATCH] chore: Add title to IconButtonWithMenu and group by
 functionality

---
 src/views/Chores/IconButtonWithMenu.jsx | 10 +++++++++-
 src/views/Chores/MyChores.jsx           | 23 +++++++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/views/Chores/IconButtonWithMenu.jsx b/src/views/Chores/IconButtonWithMenu.jsx
index eb4de19..0adb89c 100644
--- a/src/views/Chores/IconButtonWithMenu.jsx
+++ b/src/views/Chores/IconButtonWithMenu.jsx
@@ -1,4 +1,4 @@
-import { Chip, Menu, MenuItem } from '@mui/joy'
+import { Chip, Menu, MenuItem, Typography } from '@mui/joy'
 import IconButton from '@mui/joy/IconButton'
 import React, { useEffect, useRef, useState } from 'react'
 import { getTextColorFromBackgroundColor } from '../../utils/LabelColors'
@@ -12,6 +12,7 @@ const IconButtonWithMenu = ({
   setSelectedItem,
   isActive,
   useChips,
+  title,
 }) => {
   const [anchorEl, setAnchorEl] = useState(null)
   const menuRef = useRef(null)
@@ -58,6 +59,13 @@ const IconButtonWithMenu = ({
         open={Boolean(anchorEl)}
         onClose={handleMenuClose}
       >
+        {title && (
+          <MenuItem key={`${key}-title`} disabled>
+            <Typography level='body-sm' sx={{ fontWeight: 'bold' }}>
+              {title}
+            </Typography>
+          </MenuItem>
+        )}
         {options?.map(item => (
           <MenuItem
             key={`${key}-${item?.id}`}
diff --git a/src/views/Chores/MyChores.jsx b/src/views/Chores/MyChores.jsx
index 8034f1d..1a90490 100644
--- a/src/views/Chores/MyChores.jsx
+++ b/src/views/Chores/MyChores.jsx
@@ -5,6 +5,7 @@ import {
   ExpandCircleDown,
   FilterAlt,
   PriorityHigh,
+  Sort,
   Style,
   Unarchive,
 } from '@mui/icons-material'
@@ -50,6 +51,7 @@ const MyChores = () => {
   const [filteredChores, setFilteredChores] = useState([])
   const [selectedFilter, setSelectedFilter] = useState('All')
   const [choreSections, setChoreSections] = useState([])
+  const [selectedChoreSection, setSelectedChoreSection] = useState('due_date')
   const [openChoreSections, setOpenChoreSections] = useState({})
   const [searchTerm, setSearchTerm] = useState('')
   const [activeUserId, setActiveUserId] = useState(0)
@@ -436,6 +438,7 @@ const MyChores = () => {
         />
         <IconButtonWithMenu
           icon={<PriorityHigh />}
+          title='Filter by Priority'
           options={Priorities}
           selectedItem={selectedFilter}
           onItemSelect={selected => {
@@ -449,6 +452,7 @@ const MyChores = () => {
           // TODO : this need simplification we want to display both user labels and chore labels
           // that why we are merging them here.
           // we also filter out the labels that user created as those will be part of user labels
+          title='Filter by Label'
           options={[
             ...userLabels,
             ...chores
@@ -537,6 +541,25 @@ const MyChores = () => {
               ))}
           </Menu>
         </List>
+        <Divider orientation='vertical' />
+        <IconButtonWithMenu
+          title='Group by'
+          icon={<Sort />}
+          options={[
+            { name: 'Due Date', value: 'due_date' },
+            { name: 'Priority', value: 'priority' },
+            { name: 'Labels', value: 'labels' },
+          ]}
+          selectedItem={selectedChoreSection}
+          onItemSelect={selected => {
+            const section = sectionSorter(selected.value, chores)
+            setChoreSections(section)
+            setSelectedChoreSection(selected.value)
+            setFilteredChores(chores)
+            setSelectedFilter('All')
+          }}
+          mouseClickHandler={handleMenuOutsideClick}
+        />
       </Box>
       {selectedFilter !== 'All' && (
         <Chip