Mathias/mylinks
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Integrated state switching into the LinkItem.jsx

Browse Source
This commit is contained in:
Mathias Wagner
2023-01-01 04:26:15 +01:00
parent ca633e14bb
commit 2788dd01d6
1 changed files with 47 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
admin/src/pages/Home/components/LinkItem/LinkItem.jsx
View File

@ -1,15 +1,17 @@
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faExternalLink, faEye, faPencil, faTrash} from "@fortawesome/free-solid-svg-icons";
import {faExternalLink, faEye, faPencil, faToggleOff, faToggleOn, faTrash} from "@fortawesome/free-solid-svg-icons";
import Tag from "@/pages/Home/components/Tag";
import {useContext, useEffect, useState} from "react";
import LinkContext from "@/common/contexts/Link";
import {deleteRequest} from "@/common/utils/RequestUtil.js";
import {deleteRequest, patchRequest} from "@/common/utils/RequestUtil.js";
import ModuleContext from "@/common/contexts/Module";
import {createGravatarUrl} from "@/pages/Home/utils.js";
import LinkDialog from "@/pages/Home/components/LinkDialog";
import "./styles.sass";
export const LinkItem = (props) => {
const [showDialog, setShowDialog] = useState(false);
const [links, updateLinks] = useContext(LinkContext);
const modules = useContext(ModuleContext);
const [icon, setIcon] = useState("link");
@ -19,6 +21,11 @@ export const LinkItem = (props) => {
setIcon(modules[props.type]["icon"]);
}, [modules]);
const switchState = async () => {
await patchRequest(`/link/${props.id}`, {isEnabled: !props.isEnabled});
updateLinks();
}
const clickLink = () => window.open(`http://${props.domain}/${props.accessId}`, '_blank').focus();
const deleteLink = async () => {
@ -27,9 +34,12 @@ export const LinkItem = (props) => {
}
return (
<>
<LinkDialog module={props.type} isOpen={showDialog} close={() => setShowDialog(false)} editMode={true}
meta={props.meta} accessId={props.accessId} title={props.title} tags={props.tags} id={props.id}/>
<div className="link-item">
<div className="info-area">
<div className="module-info">
<div className={"module-info" + (props.isEnabled ? "" : " module-disabled")}>
<FontAwesomeIcon icon={["fas", icon]}/>
</div>
<div className="link-info">
@ -53,15 +63,17 @@ export const LinkItem = (props) => {
</div>
<div className="view-area">
<FontAwesomeIcon icon={faEye} />
<FontAwesomeIcon icon={faEye}/>
<h3>{props.views}</h3>
</div>
<div className="action-area">
<FontAwesomeIcon className="action-edit" icon={faPencil}/>
<FontAwesomeIcon className="action-edit" icon={props.isEnabled ? faToggleOn : faToggleOff} onClick={switchState}/>
<FontAwesomeIcon className="action-edit" icon={faPencil} onClick={() => setShowDialog(true)}/>
<FontAwesomeIcon className="action-delete" icon={faTrash} onClick={deleteLink}/>
</div>
</div>
</div>
</>
);
}