From 4030f8efc4282ee6d957ebff210dd775eeece85d Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 20 Apr 2022 11:22:30 -0700 Subject: [PATCH 1/5] Initial implementation of saved searches (feature flagged) --- packages/web/components/elements/Button.tsx | 2 +- .../templates/homeFeed/HomeFeedContainer.tsx | 23 +++++++++++++++++++ 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx index ccd3b0131..d17a1dc4c 100644 --- a/packages/web/components/elements/Button.tsx +++ b/packages/web/components/elements/Button.tsx @@ -39,7 +39,7 @@ export const Button = styled('button', { borderRadius: '8px', cursor: 'pointer', color: '$omnivoreGray', - p: '10px 10px', + p: '10px 12px', bg: 'rgb(125, 125, 125, 0)', '&:hover': { bg: 'rgb(47, 47, 47, 0.1)', diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index 4ec5db90b..4a65456b9 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -37,6 +37,7 @@ import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers' import { ConfirmationModal } from '../../patterns/ConfirmationModal' import { SetLabelsModal } from '../article/SetLabelsModal' import { Label } from '../../../lib/networking/fragments/labelFragment' +import { isVipUser } from '../../../lib/featureFlag' export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT' @@ -44,6 +45,14 @@ export type HomeFeedContainerProps = { scrollElementRef: React.RefObject } +const SAVED_SEARCHES: Record = { + 'Inbox': '', + 'All': 'in:all', + 'Today': `in:inbox saved:${new Date(new Date().setDate(-1)).toISOString().split('T')[0]}..*`, + 'Newsletter': `in:inbox label:Newsletter`, + 'Non-Newsletter': `in:inbox -label:Newsletter`, +} + export function HomeFeedContainer(props: HomeFeedContainerProps): JSX.Element { const { viewerData } = useGetViewerQuery() const router = useRouter() @@ -577,6 +586,20 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { searchTerm={props.searchTerm} applySearchQuery={props.applySearchQuery} /> + {viewerData?.me && isVipUser(viewerData?.me) && ( + + {Object.keys(SAVED_SEARCHES).map(key => { + const searchQuery = SAVED_SEARCHES[key] + const style = searchQuery === props.searchTerm ? 'ctaDarkYellow' : 'ctaLightGray' + return ( + + ) + }) + } + + )} Date: Wed, 20 Apr 2022 11:36:04 -0700 Subject: [PATCH 2/5] Handle Inbox filter when not set --- .../web/components/templates/homeFeed/HomeFeedContainer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index 4a65456b9..5b00cb372 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -590,9 +590,9 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { {Object.keys(SAVED_SEARCHES).map(key => { const searchQuery = SAVED_SEARCHES[key] - const style = searchQuery === props.searchTerm ? 'ctaDarkYellow' : 'ctaLightGray' + const style = searchQuery === props.searchTerm || (!props.searchTerm && !searchQuery) ? 'ctaDarkYellow' : 'ctaLightGray' return ( - ) From 21c6b1fe018c2382923932a6bef1c09e14dfd420 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 20 Apr 2022 11:39:49 -0700 Subject: [PATCH 3/5] Dont break light gray buttons --- packages/web/components/elements/Button.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx index d17a1dc4c..4931e3e35 100644 --- a/packages/web/components/elements/Button.tsx +++ b/packages/web/components/elements/Button.tsx @@ -47,9 +47,6 @@ export const Button = styled('button', { visibility: 'visible', }, }, - '@md': { - bg: 'rgb(125, 125, 125, 0.1)', - }, '.ctaButtonIcon': { visibility: 'hidden', } From 24b622fffb0a36e2b2ccb7d383d16b33ad95cd8f Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 20 Apr 2022 11:57:56 -0700 Subject: [PATCH 4/5] Themed colours for the saved searches --- packages/web/components/elements/Button.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx index 4931e3e35..cdc14dac6 100644 --- a/packages/web/components/elements/Button.tsx +++ b/packages/web/components/elements/Button.tsx @@ -38,9 +38,9 @@ export const Button = styled('button', { fontFamily: 'Inter', borderRadius: '8px', cursor: 'pointer', - color: '$omnivoreGray', + color: '$grayTextContrast', p: '10px 12px', - bg: 'rgb(125, 125, 125, 0)', + bg: 'rgb(125, 125, 125, 0.1)', '&:hover': { bg: 'rgb(47, 47, 47, 0.1)', '.ctaButtonIcon': { From 2b4cbb219a09bfca95d38c77f5ab7cd416144915 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 20 Apr 2022 12:13:48 -0700 Subject: [PATCH 5/5] Add nat to feature flagged users --- packages/web/lib/featureFlag.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/lib/featureFlag.ts b/packages/web/lib/featureFlag.ts index fba232920..ab7258a5c 100644 --- a/packages/web/lib/featureFlag.ts +++ b/packages/web/lib/featureFlag.ts @@ -1,6 +1,6 @@ import { UserBasicData } from "./networking/queries/useGetViewerQuery" -const VIP_USERS = ['jacksonh', 'satindar', 'hongbo'] +const VIP_USERS = ['jacksonh', 'satindar', 'hongbo', 'nat'] export const isVipUser = (user: UserBasicData): boolean => { return VIP_USERS.includes(user.profile.username)