Tags page with React Query fetching implementation

.gitleaks.toml

@@ -1,5 +1,9 @@
 title = "Custom Gitleaks Config"
-allowlist = { regexes = ["https://registry\\.npmjs\\.org"] }
+
+[allowlist]
+files = ["package-lock.json"]
+regexes = ["https://registry\\.npmjs\\.org"]
+paths = ['''package-lock\.json''']
 
 # Rule to detect API keys
 [[rules]]

apis/axiosInstance.ts

@@ -0,0 +1,26 @@
+import axios from 'axios';
+
+const axiosInstance = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// TODO: REPLACE BEARER LOGIC AS SOON AS AUTHENTICATION IS IMPLEMENTED. THIS IS FOR TESTING PURPOSES
+axiosInstance.interceptors.request.use(
+  (config) => {
+    if (process.env.NEXT_PUBLIC_BEARER) {
+      // eslint-disable-next-line no-param-reassign
+      config.headers.Authorization = `Bearer ${process.env.NEXT_PUBLIC_BEARER}`;
+    } else {
+      throw new Error('No bearer token found');
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+export default axiosInstance;

api/endpoints.ts → apis/endpoints.ts

@@ -18,6 +18,12 @@ const ENDPOINTS = {
   NEWSLETTER: {
     SUBSCRIBE: `${API_BASE_URL}/newsletter-subscribers`,
   },
+  TAGS: {
+    GET_ALL: `${API_BASE_URL}/content/blog-post-tags`,
+    CREATE: `${API_BASE_URL}/content/blog-post-tags`,
+    DELETE: `${API_BASE_URL}/content/blog-post-tags`,
+    EDIT: `${API_BASE_URL}/content/blog-post-tags`,
+  },
 };
 
 export default ENDPOINTS;

apis/mutations/tags/useAddNewTag.ts

@@ -0,0 +1,34 @@
+'use client';
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'react-toastify';
+import { AxiosError } from 'axios';
+import { useAxios } from '../../AxiosProvider';
+import ENDPOINTS from '../../endpoints';
+import QUERY_KEYS from '../../queryKeys';
+
+const useAddNewTag = () => {
+  const queryClient = useQueryClient();
+  const axios = useAxios();
+
+  interface ErrorResponse {
+    message?: string;
+  }
+
+  return useMutation({
+    mutationFn: async ({ tagName }: { tagName: string }) => {
+      const response = await axios.post(ENDPOINTS.TAGS.CREATE, { name: tagName });
+      return response.data;
+    },
+    onError: (error: AxiosError<ErrorResponse>) => {
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.TAGS.ALL });
+      toast.error(error?.response?.data?.message || 'Настана грешка при додавање на тагот');
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.TAGS.ALL });
+      toast.success('Тагот беше успешно додаден.');
+    },
+  });
+};
+
+export default useAddNewTag;

apis/mutations/tags/useDeleteTag.ts

@@ -0,0 +1,34 @@
+'use client';
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'react-toastify';
+import { AxiosError } from 'axios';
+import { useAxios } from '../../AxiosProvider';
+import ENDPOINTS from '../../endpoints';
+import QUERY_KEYS from '../../queryKeys';
+
+const useDeleteTag = () => {
+  const queryClient = useQueryClient();
+  const axios = useAxios();
+
+  interface ErrorResponse {
+    message?: string;
+  }
+
+  return useMutation({
+    mutationFn: async (tagId: string) => {
+      const response = await axios.delete(`${ENDPOINTS.TAGS.DELETE}/${tagId}`);
+      return response.data;
+    },
+    onError: (error: AxiosError<ErrorResponse>) => {
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.TAGS.ALL });
+      toast.error(error?.response?.data?.message || 'Настана грешка при бришење на тагот');
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.TAGS.ALL });
+      toast.success('Тагот беше успешно избришан.');
+    },
+  });
+};
+
+export default useDeleteTag;

apis/mutations/tags/useEditTag.ts

