From 9a6ae3a6824ccb524fdfed63e66ac06102c98623 Mon Sep 17 00:00:00 2001 From: petark7 Date: Mon, 15 Jul 2024 15:26:59 +0200 Subject: [PATCH 01/39] Implement Add Tag functionality Implement component - rename to for clarity - move from to layout.tsx - minor UI modifications for better UX --- app/content-panel/tags/AddTag.tsx | 61 +++++++++++++++++++ app/content-panel/tags/AddTags.tsx | 27 -------- .../tags/TagManagementControls.tsx | 28 +++++++++ app/content-panel/tags/TagTable.tsx | 20 +++--- app/content-panel/tags/addTag.module.scss | 36 +++++++++++ app/content-panel/tags/page.tsx | 35 +++++++++-- ...scss => tagManagementControls.module.scss} | 7 +++ app/layout.tsx | 2 + .../module-components/contact/ContactForm.tsx | 3 +- .../button/button.module.scss | 5 ++ 10 files changed, 179 insertions(+), 45 deletions(-) create mode 100644 app/content-panel/tags/AddTag.tsx delete mode 100644 app/content-panel/tags/AddTags.tsx create mode 100644 app/content-panel/tags/TagManagementControls.tsx create mode 100644 app/content-panel/tags/addTag.module.scss rename app/content-panel/tags/{addTags.module.scss => tagManagementControls.module.scss} (74%) diff --git a/app/content-panel/tags/AddTag.tsx b/app/content-panel/tags/AddTag.tsx new file mode 100644 index 00000000..baac33f9 --- /dev/null +++ b/app/content-panel/tags/AddTag.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import { Formik, Form, Field } from 'formik'; +import * as Yup from 'yup'; +import { toast } from 'react-toastify'; +import Button from '../../../components/reusable-components/button/Button'; +import styles from './addTag.module.scss'; + +interface AddTagProps { + onCancel: () => void; + onAdd: (tag: string) => boolean; +} + +const AddTag: React.FC = ({ onCancel, onAdd }) => { + const validationSchema = Yup.object({ + tagName: Yup.string().trim().required('Tag name cannot be empty'), + }); + + return ( + { + const success = onAdd(values.tagName.trim()); + if (success) { + resetForm(); + onCancel(); + toast.success('Tag created successfully'); + } else { + setFieldError('tagName', 'Tag already exists'); + } + }} + > + {({ errors, touched }) => ( +
+
+
+ + {errors.tagName && touched.tagName && ( +
{errors.tagName}
+ )} +
+
+
+ )} +
+ ); +}; + +export default AddTag; diff --git a/app/content-panel/tags/AddTags.tsx b/app/content-panel/tags/AddTags.tsx deleted file mode 100644 index 19b0dc54..00000000 --- a/app/content-panel/tags/AddTags.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React, { useState } from 'react'; -import Button from '../../../components/reusable-components/button/Button'; -import Input from '../../../components/reusable-components/input/Input'; -import styles from './addTags.module.scss'; - -const AddTags = () => { - const [searchTerm, setSearchTerm] = useState(''); - - const handleAdd = () => { - console.log(searchTerm); - }; - - return ( -
- - -
- ); -}; - -export default AddTags; diff --git a/app/content-panel/tags/TagManagementControls.tsx b/app/content-panel/tags/TagManagementControls.tsx new file mode 100644 index 00000000..ca51e29c --- /dev/null +++ b/app/content-panel/tags/TagManagementControls.tsx @@ -0,0 +1,28 @@ +import React, { useState } from 'react'; +import Button from '../../../components/reusable-components/button/Button'; +import Input from '../../../components/reusable-components/input/Input'; +import styles from './tagManagementControls.module.scss'; + +interface TagSearchProps { + onAddClick: () => void; +} + +const TagManagementControls: React.FC = ({ onAddClick }) => { + const [searchTerm, setSearchTerm] = useState(''); + + return ( +
+
+ +
+
+ ); +}; + +export default TagManagementControls; diff --git a/app/content-panel/tags/TagTable.tsx b/app/content-panel/tags/TagTable.tsx index 8c4a6df2..30720441 100644 --- a/app/content-panel/tags/TagTable.tsx +++ b/app/content-panel/tags/TagTable.tsx @@ -1,6 +1,6 @@ 'use client'; -import React, { useState } from 'react'; +import React from 'react'; import ReusableTable from '../../../components/reusable-components/reusable-table/ReusableTable'; import Button from '../../../components/reusable-components/button/Button'; @@ -9,13 +9,12 @@ interface Tag { name: string; } -const TagTable: React.FC = () => { - const [tags] = useState([ - { id: '1', name: 'React' }, - { id: '2', name: 'TypeScript' }, - { id: '3', name: 'NextJS' }, - ]); +interface TagTableProps { + tags: Tag[]; + setTags: React.Dispatch>; +} +const TagTable: React.FC = ({ tags, setTags }) => { const headers: (keyof Tag)[] = ['name']; const displayNames: { [key in keyof Tag]?: string } = { name: 'Tag Name' }; @@ -24,7 +23,7 @@ const TagTable: React.FC = () => { }; const handleDelete = (id: string) => { - console.log('Delete tag', id); + setTags(tags.filter((tag) => tag.id !== id)); }; const renderActions = (item: Tag) => ( @@ -35,14 +34,11 @@ const TagTable: React.FC = () => { buttonClass={['editButton']} onClick={() => handleEdit(item.id)} /> -