From 86654e4a954a077622f8ac2ac7df337a9ca3e667 Mon Sep 17 00:00:00 2001
From: Sasi <me@sasi.codes>
Date: Wed, 28 Dec 2022 18:27:52 +0530
Subject: [PATCH 1/3] fix: channel cover picture upload

---
 .../src/components/Channel/BasicInfo/index.tsx |  7 +++++--
 apps/web/src/components/Settings/BasicInfo.tsx | 18 ++++++++----------
 .../utils/functions/getChannelCoverPicture.ts  | 11 +++++++++++
 packages/utils/functions/getCoverPicture.ts    | 14 --------------
 4 files changed, 24 insertions(+), 26 deletions(-)
 create mode 100644 packages/utils/functions/getChannelCoverPicture.ts
 delete mode 100644 packages/utils/functions/getCoverPicture.ts

diff --git a/apps/web/src/components/Channel/BasicInfo/index.tsx b/apps/web/src/components/Channel/BasicInfo/index.tsx
index 228fe4113..7baa3ddbb 100644
--- a/apps/web/src/components/Channel/BasicInfo/index.tsx
+++ b/apps/web/src/components/Channel/BasicInfo/index.tsx
@@ -12,9 +12,10 @@ import type { FC } from 'react'
 import React, { useState } from 'react'
 import { FiSettings } from 'react-icons/fi'
 import { Analytics, TRACK } from 'utils'
-import getCoverPicture from 'utils/functions/getCoverPicture'
+import getChannelCoverPicture from 'utils/functions/getChannelCoverPicture'
 import getProfilePicture from 'utils/functions/getProfilePicture'
 import imageCdn from 'utils/functions/imageCdn'
+import sanitizeIpfsUrl from 'utils/functions/sanitizeIpfsUrl'
 
 import MutualSubscribers from '../Mutual/MutualSubscribers'
 
