From 8fc2da1c5188f69ee1e3d4babe10d9dad3f3989e Mon Sep 17 00:00:00 2001
From: Sendou <sendou77@gmail.com>
Date: Sun, 15 Dec 2019 18:57:35 +0200
Subject: [PATCH] fa page random small fixes

---
 .../src/components/freeagents/FATableRows.js    | 17 ++++++++++++++---
 react-ui/src/components/user/ProfileLists.js    |  4 ++--
 react-ui/src/components/user/UserPage.js        | 14 +++++++-------
 utils/webhook.js                                |  6 +++++-
 4 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/react-ui/src/components/freeagents/FATableRows.js b/react-ui/src/components/freeagents/FATableRows.js
index 7b651b2a1..87ee65591 100644
--- a/react-ui/src/components/freeagents/FATableRows.js
+++ b/react-ui/src/components/freeagents/FATableRows.js
@@ -10,6 +10,7 @@ import TextRows from "./TextRows"
 
 const FATableRows = ({ freeAgent }) => {
   const [expanded, setExpanded] = useState(false)
+  const [imageError, setImageError] = useState(false)
 
   const twitter = freeAgent.discord_user.twitter_name
   const playstyles = freeAgent.playstyles.reduce((acc, cur) => {
@@ -42,7 +43,13 @@ const FATableRows = ({ freeAgent }) => {
         <Table.Cell width={4}>
           {twitter ? (
             <>
-              <Image src={`https://avatars.io/twitter/${twitter}`} avatar />
+              {!imageError && (
+                <Image
+                  src={`https://avatars.io/twitter/${twitter}`}
+                  avatar
+                  onError={error => setImageError(true)}
+                />
+              )}
               <span>
                 <Link to={`/u/${freeAgent.discord_user.discord_id}`}>
                   {freeAgent.discord_user.username}#
@@ -70,8 +77,12 @@ const FATableRows = ({ freeAgent }) => {
           )}
         </Table.Cell>
         <Table.Cell>
-          <Icon name="twitter" size="large" style={{ color: "#1da1f2" }} />
-          <a href={`https://twitter.com/${twitter}`}>{twitter}</a>
+          {twitter && !imageError && (
+            <>
+              <Icon name="twitter" size="large" style={{ color: "#1da1f2" }} />
+              <a href={`https://twitter.com/${twitter}`}>{twitter}</a>
+            </>
+          )}
         </Table.Cell>
         <Table.Cell>
           <span style={{ color: "#999999" }}>
diff --git a/react-ui/src/components/user/ProfileLists.js b/react-ui/src/components/user/ProfileLists.js
index a01d3e9a1..e8af43a7a 100644
--- a/react-ui/src/components/user/ProfileLists.js
+++ b/react-ui/src/components/user/ProfileLists.js
@@ -20,7 +20,7 @@ const SensListItem = ({ sens }) => {
   )
 }
 
-const ProfileLists = ({ user }) => {
+const ProfileLists = ({ user, imageError }) => {
   return (
     <>
       <Grid.Column>
@@ -29,7 +29,7 @@ const ProfileLists = ({ user }) => {
             <List.Icon name="discord" size="large" />
             <List.Content>{`${user.username}#${user.discriminator}`}</List.Content>
           </List.Item>
-          {user.twitter_name && (
+          {user.twitter_name && !imageError && (
             <List.Item>
               <List.Icon name="twitter" size="large" />
               <List.Content>
diff --git a/react-ui/src/components/user/UserPage.js b/react-ui/src/components/user/UserPage.js
index bfb36c389..30ce6de32 100644
--- a/react-ui/src/components/user/UserPage.js
+++ b/react-ui/src/components/user/UserPage.js
@@ -25,6 +25,7 @@ const UserPage = () => {
   const [showSettings, setShowSettings] = useState(false)
   const [successMsg, setSuccessMsg] = useState(null)
   const [errorMsg, setErrorMsg] = useState(null)
+  const [imageError, setImageError] = useState(false)
 
   const handleError = error => {
     setErrorMsg(error.message)
@@ -44,6 +45,8 @@ const UserPage = () => {
   useEffect(() => {
     if (loading || !data || !data.searchForUser) return
     document.title = `${data.searchForUser.username} - sendou.ink`
+
+    return () => setImageError(false)
   }, [loading, data])
 
   if (loading || userLeanQuery.loading) return <Loading />
@@ -85,24 +88,21 @@ const UserPage = () => {
     setTab(activeIndex)
   }
 
+  console.log("imageError", imageError)
   return (
     <>
       <>
         <Grid stackable columns={4}>
           <Grid.Column width={3}>
-            {userData.twitter_name && (
+            {userData.twitter_name && !imageError && (
               <Image
                 src={`https://avatars.io/twitter/${userData.twitter_name}`}
                 rounded
-                onError={error =>
-                  console.error(
-                    `Couldn't fetch avatar image of ${userData.twitter_name}.`
-                  )
-                }
+                onError={error => setImageError(true)}
               />
             )}
           </Grid.Column>
-          <ProfileLists user={userData} />
+          <ProfileLists user={userData} imageError={imageError} />
           <Grid.Column>
             {!showSettings &&
               userLeanQuery.data.user &&
diff --git a/utils/webhook.js b/utils/webhook.js
index 20f65094b..c314cb701 100644
--- a/utils/webhook.js
+++ b/utils/webhook.js
@@ -7,6 +7,10 @@ function sendFAPostToDiscord(args) {
     .setName(args.user.username)
     .setColor("#2c5364")
     .addField("", `<@${args.user.discord_id}>`)
+    .addField(
+      "",
+      `[User page on sendou.ink](https://sendou.ink/u/${args.user.discord_id})`
+    )
 
   if (args.can_vc) {
     const can_vc = args.can_vc.toLowerCase()
@@ -20,7 +24,7 @@ function sendFAPostToDiscord(args) {
     )
   }
 
-  if (args.user.weapons) {
+  if (args.user.weapons.length > 0) {
     msg.addField("Weapons", args.user.weapons.join(", "))
   }