140 lines
4.0 KiB
TypeScript
140 lines
4.0 KiB
TypeScript
// Modules
|
|
import { v4 as uuidv4 } from "uuid";
|
|
import { useState, useEffect } from "react";
|
|
import { IconContext } from "react-icons";
|
|
import { Link } from "react-router-dom";
|
|
|
|
// Icons
|
|
import { FaSourcetree } from "react-icons/fa";
|
|
import { FaRegEdit } from "react-icons/fa";
|
|
import { FaTrash } from "react-icons/fa";
|
|
import { getLinks } from "../helpers/apiRequests";
|
|
|
|
// Helpers
|
|
import { deleteLink } from "../helpers/apiRequests";
|
|
|
|
// Types
|
|
import { LinksAll } from "../types/links";
|
|
// interface dataType {
|
|
// createName: string;
|
|
// createLink: string;
|
|
// delete: number;
|
|
// updateId: number;
|
|
// updateName: string;
|
|
// updateLink: string;
|
|
// }
|
|
// interface successType {
|
|
// create: string;
|
|
// delete: string;
|
|
// update: string;
|
|
// hasCreateUpdated: boolean;
|
|
// hasDeleteUpdated: boolean;
|
|
// hasUpdateUpdated: boolean;
|
|
// }
|
|
|
|
const Source = () => {
|
|
const defaultDate = new Date("00-00-00");
|
|
|
|
const [deleted, setDeleted] = useState<boolean>(false);
|
|
|
|
const [all, setAll] = useState<LinksAll[]>([
|
|
{
|
|
id: -1,
|
|
name: "",
|
|
source: "",
|
|
createdAt: defaultDate,
|
|
updatedAt: defaultDate,
|
|
},
|
|
]);
|
|
|
|
useEffect(() => {
|
|
getLinks(setAll);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (deleted) {
|
|
setTimeout(() => {
|
|
setDeleted(false);
|
|
getLinks(setAll);
|
|
}, 2000);
|
|
}
|
|
}, [deleted, setDeleted]);
|
|
|
|
return (
|
|
<main className="category">
|
|
<div className="container">
|
|
<div className="category inner">
|
|
<div className="dashboard__head category__head">
|
|
<IconContext.Provider value={{ color: "#8DD77F" }}>
|
|
<FaSourcetree />
|
|
</IconContext.Provider>
|
|
<h1>Source</h1>
|
|
</div>
|
|
<div className="category__table__wrapper">
|
|
<h3>All sources</h3>
|
|
<table className="category__table">
|
|
<thead>
|
|
<tr className="category__table__head">
|
|
<th>ID</th>
|
|
<th>Name</th>
|
|
<th>Source</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{all[0].id !== -1 ? (
|
|
all.map((source: LinksAll) => {
|
|
return (
|
|
<tr key={uuidv4()}>
|
|
<td>{source.id}</td>
|
|
<td>{source.name}</td>
|
|
<td className="category__table__tab">
|
|
{source.source}
|
|
</td>
|
|
<td className="source-action">
|
|
<div className="source-action__block">
|
|
<Link to={`/source/edit/${source.id}`}>
|
|
<span>Edit</span>
|
|
<IconContext.Provider
|
|
value={{ color: "#8DD77F" }}
|
|
>
|
|
<FaRegEdit />
|
|
</IconContext.Provider>
|
|
</Link>
|
|
</div>
|
|
<div className="source-action__block">
|
|
<button
|
|
onClick={() => {
|
|
deleteLink(setDeleted, source.id);
|
|
}}
|
|
>
|
|
<span>Delete</span>
|
|
<IconContext.Provider
|
|
value={{ color: "#8DD77F" }}
|
|
>
|
|
<FaTrash />
|
|
</IconContext.Provider>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})
|
|
) : (
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
};
|
|
|
|
export default Source;
|