diff --git a/packages/shared/src/components/BookmarkEmptyScreen.tsx b/packages/shared/src/components/BookmarkEmptyScreen.tsx
new file mode 100644
index 0000000000..0217942f1e
--- /dev/null
+++ b/packages/shared/src/components/BookmarkEmptyScreen.tsx
@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react';
+import Link from 'next/link';
+import BookmarkIcon from '../../icons/bookmark.svg';
+import { headerHeight } from '../styles/sizes';
+import sizeN from '../../macros/sizeN.macro';
+import { Button } from './buttons/Button';
+
+export default function BookmarkEmptyScreen(): ReactElement {
+ return (
+
+
+
+ Your bookmark list is empty.
+
+
+ Go back to your feed and bookmark posts you’d like to keep or read
+ later. Each post you bookmark will be stored here.
+
+
+
+
+
+ );
+}
diff --git a/packages/shared/src/components/BookmarkFeedLayout.tsx b/packages/shared/src/components/BookmarkFeedLayout.tsx
new file mode 100644
index 0000000000..129f68069a
--- /dev/null
+++ b/packages/shared/src/components/BookmarkFeedLayout.tsx
@@ -0,0 +1,79 @@
+import React, {
+ ReactElement,
+ ReactNode,
+ useContext,
+ useMemo,
+ useState,
+} from 'react';
+import Link from 'next/link';
+import MagnifyingIcon from '../../icons/magnifying.svg';
+import { BOOKMARKS_FEED_QUERY, SEARCH_BOOKMARKS_QUERY } from '../graphql/feed';
+import AuthContext from '../contexts/AuthContext';
+import { CustomFeedHeader, FeedPage } from './utilities';
+import SearchEmptyScreen from './SearchEmptyScreen';
+import Feed, { FeedProps } from './Feed';
+import BookmarkEmptyScreen from './BookmarkEmptyScreen';
+import { Button } from './buttons/Button';
+
+export type BookmarkFeedLayoutProps = {
+ isSearchOn: boolean;
+ searchQuery?: string;
+ children?: ReactNode;
+ searchChildren: ReactNode;
+ onSearchButtonClick?: () => unknown;
+};
+
+export default function BookmarkFeedLayout({
+ searchQuery,
+ isSearchOn,
+ searchChildren,
+ children,
+}: BookmarkFeedLayoutProps): ReactElement {
+ const { user, tokenRefreshed } = useContext(AuthContext);
+ const [showEmptyScreen, setShowEmptyScreen] = useState(false);
+
+ const feedProps = useMemo>(() => {
+ if (isSearchOn && searchQuery) {
+ return {
+ feedQueryKey: ['bookmarks', user?.id ?? 'anonymous', searchQuery],
+ query: SEARCH_BOOKMARKS_QUERY,
+ variables: { query: searchQuery },
+ emptyScreen: ,
+ className: 'my-3',
+ };
+ }
+ return {
+ feedQueryKey: ['bookmarks', user?.id ?? 'anonymous'],
+ query: BOOKMARKS_FEED_QUERY,
+ className: 'my-3',
+ onEmptyFeed: () => setShowEmptyScreen(true),
+ };
+ }, [isSearchOn && searchQuery, user]);
+
+ if (showEmptyScreen) {
+ return ;
+ }
+
+ return (
+
+ {children}
+
+ {!isSearchOn && (
+ <>
+
+ }
+ />
+
+
+ Bookmarks
+
+ )}
+ {isSearchOn ? searchChildren : undefined}
+
+ {tokenRefreshed && }
+
+ );
+}
diff --git a/packages/shared/src/components/PostsSearch.tsx b/packages/shared/src/components/PostsSearch.tsx
index 584938f25b..91d6c14180 100644
--- a/packages/shared/src/components/PostsSearch.tsx
+++ b/packages/shared/src/components/PostsSearch.tsx
@@ -6,6 +6,7 @@ import { SearchField } from './fields/SearchField';
import { useAutoComplete } from '../hooks/useAutoComplete';
import { apiUrl } from '../lib/config';
import { SEARCH_POST_SUGGESTIONS } from '../graphql/search';
+import { SEARCH_BOOKMARKS_SUGGESTIONS } from '../graphql/feed';
const AutoCompleteMenu = dynamic(() => import('./fields/AutoCompleteMenu'), {
ssr: false,
@@ -15,12 +16,14 @@ export type PostsSearchProps = {
initialQuery?: string;
onSubmitQuery: (query: string) => Promise;
closeSearch: () => unknown;
+ suggestionType?: string;
};
export default function PostsSearch({
initialQuery: initialQueryProp,
onSubmitQuery,
closeSearch,
+ suggestionType = 'searchPostSuggestions',
}: PostsSearchProps): ReactElement {
const searchBoxRef = useRef();
const [initialQuery, setInitialQuery] = useState();
@@ -33,11 +36,16 @@ export default function PostsSearch({
}>(null);
const [items, setItems] = useState([]);
+ const SEARCH_URL =
+ suggestionType === 'searchPostSuggestions'
+ ? SEARCH_POST_SUGGESTIONS
+ : SEARCH_BOOKMARKS_SUGGESTIONS;
+
const { data: searchResults, isLoading } = useQuery<{
- searchPostSuggestions: { hits: { title: string }[] };
+ [suggestionType: string]: { hits: { title: string }[] };
}>(
- ['searchPostSuggestions', query],
- () => request(`${apiUrl}/graphql`, SEARCH_POST_SUGGESTIONS, { query }),
+ [suggestionType, query],
+ () => request(`${apiUrl}/graphql`, SEARCH_URL, { query }),
{
enabled: !!query,
},
@@ -62,12 +70,11 @@ export default function PostsSearch({
useEffect(() => {
if (!isLoading) {
- if (!items?.length && searchResults?.searchPostSuggestions?.hits.length) {
+ if (!items?.length && searchResults?.[suggestionType]?.hits.length) {
showSuggestions();
}
setItems(
- searchResults?.searchPostSuggestions?.hits.map((hit) => hit.title) ??
- [],
+ searchResults?.[suggestionType]?.hits.map((hit) => hit.title) ?? [],
);
}
}, [searchResults, isLoading]);
diff --git a/packages/shared/src/graphql/feed.ts b/packages/shared/src/graphql/feed.ts
index 9f55c8eb1c..86567a4c9f 100644
--- a/packages/shared/src/graphql/feed.ts
+++ b/packages/shared/src/graphql/feed.ts
@@ -169,6 +169,30 @@ export const BOOKMARKS_FEED_QUERY = gql`
${FEED_POST_CONNECTION_FRAGMENT}
`;
+export const SEARCH_BOOKMARKS_QUERY = gql`
+ query SearchBookmarks(
+ $loggedIn: Boolean! = false
+ $first: Int
+ $after: String
+ $query: String!
+ ) {
+ page: searchBookmarks(first: $first, after: $after, query: $query) {
+ ...FeedPostConnection
+ }
+ }
+ ${FEED_POST_CONNECTION_FRAGMENT}
+`;
+
+export const SEARCH_BOOKMARKS_SUGGESTIONS = gql`
+ query SearchBookmarksSuggestions($query: String!) {
+ searchBookmarksSuggestions(query: $query) {
+ hits {
+ title
+ }
+ }
+ }
+`;
+
export const SEARCH_POSTS_QUERY = gql`
query SearchPosts(
$loggedIn: Boolean! = false
diff --git a/packages/webapp/__tests__/BookmarksPage.tsx b/packages/webapp/__tests__/BookmarksPage.tsx
index 83cd7ed28f..a3f751e1ba 100644
--- a/packages/webapp/__tests__/BookmarksPage.tsx
+++ b/packages/webapp/__tests__/BookmarksPage.tsx
@@ -102,7 +102,11 @@ const renderComponent = (
}}
>
-
+ {BookmarksPage.getLayout(
+ ,
+ {},
+ BookmarksPage.layoutProps,
+ )}
@@ -143,3 +147,12 @@ it('should show empty screen when feed is empty', async () => {
expect(elements.length).toBeFalsy();
});
});
+
+it('should set href to the search permalink', async () => {
+ renderComponent();
+ await waitForNock();
+ await waitFor(async () => {
+ const searchBtn = await screen.findByLabelText('Search bookmarks');
+ expect(searchBtn).toHaveAttribute('href', '/bookmarks/search');
+ });
+});
diff --git a/packages/webapp/__tests__/BookmarksSearchPage.tsx b/packages/webapp/__tests__/BookmarksSearchPage.tsx
new file mode 100644
index 0000000000..eaafa99a19
--- /dev/null
+++ b/packages/webapp/__tests__/BookmarksSearchPage.tsx
@@ -0,0 +1,177 @@
+import { FeedData } from '@dailydotdev/shared/src/graphql/posts';
+import { BOOKMARKS_FEED_QUERY } from '@dailydotdev/shared/src/graphql/feed';
+import nock from 'nock';
+import AuthContext from '@dailydotdev/shared/src/contexts/AuthContext';
+import React from 'react';
+import { render, RenderResult, screen, waitFor } from '@testing-library/preact';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { LoggedUser } from '@dailydotdev/shared/src/lib/user';
+import { NextRouter, useRouter } from 'next/router';
+import { mocked } from 'ts-jest/utils';
+import SettingsContext, {
+ SettingsContextData,
+} from '@dailydotdev/shared/src/contexts/SettingsContext';
+import OnboardingContext from '@dailydotdev/shared/src/contexts/OnboardingContext';
+import BookmarksPage from '../pages/bookmarks';
+import ad from './fixture/ad';
+import defaultUser from './fixture/loggedUser';
+import defaultFeedPage from './fixture/feed';
+import { MockedGraphQLResponse, mockGraphQL } from './helpers/graphql';
+import { waitForNock } from './helpers/utilities';
+
+const showLogin = jest.fn();
+const routerReplace = jest.fn();
+
+jest.mock('next/router', () => ({
+ useRouter: jest.fn(),
+}));
+
+beforeEach(() => {
+ jest.clearAllMocks();
+ nock.cleanAll();
+ mocked(useRouter).mockImplementation(
+ () =>
+ ({
+ pathname: '/bookmarks/search',
+ query: {},
+ replace: routerReplace,
+ } as unknown as NextRouter),
+ );
+});
+
+const createFeedMock = (
+ page = defaultFeedPage,
+ query: string = BOOKMARKS_FEED_QUERY,
+ variables: unknown = {
+ first: 7,
+ loggedIn: true,
+ unreadOnly: false,
+ },
+): MockedGraphQLResponse => ({
+ request: {
+ query,
+ variables,
+ },
+ result: {
+ data: {
+ page,
+ },
+ },
+});
+
+const renderComponent = (
+ mocks: MockedGraphQLResponse[] = [createFeedMock()],
+ user: LoggedUser = defaultUser,
+): RenderResult => {
+ const client = new QueryClient();
+
+ mocks.forEach(mockGraphQL);
+ nock('http://localhost:3000').get('/v1/a').reply(200, [ad]);
+ const settingsContext: SettingsContextData = {
+ spaciness: 'eco',
+ showOnlyUnreadPosts: false,
+ openNewTab: true,
+ setTheme: jest.fn(),
+ themeMode: 'dark',
+ setSpaciness: jest.fn(),
+ toggleOpenNewTab: jest.fn(),
+ toggleShowOnlyUnreadPosts: jest.fn(),
+ insaneMode: false,
+ loadedSettings: true,
+ toggleInsaneMode: jest.fn(),
+ };
+ return render(
+
+
+
+
+ {BookmarksPage.getLayout(
+ ,
+ {},
+ BookmarksPage.layoutProps,
+ )}
+
+
+
+ ,
+ );
+};
+
+it('should request bookmarks feed', async () => {
+ renderComponent();
+ await waitForNock();
+ await waitFor(async () => {
+ const elements = await screen.findAllByTestId('postItem');
+ expect(elements.length).toBeTruthy();
+ });
+});
+
+it('should redirect to home page when logged-out', async () => {
+ renderComponent([], null);
+ await waitFor(() => expect(routerReplace).toBeCalledWith('/'));
+});
+
+it('should show the search bar', async () => {
+ renderComponent();
+ await waitForNock();
+ expect(await screen.findByTestId('searchField')).toBeInTheDocument();
+});
+
+it('should show empty screen when feed is empty', async () => {
+ renderComponent([
+ createFeedMock({
+ pageInfo: {
+ hasNextPage: false,
+ endCursor: null,
+ },
+ edges: [],
+ }),
+ ]);
+ await waitForNock();
+ expect(
+ await screen.findByText('Your bookmark list is empty.'),
+ ).toBeInTheDocument();
+ await waitFor(() => {
+ const elements = screen.queryAllByTestId('postItem');
+ expect(elements.length).toBeFalsy();
+ });
+});
+
+it('should update query param on enter', async (done) => {
+ renderComponent();
+ await waitForNock();
+ const input = (await screen.findByRole('textbox')) as HTMLInputElement;
+ input.value = 'daily';
+ input.dispatchEvent(new Event('input', { bubbles: true }));
+ setTimeout(async () => {
+ input.dispatchEvent(
+ new KeyboardEvent('keydown', { bubbles: true, keyCode: 13 }),
+ );
+ await waitFor(() =>
+ expect(routerReplace).toBeCalledWith({
+ pathname: '/bookmarks/search',
+ query: { q: 'daily' },
+ }),
+ );
+ done();
+ }, 150);
+});
diff --git a/packages/webapp/components/RouterPostsSearch.tsx b/packages/webapp/components/RouterPostsSearch.tsx
index 4edc13e407..ac6a4dac4b 100644
--- a/packages/webapp/components/RouterPostsSearch.tsx
+++ b/packages/webapp/components/RouterPostsSearch.tsx
@@ -2,19 +2,29 @@ import React, { ReactElement } from 'react';
import PostsSearch from '@dailydotdev/shared/src/components/PostsSearch';
import { useRouter } from 'next/router';
-export default function RouterPostsSearch(): ReactElement {
+export type RouterPostsSearchProps = {
+ suggestionType?: string;
+};
+
+export default function RouterPostsSearch({
+ suggestionType,
+}: RouterPostsSearchProps): ReactElement {
const router = useRouter();
const onSubmitQuery = (query: string): Promise =>
router.replace({
- pathname: '/search',
+ pathname: router?.pathname ? router?.pathname : '/search',
query: { q: query },
});
- const closeSearch = () => router.push('/');
+ const closeSearch = () => {
+ const redirectUrl = router?.pathname.replace('/search', '');
+ router.push(redirectUrl);
+ };
return (
+ import(/* webpackChunkName: "routerPostsSearch" */ '../RouterPostsSearch'),
+ {
+ ssr: false,
+ },
+);
+
+export default function BookmarkFeedPage({
+ children,
+}: MainFeedPageProps): ReactElement {
+ const router = useRouter();
+ const { user, tokenRefreshed } = useContext(AuthContext);
+ const [isSearchOn, setIsSearchOn] = useState(
+ router?.pathname === BOOKMARK_SEARCH_URL,
+ );
+
+ if (!user && tokenRefreshed) {
+ router.replace('/');
+ return <>;
+ }
+
+ useEffect(() => {
+ if (router?.pathname === BOOKMARK_SEARCH_URL) {
+ setIsSearchOn(true);
+ } else if (isSearchOn) {
+ setIsSearchOn(false);
+ }
+ }, [router.pathname]);
+
+ return (
+
+ }
+ >
+ {children}
+
+ );
+}
+
+export function getBookmarkFeedLayout(
+ page: ReactNode,
+ pageProps: Record,
+ layoutProps: MainLayoutProps & MainFeedPageProps,
+): ReactNode {
+ return getLayout(
+ {page},
+ pageProps,
+ layoutProps,
+ );
+}
+
+export const bookmarkFeedLayoutProps: MainLayoutProps = {
+ responsive: false,
+ showRank: true,
+ greeting: true,
+ mainPage: true,
+};
diff --git a/packages/webapp/pages/bookmarks.tsx b/packages/webapp/pages/bookmarks.tsx
deleted file mode 100644
index 962145acc9..0000000000
--- a/packages/webapp/pages/bookmarks.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import React, { ReactElement, useContext, useState } from 'react';
-import { NextSeoProps } from 'next-seo/lib/types';
-import { NextSeo } from 'next-seo';
-import Feed from '@dailydotdev/shared/src/components/Feed';
-import { BOOKMARKS_FEED_QUERY } from '@dailydotdev/shared/src/graphql/feed';
-import { headerHeight } from '@dailydotdev/shared/src/styles/sizes';
-import sizeN from '@dailydotdev/shared/macros/sizeN.macro';
-import BookmarkIcon from '@dailydotdev/shared/icons/bookmark.svg';
-import AuthContext from '@dailydotdev/shared/src/contexts/AuthContext';
-import { useRouter } from 'next/router';
-import Link from 'next/link';
-import { Button } from '@dailydotdev/shared/src/components/buttons/Button';
-import {
- CustomFeedHeader,
- customFeedIcon,
- FeedPage,
-} from '@dailydotdev/shared/src/components/utilities';
-import { mainFeedLayoutProps } from '../components/layouts/MainFeedPage';
-import { getLayout } from '../components/layouts/FeedLayout';
-import { defaultOpenGraph, defaultSeo } from '../next-seo';
-
-const BookmarksPage = (): ReactElement => {
- const router = useRouter();
- const { user, tokenRefreshed } = useContext(AuthContext);
- const [showEmptyScreen, setShowEmptyScreen] = useState(false);
-
- if (!user && tokenRefreshed) {
- router.replace('/');
- return <>;
- }
-
- const seo: NextSeoProps = {
- title: `Your daily.dev bookmarks`,
- titleTemplate: '%s',
- openGraph: { ...defaultOpenGraph },
- ...defaultSeo,
- };
-
- if (showEmptyScreen) {
- return (
-
-
-
-
- Your bookmark list is empty.
-
-
- Go back to your feed and bookmark posts you’d like to keep or read
- later. Each post you bookmark will be stored here.
-
-
-
-
-
- );
- }
-
- return (
-
-
-
-
- Bookmarks
-
- {tokenRefreshed && (
- setShowEmptyScreen(true)}
- className="my-3"
- />
- )}
-
- );
-};
-
-BookmarksPage.getLayout = getLayout;
-BookmarksPage.layoutProps = mainFeedLayoutProps;
-
-export default BookmarksPage;
diff --git a/packages/webapp/pages/bookmarks/index.tsx b/packages/webapp/pages/bookmarks/index.tsx
new file mode 100644
index 0000000000..0836790307
--- /dev/null
+++ b/packages/webapp/pages/bookmarks/index.tsx
@@ -0,0 +1,28 @@
+import React, { ReactElement } from 'react';
+import { NextSeoProps } from 'next-seo/lib/types';
+import { NextSeo } from 'next-seo';
+import {
+ getBookmarkFeedLayout,
+ bookmarkFeedLayoutProps,
+} from '../../components/layouts/BookmarkFeedPage';
+import { defaultOpenGraph, defaultSeo } from '../../next-seo';
+
+const seo: NextSeoProps = {
+ title: `Your daily.dev bookmarks`,
+ titleTemplate: '%s',
+ openGraph: { ...defaultOpenGraph },
+ ...defaultSeo,
+};
+
+const BookmarksPage = (): ReactElement => {
+ return (
+ <>
+
+
+ );
+};
+
+BookmarksPage.getLayout = getBookmarkFeedLayout;
+BookmarksPage.layoutProps = bookmarkFeedLayoutProps;
+
+export default BookmarksPage;
diff --git a/packages/webapp/pages/bookmarks/search.tsx b/packages/webapp/pages/bookmarks/search.tsx
new file mode 100644
index 0000000000..0836790307
--- /dev/null
+++ b/packages/webapp/pages/bookmarks/search.tsx
@@ -0,0 +1,28 @@
+import React, { ReactElement } from 'react';
+import { NextSeoProps } from 'next-seo/lib/types';
+import { NextSeo } from 'next-seo';
+import {
+ getBookmarkFeedLayout,
+ bookmarkFeedLayoutProps,
+} from '../../components/layouts/BookmarkFeedPage';
+import { defaultOpenGraph, defaultSeo } from '../../next-seo';
+
+const seo: NextSeoProps = {
+ title: `Your daily.dev bookmarks`,
+ titleTemplate: '%s',
+ openGraph: { ...defaultOpenGraph },
+ ...defaultSeo,
+};
+
+const BookmarksPage = (): ReactElement => {
+ return (
+ <>
+
+
+ );
+};
+
+BookmarksPage.getLayout = getBookmarkFeedLayout;
+BookmarksPage.layoutProps = bookmarkFeedLayoutProps;
+
+export default BookmarksPage;