@@ -0,0 +1,34 @@
+'use client';
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'react-toastify';
+import { AxiosError } from 'axios';
+import { useAxios } from '../../AxiosProvider';
+import ENDPOINTS from '../../endpoints';
+import QUERY_KEYS from '../../queryKeys';
+
+const useEditTag = () => {
+  const queryClient = useQueryClient();
+  const axios = useAxios();
+
+  interface ErrorResponse {
+    message?: string;
+  }
+
+  return useMutation({
+    mutationFn: async ({ tagId, newName }: { tagId: string; newName: string }) => {
+      const response = await axios.patch(`${ENDPOINTS.TAGS.EDIT}/${tagId}`, { name: newName });
+      return response.data;
+    },
+    onError: (error: AxiosError<ErrorResponse>) => {
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.TAGS.ALL });
+      toast.error(error?.response?.data?.message || 'Настана грешка при изменување на тагот');
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.TAGS.ALL });
+      toast.success('Тагот беше успешно изменет');
+    },
+  });
+};
+
+export default useEditTag;

apis/queries/tags/getTags.ts

@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query';
+import { useAxios } from '../../AxiosProvider';
+import ENDPOINTS from '../../endpoints';
+import QUERY_KEYS from '../../queryKeys';
+
+const useGetTags = (search?: string) => {
+  const axios = useAxios();
+
+  return useQuery({
+    queryKey: [...QUERY_KEYS.TAGS.ALL, search],
+    queryFn: async () => {
+      const url = search
+        ? `${ENDPOINTS.TAGS.GET_ALL}?search=${encodeURIComponent(search)}`
+        : ENDPOINTS.TAGS.GET_ALL;
+
+      const { data } = await axios.get(url);
+      return data;
+    },
+  });
+};
+
+export default useGetTags;

api/queryKeys.ts → apis/queryKeys.ts

@@ -6,6 +6,9 @@ const QUERY_KEYS = {
   USERS: {
     ALL: ['users'],
   },
+  TAGS: {
+    ALL: ['blogPostTags'],
+  },
 } as const;
 
 export default QUERY_KEYS;

app/action.tsx

@@ -1,7 +1,7 @@
 'use server';
 
 import axios from 'axios';
