From 0f8a00ad538da1c05c93bb5063c03cf39ef9671d Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Mon, 20 Sep 2021 00:59:01 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Fix=20links?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Link.tsx              | 32 +++++++++++++++++++
 .../components/ResearchGroupPanel.module.css  |  5 ---
 .../src/components/ResearchGroupPanel.tsx     | 14 ++++----
 frontend/src/components/UserLink.tsx          |  8 ++---
 4 files changed, 43 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/components/Link.tsx

diff --git a/frontend/src/components/Link.tsx b/frontend/src/components/Link.tsx
new file mode 100644
index 0000000..dc8ce95
--- /dev/null
+++ b/frontend/src/components/Link.tsx
@@ -0,0 +1,32 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import {Anchor} from "@steffo/bluelib-react";
+import {navigate} from "@reach/router";
+import {AnchorProps} from "@steffo/bluelib-react/dist/components/common/Anchor";
+
+
+interface LinkProps extends AnchorProps {
+
+}
+
+
+export function Link({href, children, onClick, ...props}: AnchorProps): JSX.Element {
+
+    const onClickWrapped = React.useCallback(
+        event => {
+            event.preventDefault()
+            if(onClick) {
+                onClick(event)
+            }
+            if(href) {
+                // noinspection JSIgnoredPromiseFromCall
+                navigate(href)
+            }
+        },
+        [href]
+    )
+
+    return (
+        <Anchor href={href} children={children} onClick={onClickWrapped} {...props}/>
+    )
+}
diff --git a/frontend/src/components/ResearchGroupPanel.module.css b/frontend/src/components/ResearchGroupPanel.module.css
index 37d8e40..8541513 100644
--- a/frontend/src/components/ResearchGroupPanel.module.css
+++ b/frontend/src/components/ResearchGroupPanel.module.css
@@ -13,11 +13,6 @@
 .Name {
     font-size: larger;
     font-weight: 600;
-    color: rgb(var(--bluelib-accent-r), var(--bluelib-accent-g), var(--bluelib-accent-b));
-}
-
-.Name * {
-    color: rgb(var(--bluelib-accent-r), var(--bluelib-accent-g), var(--bluelib-accent-b));
 }
 
 .Owner {
diff --git a/frontend/src/components/ResearchGroupPanel.tsx b/frontend/src/components/ResearchGroupPanel.tsx
index d469a98..0d1faaa 100644
--- a/frontend/src/components/ResearchGroupPanel.tsx
+++ b/frontend/src/components/ResearchGroupPanel.tsx
@@ -4,22 +4,22 @@ import Style from "./ResearchGroupPanel.module.css"
 import {Panel, BringAttention as B, Button, Variable} from "@steffo/bluelib-react";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faEnvelope, faEye, faGlobe, faQuestion} from "@fortawesome/free-solid-svg-icons";
-import {Link} from "@reach/router";
 import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
 import {ResearchGroup} from "../types";
 import {UserLink} from "./UserLink";
+import {Link} from "./Link";
 
 
 export function ResearchGroupPanel({owner, name, access, slug}: ResearchGroup): JSX.Element {
-    let accessIcon: IconDefinition
+    let accessIcon: JSX.Element
     if(access === "OPEN") {
-        accessIcon = faGlobe
+        accessIcon = <FontAwesomeIcon icon={faGlobe} title={"Open"}/>
     }
     else if(access === "MANUAL") {
-        accessIcon = faEnvelope
+        accessIcon = <FontAwesomeIcon icon={faEnvelope} title={"Invite-only"}/>
     }
     else {
-        accessIcon = faQuestion
+        accessIcon = <FontAwesomeIcon icon={faQuestion} title={"Unknown"}/>
     }
 
     // FIXME: use proper bluelib Anchors
@@ -27,10 +27,10 @@ export function ResearchGroupPanel({owner, name, access, slug}: ResearchGroup):
     return (
         <Panel className={Style.Panel}>
             <div className={Style.Access}>
-                <FontAwesomeIcon icon={accessIcon}/>
+                {accessIcon}
             </div>
             <div className={Style.Name} title={slug}>
-                <Link to={`/g/${slug}/`}>{name}</Link>
+                <Link href={`/g/${slug}/`}>{name}</Link>
             </div>
             <div className={Style.Owner}>
                 Created by <UserLink id={owner}/>
diff --git a/frontend/src/components/UserLink.tsx b/frontend/src/components/UserLink.tsx
index 6f73f8d..0ab60fd 100644
--- a/frontend/src/components/UserLink.tsx
+++ b/frontend/src/components/UserLink.tsx
@@ -5,7 +5,7 @@ import {Anchor} from "@steffo/bluelib-react";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faSpinner, faTimesCircle, faUser} from "@fortawesome/free-solid-svg-icons";
 import {useDRFViewSet} from "../hooks/useDRF";
-import {Link} from "@reach/router";
+import {Link} from "./Link";
 
 
 interface UserLinkProps {
@@ -34,17 +34,17 @@ export function UserLink({id}: UserLinkProps): JSX.Element {
     // FIXME: use proper bluelib Anchors
 
     if(error) return (
-        <Link to={`/u/${id}`}>
+        <Link href={`/u/${id}`} title={id.toString()}>
             <FontAwesomeIcon icon={faTimesCircle}/> {id}
         </Link>
     )
     else if(!user) return (
-        <Link to={`/u/${id}`}>
+        <Link href={`/u/${id}`} title={id.toString()}>
             <FontAwesomeIcon icon={faSpinner} pulse={true}/> {id}
         </Link>
     )
     return (
-        <Link to={`/u/${id}`}>
+        <Link href={`/u/${id}`} title={id.toString()}>
             <FontAwesomeIcon icon={faUser}/> {user.username}
         </Link>
     )