Remove isPadded

brave · Oct 5, 2022 · defdc12 · defdc12
1 parent 3b57fa8
commit defdc12
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 24 deletions.
diff --git a/components/brave_new_tab_ui/components/braveNews/FeedCard.tsx b/components/brave_new_tab_ui/components/braveNews/FeedCard.tsx
@@ -91,7 +91,7 @@ export default function FeedCard (props: {
     }, [subscribed])
 
     const backgroundColor = publisher.backgroundColor || getCardColor(publisher.feedSource?.url || publisher.publisherId)
-    const coverUrl = useGetUnpaddedImage(publisher.coverUrl?.url ?? '', false)
+    const coverUrl = useGetUnpaddedImage(publisher.coverUrl?.url)
     return <Container direction="column" gap={8}>
         <Card backgroundColor={backgroundColor}>
             {coverUrl && <CoverImage backgroundImage={coverUrl} />}

diff --git a/components/brave_new_tab_ui/components/braveNews/SourcesListEntry.tsx b/components/brave_new_tab_ui/components/braveNews/SourcesListEntry.tsx
@@ -39,9 +39,13 @@ const Text = styled.span`
     font-weight: 500;
 `
 
+const ChannelNameText = styled.span`
+    font-size: 14px;
+    font-weight: 600;
+`
+
 function FavIcon (props: { src?: string }) {
-    const url = useGetUnpaddedImage(props.src ?? '', true)
-    console.log(props.src, url)
+    const url = useGetUnpaddedImage(props.src)
     const [error, setError] = React.useState(false)
     return <FavIconContainer>
         {url && !error && <img src={url} onError={() => setError(true)} />}
@@ -67,7 +71,7 @@ export function ChannelListEntry (props: { channelId: string }) {
     const { subscribed, setSubscribed } = useChannelSubscribed(props.channelId)
 
     return <Container direction="row" justify='space-between' align='center' onClick={() => setSubscribed(!subscribed)}>
-        {props.channelId}
+        <ChannelNameText>{props.channelId}</ChannelNameText>
         <ToggleButton>
             {subscribed ? Heart : HeartOutline}
         </ToggleButton>

diff --git a/components/brave_new_tab_ui/components/default/braveToday/cards/CardImage.tsx b/components/brave_new_tab_ui/components/default/braveToday/cards/CardImage.tsx
@@ -8,25 +8,25 @@ import * as Card from '../cardSizes'
 import getBraveNewsController, * as BraveNews from '../../../../api/brave_news'
 
 type Props = {
-  imageUrl: string
+  imageUrl?: string
   list?: boolean
-  isUnpadded?: boolean
   isPromoted?: boolean
   onLoaded?: () => any
 }
 
 const cache: { [url: string]: string } = {}
 
-export function useGetUnpaddedImage (paddedUrl: string, isUnpadded: boolean, onLoaded?: () => any) {
+export function useGetUnpaddedImage (paddedUrl: string | undefined, onLoaded?: () => any) {
   const [unpaddedUrl, setUnpaddedUrl] = React.useState('')
-  const onReceiveUnpaddedUrl = (result: string) => {
-    cache[paddedUrl] = result
-    setUnpaddedUrl(result)
-
-    if (onLoaded) window.requestAnimationFrame(() => onLoaded())
-  }
 
   React.useEffect(() => {
+    const onReceiveUnpaddedUrl = (result: string) => {
+      cache[paddedUrl!] = result
+      setUnpaddedUrl(result)
+
+      if (onLoaded) window.requestAnimationFrame(() => onLoaded())
+    }
+
     // Storybook method
     // @ts-expect-error
     if (window.braveStorybookUnpadUrl) {
@@ -36,6 +36,8 @@ export function useGetUnpaddedImage (paddedUrl: string, isUnpadded: boolean, onL
       return
     }
 
+    if (!paddedUrl) return
+
     if (cache[paddedUrl]) {
       onReceiveUnpaddedUrl(cache[paddedUrl])
       return
@@ -54,12 +56,12 @@ export function useGetUnpaddedImage (paddedUrl: string, isUnpadded: boolean, onL
       .catch(err => {
         console.error(`Error getting image for ${paddedUrl}.`, err)
       })
-  }, [paddedUrl, isUnpadded])
+  }, [paddedUrl])
   return unpaddedUrl
 }
 
 export default function CardImage (props: Props) {
-  const unpaddedUrl = useGetUnpaddedImage(props.imageUrl, !!props.isUnpadded, props.onLoaded)
+  const unpaddedUrl = useGetUnpaddedImage(props.imageUrl, props.onLoaded)
   const [isImageLoaded, setIsImageLoaded] = React.useState(false)
   React.useEffect(() => {
     if (unpaddedUrl) {

diff --git a/components/brave_new_tab_ui/components/default/braveToday/cards/displayAd/index.tsx b/components/brave_new_tab_ui/components/default/braveToday/cards/displayAd/index.tsx
@@ -60,14 +60,7 @@ export default function CardDisplayAd (props: Props) {
     // verbose ref type conversion due to https://stackoverflow.com/questions/61102101/cannot-assign-refobjecthtmldivelement-to-refobjecthtmlelement-instance
     return <div ref={contentTrigger}><div ref={cardRef as unknown as React.RefObject<HTMLDivElement>} /></div>
   }
-  let isImageUnpadded = true
-  let imageUrl: string = ''
-  if (content.image.paddedImageUrl) {
-    imageUrl = content.image.paddedImageUrl.url
-    isImageUnpadded = false
-  } else if (content.image.imageUrl) {
-    imageUrl = content.image.imageUrl.url
-  }
+  const imageUrl = content.image.paddedImageUrl?.url || content.image.imageUrl?.url
   // Render ad when one is available for this unit
   // TODO(petemill): Avoid nested links
   return (
@@ -77,7 +70,6 @@ export default function CardDisplayAd (props: Props) {
       </Styles.BatAdLabel>
       <a onClick={onClick} href={content.targetUrl.url} ref={cardRef}>
         <CardImage
-          isUnpadded={isImageUnpadded}
           imageUrl={imageUrl}
           isPromoted={true}
         />