From d3f3506c76f12b9b1d96e0a6758ddf88bf900a0d Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Fri, 17 Mar 2023 11:50:28 +0800
Subject: [PATCH] Encode url

---
 .../templates/homeFeed/AddLinkModal.tsx       | 25 +++----
 .../templates/homeFeed/HomeFeedContainer.tsx  | 70 +++++++++----------
 2 files changed, 46 insertions(+), 49 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/AddLinkModal.tsx b/packages/web/components/templates/homeFeed/AddLinkModal.tsx
index de17c92d7..cce30cd21 100644
--- a/packages/web/components/templates/homeFeed/AddLinkModal.tsx
+++ b/packages/web/components/templates/homeFeed/AddLinkModal.tsx
@@ -1,17 +1,14 @@
-import {
-  ModalRoot,
-  ModalContent,
-  ModalOverlay,
-  ModalTitleBar,
-  ModalButtonBar,
-} from '../../elements/ModalPrimitives'
-import { VStack, Box } from '../../elements/LayoutPrimitives'
+import { useCallback, useState } from 'react'
+import toast from 'react-hot-toast'
+import { saveUrlMutation } from '../../../lib/networking/mutations/saveUrlMutation'
+import { showErrorToast } from '../../../lib/toastHelpers'
 import { Button } from '../../elements/Button'
 import { FormInput } from '../../elements/FormElements'
-import { useState, useCallback } from 'react'
-import { saveUrlMutation } from '../../../lib/networking/mutations/saveUrlMutation'
-import toast from 'react-hot-toast'
-import { showErrorToast } from '../../../lib/toastHelpers'
+import { Box, VStack } from '../../elements/LayoutPrimitives'
+import {
+  ModalButtonBar, ModalContent,
+  ModalOverlay, ModalRoot, ModalTitleBar
+} from '../../elements/ModalPrimitives'
 
 type AddLinkModalProps = {
   onOpenChange: (open: boolean) => void
@@ -24,7 +21,7 @@ export function AddLinkModal(props: AddLinkModalProps): JSX.Element {
     async (link: string) => {
       const result = await saveUrlMutation(link)
       // const result = await saveUrlMutation(link)
-      if (result && result.jobId) {
+      if (result) {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         toast(
           () => (
@@ -35,7 +32,7 @@ export function AddLinkModal(props: AddLinkModalProps): JSX.Element {
                 style="ctaDarkYellow"
                 autoFocus
                 onClick={() => {
-                  window.location.href = `/article/sr/${result.jobId}`
+                  window.location.href = `/article/sr/${encodeURIComponent(link)}` // encode url
                 }}
               >
                 Read Now
diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index 5d5841fa1..a5e1c827c 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -1,51 +1,51 @@
-import { Box, HStack, VStack } from './../../elements/LayoutPrimitives'
-import Dropzone from 'react-dropzone'
 import * as Progress from '@radix-ui/react-progress'
+import axios from 'axios'
+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 Dropzone from 'react-dropzone'
+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'
+import { libraryListCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts'
+import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
+import {
+  PageType,
+  State
+} from '../../../lib/networking/fragments/articleFragment'
+import { Label } from '../../../lib/networking/fragments/labelFragment'
+import { setLabelsMutation } from '../../../lib/networking/mutations/setLabelsMutation'
+import { uploadFileRequestMutation } from '../../../lib/networking/mutations/uploadFileMutation'
+import {
+  SearchItem,
+  TypeaheadSearchItemsData,
+  typeaheadSearchQuery
+} from '../../../lib/networking/queries/typeaheadSearch'
 import type {
   LibraryItem,
-  LibraryItemsQueryInput,
+  LibraryItemsQueryInput
 } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
 import { useGetLibraryItemsQuery } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
 import {
   useGetViewerQuery,
-  UserBasicData,
+  UserBasicData
 } from '../../../lib/networking/queries/useGetViewerQuery'
+import { Button } from '../../elements/Button'
+import { StyledText } from '../../elements/StyledText'
+import { ConfirmationModal } from '../../patterns/ConfirmationModal'
 import { LinkedItemCardAction } from '../../patterns/LibraryCards/CardTypes'
 import { LinkedItemCard } from '../../patterns/LibraryCards/LinkedItemCard'
-import { useRouter } from 'next/router'
-import { Button } from '../../elements/Button'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { StyledText } from '../../elements/StyledText'
-import { AddLinkModal } from './AddLinkModal'
 import { styled, theme } from '../../tokens/stitches.config'
-import { libraryListCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts'
-import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
-import { Toaster } from 'react-hot-toast'
-import { useFetchMore } from '../../../lib/hooks/useFetchMoreScroll'
-import { usePersistedState } from '../../../lib/hooks/usePersistedState'
-import { ConfirmationModal } from '../../patterns/ConfirmationModal'
 import { SetLabelsModal } from '../article/SetLabelsModal'
-import { Label } from '../../../lib/networking/fragments/labelFragment'
-import { EmptyLibrary } from './EmptyLibrary'
-import TopBarProgress from 'react-topbar-progress-indicator'
-import {
-  PageType,
-  State,
-} from '../../../lib/networking/fragments/articleFragment'
-import { Action, createAction, useKBar, useRegisterActions } from 'kbar'
+import { Box, HStack, VStack } from './../../elements/LayoutPrimitives'
+import { AddLinkModal } from './AddLinkModal'
 import { EditLibraryItemModal } from './EditItemModals'
-import debounce from 'lodash/debounce'
-import {
-  SearchItem,
-  TypeaheadSearchItemsData,
-  typeaheadSearchQuery,
-} from '../../../lib/networking/queries/typeaheadSearch'
-import axios from 'axios'
-import { uploadFileRequestMutation } from '../../../lib/networking/mutations/uploadFileMutation'
-import { setLabelsMutation } from '../../../lib/networking/mutations/setLabelsMutation'
-import { LibraryHeader } from './LibraryHeader'
-import { LibraryFilterMenu } from './LibraryFilterMenu'
+import { EmptyLibrary } from './EmptyLibrary'
 import { HighlightItemsLayout } from './HighlightsLayout'
+import { LibraryFilterMenu } from './LibraryFilterMenu'
+import { LibraryHeader } from './LibraryHeader'
 
 export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
 export type LibraryMode = 'reads' | 'highlights'
@@ -288,7 +288,7 @@ export function HomeFeedContainer(): JSX.Element {
         if (username) {
           setActiveCardId(item.node.id)
           if (item.node.state === State.PROCESSING) {
-            router.push(`/${username}/links/${item.node.url}`)
+            router.push(`/${username}/links/${encodeURIComponent(item.node.url)}`)
           } else {
             const dl =
               item.node.pageType === PageType.HIGHLIGHTS