links
This commit is contained in:
parent
1a2c28080d
commit
5b81286ae7
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,6 @@ const Posts = () => {
|
|||
return categoriesTemp.indexOf(element) === index;
|
||||
});
|
||||
setCategories(categoriesTempUnique);
|
||||
console.log(categoriesTempUnique);
|
||||
}
|
||||
}, [posts]);
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
export interface LinksAll {
|
||||
id: number;
|
||||
link: string;
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
}
|
||||
Loading…
Reference in New Issue