chore(ux): enhance error messages guidance

src/store/selectors/app.ts

@@ -1,3 +1,11 @@
 import type { RootState } from 'store';
+import { createSelector } from '@reduxjs/toolkit';
+import { selectSettings } from './settings';
 
 export const selectApp = (state: RootState) => state.app;
+
+export const selectIsSetupRequired = createSelector(
+  selectApp,
+  selectSettings,
+  (app, settings) => app.loaded && !settings.apiKey,
+);

src/store/selectors/channels.ts

@@ -1,5 +1,5 @@
-import { createSelector } from '@reduxjs/toolkit';
 import type { RootState } from 'store';
+import { createSelector } from '@reduxjs/toolkit';
 import { Channel } from 'types';
 
 export const selectChannels = (state: RootState) => state.channels.list;

src/ui/components/pages/Channels/ChannelResults/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Stack, Divider } from '@mui/material';
-import { Alert, ProgressBar } from 'ui/components/shared';
+import { ErrorAlert, ProgressBar } from 'ui/components/shared';
 import { useFindChannelByNameQuery } from 'store/services/youtube';
 import PickChannelCard from './PickChannelCard';
 
@@ -17,7 +17,7 @@ export default function ChannelResults(props: ChannelResultsProps) {
   const results = data?.items || [];
 
   return error ? (
-    <Alert error={error} closable />
+    <ErrorAlert error={error} closable />
   ) : isLoading ? (
     <ProgressBar variant="indeterminate" />
   ) : (

src/ui/components/pages/Home/TabPanel.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Alert } from 'ui/components/shared';
+import { ErrorAlert } from 'ui/components/shared';
 import { Channel, HomeView, Video, Nullable } from 'types';
 import { useAppSelector } from 'store';
 import { selectActiveChannels } from 'store/selectors/channels';
@@ -45,7 +45,7 @@ function TabPanel(props: TabPanelProps) {
     : channels;
 
   return error ? (
-    <Alert error={error} closable />
+    <ErrorAlert error={error} closable />
   ) : (
     <>
       {channels.length > 0 ? (

src/ui/components/shared/Alert/index.tsx

@@ -3,7 +3,7 @@ import MuiAlert, { AlertColor } from '@mui/material/Alert';
 import { IconButton, Collapse } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 
-interface AlertProps {
+export interface AlertProps {
   open?: boolean;
   children?: React.ReactNode;
   error?: any;

src/ui/components/shared/ErrorAlert/index.tsx

@@ -0,0 +1,46 @@
+import React, { MouseEvent } from 'react';
+import { Alert, AlertProps } from '../Alert';
+import { useHistory } from 'react-router-dom';
+import { Link } from '@mui/material';
+
+enum Error {
+  MISSING_API_KEY = 'The request is missing a valid API key.',
+  INVALID_API_KEY = 'API key not valid. Please pass a valid API key.',
+}
+
+interface ErrorAlertProps extends AlertProps {}
+
+export function ErrorAlert(props: ErrorAlertProps) {
+  const { error, ...rest } = props;
+  const history = useHistory();
+
+  const handleGoToSettings = (event: MouseEvent) => {
+    event.preventDefault();
+    history.push('/settings');
+  };
+
+  const renderError = () => {
+    const errorMessage = error?.data?.error.message || error?.error;
+    switch (errorMessage) {
+      case Error.MISSING_API_KEY:
+      case Error.INVALID_API_KEY:
+        return (
+          <>
+            {errorMessage}{' '}
+            <Link
+              href="#"
+              color="secondary"
+              rel="noopener"
+              onClick={handleGoToSettings}
+            >
+              Go to settings.
+            </Link>
+          </>
+        );
+      default:
+        return errorMessage;
+    }
+  };
+
+  return <Alert {...rest}>{renderError()}</Alert>;
+}

src/ui/components/shared/Sidebar/WarningIcon.tsx

@@ -1,5 +1,5 @@
 import { styled, keyframes } from '@mui/material/styles';
-import WarningIcon from '@mui/icons-material/Warning';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
 
 const blink = keyframes`
   0%, 50%, 100% {
@@ -10,7 +10,7 @@ const blink = keyframes`
   }
 `;
 
-const Icon = styled(WarningIcon)`
+const Icon = styled(WarningAmberIcon)`
   animation: ${blink} 2s infinite both;
 `;
 

src/ui/components/shared/index.ts

@@ -10,3 +10,4 @@ export * from './StyledMenu';
 export * from './ConfirmationDialog';
 export * from './CheckableMenuItem';
 export * from './NestedMenuItem';
+export * from './ErrorAlert';