From b97b8a5b1457b928c33ee6ec017bf7e5aa1c6319 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 15 Feb 2024 13:05:42 +0800
Subject: [PATCH] Display feed errors in the add modal, close after success,
 improve layout while uploading PDFs

---
 .../templates/homeFeed/AddLinkModal.tsx       | 70 +++++++++++++------
 1 file changed, 48 insertions(+), 22 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/AddLinkModal.tsx b/packages/web/components/templates/homeFeed/AddLinkModal.tsx
index 1317c0a88..062916ed7 100644
--- a/packages/web/components/templates/homeFeed/AddLinkModal.tsx
+++ b/packages/web/components/templates/homeFeed/AddLinkModal.tsx
@@ -87,9 +87,8 @@ export function AddLinkModal(props: AddLinkModalProps): JSX.Element {
 }
 
 const AddLinkTab = (props: AddLinkModalProps): JSX.Element => {
-  const [errorMessage, setErrorMessage] = useState<string | undefined>(
-    undefined
-  )
+  const [errorMessage, setErrorMessage] =
+    useState<string | undefined>(undefined)
 
   const addLink = useCallback(
     async (link: string) => {
@@ -110,9 +109,8 @@ const AddLinkTab = (props: AddLinkModalProps): JSX.Element => {
 }
 
 const AddFeedTab = (props: AddLinkModalProps): JSX.Element => {
-  const [errorMessage, setErrorMessage] = useState<string | undefined>(
-    undefined
-  )
+  const [errorMessage, setErrorMessage] =
+    useState<string | undefined>(undefined)
 
   const subscribe = useCallback(
     async (feedUrl: string) => {
@@ -144,6 +142,7 @@ const AddFeedTab = (props: AddLinkModalProps): JSX.Element => {
       }
 
       showSuccessToast('New feed has been added.')
+      props.onOpenChange(false)
     },
     [errorMessage, setErrorMessage]
   )
@@ -167,7 +166,6 @@ type AddFromURLProps = {
 
 const AddFromURL = (props: AddFromURLProps): JSX.Element => {
   const [url, setURL] = useState('')
-  const [errorMessage, setErrorMessage] = useState(props.errorMessage)
 
   const validateURL = useCallback(
     (link: string) => {
@@ -198,7 +196,7 @@ const AddFromURL = (props: AddFromURLProps): JSX.Element => {
           event.preventDefault()
 
           if (!validateURL(url)) {
-            setErrorMessage('Invalid URL')
+            props.setErrorMessage('Invalid URL')
             return
           }
 
@@ -222,6 +220,32 @@ const AddFromURL = (props: AddFromURLProps): JSX.Element => {
             bg: '$thFormInput',
           }}
         />
+        {props.errorMessage && (
+          <HStack
+            distribution="start"
+            alignment="start"
+            css={{
+              width: '100%',
+              bg: '#FF000010',
+              p: '5px',
+              pl: '10px',
+              fontSize: '12px',
+              fontFamily: '$inter',
+              textAlign: 'center',
+              color: '$ctaBlue',
+              borderRadius: '5px',
+            }}
+          >
+            <HStack
+              distribution="start"
+              alignment="center"
+              css={{ gap: '5px', whiteSpace: 'pre-line', color: 'red' }}
+            >
+              <Info size={14} color="red" />
+              {props.errorMessage}
+            </HStack>
+          </HStack>
+        )}
         <Button
           style="ctaBlue"
           type="submit"
@@ -640,20 +664,22 @@ const UploadPad = (props: UploadPadProps): JSX.Element => {
                       </>
                     ) : (
                       <>
-                        <Box
-                          css={{
-                            fontSize: '12px',
-                            fontFamily: '$inter',
-                            textAlign: 'center',
-                            color: '$tabTextUnselected',
-                          }}
-                        >
-                          {props.description}
-                          <br /> or{' '}
-                          <a href="" onClick={openDialog}>
-                            choose your files
-                          </a>
-                        </Box>
+                        {(!uploadFiles || uploadFiles.length == 0) && (
+                          <Box
+                            css={{
+                              fontSize: '12px',
+                              fontFamily: '$inter',
+                              textAlign: 'center',
+                              color: '$tabTextUnselected',
+                            }}
+                          >
+                            {props.description}
+                            <br /> or{' '}
+                            <a href="" onClick={openDialog}>
+                              choose your files
+                            </a>
+                          </Box>
+                        )}
                       </>
                     )}
                   </VStack>