@@ -43,7 +44,9 @@ const BasicInfo: FC<Props> = ({ channel }) => {
         <span>
           <div
             style={{
-              backgroundImage: `url(${imageCdn(getCoverPicture(channel))})`
+              backgroundImage: `url(${imageCdn(
+                sanitizeIpfsUrl(getChannelCoverPicture(channel))
+              )})`
             }}
             className="absolute w-full bg-white bg-center bg-no-repeat bg-cover rounded-lg dark:bg-gray-900 h-44 md:h-72"
           >
diff --git a/apps/web/src/components/Settings/BasicInfo.tsx b/apps/web/src/components/Settings/BasicInfo.tsx
index 9b699c9ad..0bc0da880 100644
--- a/apps/web/src/components/Settings/BasicInfo.tsx
+++ b/apps/web/src/components/Settings/BasicInfo.tsx
@@ -37,7 +37,7 @@ import {
   TRACK
 } from 'utils'
 import { VERIFIED_CHANNELS } from 'utils/data/verified'
-import getCoverPicture from 'utils/functions/getCoverPicture'
+import getChannelCoverPicture from 'utils/functions/getChannelCoverPicture'
 import { getValueFromKeyInAttributes } from 'utils/functions/getFromAttributes'
 import imageCdn from 'utils/functions/imageCdn'
 import omitKey from 'utils/functions/omitKey'
@@ -85,7 +85,7 @@ const BasicInfo = ({ channel }: Props) => {
   const [copy] = useCopyToClipboard()
   const [loading, setLoading] = useState(false)
   const [uploading, setUploading] = useState(false)
-  const [coverImage, setCoverImage] = useState(getCoverPicture(channel))
+  const [coverImage, setCoverImage] = useState(getChannelCoverPicture(channel))
   const selectedChannel = useAppStore((state) => state.selectedChannel)
 
   const {
@@ -197,6 +197,7 @@ const BasicInfo = ({ channel }: Props) => {
   }
 
   const onSaveBasicInfo = async (data: FormData) => {
+    console.log('🚀 ~ file: BasicInfo.tsx:200 ~ onSaveBasicInfo ~ data', data)
     Analytics.track(TRACK.UPDATE_CHANNEL_INFO)
     setLoading(true)
     try {
@@ -269,16 +270,13 @@ const BasicInfo = ({ channel }: Props) => {
           </div>
         )}
         <img
-          src={
-            sanitizeIpfsUrl(coverImage) ??
-            imageCdn(
-              sanitizeIpfsUrl(channel?.coverPicture?.original?.url),
-              'thumbnail'
-            )
-          }
+          src={imageCdn(
+            sanitizeIpfsUrl(getChannelCoverPicture(channel)),
+            'thumbnail'
+          )}
           className="object-cover object-center w-full h-48 bg-white rounded-xl md:h-56 dark:bg-gray-900"
           draggable={false}
-          alt={`${channel.handle} Cover`}
+          alt={`${channel.handle}'s cover`}
         />
         <label
           htmlFor="chooseCover"
diff --git a/packages/utils/functions/getChannelCoverPicture.ts b/packages/utils/functions/getChannelCoverPicture.ts
new file mode 100644
index 000000000..c4fd546f3
--- /dev/null
+++ b/packages/utils/functions/getChannelCoverPicture.ts
@@ -0,0 +1,11 @@
+import type { Profile } from 'lens'
+
+import { STATIC_ASSETS } from '../constants'
+
+const getChannelCoverPicture = (channel: Profile): string => {
+  return channel.coverPicture && channel.coverPicture.__typename === 'MediaSet'
+    ? channel?.coverPicture?.original?.url
+    : `${STATIC_ASSETS}/images/coverGradient.jpeg`
+}
+
+export default getChannelCoverPicture
diff --git a/packages/utils/functions/getCoverPicture.ts b/packages/utils/functions/getCoverPicture.ts
deleted file mode 100644
index c5bd268bf..000000000
--- a/packages/utils/functions/getCoverPicture.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { Profile } from 'lens'
-
-import { STATIC_ASSETS } from '../constants'
-import sanitizeIpfsUrl from './sanitizeIpfsUrl'
-
-const getCoverPicture = (channel: Profile): string => {
-  const url =
-    channel.coverPicture && channel.coverPicture.__typename === 'MediaSet'
-      ? channel?.coverPicture?.original?.url
-      : `${STATIC_ASSETS}/images/coverGradient.jpeg`
-  return sanitizeIpfsUrl(url)
-}
-
-export default getCoverPicture

From 5f8558cc2684fa53066b76503009eb71138c68e4 Mon Sep 17 00:00:00 2001
From: Sasi <me@sasi.codes>
Date: Wed, 28 Dec 2022 18:30:14 +0530
Subject: [PATCH 2/3] chore: update basic info

---
 apps/web/src/components/Settings/BasicInfo.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/Settings/BasicInfo.tsx b/apps/web/src/components/Settings/BasicInfo.tsx
index 0bc0da880..9b10efede 100644
--- a/apps/web/src/components/Settings/BasicInfo.tsx
+++ b/apps/web/src/components/Settings/BasicInfo.tsx
@@ -270,10 +270,13 @@ const BasicInfo = ({ channel }: Props) => {
           </div>
         )}
         <img
-          src={imageCdn(
-            sanitizeIpfsUrl(getChannelCoverPicture(channel)),
-            'thumbnail'
-          )}
+          src={
+            sanitizeIpfsUrl(coverImage) ??
+            imageCdn(
+              sanitizeIpfsUrl(getChannelCoverPicture(channel)),
+              'thumbnail'
+            )
+          }
           className="object-cover object-center w-full h-48 bg-white rounded-xl md:h-56 dark:bg-gray-900"
           draggable={false}
           alt={`${channel.handle}'s cover`}

From 45931c86e5db90f22a273225a4983a7ef9d82bbb Mon Sep 17 00:00:00 2001
From: Sasi <me@sasi.codes>
Date: Wed, 28 Dec 2022 18:30:59 +0530
Subject: [PATCH 3/3] remove logs

---
 apps/web/src/components/Settings/BasicInfo.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/web/src/components/Settings/BasicInfo.tsx b/apps/web/src/components/Settings/BasicInfo.tsx
index 9b10efede..7dcdde4c0 100644
--- a/apps/web/src/components/Settings/BasicInfo.tsx
+++ b/apps/web/src/components/Settings/BasicInfo.tsx
@@ -197,7 +197,6 @@ const BasicInfo = ({ channel }: Props) => {
   }
 
   const onSaveBasicInfo = async (data: FormData) => {
-    console.log('🚀 ~ file: BasicInfo.tsx:200 ~ onSaveBasicInfo ~ data', data)
     Analytics.track(TRACK.UPDATE_CHANNEL_INFO)
     setLoading(true)
     try {