57 lines
2.2 KiB
TypeScript
57 lines
2.2 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
import { ITagVodRelation, ITagVodRelationsResponse } from "@/app/lib/tag-vod-relations"
|
||
|
|
import { isWithinInterval, subHours } from "date-fns";
|
||
|
|
import { faTrash } from "@fortawesome/free-solid-svg-icons";
|
||
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||
|
|
import { AuthContext, IUseAuth } from "./auth";
|
||
|
|
import { useContext, useEffect, useState } from "react";
|
||
|
|
import { useRouter } from 'next/navigation';
|
||
|
|
import { strapiUrl } from "@/app/lib/constants";
|
||
|
|
|
||
|
|
export interface ITagParams {
|
||
|
|
tvr: ITagVodRelation;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function isCreatedByMeRecently(userId: number | undefined, tvr: ITagVodRelation) {
|
||
|
|
if (!userId) return false;
|
||
|
|
if (userId !== tvr.attributes.creatorId) return false;
|
||
|
|
const last24H: Interval = { start: subHours(new Date(), 24), end: new Date() };
|
||
|
|
if (!isWithinInterval(new Date(tvr.attributes.createdAt), last24H)) return false;
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
async function handleDelete(authContext: IUseAuth | null, tvr: ITagVodRelation): Promise<void> {
|
||
|
|
if (!authContext) return;
|
||
|
|
const { authData } = authContext;
|
||
|
|
const res = await fetch(`${strapiUrl}/api/tag-vod-relations/deleteMine/${tvr.id}`, {
|
||
|
|
method: 'DELETE',
|
||
|
|
headers: {
|
||
|
|
'Authorization': `Bearer ${authData?.accessToken}`,
|
||
|
|
'Content-Type': 'application/json'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
if (!res.ok) throw new Error(res.statusText)
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Tag({ tvr }: ITagParams) {
|
||
|
|
const authContext = useContext(AuthContext);
|
||
|
|
const router = useRouter()
|
||
|
|
const [shouldRenderDeleteButton, setShouldRenderDeleteButton] = useState<boolean>(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setShouldRenderDeleteButton(isCreatedByMeRecently(authContext?.authData?.user?.id, tvr));
|
||
|
|
}, [authContext?.authData?.user?.id, tvr]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<span className="tags mr-2 mb-0">
|
||
|
|
<span className="tag">{tvr.attributes.tag.data.attributes.name}</span>
|
||
|
|
{shouldRenderDeleteButton && <a onClick={
|
||
|
|
() => {
|
||
|
|
handleDelete(authContext, tvr); router.refresh()
|
||
|
|
}
|
||
|
|
} className="tag"><span className="icon is-small"><FontAwesomeIcon className="fas fa-trash" icon={faTrash}></FontAwesomeIcon></span></a>}
|
||
|
|
</span>
|
||
|
|
)
|
||
|
|
}
|