Merge pull request #3 from majicmaj/majicmaj-feature/refactor-labels-view-table

Feature - Refactor Labels Table to display the appearance of the label

src/views/Labels/LabelView.jsx

@@ -2,13 +2,14 @@ import DeleteIcon from '@mui/icons-material/Delete'
 import EditIcon from '@mui/icons-material/Edit'
 import {
   Box,
+  Button,
+  Chip,
   CircularProgress,
   Container,
   IconButton,
-  Table,
   Typography,
 } from '@mui/joy'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import LabelModal from '../Modals/Inputs/LabelModal'
 import { useLabels } from './LabelQueries'
 
@@ -17,12 +18,15 @@ import { Add } from '@mui/icons-material'
 import { useQueryClient } from 'react-query'
 import { useNavigate } from 'react-router-dom'
 import { DeleteLabel } from '../../utils/Fetcher'
+import { getTextColorFromBackgroundColor } from '../../utils/LabelColors'
 import ConfirmationModal from '../Modals/Inputs/ConfirmationModal'
 
 const LabelView = () => {
   const { data: labels, isLabelsLoading, isError } = useLabels()
+
   const [userLabels, setUserLabels] = useState([labels])
   const [modalOpen, setModalOpen] = useState(false)
+
   const [currentLabel, setCurrentLabel] = useState(null)
   const queryClient = useQueryClient()
   const [confirmationModel, setConfirmationModel] = useState({})
@@ -74,6 +78,7 @@ const LabelView = () => {
     )
     setUserLabels(updatedLabels)
   }
