Tags page with React Query fetching implementation

api/axiosInstance.ts

@@ -7,4 +7,20 @@ const axiosInstance = axios.create({
   },
 });
 
+// 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

@@ -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;

api/mutations/tags/useAddNewTag.ts

@@ -0,0 +1,27 @@
+'use client';
+
+import { useMutation } from '@tanstack/react-query';
+import { toast } from 'react-toastify';
+import { AxiosError } from 'axios';
+import { useAxios } from '../../AxiosProvider';
+import ENDPOINTS from '../../endpoints';
+
+const useAddNewTag = () => {
+  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>) => {
+      toast.error(error?.response?.data?.message || 'Настана грешка при додавање на тагот');
+    },
+  });
+};
+
+export default useAddNewTag;

api/mutations/tags/useDeleteTag.ts

@@ -0,0 +1,27 @@
+'use client';
+
+import { useMutation } from '@tanstack/react-query';
+import { toast } from 'react-toastify';
+import { AxiosError } from 'axios';
+import { useAxios } from '../../AxiosProvider';
+import ENDPOINTS from '../../endpoints';
+
+const useDeleteTag = () => {
+  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>) => {
+      toast.error(error?.response?.data?.message || 'Настана грешка при бришење на тагот');
+    },
+  });
+};
+
+export default useDeleteTag;

api/mutations/tags/useEditTag.ts

@@ -0,0 +1,26 @@
+'use client';
+
+import { useMutation } from '@tanstack/react-query';
+import { toast } from 'react-toastify';
+import { AxiosError } from 'axios';
+import { useAxios } from '../../AxiosProvider';
+import ENDPOINTS from '../../endpoints';
+
+const useEditTag = () => {
+  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>) => {
+      toast.error(error?.response?.data?.message || 'Настана грешка при изменување на тагот');
+    },
+  });
+};
+
+export default useEditTag;

api/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

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

app/content-panel/tags/page.tsx

@@ -1,15 +1,157 @@
 'use client';
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import { toast } from 'react-toastify';
 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 '../../../api/queries/tags/getTags';
+import useAddNewTag from '../../../api/mutations/tags/useAddNewTag';
+import useDeleteTag from '../../../api/mutations/tags/useDeleteTag';
+import useEditTag from '../../../api/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, refetch } = useGetTags(debouncedSearchTerm);
+
+  const validationSchema = Yup.object().shape({
+    tagName: Yup.string()
+      .required('Името за тагот е задолжително')
+      .test('unique', 'Тагот веќе постои', function (value) {
+        return !tags.some((tag) => tag.name.toLowerCase() === value?.toLowerCase().trim());
+      }),
+  });
+
+  const handleDelete = async (id: string) => {
+    try {
+      await deleteTagMutation.mutateAsync(id);
+      await refetch();
+      toast.success('Тагот беше успешно избришан.');
+    } catch (error) {
+      console.error(error);
+      await refetch();
+    }
+  };
+
+  const addTag = async (newTag: string) => {
+    const trimmedNewTag = newTag.trim();
+    if (tags.some((tag) => tag.name.toLowerCase() === trimmedNewTag.toLowerCase())) {
+      return { success: false, error: 'Тагот веќе постои.' };
+    }
+
+    try {
+      await addNewTagMutation.mutateAsync({
+        tagName: trimmedNewTag,
+      });
+      await refetch();
+
+      // If the mutation was successful, add the new tag to the local state
+      const newId = tags.length > 0 ? (parseInt(tags[tags.length - 1].id, 10) + 1).toString() : '1';
+      setTags([...tags, { id: newId, name: trimmedNewTag }]);
+      return { success: true };
+    } catch (error) {
+      await refetch();
+      return { success: false, error: 'API Error' };
+    }
+  };
+
+  const handleSaveChanges = async (tagId: string, newName: string) => {
+    try {
+      await editTagMutation.mutateAsync({ tagId, newName: newName.trim() });
+      await refetch();
+      setTags((prevTags) =>
+        prevTags.map((tag) => (tag.id === tagId ? { ...tag, name: newName.trim() } : tag))
+      );
+      setEditingTagId(null);
+      toast.success('Тагот беше успешно изменет');
+    } catch (error) {
+      console.error(error);
+      await refetch();
+    }
+  };
+
+  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>
   );
 };

components/module-components/tags/AddTag.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Formik, Form, Field } from 'formik';
+import * as Yup from 'yup';
+import { toast } from 'react-toastify';
+import Button from '../../reusable-components/button/Button';
+import styles from './addTag.module.scss';
+
+interface AddTagResult {
+  success: boolean;
+  error?: string;
+}
+
+interface AddTagProps {
+  onCancel: () => void;
+  onAdd: (tag: string) => Promise<AddTagResult>;
+}
+
+const AddTag: React.FC<AddTagProps> = ({ onCancel, onAdd }) => {
+  const validationSchema = Yup.object({
+    tagName: Yup.string().trim().required('Името на тагот е задолжително.'),
+  });
+
+  return (
+    <Formik
+      initialValues={{ tagName: '' }}
+      validationSchema={validationSchema}
+      onSubmit={async (values, { setFieldError, resetForm }) => {
+        const result = await onAdd(values.tagName.trim());
+
+        if (result.success) {
+          resetForm();
+          onCancel();
+          toast.success('Тагот е успешно креиран!');
+        } else if (result.error === 'Тагот веќе постои.') {
+          setFieldError('tagName', 'Тагот веќе постои.');
+        } else {
+          setFieldError('tagName', 'Настана грешка.');
+        }
+      }}
+    >
+      {({ errors, touched }) => (
+        <Form className={styles.addTagContainer}>
+          <div className={styles.controlsContainer}>
+            <div className={styles.inputWrapper}>
+              <Field
+                name="tagName"
+                type="text"
+                placeholder="Внеси ново име за тагот."
+                className={styles.input}
+              />
+              {errors.tagName && touched.tagName && (
+                <div className={styles.error}>{errors.tagName}</div>
+              )}
+            </div>
+            <Button
+              onClick={onCancel}
+              type="button"
+              buttonText="Откажи"
+              buttonClass={['deleteButton']}
+            />
+            <Button type="submit" buttonText="Креирај таг" buttonClass={['createTag']} />
+          </div>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+export default AddTag;