Add error message to upload flow (#8334)

packages/web/src/pages/upload-page/components/AnchoredSubmitRow.tsx

@@ -1,30 +1,53 @@
-import { useContext } from 'react'
+import { useContext, useEffect, useState } from 'react'
 
-import { Button, IconCloudUpload } from '@audius/harmony'
+import { Button, Flex, IconCloudUpload, IconError, Text } from '@audius/harmony'
+import { useFormikContext } from 'formik'
 
 import { UploadFormScrollContext } from '../UploadPage'
 
 import styles from './AnchoredSubmitRow.module.css'
 
 const messages = {
-  complete: 'Complete Upload'
+  complete: 'Complete Upload',
+  fixErrors: 'Fix errors to continue your upload.'
 }
 
 export const AnchoredSubmitRow = () => {
   const scrollToTop = useContext(UploadFormScrollContext)
+  const { isValid } = useFormikContext()
+  const [showError, setShowError] = useState(false)
+
+  // Whenever the error stops showing, reset our error state until they break the form again AND try to submit again
+  useEffect(() => {
+    if (isValid) {
+      setShowError(false)
+    }
+  }, [isValid])
+
   return (
     <>
-      <div className={styles.buttonRow}>
+      <Flex className={styles.buttonRow} gap='m'>
         <Button
           variant='primary'
           size='default'
           iconRight={IconCloudUpload}
-          onClick={scrollToTop}
+          onClick={() => {
+            scrollToTop()
+            setShowError(true)
+          }}
           type='submit'
         >
           {messages.complete}
         </Button>
-      </div>
+        {showError && !isValid ? (
+          <Flex alignItems='center' gap='xs'>
+            <IconError color='danger' size='s' />
+            <Text color='danger' size='s' variant='body'>
+              {messages.fixErrors}
+            </Text>
+          </Flex>
+        ) : null}
+      </Flex>
       <div className={styles.placeholder} />
     </>
   )