-import axiosInstance from '../api/axiosInstance';
+import axiosInstance from '../apis/axiosInstance';
 import { BlogCardProps } from '../components/reusable-components/blog-card/BlogCard';
 
 const fetchBlogPosts = async (

app/content-panel/blogs/[id]/page.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import styles from './BlogDetailsPage.module.scss';
 import BlogDetailsCard from '../../../../components/reusable-components/blogDetails-card/BlogDetailsCard';
-import useGetBlogDetails from '../../../../api/queries/blogs/getBlogDetails';
+import useGetBlogDetails from '../../../../apis/queries/blogs/getBlogDetails';
 import { BlogDetailsData } from '../../../../components/reusable-components/_Types';
 
 const BlogDetailsPage = ({ params }: { params: { id: string } }) => {

app/content-panel/tags/page.tsx

@@ -1,15 +1,133 @@
 'use client';
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+
 import styles from '../../../components/module-components/tags/Tags.module.scss';
-import AddTags from '../../../components/module-components/tags/AddTags';
 import TagTable from '../../../components/module-components/tags/TagTable';
+import TextInput from '../../../components/reusable-components/text-input/TextInput';
+import AddTag from '../../../components/module-components/tags/AddTag';
+import TagManagementControls from '../../../components/module-components/tags/TagManagementControls';
+import useDebounce from '../../../utils/hooks/useDebounce';
+
+import useGetTags from '../../../apis/queries/tags/getTags';
+import useAddNewTag from '../../../apis/mutations/tags/useAddNewTag';
+import useDeleteTag from '../../../apis/mutations/tags/useDeleteTag';
+import useEditTag from '../../../apis/mutations/tags/useEditTag';
+
+interface Tag {
+  id: string;
+  name: string;
+}
 
 const Tags = () => {
+  // MUTATIONS
+  const addNewTagMutation = useAddNewTag();
+  const deleteTagMutation = useDeleteTag();
+  const editTagMutation = useEditTag();
+
+  // STATE
+  const [showAddTag, setShowAddTag] = useState(false);
+  const [tags, setTags] = useState<Tag[]>([]);
+  const [editingTagId, setEditingTagId] = useState<string | null>(null);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+  const { data, isLoading } = useGetTags(debouncedSearchTerm);
+
+  const validationSchema = Yup.object().shape({
+    tagName: Yup.string()
+      .required('Името за тагот е задолжително')
+      .test('unique', 'Тагот веќе постои', (value) => {
+        return !tags.some((tag) => tag.name.toLowerCase() === value?.toLowerCase().trim());
+      }),
+  });
+
+  const handleDelete = async (id: string) => {
+    await deleteTagMutation.mutateAsync(id);
+  };
+
+  const addTag = async (newTag: string) => {
+    const trimmedNewTag = newTag.trim();
+
+    if (tags.some((tag) => tag.name.toLowerCase() === trimmedNewTag.toLowerCase())) {
+      return { success: false, error: 'Тагот веќе постои.' };
+    }
+
+    await addNewTagMutation.mutateAsync({ tagName: trimmedNewTag });
+    return { success: true }; // this is for formik validation purposes
+  };
+
+  const handleSaveChanges = async (tagId: string, newName: string) => {
+    await editTagMutation.mutateAsync({ tagId, newName: newName.trim() });
+    setEditingTagId(null);
+  };
+
+  const formik = useFormik({
+    initialValues: {
+      tagName: '',
+    },
+    validationSchema,
+    onSubmit: async (values, { resetForm }) => {
+      await handleSaveChanges(editingTagId!, values.tagName);
+      resetForm();
+    },
+  });
+
+  const triggerEdit = (tagId: string) => {
+    const tagToEdit = tags.find((tag) => tag.id === tagId);
+
+    if (tagToEdit) {
+      setEditingTagId(tagId);
+      formik.setFieldValue('tagName', tagToEdit.name);
+    }
+  };
+
+  const handleCancelEdit = () => {
+    setEditingTagId(null);
+    formik.resetForm();
+  };
+
+  useEffect(() => {
+    if (data?.data) {
+      setTags(data.data);
+    }
+  }, [data]);
+
   return (
     <div className={styles.container}>
-      <AddTags />
-      <TagTable />
+      <TagManagementControls
+        onAddClick={() => setShowAddTag(true)}
+        searchTerm={searchTerm}
+        setSearchTerm={setSearchTerm}
+      />
+
+      {showAddTag && <AddTag onCancel={() => setShowAddTag(false)} onAdd={addTag} />}
+
+      <TagTable
+        isLoading={isLoading}
+        tags={tags}
+        editingTagId={editingTagId}
+        onEdit={triggerEdit}
+        onDelete={handleDelete}
+        onSave={formik.handleSubmit}
+        onCancel={handleCancelEdit}
+        renderEditInput={() => (
+          <div style={{ height: '40px' }}>
+            <TextInput
+              placeholder="Внеси име за тагот"
+              name="tagName"
+              type="text"
+              field="tagName"
+              formik={formik}
+              isRequired
+              label=""
+              inputClass={['tagTableInput']}
+            />
+          </div>
+        )}
+      />
     </div>
   );
 };

app/layout.tsx

@@ -13,7 +13,7 @@ import ReactQueryProvider from '../utils/providers/ReactQueryProvider';
 import { ThemeProvider } from './context/themeContext';
 import styles from './page.module.scss';
 import { AuthProvider } from './context/authContext';
-import { AxiosProvider } from '../api/AxiosProvider';
+import { AxiosProvider } from '../apis/AxiosProvider';
 import 'bootstrap-icons/font/bootstrap-icons.css';
 import { EditorProvider } from './context/EditorContext';
 

components/module-components/blog/addNewPost.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import useAddNewPost from '../../../api/mutations/blogs/useAddNewPost';
+import useAddNewPost from '../../../apis/mutations/blogs/useAddNewPost';
 
 const AddNewPost = () => {
   const addNewPostMutation = useAddNewPost();

components/module-components/contact/ContactForm.tsx

@@ -13,7 +13,7 @@ import { fullNameRegexValidation, emailRegexValidation } from './regexValidation
 import {
   useSubmitContactForm,
   ContactFormData,
-} from '../../../api/mutations/contact/useSubmitContactform';
+} from '../../../apis/mutations/contact/useSubmitContactform';
 
 const ContactForm = () => {
   const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
@@ -54,7 +54,7 @@ const ContactForm = () => {
         toast.success('Пораката беше успешно испратена!');
         resetForm();
         setTurnstileToken(null);
-      } catch (error) {
+      } catch {
         toast.error('Настана грешка при испраќањето на пораката. Пробајте повторно.');
       }
     },