diff --git a/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx b/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx index 7fa8dcf8a..20a31c0be 100644 --- a/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx +++ b/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx @@ -1,24 +1,25 @@ +import { useRegisterActions } from 'kbar' +import Link from 'next/link' +import { Circle, X } from 'phosphor-react' import { ReactNode, useEffect, useMemo, useRef } from 'react' -import { StyledText } from '../../elements/StyledText' -import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives' -import { Button } from '../../elements/Button' -import { Circle, NewspaperClipping, X } from 'phosphor-react' +import { usePersistedState } from '../../../lib/hooks/usePersistedState' +import { Label } from '../../../lib/networking/fragments/labelFragment' +import { SavedSearch } from '../../../lib/networking/fragments/savedSearchFragment' +import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery' +import { useGetSavedSearchQuery } from '../../../lib/networking/queries/useGetSavedSearchQuery' import { Subscription, SubscriptionType, useGetSubscriptionsQuery, } from '../../../lib/networking/queries/useGetSubscriptionsQuery' -import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery' -import { Label } from '../../../lib/networking/fragments/labelFragment' -import { theme } from '../../tokens/stitches.config' -import { useRegisterActions } from 'kbar' -import { LogoBox } from '../../elements/LogoBox' -import { usePersistedState } from '../../../lib/hooks/usePersistedState' -import { useGetSavedSearchQuery } from '../../../lib/networking/queries/useGetSavedSearchQuery' -import { SavedSearch } from '../../../lib/networking/fragments/savedSearchFragment' +import { escapeQuotes } from '../../../utils/helper' +import { Button } from '../../elements/Button' import { ToggleCaretDownIcon } from '../../elements/icons/ToggleCaretDownIcon' -import Link from 'next/link' import { ToggleCaretRightIcon } from '../../elements/icons/ToggleCaretRightIcon' +import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives' +import { LogoBox } from '../../elements/LogoBox' +import { StyledText } from '../../elements/StyledText' +import { theme } from '../../tokens/stitches.config' import { NavMenuFooter } from './Footer' export const LIBRARY_LEFT_MENU_WIDTH = '275px' @@ -255,7 +256,7 @@ function Subscriptions( name: name, keywords: '*' + name, perform: () => { - props.applySearchQuery(`subscription:\"${name}\"`) + props.applySearchQuery(`subscription:\"${escapeQuotes(name)}\"`) }, } }), @@ -291,7 +292,9 @@ function Subscriptions( return ( diff --git a/packages/web/components/templates/navMenu/LibraryMenu.tsx b/packages/web/components/templates/navMenu/LibraryMenu.tsx index 7a48e621b..0da615ab0 100644 --- a/packages/web/components/templates/navMenu/LibraryMenu.tsx +++ b/packages/web/components/templates/navMenu/LibraryMenu.tsx @@ -1,36 +1,37 @@ -import { ReactNode, useEffect, useMemo, useRef, useState } from "react" -import { StyledText } from '../../elements/StyledText' -import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives' -import { Button } from '../../elements/Button' +import { useRegisterActions } from 'kbar' +import Link from 'next/link' +import { useRouter } from 'next/router' import { Circle, DotsThree, MagnifyingGlass, X } from 'phosphor-react' +import { ReactNode, useEffect, useMemo, useRef, useState } from 'react' +import { usePersistedState } from '../../../lib/hooks/usePersistedState' +import { Label } from '../../../lib/networking/fragments/labelFragment' +import { SavedSearch } from '../../../lib/networking/fragments/savedSearchFragment' +import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery' +import { useGetSavedSearchQuery } from '../../../lib/networking/queries/useGetSavedSearchQuery' import { Subscription, SubscriptionType, useGetSubscriptionsQuery, } from '../../../lib/networking/queries/useGetSubscriptionsQuery' -import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery' -import { Label } from '../../../lib/networking/fragments/labelFragment' -import { theme } from '../../tokens/stitches.config' -import { useRegisterActions } from 'kbar' -import { LogoBox } from '../../elements/LogoBox' -import { usePersistedState } from '../../../lib/hooks/usePersistedState' -import { useGetSavedSearchQuery } from '../../../lib/networking/queries/useGetSavedSearchQuery' -import { SavedSearch } from '../../../lib/networking/fragments/savedSearchFragment' -import { ToggleCaretDownIcon } from '../../elements/icons/ToggleCaretDownIcon' -import Link from 'next/link' -import { ToggleCaretRightIcon } from '../../elements/icons/ToggleCaretRightIcon' -import { NavMenuFooter } from './Footer' +import { Shortcut } from '../../../pages/settings/shortcuts' +import { escapeQuotes } from '../../../utils/helper' +import { Button } from '../../elements/Button' +import { CoverImage } from '../../elements/CoverImage' +import { Dropdown, DropdownOption } from '../../elements/DropdownElements' +import { DiscoverIcon } from '../../elements/icons/DiscoverIcon' import { FollowingIcon } from '../../elements/icons/FollowingIcon' +import { HighlightsIcon } from '../../elements/icons/HighlightsIcon' import { HomeIcon } from '../../elements/icons/HomeIcon' import { LibraryIcon } from '../../elements/icons/LibraryIcon' -import { HighlightsIcon } from '../../elements/icons/HighlightsIcon' -import { CoverImage } from '../../elements/CoverImage' -import { Shortcut } from '../../../pages/settings/shortcuts' -import { OutlinedLabelChip } from '../../elements/OutlinedLabelChip' import { NewsletterIcon } from '../../elements/icons/NewsletterIcon' -import { Dropdown, DropdownOption } from '../../elements/DropdownElements' -import { useRouter } from 'next/router' -import { DiscoverIcon } from "../../elements/icons/DiscoverIcon" +import { ToggleCaretDownIcon } from '../../elements/icons/ToggleCaretDownIcon' +import { ToggleCaretRightIcon } from '../../elements/icons/ToggleCaretRightIcon' +import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives' +import { LogoBox } from '../../elements/LogoBox' +import { OutlinedLabelChip } from '../../elements/OutlinedLabelChip' +import { StyledText } from '../../elements/StyledText' +import { theme } from '../../tokens/stitches.config' +import { NavMenuFooter } from './Footer' export const LIBRARY_LEFT_MENU_WIDTH = '275px' @@ -221,7 +222,7 @@ const LibraryNav = (props: LibraryFilterMenuProps): JSX.Element => { } /> @@ -545,7 +546,7 @@ function Subscriptions( name: name, keywords: '*' + name, perform: () => { - props.applySearchQuery(`subscription:\"${name}\"`) + props.applySearchQuery(`subscription:\"${escapeQuotes(name)}\"`) }, } }), @@ -581,7 +582,9 @@ function Subscriptions( return ( @@ -735,7 +738,7 @@ type NavButtonRedirectProps = { } function NavRedirectButton(props: NavButtonRedirectProps): JSX.Element { - const [selected, setSelected] = useState(false); + const [selected, setSelected] = useState(false) const router = useRouter() useEffect(() => { diff --git a/packages/web/pages/settings/shortcuts.tsx b/packages/web/pages/settings/shortcuts.tsx index 1ee7d39f0..7d1879156 100644 --- a/packages/web/pages/settings/shortcuts.tsx +++ b/packages/web/pages/settings/shortcuts.tsx @@ -1,40 +1,32 @@ -import { - ReactNode, - useCallback, - useEffect, - useMemo, - useReducer, - useState, -} from 'react' -import { applyStoredTheme } from '../../lib/themeUpdater' - -import { useGetLabelsQuery } from '../../lib/networking/queries/useGetLabelsQuery' -import { useGetSavedSearchQuery } from '../../lib/networking/queries/useGetSavedSearchQuery' -import { SettingsLayout } from '../../components/templates/SettingsLayout' +import { styled } from '@stitches/react' +import { CheckSquare, Square } from 'phosphor-react' +import { ReactNode, useCallback, useEffect, useMemo, useReducer } from 'react' import { Toaster } from 'react-hot-toast' +import { Button } from '../../components/elements/Button' +import { CoverImage } from '../../components/elements/CoverImage' +import { DragIcon } from '../../components/elements/icons/DragIcon' +import { LabelChip } from '../../components/elements/LabelChip' import { Box, - VStack, HStack, - SpanBox, Separator, + SpanBox, + VStack, } from '../../components/elements/LayoutPrimitives' -import { LabelChip } from '../../components/elements/LabelChip' import { StyledText } from '../../components/elements/StyledText' +import { SettingsLayout } from '../../components/templates/SettingsLayout' +import { usePersistedState } from '../../lib/hooks/usePersistedState' +import { Label } from '../../lib/networking/fragments/labelFragment' +import { SavedSearch } from '../../lib/networking/fragments/savedSearchFragment' +import { useGetLabelsQuery } from '../../lib/networking/queries/useGetLabelsQuery' +import { useGetSavedSearchQuery } from '../../lib/networking/queries/useGetSavedSearchQuery' import { Subscription, SubscriptionType, useGetSubscriptionsQuery, } from '../../lib/networking/queries/useGetSubscriptionsQuery' -import { DragIcon } from '../../components/elements/icons/DragIcon' -import { CoverImage } from '../../components/elements/CoverImage' -import { Label } from '../../lib/networking/fragments/labelFragment' -import { usePersistedState } from '../../lib/hooks/usePersistedState' -import { CheckSquare, Square } from 'phosphor-react' -import { Button } from '../../components/elements/Button' -import { styled } from '@stitches/react' -import { SavedSearch } from '../../lib/networking/fragments/savedSearchFragment' - +import { applyStoredTheme } from '../../lib/themeUpdater' +import { escapeQuotes } from '../../utils/helper' type ListAction = 'RESET' | 'ADD_ITEM' | 'REMOVE_ITEM' const SHORTCUTS_KEY = 'library-shortcuts' @@ -416,7 +408,7 @@ const AvailableItems = (props: ListProps): JSX.Element => { : 'feed', filter: subscription.type == SubscriptionType.NEWSLETTER - ? `subscription:\"${subscription.name}\"` + ? `subscription:\"${escapeQuotes(subscription.name)}\"` : `rss:\"${subscription.url}\"`, } props.dispatchList({ diff --git a/packages/web/utils/helper.ts b/packages/web/utils/helper.ts new file mode 100644 index 000000000..831148eed --- /dev/null +++ b/packages/web/utils/helper.ts @@ -0,0 +1 @@ +export const escapeQuotes = (str: string) => str.replace(/"/g, '\\"')