From 32344604c89285e2e029cd4f0b2172212d176660 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Tue, 27 Dec 2022 21:43:48 +0100
Subject: [PATCH] Created the LinkItem.jsx

---
 .../Home/components/LinkItem/LinkItem.jsx     | 67 +++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 admin/src/pages/Home/components/LinkItem/LinkItem.jsx

diff --git a/admin/src/pages/Home/components/LinkItem/LinkItem.jsx b/admin/src/pages/Home/components/LinkItem/LinkItem.jsx
new file mode 100644
index 0000000..caa8fa0
--- /dev/null
+++ b/admin/src/pages/Home/components/LinkItem/LinkItem.jsx
@@ -0,0 +1,67 @@
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faExternalLink, faEye, faPencil, 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 ModuleContext from "@/common/contexts/Module";
+import {createGravatarUrl} from "@/pages/Home/utils.js";
+import "./styles.sass";
+
+export const LinkItem = (props) => {
+
+    const [links, updateLinks] = useContext(LinkContext);
+    const modules = useContext(ModuleContext);
+    const [icon, setIcon] = useState("link");
+
+    useEffect(() => {
+        if (!modules) return;
+        setIcon(modules[props.type]["icon"]);
+    }, [modules]);
+
+    const clickLink = () => window.open(`http://${props.domain}/${props.accessId}`, '_blank').focus();
+
+    const deleteLink = async () => {
+        await deleteRequest(`/link/${props.id}`);
+        updateLinks();
+    }
+
+    return (
+        <div className="link-item">
+            <div className="info-area">
+                <div className="module-info">
+                    <FontAwesomeIcon icon={["fas", icon]}/>
+                </div>
+                <div className="link-info">
+                    <h4>{props.title}</h4>
+                    <p>ID: {props.accessId} <FontAwesomeIcon className="link-external" icon={faExternalLink}
+                                                             onClick={clickLink}/></p>
+                </div>
+
+                <div className="tag-area">
+                    {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={faPencil}/>
+                    <FontAwesomeIcon className="action-delete" icon={faTrash} onClick={deleteLink}/>
+                </div>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file