fix(restructure): restructured the for components repeated functionality

narainkarthikv · Dec 24, 2024 · 0667b5e · 0667b5e
1 parent 25f7765
commit 0667b5e
Show file tree

Hide file tree

Showing 9 changed files with 666 additions and 745 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,12 @@
+{
+    "semi": true,
+    "trailingComma": "es5",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "printWidth": 80,
+    "jsxSingleQuote": false,
+    "bracketSpacing": true,
+    "arrowParens": "always",
+    "endOfLine": "auto"
+  }
+
diff --git a/src/components/BoardCard.jsx b/src/components/BoardCard.jsx
@@ -0,0 +1,160 @@
+import React from 'react';
+import { Card, CardContent, IconButton, Popover, TextField, Typography } from '@mui/material';
+import SaveIcon from '@mui/icons-material/Save';
+import BackHandIcon from '@mui/icons-material/BackHand';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { holdItem, checkItem, deleteItem } from '../utils/helper';
+
+const BoardCard = ({
+  item,
+  index,
+  isEditing,
+  editingIndex,
+  editedTitle,
+  setEditedTitle,
+  editedContent,
+  setEditedContent,
+  handleEdit,
+  handleSave,
+  handleClickPopover,
+  handleClosePopover,
+  anchorEl,
+  setAnchorEl,
+  handleDragStart,
+  handleDrop,
+  handleDragOver,
+  setItems,
+  setSnackbar,
+}) => {
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popover' : undefined;
+  const buttonStyle = {
+    color: 'white',
+    borderRadius: '100%',
+    backgroundColor: '#f66b6b',
+    padding: '3px',
+  };
+
+  return (
+    <Card
+      variant="outlined"
+      draggable
+      onDragStart={() => handleDragStart(index)}
+      onDrop={(e) => handleDrop(index, e)}
+      onDragOver={(e) => handleDragOver(e)}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: item.checked ? 'rgb(119, 237, 119)' : item.held ? 'rgb(115, 191, 238)' : 'rgb(248, 248, 154)',
+        borderRadius: '12px',
+        width: '300px',
+        height: '200px',
+        padding: '1em',
+        transition: 'transform 0.3s ease-in, background-color 0.3s ease-in',
+        margin: '20px 15px 0px 0px',
+        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
+        '&:hover': { transform: 'scale(1.02)', boxShadow: '0 6px 12px rgba(0, 0, 0, 0.15)' },
+      }}
+    >
+      <CardContent sx={{ padding: 0 }}>
+        <Typography
+          sx={{
+            height: '2em',
+            fontWeight: 'bold',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '0 1em',
+            borderRadius: '8px 8px 0 0',
+          }}
+        >
+          <>
+            {isEditing && editingIndex === index ? (
+              <TextField size='small' onChange={(e) => setEditedTitle(e.target.value)} defaultValue={item.title} fullWidth />
+            ) :
+              (
+                <span style={{ fontWeight: 'bolder' }}>{item.title}</span>
+              )
+            }
+          </>
+          <>
+            <IconButton
+              sx={{ backgroundColor: '#f66b6b', padding: '3px', color: 'white' }}
+              aria-describedby={id}
+              onClick={(e) => handleClickPopover(e, index)}
+            >
+              <MoreVertIcon fontSize="small" />
+            </IconButton>
+
+            <Popover
+              id={id}
+              open={open}
+              anchorEl={anchorEl}
+              onClose={handleClosePopover}
+              anchorOrigin={{
+                vertical: 'top',
+                horizontal: 'right',
+              }}
+            >
+              <Typography
+                sx={{
+                  backgroundColor: '#3498db',
+                  padding: '0.5',
+                  display: 'flex',
+                  justifyContent: 'space-around',
+                }}
+              >
+                <IconButton
+                  onClick={() => {
+                    if (isEditing) {
+                      handleSave(item, editingIndex, editedTitle, editedContent);
+                    } else {
+                      handleEdit();
+                    }
+                  }}
+                  variant='contained'
+                >
+                  {isEditing ? (
+                    <SaveIcon fontSize="small" sx={buttonStyle} />
+                  ) : (
+                    <EditIcon fontSize="small" sx={buttonStyle} />
+                  )}
+                </IconButton>
+                <IconButton onClick={() => holdItem(setItems, editingIndex, setSnackbar, 'Board')} variant="contained">
+                  <BackHandIcon fontSize="small" sx={buttonStyle} />
+                </IconButton>
+                <IconButton onClick={() => checkItem(setItems, editingIndex, setSnackbar, 'Board')} variant="contained">
+                  <CheckCircleIcon fontSize="small" sx={buttonStyle} />
+                </IconButton>
+                <IconButton onClick={() => deleteItem(setItems, editingIndex, setSnackbar, 'Board')} variant="contained">
+                  <DeleteIcon fontSize="small" sx={buttonStyle} />
+                </IconButton>
+              </Typography>
+            </Popover>
+          </>
+        </Typography>
+        <Typography sx={{ padding: '1em', flexGrow: 1 }}>
+          {isEditing && editingIndex === index ? (
+            <TextField
+              size='small'
+              sx={{ width: '100%' }}
+              onChange={(e) => setEditedContent(e.target.value)}
+              defaultValue={item.content}
+              multiline
+              rows={4}
+            />
+          ) :
+            (
+              <span>{item.content}</span>
+            )
+          }
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default BoardCard;
diff --git a/src/components/CommonFilter.jsx b/src/components/CommonFilter.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { TextField } from '@mui/material';
+
+const CommonFilter = ({ filter, setFilter }) => (
+  <TextField
+    sx={{ margin: '1.3em' }}
+    onChange={(e) => setFilter(e.target.value)}
+    value={filter}
+    placeholder="Filter items!..."
+    variant="standard"
+  />
+);
+
+export default CommonFilter;
diff --git a/src/components/CommonSnackbar.jsx b/src/components/CommonSnackbar.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Snackbar, Alert } from '@mui/material';
+
+const CommonSnackbar = ({ snackbar, setSnackbar }) => {
+  const handleClose = () => {
+    setSnackbar({ ...snackbar, open: false });
+  };
+
+  return (
+    <Snackbar
+      open={snackbar.open}
+      autoHideDuration={6000}
+      onClose={handleClose}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+    >
+      <Alert onClose={handleClose} severity={snackbar.severity} sx={{ width: '100%' }}>
+        {snackbar.message}
+      </Alert>
+    </Snackbar>
+  );
+};
+
+export default CommonSnackbar;
diff --git a/src/components/NoteCard.jsx b/src/components/NoteCard.jsx
@@ -0,0 +1,157 @@
+import React from 'react';
+import { Card, CardContent, IconButton, Popover, TextField, Typography } from '@mui/material';
+import SaveIcon from '@mui/icons-material/Save';
+import BackHandIcon from '@mui/icons-material/BackHand';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { holdItem, checkItem, deleteItem } from '../utils/helper';
+
+const NoteCard = ({
+  item,
+  index,
+  isEditing,
+  editingIndex,
+  editedTitle,
+  setEditedTitle,
+  editedContent,
+  setEditedContent,
+  handleEdit,
+  handleSave,
+  handleClickPopover,
+  handleClosePopover,
+  anchorEl,
+  setAnchorEl,
+  handleDragStart,
+  handleDrop,
+  handleDragOver,
+  setItems,
+  setSnackbar,
+}) => {
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popover' : undefined;
+  const buttonStyle = {
+    color: 'white',
+    borderRadius: '100%',
+    backgroundColor: '#f66b6b',
+    padding: '3px',
+  };
+
+  return (
+    <Card
+      variant="outlined"
+      draggable
+      onDragStart={() => handleDragStart(index)}
+      onDrop={(e) => handleDrop(index, e)}
+      onDragOver={(e) => handleDragOver(e)}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: item.checked ? 'rgb(119, 237, 119)' : item.held ? 'rgb(115, 191, 238)' : 'rgb(248, 248, 154)',
+        borderRadius: '8px',
+        width: '250px',
+        height: '175px',
+        padding: 0,
+        transition: 'transform 0.3s ease-in, background-color 0.3s ease-in',
+        margin: '20px 15px 0px 0px',
+        border: 'none',
+        overflow: 'hidden',
+        '&:hover': { transform: 'scale(1.01)' },
+      }}
+    >
+      <CardContent sx={{ padding: 0 }}>
+        <Typography
+          sx={{
+            backgroundColor: '#3498DB',
+            height: '2.6em',
+            color: 'white',
+            fontWeight: 'bold',
+            alignContent: 'center',
+            position: 'relative'
+          }}
+        >
+          <>
+            {isEditing && editingIndex === index ? (
+              <TextField size='small' onChange={(e) => setEditedTitle(e.target.value)} defaultValue={item.title} ></TextField>
+            ) :
+              (
+                <span style={{ fontWeight: 'bolder' }}>{item.title}</span>
+              )
+            }
+          </>
+          <>
+            <IconButton
+              sx={{ position: 'absolute', top: 0, right: 0, backgroundColor: '#f66b6b', padding: '3px', margin: '8px', color: 'white' }}
+              aria-describedby={id}
+              onClick={(e) => handleClickPopover(e, index)}
+            >
+              <MoreVertIcon fontSize="small" />
+            </IconButton>
+
+            <Popover
+              id={id}
+              open={open}
+              anchorEl={anchorEl}
+              onClose={handleClosePopover}
+              anchorOrigin={{
+                vertical: 'top',
+                horizontal: 'right',
+              }}
+            >
+              <Typography
+                sx={{
+                  backgroundColor: '#3498db',
+                  padding: '0.5',
+                  alignSelf: 'end'
+                }}
+              >
+                <IconButton
+                  onClick={() => {
+                    if (isEditing) {
+                      handleSave(item, editingIndex, editedTitle, editedContent);
+                    } else {
+                      handleEdit();
+                    }
+                  }}
+                  variant='contained'
+                >
+                  {isEditing ? (
+                    <SaveIcon fontSize="small" sx={buttonStyle} />
+                  ) : (
+                    <EditIcon fontSize="small" sx={buttonStyle} />
+                  )}
+                </IconButton>
+                <IconButton onClick={() => holdItem(setItems, editingIndex, setSnackbar, 'Note')} variant="contained">
+                  <BackHandIcon fontSize="small" sx={buttonStyle} />
+                </IconButton>
+                <IconButton onClick={() => checkItem(setItems, editingIndex, setSnackbar, 'Note')} variant="contained">
+                  <CheckCircleIcon fontSize="small" sx={buttonStyle} />
+                </IconButton>
+                <IconButton onClick={() => deleteItem(setItems, editingIndex, setSnackbar, 'Note')} variant="contained">
+                  <DeleteIcon fontSize="small" sx={buttonStyle} />
+                </IconButton>
+              </Typography>
+            </Popover>
+          </>
+        </Typography>
+        <Typography>
+          {isEditing && editingIndex === index ? (
+            <TextField
+              size='small'
+              sx={{ width: '100%' }}
+              onChange={(e) => setEditedContent(e.target.value)}
+              defaultValue={item.content}
+            ></TextField>
+          ) :
+            (
+              <span>{item.content}</span>
+            )
+          }
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default NoteCard;