-
Notifications
You must be signed in to change notification settings - Fork 207
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feat: bookmark search #638
Merged
Merged
Changes from 9 commits
Commits
Show all changes
13 commits
Select commit
Hold shift + click to select a range
1a87d7d
feat: :art: Start of search for bookmarks
rebelchris e53a9a0
refactor: :art: Rewrite bookmark to it's own layout component
rebelchris 1924296
Merge branch 'master' of github.com:dailydotdev/apps into DD-78-bookm…
rebelchris d79b1ff
feat: Worked on re-ordering the bookmarks to their own page layout fo…
rebelchris d2b9430
fix: :art: Improve tests and structure
rebelchris cec26b8
Merge branch 'master' of github.com:dailydotdev/apps into DD-78-bookm…
rebelchris bf56bb8
feat: :sparkles: Worked on the bookmark search
rebelchris efc39f3
test: :test_tube: Added some more test for the new pages
rebelchris fec9c6f
style: :rotating_light: Fix some linter warnings
rebelchris 4da76b5
refactor: :lipstick: Move empty bookmark component to its own file
rebelchris b40412b
fix: :recycle: better useMemo usage and cleanup of code after PR feed…
rebelchris 10498ab
fix: :rotating_light: href for search missing for linter
rebelchris c66f374
test: Fixing a test issue (lint)
rebelchris File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,108 @@ | ||
import React, { | ||
ReactElement, | ||
ReactNode, | ||
useContext, | ||
useMemo, | ||
useState, | ||
} from 'react'; | ||
import Link from 'next/link'; | ||
import MagnifyingIcon from '../../icons/magnifying.svg'; | ||
import BookmarkIcon from '../../icons/bookmark.svg'; | ||
import sizeN from '../../macros/sizeN.macro'; | ||
import { BOOKMARKS_FEED_QUERY, SEARCH_BOOKMARKS_QUERY } from '../graphql/feed'; | ||
import { headerHeight } from '../styles/sizes'; | ||
import AuthContext from '../contexts/AuthContext'; | ||
import { Button } from './buttons/Button'; | ||
import { CustomFeedHeader, FeedPage } from './utilities'; | ||
import SearchEmptyScreen from './SearchEmptyScreen'; | ||
import Feed, { FeedProps } from './Feed'; | ||
|
||
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<FeedProps<unknown>>(() => { | ||
if (isSearchOn && searchQuery) { | ||
return { | ||
feedQueryKey: ['bookmarks', user?.id ?? 'anonymous', searchQuery], | ||
query: SEARCH_BOOKMARKS_QUERY, | ||
variables: { query: searchQuery }, | ||
emptyScreen: <SearchEmptyScreen />, | ||
className: 'my-3', | ||
}; | ||
} | ||
return { | ||
feedQueryKey: ['bookmarks', user?.id ?? 'anonymous'], | ||
query: BOOKMARKS_FEED_QUERY, | ||
className: 'my-3', | ||
onEmptyFeed: () => setShowEmptyScreen(true), | ||
}; | ||
}, [isSearchOn && searchQuery]); | ||
rebelchris marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
if (showEmptyScreen) { | ||
return ( | ||
<main | ||
className="flex fixed inset-0 flex-col justify-center items-center px-6 withNavBar text-theme-label-secondary" | ||
style={{ marginTop: headerHeight }} | ||
> | ||
{children} | ||
<BookmarkIcon | ||
className="m-0 icon text-theme-label-tertiary" | ||
style={{ fontSize: sizeN(20) }} | ||
/> | ||
<h1 | ||
className="my-4 text-center text-theme-label-primary typo-title1" | ||
style={{ maxWidth: '32.5rem' }} | ||
> | ||
Your bookmark list is empty. | ||
</h1> | ||
<p className="mb-10 text-center" style={{ maxWidth: '32.5rem' }}> | ||
Go back to your feed and bookmark posts you’d like to keep or read | ||
later. Each post you bookmark will be stored here. | ||
</p> | ||
<Link href="/" passHref> | ||
<Button className="btn-primary" tag="a" buttonSize="large"> | ||
Back to feed | ||
</Button> | ||
</Link> | ||
</main> | ||
); | ||
} | ||
rebelchris marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
return ( | ||
<FeedPage> | ||
{children} | ||
<CustomFeedHeader className="relative"> | ||
{!isSearchOn && ( | ||
<> | ||
<Link href="/bookmarks/search"> | ||
<a | ||
aria-label="Search bookmarks" | ||
className="flex relative flex-row justify-center items-center font-bold no-underline border cursor-pointer select-none shadow-none iconOnly small btn typo-callout focus-outline btn-tertiary" | ||
> | ||
<MagnifyingIcon /> | ||
</a> | ||
rebelchris marked this conversation as resolved.
Show resolved
Hide resolved
|
||
</Link> | ||
<div className="mx-4 w-px h-full bg-theme-bg-tertiary"> </div> | ||
<span className="font-bold typo-callout">Bookmarks</span> | ||
</> | ||
)} | ||
{isSearchOn ? searchChildren : undefined} | ||
</CustomFeedHeader> | ||
{tokenRefreshed && <Feed {...feedProps} />} | ||
</FeedPage> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Using the bookmarks while not logging in should not be possible.
If the user is not logged in maybe we should disable the query
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You actually can't get the bookmarks feed if not logged in.
The BookmarkFeedPage will redirect you if the token is refreshed.
I assumed this was a second fallback in the split second.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh and fully tested locally yes