Aydogdy
/
react-admin-panel-orient
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

destroy & start over

This commit is contained in:
VividTruthKeeper 2022-09-16 16:13:54 +05:00
parent e980a47515
commit c0f79bd2f4
6 changed files with 50 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/styles/_category.scss
View File

@ -78,7 +78,7 @@
min-height: 7rem; min-height: 7rem;
padding: 1rem; padding: 1rem;
display: grid; display: grid;
grid-template-columns: 1fr 5fr; grid-template-columns: 1fr 3fr 5fr;
gap: 1rem; gap: 1rem;
background: #f2f0fd; background: #f2f0fd;
&:nth-child(2n) { &:nth-child(2n) {

11
src/helpers/apiRequests.ts
View File

@ -40,10 +40,13 @@ export const getLinks = (setLinks: React.Dispatch<LinksAll[]>) => {
export const createLink = ( export const createLink = (
setSuccess: React.Dispatch<string>, setSuccess: React.Dispatch<string>,
data: { link: string } data: { name: string; source: string }
) => { ) => {
axios axios
.post("http://95.85.124.41:8080/link/create", { link: data.link }) .post("http://95.85.124.41:8080/link/create", {
name: data.name,
source: data.source,
})
.then((res) => { .then((res) => {
setSuccess(res.data.message); setSuccess(res.data.message);
}) })
@ -55,10 +58,10 @@ export const createLink = (
export const updateLink = ( export const updateLink = (
setSuccess: React.Dispatch<string>, setSuccess: React.Dispatch<string>,
id: number, id: number,
data: { link: string } data: { name: string; source: string }
) => { ) => {
axios axios
.put(`http://95.85.124.41:8080/link/update/${id}`, { link: data.link }) .put(`http://95.85.124.41:8080/link/update/${id}`, { source: data.source })
.then((res) => { .then((res) => {
setSuccess(res.data.message); setSuccess(res.data.message);
}) })

255
src/pages/Category.tsx
View File

@ -4,20 +4,16 @@ import { useState, useEffect } from "react";
// Icons // Icons
import { IoIosCreate } from "react-icons/io"; import { IoIosCreate } from "react-icons/io";
import { import { getLinks } from "../helpers/apiRequests";
createLink,
deleteLink,
getLinks,
updateLink,
} from "../helpers/apiRequests";
import { capitalizeFirstLetter } from "../helpers/stringMethods";
import { LinksAll } from "../types/links"; import { LinksAll } from "../types/links";
interface dataType { interface dataType {
create: string; createName: string;
createLink: string;
delete: number; delete: number;
updateId: number; updateId: number;
updateData: string; updateName: string;
updateLink: string;
} }
interface successType { interface successType {
@ -30,28 +26,13 @@ interface successType {
} }
const Category = () => { 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 defaultDate = new Date("00-00-00");
const [all, setAll] = useState<LinksAll[]>([ const [all, setAll] = useState<LinksAll[]>([
{ {
id: -1, id: -1,
link: "", name: "",
source: "",
createdAt: defaultDate, createdAt: defaultDate,
updatedAt: defaultDate, updatedAt: defaultDate,
}, },
@ -67,207 +48,41 @@ const Category = () => {
<div className="category inner"> <div className="category inner">
<div className="dashboard__head category__head"> <div className="dashboard__head category__head">
<IoIosCreate /> <IoIosCreate />
<h1>Category</h1> <h1>Source</h1>
</div> </div>
<div className="category__table__wrapper"> <div className="category__table__wrapper">
<h3>All links</h3> <h3>All sources</h3>
<table className="category__table"> <table className="category__table">
<tr className="category__table__head"> <thead>
<th>ID</th> <tr className="category__table__head">
<th>Link</th> <th>ID</th>
</tr> <th>Name</th>
<th>Source</th>
</tr>
</thead>
<tbody> <tbody>
{all[0].id !== -1 {all[0].id !== -1 ? (
? all.map((link: LinksAll) => { all.map((source: LinksAll) => {
return ( return (
<tr key={uuidv4()}> <tr key={uuidv4()}>
<td>{link.id}</td> <td>{source.id}</td>
<td className="category__table__tab">{link.link}</td> <td>{source.name}</td>
</tr> <td className="category__table__tab">
); {source.source}
}) </td>
: ""} </tr>
);
})
) : (
<tr>
<td></td>
<td></td>
<td></td>
</tr>
)}
</tbody> </tbody>
</table> </table>
</div> </div>
<form
className="category__form"
onSubmit={(e: React.FormEvent<HTMLFormElement>) =>
e.preventDefault()
}
>
<div className="category__form__block">
<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"
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>
</div> </div>
</main> </main>

6
src/pages/Posts.tsx
View File

@ -66,6 +66,8 @@ const Posts = () => {
} }
}, [posts]); }, [posts]);
console.log(posts[0]);
return ( return (
<main className="posts"> <main className="posts">
<div className="container"> <div className="container">
@ -236,7 +238,7 @@ const Posts = () => {
<BiLinkExternal /> <BiLinkExternal />
</a> </a>
</td> </td>
<td>{parseDate(post.date)[0]}</td> {/* <td>{parseDate(post.publish_date)[0]}</td> */}
<td>{post.summary}</td> <td>{post.summary}</td>
</tr> </tr>
</Link> </Link>
@ -271,7 +273,7 @@ const Posts = () => {
<BiLinkExternal /> <BiLinkExternal />
</a> </a>
</td> </td>
<td>{parseDate(post.date)[0]}</td> {/* <td>{parseDate(post.publish_date)[0]}</td> */}
<td>{post.summary}</td> <td>{post.summary}</td>
</tr> </tr>
</Link> </Link>

3
src/types/links.ts
View File

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

2
src/types/posts.ts
View File

@ -3,7 +3,7 @@ export interface PostType {
category: string; category: string;
title: string; title: string;
link: string; link: string;
date: Date; publish_date: Date;
summary: string; summary: string;
createdAt: Date; createdAt: Date;
updatedAt: Date; updatedAt: Date;