Improves YouTube sync UI and error handling.

Enhances the YouTube sync page by improving error handling and UI logic. It now correctly displays error messages received after YouTube authentication. It also correctly displays the YouTube transfer status component, and ensures 'new_channel' param is correctly interpreted, fixing a logic error where the transfer status wouldn't show.

Author: tzarebczan

ui/page/youtubeSync/view.jsx

@@ -21,6 +21,7 @@ const YoutubeTransferStatus = lazyImport(() =>
 );
 
 const STATUS_TOKEN_PARAM = 'status_token';
+const ERROR_PARAM = 'error';
 const ERROR_MESSAGE_PARAM = 'error_message';
 const NEW_CHANNEL_PARAM = 'new_channel';
 
@@ -40,14 +41,21 @@ export default function YoutubeSync(props: Props) {
   } = useHistory();
   const urlParams = new URLSearchParams(search);
   const statusToken = urlParams.get(STATUS_TOKEN_PARAM);
+  const hasErrorParam = urlParams.get(ERROR_PARAM) === 'true';
   const errorMessage = urlParams.get(ERROR_MESSAGE_PARAM);
   const newChannelParam = urlParams.get(NEW_CHANNEL_PARAM);
   const [channel, setChannel] = React.useState('');
   const [language, setLanguage] = React.useState(getDefaultLanguage());
   const [nameError, setNameError] = React.useState(undefined);
   const [acknowledgedTerms, setAcknowledgedTerms] = React.useState(false);
-  const [addingNewChannel, setAddingNewChannel] = React.useState(newChannelParam);
+  const [addingNewChannel, setAddingNewChannel] = React.useState(Boolean(newChannelParam));
+  const hasYoutubeAuthError = hasErrorParam || Boolean(errorMessage);
+  const youtubeAuthErrorMessage =
+    hasYoutubeAuthError && !errorMessage
+      ? __('There was a problem connecting this YouTube channel. Please try again.')
+      : errorMessage;
   const hasYoutubeChannels = youtubeChannels && youtubeChannels.length > 0;
+  const showYoutubeTransferStatus = hasYoutubeChannels && !addingNewChannel && !hasYoutubeAuthError;
 
   React.useEffect(() => {
     const urlParamsInEffect = new URLSearchParams(search);
@@ -66,9 +74,7 @@ export default function YoutubeSync(props: Props) {
   }, [statusToken, hasYoutubeChannels, doUserFetch]);
 
   React.useEffect(() => {
-    if (!newChannelParam) {
-      setAddingNewChannel(false);
-    }
+    setAddingNewChannel(Boolean(newChannelParam));
   }, [newChannelParam]);
 
   function handleCreateChannel() {
@@ -95,7 +101,7 @@ export default function YoutubeSync(props: Props) {
   }
 
   function handleNewChannel() {
-    urlParams.append('new_channel', 'true');
+    urlParams.set('new_channel', 'true');
     push(`${pathname}?${urlParams.toString()}`);
     setAddingNewChannel(true);
   }
@@ -113,12 +119,13 @@ export default function YoutubeSync(props: Props) {
   return (
     <Wrapper>
       <div className="main__channel-creation">
-        {hasYoutubeChannels && !addingNewChannel ? (
+        {showYoutubeTransferStatus ? (
           <React.Suspense fallback={null}>
             <YoutubeTransferStatus alwaysShow addNewChannel={handleNewChannel} />
           </React.Suspense>
         ) : (
           <Card
+            className="card--youtube-sync"
             title={__('Sync your YouTube channel to %site_name%', { site_name: IS_WEB ? SITE_NAME : 'Odysee' })}
             subtitle={__(
               `Don't want to manually upload? Get your YouTube videos in front of the %site_name% audience.`,
@@ -197,11 +204,11 @@ export default function YoutubeSync(props: Props) {
                     label={__('Claim Now')}
                   />
 
-                  {inSignUpFlow && !errorMessage && (
+                  {inSignUpFlow && !hasYoutubeAuthError && (
                     <Button button="link" label={__('Skip')} onClick={() => doToggleInterestedInYoutubeSync()} />
                   )}
 
-                  {errorMessage && <Button button="link" label={__('Skip')} navigate={`/$/${PAGES.REWARDS}`} />}
+                  {hasYoutubeAuthError && <Button button="link" label={__('Skip')} navigate={`/$/${PAGES.REWARDS}`} />}
                 </div>
                 <div className="help--card-actions">
                   <I18nMessage
@@ -229,7 +236,7 @@ export default function YoutubeSync(props: Props) {
                 </div>
               </Form>
             }
-            nag={errorMessage && <Nag message={errorMessage} type="error" relative />}
+            nag={youtubeAuthErrorMessage && <Nag message={youtubeAuthErrorMessage} type="error" relative />}
           />
         )}
       </div>

ui/scss/component/_main.scss

@@ -941,6 +941,15 @@ body {
   .checkbox {
     margin-bottom: var(--spacing-m);
   }
+
+  .card--youtube-sync {
+    .nag--error.nag--relative {
+      left: 0;
+      right: 0;
+      bottom: auto;
+      margin-top: var(--spacing-s);
+    }
+  }
 }
 
 // Temp hacks until 'section__actions--no-margin' is generic again.