Merge pull request #3601 from omnivore-app/fix/web-style-for-readnow-button

fix/web style for readnow button

packages/web/components/templates/homeFeed/HomeFeedContainer.tsx

@@ -2,7 +2,7 @@ import { Action, createAction, useKBar, useRegisterActions } from 'kbar'
 import debounce from 'lodash/debounce'
 import { useRouter } from 'next/router'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import toast, { Toaster } from 'react-hot-toast'
+import { Toaster } from 'react-hot-toast'
 import TopBarProgress from 'react-topbar-progress-indicator'
 import { useFetchMore } from '../../../lib/hooks/useFetchMoreScroll'
 import { usePersistedState } from '../../../lib/hooks/usePersistedState'
@@ -42,15 +42,17 @@ import { LibraryHeader, MultiSelectMode } from './LibraryHeader'
 import { UploadModal } from '../UploadModal'
 import { BulkAction } from '../../../lib/networking/mutations/bulkActionMutation'
 import { bulkActionMutation } from '../../../lib/networking/mutations/bulkActionMutation'
-import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
+import {
+  showErrorToast,
+  showSuccessToast,
+  showSuccessToastWithAction,
+} from '../../../lib/toastHelpers'
 import { SetPageLabelsModalPresenter } from '../article/SetLabelsModalPresenter'
 import { NotebookPresenter } from '../article/NotebookPresenter'
 import { saveUrlMutation } from '../../../lib/networking/mutations/saveUrlMutation'
 import { articleQuery } from '../../../lib/networking/queries/useGetArticleQuery'
 import { PinnedButtons } from './PinnedButtons'
 import { PinnedSearch } from '../../../pages/settings/pinned-searches'
-import { ErrorSlothIcon } from '../../elements/icons/ErrorSlothIcon'
-import { DEFAULT_HEADER_HEIGHT } from './HeaderSpacer'
 import { FetchItemsError } from './FetchItemsError'
 import { TLDRLayout } from './TLDRLayout'
 
@@ -797,26 +799,10 @@ export function HomeFeedContainer(): JSX.Element {
   ) => {
     const result = await saveUrlMutation(link, timezone, locale)
     if (result) {
-      toast(
-        () => (
-          <Box>
-            Link Saved
-            <span style={{ padding: '16px' }} />
-            <Button
-              style="ctaDarkYellow"
-              autoFocus
-              onClick={() => {
-                window.location.href = `/article?url=${encodeURIComponent(
-                  link
-                )}`
-              }}
-            >
-              Read Now
-            </Button>
-          </Box>
-        ),
-        { position: 'bottom-right' }
-      )
+      showSuccessToastWithAction('Link saved', 'Read now', async () => {
+        window.location.href = `/article?url=${encodeURIComponent(link)}`
+        return Promise.resolve()
+      })
       const id = result.url?.match(/[^/]+$/)?.[0] ?? ''
       performActionOnItem('refresh', undefined as unknown as any)
     } else {

packages/web/lib/toastHelpers.tsx

@@ -107,6 +107,46 @@ const showToastWithUndo = (
   )
 }
 
+const showToastWithAction = (
+  message: string,
+  background: string,
+  actionName: string,
+  action: () => Promise<void>,
+  options?: ToastOptions
+) => {
+  return toast(
+    ({ id }) => (
+      <FullWidthContainer alignment="center">
+        <CheckCircle size={24} color="white" />
+        <MessageContainer>{message}</MessageContainer>
+        <HStack distribution="end" css={{ marginLeft: 16 }}>
+          <Button
+            style="ctaLightGray"
+            onClick={(event) => {
+              event.preventDefault()
+
+              toast.dismiss(id)
+              ;(async () => {
+                await action()
+              })()
+            }}
+          >
+            {actionName}
+          </Button>
+        </HStack>
+      </FullWidthContainer>
+    ),
+    {
+      style: {
+        ...toastStyles,
+        background: background,
+      },
+      duration: 3500,
+      ...options,
+    }
+  )
+}
+
 export const showSuccessToast = (message: string, options?: ToastOptions) => {
   return showToast(message, '#55B938', 'success', {
     position: 'bottom-right',
@@ -129,3 +169,13 @@ export const showSuccessToastWithUndo = (
     position: 'bottom-right',
   })
 }
+
+export const showSuccessToastWithAction = (
+  message: string,
+  actionName: string,
+  action: () => Promise<void>
+) => {
+  return showToastWithAction(message, '#55B938', actionName, action, {
+    position: 'bottom-right',
+  })
+}