chore: Update dependencies, remove unused code, and optimize formatting, fix delee and edit functions

Author: staszekz

.prettierrc

@@ -1,5 +1,6 @@
 {
   "eslint.enable": false,
   "eslint.codeActionsOnSave.rules": null,
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "prettier.configPath": ".prettierrc.json"
 }

.prettierrc copy .prettierrc.json.prettierrc copy renamed to .prettierrc.json

@@ -1,19 +1,15 @@
 import React, { useState } from 'react';
-import { connect } from 'react-redux';
 import { useForm } from '@tanstack/react-form';
 import dayjs from 'dayjs';
 import { z } from 'zod';
 import { zodValidator } from '@tanstack/zod-form-adapter';
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPlus, faUndo } from '@fortawesome/free-solid-svg-icons';
 import ReactTooltip from 'react-tooltip';
-import { useNotes, usePageTypeContext } from '@notes/hooks';
-import { RootState, addNewTask, addNewNote, toggleModalOpen } from '@notes/redux';
-import { Button, TextInput, Textarea} from '@mantine/core';
+import { useNotes } from '@notes/hooks';
+import { Button, TextInput, Textarea } from '@mantine/core';
 import { StyledForm } from 'src/components/atoms';
-
-
+import { modals } from '@mantine/modals';
+import { Note } from '@notes/types';
 
 type AddTaskComponentProps = {
   addNewNote: any;
@@ -23,22 +19,22 @@ type AddTaskComponentProps = {
   onAdd: any;
 };
 
-export const AddTask = ({  row }) => {
+export const AddTask = ({ data, editNote }: { data: Note; editNote }) => {
   const { addNewNote } = useNotes();
 
   const { Field, Subscribe, handleSubmit, state, useStore } = useForm({
-    defaultValues: row
-      ? row
+    defaultValues: data
+      ? data
       : {
           title: '',
           content: '',
-          created: dayjs().format('YYYY-MM-DD-HH:mm'),
+          created: dayjs().format('YYYY-MM-DD-HH:mm')
         },
     validatorAdapter: zodValidator,
     onSubmit: async ({ value }) => {
-      addNewNote.mutate(value);
-      close();
-    },
+      data ? editNote(value, data.id) : addNewNote.mutate(value);
+      modals.closeAll();
+    }
   });
   return (
     <StyledForm
@@ -52,17 +48,17 @@ export const AddTask = ({  row }) => {
         name="title"
         validators={{
           onBlur: z.string({
-            required_error: 'Title is required',
+            required_error: 'Title is required'
           }),
           onSubmit: z
             .string()
             .trim()
             .min(3, {
-              message: 'Title must be at least 3 characters',
+              message: 'Title must be at least 3 characters'
             })
             .max(50, {
-              message: 'Title must be at most 50 characters',
-            }),
+              message: 'Title must be at most 50 characters'
+            })
         }}
         children={({ state, handleChange, handleBlur }) => {
           return (
@@ -72,6 +68,8 @@ export const AddTask = ({  row }) => {
               defaultValue={state.value}
               onChange={e => handleChange(e.target.value)}
               onBlur={handleBlur}
+              withAsterisk
+              label="Note title"
               placeholder="Enter note title"
               error={state.meta?.errors[0]}
             />
@@ -83,25 +81,29 @@ export const AddTask = ({  row }) => {
         name="content"
         validators={{
           onBlur: z.string({
-            required_error: 'Content is required',
+            required_error: 'Content is required'
           }),
           onSubmit: z
             .string()
             .trim()
             .min(10, {
-              message: 'Title must be at least 10 characters',
+              message: 'Title must be at least 10 characters'
             })
             .max(255, {
-              message: 'Title must be at most 255 characters',
-            }),
+              message: 'Title must be at most 255 characters'
+            })
         }}
         children={({ state, handleChange, handleBlur }) => {
           return (
             <Textarea
+              autosize
               size="xl"
+              minRows={4}
+              label="Note details"
               defaultValue={state.value}
               onChange={e => handleChange(e.target.value)}
               onBlur={handleBlur}
+              withAsterisk
               placeholder="Enter note content"
               error={state.meta?.errors[0]}
             />
@@ -172,5 +174,3 @@ export const AddTask = ({  row }) => {
     </StyledForm>
   );
 };
-
-

.vscode/settings.json

@@ -14,14 +14,11 @@ const StyledAddButton = styled(StyledButton)`
   border: 3px solid ${({ theme }) => theme.colors.primary};
 `;
 
-export const AddNewButton = ({ onClick }) => {
+export const AddNewButton = ({ openModal }) => {
+  const handleClick = () => openModal();
+
   return (
-    <StyledAddButton
-      leftSection={<IconPlus />}
-      variant="contained"
-      onClick={onClick}
-      aria-label="Add new "
-    >
+    <StyledAddButton leftSection={<IconPlus />} variant="contained" onClick={handleClick} aria-label="Add new ">
       Add
     </StyledAddButton>
   );

src/components/Form/Form.tsx

@@ -12,4 +12,5 @@ export * from './Todo/TodoInput'
 export * from './Todo/TodoItem'
 export * from './Modal/Modal'
 export * from './table/table'
+export * from './table/modals'
 

src/components/button-link/add-new-button.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Title, Text } from '@mantine/core';
+import { modals } from '@mantine/modals';
+import { AddTask } from '../Form/Form';
+
+type Note = {
+  id: string;
+  title: string;
+  created: string;
+  content: string;
+};
+
+export const openModal = (data: Note, editNote) => {
+  console.log('🚀 ~ data:', data);
+  return modals.open({
+    title: <Title size={'1.5rem'}>{data ? 'Edit: ' : 'Add:'}</Title>,
+    centered: true,
+    children: <AddTask data={data} editNote={editNote} />
+  });
+};
+
+export const openDeleteModal = (id: string, deleteFn) => {
+  return modals.openConfirmModal({
+    title: 'Delete note',
+    centered: true,
+    children: 'Are you sure you want to delete this note?',
+    labels: {
+      confirm: 'Delete',
+      cancel: 'Cancel'
+    },
+    confirmProps: { color: 'red' },
+    onConfirm: () => deleteFn(id)
+  });
+};
+
+export const openDetailsModal = (content: string) => {
+  modals.open({
+    title: (
+      <Text fw={700} size="lg">
+        Details:
+      </Text>
+    ),
+    centered: true,
+    children: (
+      <Text ta="center" size="xl">
+        {content}
+      </Text>
+    )
+  });
+};

src/components/index.ts

@@ -1,7 +1,3 @@
 .tableBody {
   background-color: aliceblue;
 }
-.tableHeaderCell {
-  background-color: yellow;
-  text-align: center ;
-}

src/components/table/modals.tsx

@@ -1,34 +1,32 @@
 import React from 'react';
 import { LoadingOverlay, Table as MantineTable, Skeleton } from '@mantine/core';
 import { flexRender } from '@tanstack/react-table';
-import classes from './table.module.css'
+import classes from './table.module.css';
 
-export function Table({ table,isLoading }) {
+export function Table({ table, isLoading }) {
   return (
-
-    <MantineTable stickyHeader striped highlightOnHover >
+    <MantineTable stickyHeader striped highlightOnHover>
       <MantineTable.Thead bg={'var(--primary)'} c={'var(--white-text'}>
         {table.getHeaderGroups().map(headerGroup => (
           <MantineTable.Tr key={headerGroup.id}>
             {headerGroup.headers.map(header => {
               return (
-                <MantineTable.Th ta={'center'} key={header.id} >{
-                  flexRender(
-                    header.column.columnDef.header,
-                    header.getContext()
-                  )
-                }</MantineTable.Th>)
+                <MantineTable.Th ta={'center'} key={header.id} w="fit-content">
+                  {flexRender(header.column.columnDef.header, header.getContext())}
+                </MantineTable.Th>
+              );
             })}
-          </MantineTable.Tr>))}
+          </MantineTable.Tr>
+        ))}
       </MantineTable.Thead>
-      
+
       <MantineTable.Tbody className={classes.tableBody}>
-    <LoadingOverlay visible={isLoading} zIndex={1000} overlayProps={{ radius: "sm", blur: 1 }} />
+        <LoadingOverlay visible={isLoading} zIndex={1000} overlayProps={{ radius: 'sm', blur: 1 }} />
         {table.getRowModel().rows.map(row => (
           <MantineTable.Tr key={row.id}>
             {row.getVisibleCells().map(cell => (
               <MantineTable.Td key={cell.id}>
-              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
               </MantineTable.Td>
             ))}
           </MantineTable.Tr>