From 5130f52f612aaedf22666aadf4cb06239e30b167 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 25 Dec 2022 22:15:41 -0800
Subject: [PATCH] Use Link on GridRep

* Open grids in new tab
* Can favorite or open grid still
* Can now navigate to profile from grid collection
---
 components/GridRep/index.scss |  4 ++
 components/GridRep/index.tsx  | 90 ++++++++++++++++++++++-------------
 styles/themes.scss            |  4 ++
 styles/variables.scss         |  3 ++
 4 files changed, 67 insertions(+), 34 deletions(-)

diff --git a/components/GridRep/index.scss b/components/GridRep/index.scss
index a47aa2fa..27717f65 100644
--- a/components/GridRep/index.scss
+++ b/components/GridRep/index.scss
@@ -99,6 +99,10 @@
     .bottom {
       display: flex;
       flex-direction: row;
+
+      a.user:hover {
+        color: var(--link-text-hover);
+      }
     }
 
     .raid,
diff --git a/components/GridRep/index.tsx b/components/GridRep/index.tsx
index f353a8ed..41180b6a 100644
--- a/components/GridRep/index.tsx
+++ b/components/GridRep/index.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useSnapshot } from 'valtio'
 import { useTranslation } from 'next-i18next'
@@ -132,11 +133,28 @@ const GridRep = (props: Props) => {
     } else return <div className="no-user" />
   }
 
+  const linkedAttribution = () => (
+    <Link href={`/${props.user ? props.user.username : '#'}`}>
+      <a
+        className={userClass}
+        href={`/${props.user ? props.user.username : '#'}`}
+      >
+        {userImage()}
+        {props.user ? props.user.username : t('no_user')}
+      </a>
+    </Link>
+  )
+
+  const unlinkedAttribution = () => (
+    <div className={userClass}>
+      {userImage()}
+      {props.user ? props.user.username : t('no_user')}
+    </div>
+  )
+
   const details = (
     <div className="Details">
-      <h2 className={titleClass} onClick={navigate}>
-        {props.name ? props.name : t('no_title')}
-      </h2>
+      <h2 className={titleClass}>{props.name ? props.name : t('no_title')}</h2>
       <div className="bottom">
         <div className={raidClass}>
           {props.raid ? props.raid.name[locale] : t('no_raid')}
@@ -152,7 +170,7 @@ const GridRep = (props: Props) => {
     <div className="Details">
       <div className="top">
         <div className="info">
-          <h2 className={titleClass} onClick={navigate}>
+          <h2 className={titleClass}>
             {props.name ? props.name : t('no_title')}
           </h2>
           <div className={raidClass}>
@@ -162,23 +180,25 @@ const GridRep = (props: Props) => {
         {account.authorized &&
         ((props.user && account.user && account.user.id !== props.user.id) ||
           !props.user) ? (
-          <Button
-            className="Save"
-            accessoryIcon={<SaveIcon className="stroke" />}
-            active={props.favorited}
-            contained={true}
-            buttonSize="small"
-            onClick={sendSaveData}
-          />
+          <Link href="#">
+            <a href="#">
+              <Button
+                className="Save"
+                accessoryIcon={<SaveIcon className="stroke" />}
+                active={props.favorited}
+                contained={true}
+                buttonSize="small"
+                onClick={sendSaveData}
+              />
+            </a>
+          </Link>
         ) : (
           ''
         )}
       </div>
       <div className="bottom">
-        <div className={userClass}>
-          {userImage()}
-          {props.user ? props.user.username : t('no_user')}
-        </div>
+        {props.user ? linkedAttribution() : unlinkedAttribution()}
+
         <time className="last-updated" dateTime={props.createdAt.toISOString()}>
           {formatTimeAgo(props.createdAt, locale)}
         </time>
@@ -187,25 +207,27 @@ const GridRep = (props: Props) => {
   )
 
   return (
-    <div className="GridRep">
-      {props.displayUser ? detailsWithUsername : details}
-      <div className="Grid" onClick={navigate}>
-        <div className="weapon grid_mainhand">{generateMainhandImage()}</div>
+    <Link href={`/p/${props.shortcode}`}>
+      <a className="GridRep">
+        {props.displayUser ? detailsWithUsername : details}
+        <div className="Grid">
+          <div className="weapon grid_mainhand">{generateMainhandImage()}</div>
 
-        <ul className="grid_weapons">
-          {Array.from(Array(numWeapons)).map((x, i) => {
-            return (
-              <li
-                key={`${props.shortcode}-${i}`}
-                className="weapon grid_weapon"
-              >
-                {generateGridImage(i)}
-              </li>
-            )
-          })}
-        </ul>
-      </div>
-    </div>
+          <ul className="grid_weapons">
+            {Array.from(Array(numWeapons)).map((x, i) => {
+              return (
+                <li
+                  key={`${props.shortcode}-${i}`}
+                  className="weapon grid_weapon"
+                >
+                  {generateGridImage(i)}
+                </li>
+              )
+            })}
+          </ul>
+        </div>
+      </a>
+    </Link>
   )
 }
 
diff --git a/styles/themes.scss b/styles/themes.scss
index 4871bb75..acc5dfd8 100644
--- a/styles/themes.scss
+++ b/styles/themes.scss
@@ -7,6 +7,8 @@
   --card-bg: #{$grey-100};
   --bar-bg: #{$grey-100};
 
+  --link-text-hover: #{$text--link--hover--light};
+
   // Light - Menus
   --dialog-bg: #{$dialog--bg--light};
 
@@ -120,6 +122,8 @@
   --card-bg: #{$page--element--bg--dark};
   --bar-bg: #{$grey-10};
 
+  --link-text-hover: #{$text--link--hover--dark};
+
   // Dark - Dialogs
   --dialog-bg: #{$dialog--bg--dark};
 
diff --git a/styles/variables.scss b/styles/variables.scss
index f0bec0fe..94a22bdc 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -235,6 +235,9 @@ $text--tertiary--color--dark: $grey-50;
 $text--tertiary--hover--light: $grey-40;
 $text--tertiary--hover--dark: $grey-70;
 
+$text--link--hover--light: $grey-40;
+$text--link--hover--dark: $grey-100;
+
 // Color Definitions: Icon
 $icon--secondary--color--light: $grey-70;
 $icon--secondary--color--dark: $grey-50;