From cfd234d6151f9538b7c0aaaeed537dd81d1e0f7c Mon Sep 17 00:00:00 2001
From: infinite-persistence
 <64950861+infinite-persistence@users.noreply.github.com>
Date: Wed, 23 Feb 2022 04:42:43 -0800
Subject: [PATCH] ClaimPreview & sidebar: strip '@' since channel is implied
 (#879)

## Ticket
865: Hide @ symbol in areas where channel names are implied
---
 ui/component/claimPreviewSubtitle/view.jsx | 2 +-
 ui/component/claimPreviewTile/view.jsx     | 4 ++--
 ui/component/sideNavigation/view.jsx       | 3 ++-
 ui/component/uriIndicator/view.jsx         | 5 ++++-
 ui/util/string.js                          | 4 ++++
 5 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/ui/component/claimPreviewSubtitle/view.jsx b/ui/component/claimPreviewSubtitle/view.jsx
index c12fca6a0..e01e25b82 100644
--- a/ui/component/claimPreviewSubtitle/view.jsx
+++ b/ui/component/claimPreviewSubtitle/view.jsx
@@ -43,7 +43,7 @@ function ClaimPreviewSubtitle(props: Props) {
     <div className="media__subtitle">
       {claim ? (
         <React.Fragment>
-          <UriIndicator uri={uri} link />{' '}
+          <UriIndicator uri={uri} link stripAtSign />{' '}
           {!pending && claim && (
             <>
               {isChannel && type !== 'inline' && (
diff --git a/ui/component/claimPreviewTile/view.jsx b/ui/component/claimPreviewTile/view.jsx
index c505a01aa..05bf4a820 100644
--- a/ui/component/claimPreviewTile/view.jsx
+++ b/ui/component/claimPreviewTile/view.jsx
@@ -222,7 +222,7 @@ function ClaimPreviewTile(props: Props) {
             <TruncatedText text={title || (claim && claim.name)} lines={isChannel ? 1 : 2} />
             {isChannel && (
               <div className="claim-tile__about">
-                <UriIndicator uri={uri} />
+                <UriIndicator uri={uri} stripAtSign />
               </div>
             )}
           </h2>
@@ -247,7 +247,7 @@ function ClaimPreviewTile(props: Props) {
               </UriIndicator>
 
               <div className="claim-tile__about">
-                <UriIndicator uri={uri} link />
+                <UriIndicator uri={uri} link stripAtSign />
                 <div className="claim-tile__about--counts">
                   <FileViewCountInline uri={uri} isLivestream={isLivestream} />
                   {isLivestream && <LivestreamDateTime uri={uri} />}
diff --git a/ui/component/sideNavigation/view.jsx b/ui/component/sideNavigation/view.jsx
index 53cd312ea..cef8afea5 100644
--- a/ui/component/sideNavigation/view.jsx
+++ b/ui/component/sideNavigation/view.jsx
@@ -13,6 +13,7 @@ import I18nMessage from 'component/i18nMessage';
 import ChannelThumbnail from 'component/channelThumbnail';
 import { useIsMobile, useIsLargeScreen, isTouch } from 'effects/use-screensize';
 import { GetLinksData } from 'util/buildHomepage';
+import { stripLeadingAtSign } from 'util/string';
 import { DOMAIN, ENABLE_UI_NOTIFICATIONS, ENABLE_NO_SOURCE_CLAIMS, CHANNEL_STAKED_LEVEL_LIVESTREAM } from 'config';
 
 const FOLLOWED_ITEM_INITIAL_LIMIT = 10;
@@ -539,7 +540,7 @@ function SubscriptionListItem({ subscription }: { subscription: Subscription })
       >
         <ChannelThumbnail xsmall uri={uri} hideStakedIndicator />
         <span dir="auto" className="button__label">
-          {channelName}
+          {stripLeadingAtSign(channelName)}
         </span>
       </Button>
     </li>
diff --git a/ui/component/uriIndicator/view.jsx b/ui/component/uriIndicator/view.jsx
index 83cd7ff7d..efb97ce17 100644
--- a/ui/component/uriIndicator/view.jsx
+++ b/ui/component/uriIndicator/view.jsx
@@ -3,6 +3,7 @@ import type { Node } from 'react';
 import React from 'react';
 import classnames from 'classnames';
 import Button from 'component/button';
+import { stripLeadingAtSign } from 'util/string';
 
 type ChannelInfo = { uri: string, name: string };
 
@@ -14,6 +15,7 @@ type Props = {
   focusable?: boolean, // Defaults to 'true' if not provided.
   hideAnonymous?: boolean,
   inline?: boolean,
+  stripAtSign?: boolean,
   className?: string,
   children: ?Node, // to allow for other elements to be nested within the UriIndicator (commit: 1e82586f).
   // --- redux ---
@@ -79,6 +81,7 @@ class UriIndicator extends React.PureComponent<Props> {
       focusable = true,
       external = false,
       hideAnonymous = false,
+      stripAtSign,
       className,
     } = this.props;
 
@@ -109,7 +112,7 @@ class UriIndicator extends React.PureComponent<Props> {
 
       const inner = (
         <span dir="auto" className={classnames('channel-name', { 'channel-name--inline': inline })}>
-          {channelName}
+          {stripAtSign ? stripLeadingAtSign(channelName) : channelName}
         </span>
       );
 
diff --git a/ui/util/string.js b/ui/util/string.js
index 2c7f761a3..3877cae44 100644
--- a/ui/util/string.js
+++ b/ui/util/string.js
@@ -21,3 +21,7 @@ export function toCompactNotation(number: string | number, lang: ?string, minThr
     return Number(number).toLocaleString(locale);
   }
 }
+
+export function stripLeadingAtSign(str: ?string) {
+  return str && str.charAt(0) === '@' ? str.slice(1) : str;
+}