From a8ed52933a0d00020956d2e080df8a1f7e96c9bd Mon Sep 17 00:00:00 2001
From: Thomas Weber <weber_t@mailbox.org>
Date: Mon, 19 Apr 2021 15:30:46 -0500
Subject: [PATCH] Make AuthorInfo a single link to the project

The existing menu is apparently quite unusable on mobile.
We are long overdue for a redesign, really.
---
 src/components/menu-bar/author-info.css |  9 ++-
 src/components/menu-bar/author-info.jsx | 74 ++++++++++---------------
 2 files changed, 34 insertions(+), 49 deletions(-)

diff --git a/src/components/menu-bar/author-info.css b/src/components/menu-bar/author-info.css
index f6e59d9f7..46081b90e 100644
--- a/src/components/menu-bar/author-info.css
+++ b/src/components/menu-bar/author-info.css
@@ -38,10 +38,13 @@
     font-weight: bold;
 }
 
-.username-link, .project-link {
-    color: $ui-white !important;
+.link {
     text-decoration: none;
+    color: $ui-white;
 }
-.username-link:hover, .project-link:hover {
+.link:hover {
     text-decoration: underline;
 }
+.link .author-info {
+    cursor: pointer;
+}
diff --git a/src/components/menu-bar/author-info.jsx b/src/components/menu-bar/author-info.jsx
index 4ad10f969..5be37ce32 100644
--- a/src/components/menu-bar/author-info.jsx
+++ b/src/components/menu-bar/author-info.jsx
@@ -1,16 +1,14 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
-import {FormattedMessage, injectIntl} from 'react-intl';
+import {FormattedMessage} from 'react-intl';
 import UserAvatar from './user-avatar.jsx';
 
 import styles from './author-info.css';
 
-// tw: make author username and avatar clickable, as well as make the project title link link to the project itself
-const AuthorInfo = ({
+const ActualAuthorInfo = ({
     className,
     imageUrl,
-    projectId,
     projectTitle,
     // TODO: use userId to link to user's profile
     userId, // eslint-disable-line no-unused-vars
@@ -22,38 +20,14 @@ const AuthorInfo = ({
             styles.authorInfo
         )}
     >
-        <a
-            className={styles.usernameLink}
-            href={`https://scratch.mit.edu/users/${username}/`}
-            target="_blank"
-            rel="noreferrer"
-        >
-            <UserAvatar
-                className={styles.avatar}
-                imageUrl={imageUrl}
-            />
-        </a>
+        <UserAvatar
+            className={styles.avatar}
+            imageUrl={imageUrl}
+        />
         <div className={styles.titleAuthor}>
-            {projectId ? (
-                <a
-                    className={styles.projectLink}
-                    href={`https://scratch.mit.edu/projects/${projectId}/`}
-                    target="_blank"
-                    rel="noreferrer"
-                >
-                    {/* tw: full project title as hover text */}
-                    <span
-                        className={styles.projectTitle}
-                        title={projectTitle}
-                    >
-                        {projectTitle}
-                    </span>
-                </a>
-            ) : (
-                <span className={styles.projectTitle}>
-                    {projectTitle}
-                </span>
-            )}
+            <span className={styles.projectTitle}>
+                {projectTitle}
+            </span>
             <div>
                 <span className={styles.usernameLine}>
                     <FormattedMessage
@@ -61,14 +35,7 @@ const AuthorInfo = ({
                         description="Shows that a project was created by this user"
                         id="gui.authorInfo.byUser"
                         values={{
-                            username: <span className={styles.username}>
-                                <a
-                                    className={styles.usernameLink}
-                                    href={`https://scratch.mit.edu/users/${username}/`}
-                                    target="_blank"
-                                    rel="noreferrer"
-                                >{username}</a>
-                            </span>
+                            username: <span className={styles.username}>{username}</span>
                         }}
                     />
                 </span>
@@ -77,13 +44,28 @@ const AuthorInfo = ({
     </div>
 );
 
-AuthorInfo.propTypes = {
+ActualAuthorInfo.propTypes = {
     className: PropTypes.string,
     imageUrl: PropTypes.string,
-    projectId: PropTypes.string,
     projectTitle: PropTypes.string,
     userId: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     username: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
 };
 
-export default injectIntl(AuthorInfo);
+const AuthorInfo = ({projectId, ...props}) => (
+    projectId ? (
+        <a
+            className={styles.link}
+            href={`https://scratch.mit.edu/projects/${projectId}`}
+            target="_blank"
+            rel="noreferrer"
+        >
+            <ActualAuthorInfo {...props} />
+        </a>
+    ) : <ActualAuthorInfo {...props} />
+);
+AuthorInfo.propTypes = {
+    projectId: PropTypes.string
+};
+
+export default AuthorInfo;