+
   useEffect(() => {
     if (labels) {
       setUserLabels(labels)
@@ -103,62 +108,49 @@ const LabelView = () => {
 
   return (
     <Container maxWidth='md'>
-      <Table aria-label='Manage Labels' stickyHeader hoverRow>
+      <div className='flex flex-col gap-2'>
-        <thead>
+        {userLabels.map(label => (
-          <tr>
+          <div
-            <th style={{ textAlign: 'center' }}>Label</th>
+            key={label}
-            <th style={{ textAlign: 'center' }}>Color</th>
+            className='grid w-full grid-cols-[1fr,auto,auto] rounded-lg border border-zinc-200/80 p-4 shadow-sm dark:bg-zinc-900'
-            <th style={{ textAlign: 'center' }}>Actions</th>
+          >
-          </tr>
+            <Chip
-        </thead>
+              variant='outlined'
-        <tbody>
+              color='primary'
-          {userLabels.map(label => (
+              size='lg'
-            <tr key={label.id}>
+              sx={{
-              <td
+                background: label.color,
-                onClick={() => {
+                borderColor: label.color,
-                  Navigate('/my/chores', { state: { label: label.id } })
+                color: getTextColorFromBackgroundColor(label.color),
-                }}
+              }}
+            >
+              {label.name}
+            </Chip>
+
+            <div className='flex gap-2'>
+              <Button
+                size='sm'
+                variant='soft'
+                color='neutral'
+                onClick={() => handleEditLabel(label)}
+                startDecorator={<EditIcon />}
+
               >
-                {label.name}
+                Edit
-              </td>
+              </Button>
-              <td
+              <IconButton
-                style={{
+                size='sm'
-                  // center without display flex:
+                variant='soft'
-                  textAlign: 'center',
+                onClick={() => handleDeleteLabel(label.id)}
-                  alignItems: 'center',
+                color='danger'
-                  justifyContent: 'center',
-                }}
               >
-                <Box
+                <DeleteIcon />
-                  width={20}
+              </IconButton>
-                  height={20}
+            </div>
-                  borderRadius='50%'
+          </div>
-                  sx={{
+        ))}
-                    backgroundColor: label.color,
+      </div>
-                  }}
+
-                />
-              </td>
-              <td
-                style={{
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                }}
-              >
-                <IconButton onClick={() => handleEditLabel(label)}>
-                  <EditIcon />
-                </IconButton>
-                <IconButton
-                  onClick={() => handleDeleteClicked(label.id)}
-                  color='danger'
-                >
-                  <DeleteIcon />
-                </IconButton>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </Table>
 
       {userLabels.length === 0 && (
         <Typography textAlign='center' mt={2}>
@@ -174,6 +166,7 @@ const LabelView = () => {
           label={currentLabel}
         />
       )}
+
       <Box
         sx={{
           position: 'fixed',

src/views/Modals/Inputs/LabelModal.jsx

@@ -1,3 +1,4 @@
+import React, { useEffect, useState } from 'react'
 import {
   Box,
   Button,
@@ -9,18 +10,16 @@ import {
   Select,
   Typography,
 } from '@mui/joy'
-
+import { useQueryClient, useMutation } from 'react-query'
-import React, { useEffect } from 'react'
-import { useQueryClient } from 'react-query'
 import { CreateLabel, UpdateLabel } from '../../../utils/Fetcher'
 import LABEL_COLORS from '../../../utils/LabelColors'
 import { useLabels } from '../../Labels/LabelQueries'
 
-function LabelModal({ isOpen, onClose, onSave, label }) {
+function LabelModal({ isOpen, onClose, label }) {
-  const [labelName, setLabelName] = React.useState('')
+  const [labelName, setLabelName] = useState('')
-  const [color, setColor] = React.useState('')
+  const [color, setColor] = useState('')
-  const [error, setError] = React.useState('')
+  const [error, setError] = useState('')
-  const { data: userLabels, isLoadingLabels } = useLabels()
+  const { data: userLabels = [] } = useLabels()
   const queryClient = useQueryClient()
 
   // Populate the form fields when editing
@@ -35,48 +34,48 @@ function LabelModal({ isOpen, onClose, onSave, label }) {
     setError('')
   }, [label])
 
+  // Validation logic
   const validateLabel = () => {
-    if (!labelName || labelName.trim() === '') {
+    if (!labelName.trim()) {
       setError('Name cannot be empty')
       return false
-    } else if (
+    }
+    if (
       userLabels.some(
-        userLabel => userLabel.name === labelName && userLabel.id !== label.id,
+        userLabel => userLabel.name === labelName && userLabel.id !== label?.id,
       )
     ) {
       setError('Label with this name already exists')
       return false
-    } else if (color === '') {
+    }
+    if (!color) {
       setError('Please select a color')
       return false
     }
     return true
   }
 
-  const handleSave = () => {
+  // Mutation for saving labels
-    if (!validateLabel()) {
+  const saveLabelMutation = useMutation(
-      return
+    newLabel =>
-    }
+      label
-
+        ? UpdateLabel({ id: label.id, ...newLabel })
-    const saveAction = label
+        : CreateLabel(newLabel),
-      ? UpdateLabel({ id: label.id, name: labelName, color })
+    {
-      : CreateLabel({ name: labelName, color })
+      onSuccess: () => {
-
+        queryClient.invalidateQueries('labels')
-    saveAction.then(res => {
-      if (res.error) {
-        console.log(res.error)
-        setError('Failed to save label. Please try again.')
-        return
-      }
-      res.json().then(data => {
-        if (data.error) {
-          setError('Failed to save label. Please try again.')
-          return
-        }
-        onSave({ id: data?.res?.id, name: labelName, color })
         onClose()
-      })
+      },
-    })
+      onError: () => {
+        setError('Failed to save label. Please try again.')
+      },
+    },
+  )
+
+  const handleSave = () => {
+    if (!validateLabel()) return
+
+    saveLabelMutation.mutate({ name: labelName, color })
   }
 
   return (
@@ -85,51 +84,39 @@ function LabelModal({ isOpen, onClose, onSave, label }) {
         <Typography level='title-md' mb={1}>
           {label ? 'Edit Label' : 'Add Label'}
         </Typography>
+
         <FormControl>
-          <Typography level='body-sm' alignSelf={'start'}>
+          <Typography gutterBottom level='body-sm' alignSelf='start'>
             Name
           </Typography>
           <Input
-            margin='normal'
-            required
             fullWidth
-            name='labelName'
-            type='text'
             id='labelName'
             value={labelName}
             onChange={e => setLabelName(e.target.value)}
           />
         </FormControl>
 
-        {/* Color Selection */}
         <FormControl>
-          <Typography level='body-sm' alignSelf={'start'}>
+          <Typography gutterBottom level='body-sm' alignSelf='start'>
-            Color:
+            Color
           </Typography>
-
           <Select
-            label='Color'
             value={color}
+            onChange={(e, value) => value && setColor(value)}
             renderValue={selected => (
               <Typography
-                key={selected.value}
                 startDecorator={
                   <Box
                     className='h-4 w-4'
                     borderRadius={10}
-                    sx={{
+                    sx={{ background: selected.value }}
-                      background: selected.value,
-                      shadow: { xs: 1 },
-                    }}
                   />
                 }
               >
                 {selected.label}
               </Typography>
             )}
-            onChange={(e, value) => {
-              value && setColor(value)
-            }}
           >
             {LABEL_COLORS.map(val => (
               <Option key={val.value} value={val.value}>
@@ -138,31 +125,24 @@ function LabelModal({ isOpen, onClose, onSave, label }) {
                     width={20}
                     height={20}
                     borderRadius={10}
-                    sx={{
+                    sx={{ background: val.value }}
-                      background: val.value,
-                    }}
                   />
-                  <Typography
+                  <Typography sx={{ ml: 1 }} variant='caption'>
-                    sx={{
-                      ml: 1,
-                      color: 'text.secondary',
-                    }}
-                    variant='caption'
-                  >
                     {val.name}
                   </Typography>
                 </Box>
               </Option>
             ))}
           </Select>
-          {error && (
-            <Typography color='warning' level='body-sm'>
-              {error}
-            </Typography>
-          )}
         </FormControl>
 
-        <Box display={'flex'} justifyContent={'space-around'} mt={1}>
+        {error && (
+          <Typography color='warning' level='body-sm'>
+            {error}
+          </Typography>
+        )}
+
+        <Box display='flex' justifyContent='space-around' mt={1}>
           <Button onClick={handleSave} fullWidth sx={{ mr: 1 }}>
             {label ? 'Save Changes' : 'Add Label'}
           </Button>