links

src/assets/styles/_category.scss

@@ -58,4 +58,50 @@
       }
     }
   }
+
+  &__table {
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+
+      h3 {
+        font-size: 2rem;
+        font-weight: normal;
+      }
+    }
+    &__head {
+      min-height: unset !important;
+      background: #dbdbdb !important;
+    }
+    tr {
+      min-height: 7rem;
+      padding: 1rem;
+      display: grid;
+      grid-template-columns: 1fr 5fr;
+      gap: 1rem;
+      background: #f2f0fd;
+      &:nth-child(2n) {
+        background: #fafafa;
+      }
+    }
+
+    td {
+      text-align: center;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      justify-self: center;
+      font-size: 1.2rem;
+      align-self: center;
+    }
+
+    tbody {
+      max-height: 70vh;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+    }
+  }
 }

src/assets/styles/_general.scss

@@ -53,6 +53,18 @@ a {
   text-decoration: none;
 }
 
+.green {
+  color: green;
+  font-size: 1.6rem;
+  font-weight: bold;
+}
+
+.red {
+  color: red;
+  font-size: 1.6rem;
+  font-weight: bold;
+}
+
 @mixin transition-std {
   transition: 0.3s all ease;
 }

src/helpers/apiRequests.ts

@@ -1,14 +1,65 @@
 // Modules
 import axios from "axios";
+import React from "react";
 
 // Types
 import { PostType } from "../types/posts";
+import { LinksAll } from "../types/links";
 
 export const getPosts = (setPosts: React.Dispatch<PostType[]>) => {
   axios
     .get("http://95.85.124.41:8080/posts")
     .then((res) => {
-      setPosts(res.data);
+      setPosts(res.data.data);
     })
     .catch((err) => {});
 };
+
+export const deleteLink = (setSuccess: React.Dispatch<string>, id: number) => {
+  axios
+    .delete(`http://95.85.124.41:8080/link/delete/${id}`)
+    .then((res) => {
+      setSuccess(res.data.message);
+    })
+    .catch((err) => {
+      setSuccess("error");
+    });
+};
+
+export const getLinks = (setLinks: React.Dispatch<LinksAll[]>) => {
+  axios
+    .get("http://95.85.124.41:8080/links/all")
+    .then((res) => {
+      setLinks(res.data.data);
+    })
+    .catch((err) => {});
+};
+
+export const createLink = (
+  setSuccess: React.Dispatch<string>,
+  data: { link: string }
+) => {
+  axios
+    .post("http://95.85.124.41:8080/link/create", { link: data.link })
+    .then((res) => {
+      setSuccess(res.data.message);
+    })
+    .catch((err) => {
+      setSuccess("error");
+    });
+};
+
+export const updateLink = (
+  setSuccess: React.Dispatch<string>,
+  id: number,
+  data: { link: string }
+) => {
+  axios
+    .put(`http://95.85.124.41:8080/link/update/${id}`, { link: data.link })
+    .then((res) => {
+      setSuccess(res.data.message);
+    })
+    .catch((err) => {
+      setSuccess("error");
+    });
+};

src/pages/Category.tsx

@@ -1,7 +1,66 @@
+// Modules
+import { v4 as uuidv4 } from "uuid";
+import { useState, useEffect } from "react";
+
 // Icons
 import { IoIosCreate } from "react-icons/io";
