Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #3536 from omnivore-app/fix/web-add-link-fixes

Browse Source 
Display feed errors in the add modal, close after success, improve layout while uploading PDFs
This commit is contained in:
Jackson Harper
2024-02-15 16:59:32 +08:00
committed by GitHub
parent 1151e9d366 b97b8a5b14
commit ded8108a15
1 changed files with 48 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
packages/web/components/templates/homeFeed/AddLinkModal.tsx
View File

@ -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>