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;
padding: 1rem;
display: grid;
grid-template-columns: 1fr 5fr;
grid-template-columns: 1fr 3fr 5fr;
gap: 1rem;
background: #f2f0fd;
&:nth-child(2n) {

11
src/helpers/apiRequests.ts
View File

@ -40,10 +40,13 @@ export const getLinks = (setLinks: React.Dispatch<LinksAll[]>) => {
export const createLink = (
setSuccess: React.Dispatch<string>,
data: { link: string }
data: { name: string; source: string }
) => {
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) => {
setSuccess(res.data.message);
})
@ -55,10 +58,10 @@ export const createLink = (
export const updateLink = (
setSuccess: React.Dispatch<string>,
id: number,
data: { link: string }
data: { name: string; source: string }
) => {
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) => {
setSuccess(res.data.message);
})

255
src/pages/Category.tsx
View File

@ -4,20 +4,16 @@ 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 { getLinks } from "../helpers/apiRequests";
import { LinksAll } from "../types/links";
interface dataType {
create: string;
createName: string;
createLink: string;
delete: number;
updateId: number;
updateData: string;
updateName: string;
updateLink: string;
}
interface successType {
@ -30,28 +26,13 @@ interface successType {
}
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: "",
name: "",
source: "",
createdAt: defaultDate,
updatedAt: defaultDate,
},
@ -67,207 +48,41 @@ const Category = () => {
<div className="category inner">
<div className="dashboard__head category__head">
<IoIosCreate />
<h1>Category</h1>
<h1>Source</h1>
</div>
<div className="category__table__wrapper">
<h3>All links</h3>
<h3>All sources</h3>
<table className="category__table">
<tr className="category__table__head">
<th>ID</th>
<th>Link</th>
</tr>
<thead>
<tr className="category__table__head">
<th>ID</th>
<th>Name</th>
<th>Source</th>
</tr>
</thead>
<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>
);
})
: ""}
{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>
</tr>
);
})
) : (
<tr>
<td></td>
<td></td>
<td></td>
</tr>
)}
</tbody>
</table>
</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>
</main>

6
src/pages/Posts.tsx
View File

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

3
src/types/links.ts
View File

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

2
src/types/posts.ts
View File

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