+import {
+  createLink,
+  deleteLink,
+  getLinks,
+  updateLink,
+} from "../helpers/apiRequests";
+import { capitalizeFirstLetter } from "../helpers/stringMethods";
+import { LinksAll } from "../types/links";
+
+interface dataType {
+  create: string;
+  delete: number;
+  updateId: number;
+  updateData: string;
+}
+
+interface successType {
+  create: string;
+  delete: string;
+  update: string;
+  hasCreateUpdated: boolean;
+  hasDeleteUpdated: boolean;
+  hasUpdateUpdated: boolean;
+}
 
 const Category = () => {
+  const [data, setData] = useState<dataType>({
+    create: "",
+    delete: 0,
+    updateId: 0,
+    updateData: "",
+  });
+
+  const [success, setSuccess] = useState<successType>({
+    create: "",
+    delete: "",
+    update: "",
+    hasCreateUpdated: false,
+    hasDeleteUpdated: false,
+    hasUpdateUpdated: false,
+  });
+
+  const defaultDate = new Date("00-00-00");
+
+  const [all, setAll] = useState<LinksAll[]>([
+    {
+      id: -1,
+      link: "",
+      createdAt: defaultDate,
+      updatedAt: defaultDate,
+    },
+  ]);
+
+  useEffect(() => {
+    getLinks(setAll);
+  }, []);
+
   return (
     <main className="category">
       <div className="container">
@@ -10,6 +69,27 @@ const Category = () => {
             <IoIosCreate />
             <h1>Category</h1>
           </div>
+          <div className="category__table__wrapper">
+            <h3>All links</h3>
+            <table className="category__table">
+              <tr className="category__table__head">
+                <th>ID</th>
+                <th>Link</th>
+              </tr>
+              <tbody>
+                {all[0].id !== -1
+                  ? all.map((link: LinksAll) => {
+                      return (
+                        <tr key={uuidv4()}>
+                          <td>{link.id}</td>
+                          <td className="category__table__tab">{link.link}</td>
+                        </tr>
+                      );
+                    })
+                  : ""}
+              </tbody>
+            </table>
+          </div>
           <form
             className="category__form"
             onSubmit={(e: React.FormEvent<HTMLFormElement>) =>
@@ -17,14 +97,176 @@ const Category = () => {
             }
           >
             <div className="category__form__block">
-              <label htmlFor="category">Category</label>
+              <label htmlFor="category">New category name</label>
               <input
                 type="text"
                 id="category"
                 placeholder="Enter category name"
+                value={data.create}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setData({
+                    ...data,
+                    create: capitalizeFirstLetter(e.target.value.toLowerCase()),
+                  });
+                }}
               />
+              {success.hasCreateUpdated ? (
+                success.create === "success" ? (
+                  <span className="green">Category added successfuly</span>
+                ) : (
+                  <span className="red">Failed to add category</span>
+                )
+              ) : (
+                ""
+              )}
             </div>
-            <button type="submit">Add category</button>
+            <button
+              type="submit"
+              disabled={!(data.create.length > 0)}
+              onClick={() => {
+                createLink(
+                  (e: string) =>
+                    setSuccess({
+                      ...success,
+                      create: e,
+                      hasCreateUpdated: true,
+                    }),
+                  { link: data.create }
+                );
+                setTimeout(() => getLinks(setAll), 500);
+              }}
+            >
+              Add category
+            </button>
+          </form>
+          <form
+            className="category__form"
+            onSubmit={(e: React.FormEvent<HTMLFormElement>) =>
+              e.preventDefault()
+            }
+          >
+            <div className="category__form__block">
+              <label htmlFor="update">Category ID and new name</label>
+              <input
+                min={0}
+                type="number"
+                id="update"
+                placeholder="Enter category id"
+                value={data.updateId}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  if (e.target.value.length === 0) {
+                    setData({
+                      ...data,
+                      updateId: 0,
+                    });
+                  } else {
+                    setData({
+                      ...data,
+                      updateId: parseInt(e.target.value),
+                    });
+                  }
+                }}
+              />
+              <input
+                type="text"
+                id="category"
+                placeholder="Enter category name"
+                value={data.updateData}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setData({
+                    ...data,
+                    updateData: capitalizeFirstLetter(
+                      e.target.value.toLowerCase()
+                    ),
+                  });
+                }}
+              />
+              {success.hasUpdateUpdated ? (
+                success.update === "success" ? (
+                  <span className="green">Category updated successfuly</span>
+                ) : (
+                  <span className="red">Failed to update category</span>
+                )
+              ) : (
+                ""
+              )}
+            </div>
+            <button
+              type="submit"
+              disabled={!(data.updateData.length > 0 && data.updateId !== 0)}
+              onClick={() => {
+                updateLink(
+                  (e: string) =>
+                    setSuccess({
+                      ...success,
+                      update: e,
+                      hasUpdateUpdated: true,
+                    }),
+                  data.updateId,
+                  { link: data.updateData }
+                );
+                setTimeout(() => getLinks(setAll), 500);
+              }}
+            >
+              Update category
+            </button>
+          </form>
+          <form
+            className="category__form"
+            onSubmit={(e: React.FormEvent<HTMLFormElement>) =>
+              e.preventDefault()
+            }
+          >
+            <div className="category__form__block">
+              <label htmlFor="id">Delete category</label>
+              <input
+                min={0}
+                type="number"
+                id="id"
+                placeholder="Enter category id"
+                value={data.delete}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  if (e.target.value.length === 0) {
+                    setData({
+                      ...data,
+                      delete: 0,
+                    });
+                  } else {
+                    setData({
+                      ...data,
+                      delete: parseInt(e.target.value),
+                    });
+                  }
+                }}
+              />
+              {success.hasDeleteUpdated ? (
+                success.delete === "success" ? (
+                  <span className="green">Category deleted successfuly</span>
+                ) : (
+                  <span className="red">Failed to delete category</span>
+                )
+              ) : (
+                ""
+              )}
+            </div>
+            <button
+              type="submit"
+              disabled={!(data.delete > 0)}
+              onClick={() => {
+                deleteLink(
+                  (e: string) =>
+                    setSuccess({
+                      ...success,
+                      delete: e,
+                      hasDeleteUpdated: true,
+                    }),
+                  data.delete
+                );
+                setTimeout(() => getLinks(setAll), 500);
+              }}
+            >
+              Delete category
+            </button>
           </form>
         </div>
       </div>

src/pages/Posts.tsx

@@ -42,7 +42,6 @@ const Posts = () => {
         return categoriesTemp.indexOf(element) === index;
       });
       setCategories(categoriesTempUnique);
-      console.log(categoriesTempUnique);
     }
   }, [posts]);
 

src/types/links.ts

@@ -0,0 +1,6 @@
+export interface LinksAll {
+  id: number;
+  link: string;
+  createdAt: Date;
+  updatedAt: Date;
+}