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

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

@ -1,15 +1,17 @@
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; 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 Tag from "@/pages/Home/components/Tag";
import {useContext, useEffect, useState} from "react"; import {useContext, useEffect, useState} from "react";
import LinkContext from "@/common/contexts/Link"; 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 ModuleContext from "@/common/contexts/Module";
import {createGravatarUrl} from "@/pages/Home/utils.js"; import {createGravatarUrl} from "@/pages/Home/utils.js";
import LinkDialog from "@/pages/Home/components/LinkDialog";
import "./styles.sass"; import "./styles.sass";
export const LinkItem = (props) => { export const LinkItem = (props) => {
const [showDialog, setShowDialog] = useState(false);
const [links, updateLinks] = useContext(LinkContext); const [links, updateLinks] = useContext(LinkContext);
const modules = useContext(ModuleContext); const modules = useContext(ModuleContext);
const [icon, setIcon] = useState("link"); const [icon, setIcon] = useState("link");
@ -19,6 +21,11 @@ export const LinkItem = (props) => {
setIcon(modules[props.type]["icon"]); setIcon(modules[props.type]["icon"]);
}, [modules]); }, [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 clickLink = () => window.open(`http://${props.domain}/${props.accessId}`, '_blank').focus();
const deleteLink = async () => { const deleteLink = async () => {
@ -27,41 +34,46 @@ export const LinkItem = (props) => {
} }
return ( return (
<div className="link-item"> <>
<div className="info-area"> <LinkDialog module={props.type} isOpen={showDialog} close={() => setShowDialog(false)} editMode={true}
<div className="module-info"> meta={props.meta} accessId={props.accessId} title={props.title} tags={props.tags} id={props.id}/>
<FontAwesomeIcon icon={["fas", icon]}/> <div className="link-item">
</div> <div className="info-area">
<div className="link-info"> <div className={"module-info" + (props.isEnabled ? "" : " module-disabled")}>
<h4>{props.title}</h4> <FontAwesomeIcon icon={["fas", icon]}/>
<p>ID: {props.accessId} <FontAwesomeIcon className="link-external" icon={faExternalLink} </div>
onClick={clickLink}/></p> <div className="link-info">
</div> <h4>{props.title}</h4>
<p>ID: {props.accessId} <FontAwesomeIcon className="link-external" icon={faExternalLink}
onClick={clickLink}/></p>
</div>
<div className="tag-area"> <div className="tag-area">
{props.tags?.map(tag => <Tag name={tag} key={tag}/>)} {props.tags?.map(tag => <Tag name={tag} key={tag}/>)}
</div>
</div>
<div className="right-area">
<div className="view-area author-area">
<img className="author-image" src={createGravatarUrl(props.creator.email)} alt=""/>
<h3>{props.creator.username}</h3>
</div>
<div className="view-area">
&#124;
</div>
<div className="view-area">
<FontAwesomeIcon icon={faEye}/>
<h3>{props.views}</h3>
</div>
<div className="action-area">
<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>
</div> </div>
<div className="right-area"> </>
<div className="view-area author-area">
<img className="author-image" src={createGravatarUrl(props.creator.email)} alt=""/>
<h3>{props.creator.username}</h3>
</div>
<div className="view-area">
&#124;
</div>
<div className="view-area">
<FontAwesomeIcon icon={faEye} />
<h3>{props.views}</h3>
</div>
<div className="action-area">
<FontAwesomeIcon className="action-edit" icon={faPencil}/>
<FontAwesomeIcon className="action-delete" icon={faTrash} onClick={deleteLink}/>
</div>
</div>
</div>
); );
} }