From 64ea02bb2c749fc354674a64dbc7273aa596b108 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 11 Jun 2024 16:00:25 +0800 Subject: [PATCH] Add trash and archive section, css fixups --- .../components/templates/NavigationLayout.tsx | 2 + .../templates/homeFeed/HomeFeedContainer.tsx | 2 +- .../templates/library/LibraryContainer.tsx | 38 ++---- .../library/LibraryItemsContainer.tsx | 10 +- .../templates/navMenu/LibraryLegacyMenu.tsx | 2 +- .../templates/navMenu/LibraryMenu.tsx | 49 -------- .../templates/navMenu/NavigationMenu.tsx | 111 +++++++++--------- .../queries/useGetLibraryItemsQuery.tsx | 17 ++- packages/web/pages/archive/index.tsx | 16 +++ packages/web/pages/library/index.tsx | 3 +- packages/web/pages/settings/account.tsx | 2 +- packages/web/pages/subscriptions/index.tsx | 5 +- packages/web/pages/tools/bulk.tsx | 2 +- packages/web/pages/trash/index.tsx | 16 +++ 14 files changed, 114 insertions(+), 161 deletions(-) create mode 100644 packages/web/pages/archive/index.tsx create mode 100644 packages/web/pages/trash/index.tsx diff --git a/packages/web/components/templates/NavigationLayout.tsx b/packages/web/components/templates/NavigationLayout.tsx index e5cb17bd4..fcf455f29 100644 --- a/packages/web/components/templates/NavigationLayout.tsx +++ b/packages/web/components/templates/NavigationLayout.tsx @@ -27,6 +27,8 @@ export type NavigationSection = | 'library' | 'subscriptions' | 'highlights' + | 'archive' + | 'trash' type NavigationLayoutProps = { children: ReactNode diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index 0d221e34f..e1ad0702d 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -116,7 +116,7 @@ export function HomeFeedContainer(): JSX.Element { performActionOnItem, mutate, error: fetchItemsError, - } = useGetLibraryItemsQuery(queryInputs) + } = useGetLibraryItemsQuery('inbox', queryInputs) useEffect(() => { const handleRevalidate = () => { diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx index 2b2f5c5ea..8bd7babab 100644 --- a/packages/web/components/templates/library/LibraryContainer.tsx +++ b/packages/web/components/templates/library/LibraryContainer.tsx @@ -73,7 +73,11 @@ const debouncedFetchSearchResults = debounce((query, cb) => { // the state as Failed. On refresh it will try again if the backend sends "PROCESSING" const TIMEOUT_DELAYS = [2000, 3500, 5000] -export function LibraryContainer(): JSX.Element { +type LibraryContainerProps = { + folder: string +} + +export function LibraryContainer(props: LibraryContainerProps): JSX.Element { const { viewerData } = useGetViewerQuery() const router = useRouter() const { queryValue } = useKBar((state) => ({ queryValue: state.searchQuery })) @@ -81,6 +85,7 @@ export function LibraryContainer(): JSX.Element { const defaultQuery = { limit: 10, + folder: props.folder, sortDescending: true, searchQuery: undefined, } @@ -111,7 +116,7 @@ export function LibraryContainer(): JSX.Element { performActionOnItem, mutate, error: fetchItemsError, - } = useGetLibraryItemsQuery(queryInputs) + } = useGetLibraryItemsQuery(props.folder, queryInputs) useEffect(() => { const handleRevalidate = () => { @@ -920,7 +925,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { height: '100%', px: '20px', py: '20px', - width: !showItems ? '100%' : 'unset', + width: '100%', }} distribution="start" alignment="start" @@ -1181,34 +1186,13 @@ function LibraryItems(props: LibraryItemsProps): JSX.Element { paddingBottom: '0px', overflow: 'visible', px: '70px', + '@lgDown': { + px: '10px', + }, gridTemplateColumns: props.layout == 'LIST_LAYOUT' ? 'none' : `repeat( auto-fit, minmax(300px, 1fr) )`, - // '@media (max-width: 930px)': { - // gridGap: props.layout == 'LIST_LAYOUT' ? '0px' : '20px', - // }, - // '@xlgDown': { - // borderRadius: props.layout == 'LIST_LAYOUT' ? 0 : undefined, - // }, - // '@smDown': { - // border: 'unset', - // width: props.layout == 'LIST_LAYOUT' ? '100vw' : undefined, - // margin: props.layout == 'LIST_LAYOUT' ? '16px -16px' : undefined, - // borderRadius: props.layout == 'LIST_LAYOUT' ? 0 : undefined, - // }, - // '@media (min-width: 930px)': { - // gridTemplateColumns: - // props.layout == 'LIST_LAYOUT' ? 'none' : 'repeat(2, 1fr)', - // }, - // '@media (min-width: 1280px)': { - // gridTemplateColumns: - // props.layout == 'LIST_LAYOUT' ? 'none' : 'repeat(3, 1fr)', - // }, - // '@media (min-width: 1600px)': { - // gridTemplateColumns: - // props.layout == 'LIST_LAYOUT' ? 'none' : 'repeat(4, 1fr)', - // }, }} > {props.items.map((linkedItem) => ( diff --git a/packages/web/components/templates/library/LibraryItemsContainer.tsx b/packages/web/components/templates/library/LibraryItemsContainer.tsx index 7e391bfe4..a6b48ccbc 100644 --- a/packages/web/components/templates/library/LibraryItemsContainer.tsx +++ b/packages/web/components/templates/library/LibraryItemsContainer.tsx @@ -1,20 +1,12 @@ import { Allotment } from 'allotment' import 'allotment/dist/style.css' -import { useGetViewerQuery } from '../../../lib/networking/queries/useGetViewerQuery' -import { useRouter } from 'next/router' -import { useKBar } from 'kbar' -import { useState } from 'react' import { LibraryContainer } from './LibraryContainer' -import { LibrarySideBar } from './LibrarySideBar' -import { HighlightsList } from '../../../pages/highlights' export function LibraryItemsContainer(): JSX.Element { - const router = useRouter() - return ( - + {/* diff --git a/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx b/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx index 5b1dedfe7..631d8ba23 100644 --- a/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx +++ b/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx @@ -2,7 +2,7 @@ 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-icons/react' +import { Circle, X } from '@phosphor-icons/react' import { Subscription, SubscriptionType, diff --git a/packages/web/components/templates/navMenu/LibraryMenu.tsx b/packages/web/components/templates/navMenu/LibraryMenu.tsx index 23bc2dde4..6e4849bba 100644 --- a/packages/web/components/templates/navMenu/LibraryMenu.tsx +++ b/packages/web/components/templates/navMenu/LibraryMenu.tsx @@ -46,55 +46,6 @@ type LibraryFilterMenuProps = { } export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element { - const [labels, setLabels] = usePersistedState({ - key: 'menu-labels', - isSessionStorage: false, - initialValue: [], - }) - const [savedSearches, setSavedSearches] = usePersistedState({ - key: 'menu-searches', - isSessionStorage: false, - initialValue: [], - }) - const [subscriptions, setSubscriptions] = usePersistedState({ - key: 'menu-subscriptions', - isSessionStorage: false, - initialValue: [], - }) - const labelsResponse = useGetLabelsQuery() - const searchesResponse = useGetSavedSearchQuery() - const subscriptionsResponse = useGetSubscriptionsQuery() - - useEffect(() => { - if ( - !labelsResponse.error && - !labelsResponse.isLoading && - labelsResponse.labels - ) { - setLabels(labelsResponse.labels) - } - }, [setLabels, labelsResponse]) - - useEffect(() => { - if ( - !subscriptionsResponse.error && - !subscriptionsResponse.isLoading && - subscriptionsResponse.subscriptions - ) { - setSubscriptions(subscriptionsResponse.subscriptions) - } - }, [setSubscriptions, subscriptionsResponse]) - - useEffect(() => { - if ( - !searchesResponse.error && - !searchesResponse.isLoading && - searchesResponse.savedSearches - ) { - setSavedSearches(searchesResponse.savedSearches) - } - }, [setSavedSearches, searchesResponse]) - return ( <> ({ - key: 'menu-labels', - isSessionStorage: false, - initialValue: [], - }) - const [savedSearches, setSavedSearches] = usePersistedState({ - key: 'menu-searches', - isSessionStorage: false, - initialValue: [], - }) - const [subscriptions, setSubscriptions] = usePersistedState({ - key: 'menu-subscriptions', - isSessionStorage: false, - initialValue: [], - }) - const labelsResponse = useGetLabelsQuery() - const searchesResponse = useGetSavedSearchQuery() - const subscriptionsResponse = useGetSubscriptionsQuery() - - useEffect(() => { - if ( - !labelsResponse.error && - !labelsResponse.isLoading && - labelsResponse.labels - ) { - setLabels(labelsResponse.labels) - } - }, [setLabels, labelsResponse]) - - useEffect(() => { - if ( - !subscriptionsResponse.error && - !subscriptionsResponse.isLoading && - subscriptionsResponse.subscriptions - ) { - setSubscriptions(subscriptionsResponse.subscriptions) - } - }, [setSubscriptions, subscriptionsResponse]) - - useEffect(() => { - if ( - !searchesResponse.error && - !searchesResponse.isLoading && - searchesResponse.savedSearches - ) { - setSavedSearches(searchesResponse.savedSearches) - } - }, [setSavedSearches, searchesResponse]) - return ( <> { + const [moreFoldersOpenState, setMoreFoldersOpenState] = + usePersistedState({ + key: 'nav-menu-more-folders-open', + isSessionStorage: false, + initialValue: false, + }) return ( { isSelected={props.section == 'highlights'} icon={} /> + + {moreFoldersOpenState && ( + + } + /> + } + /> + + )} ) } diff --git a/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx b/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx index 999bb0590..f7e0c6fd5 100644 --- a/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx +++ b/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx @@ -142,13 +142,11 @@ export const recommendationFragment = gql` } ` -export function useGetLibraryItemsQuery({ - limit, - sortDescending, - searchQuery, - cursor, - includeContent = false, -}: LibraryItemsQueryInput): LibraryItemsQueryResponse { +export function useGetLibraryItemsQuery( + folder: string, + { limit, searchQuery, cursor, includeContent = false }: LibraryItemsQueryInput +): LibraryItemsQueryResponse { + const fullQuery = (`in:${folder} use:folders ` + (searchQuery ?? '')).trim() const query = gql` query Search( $after: String @@ -236,13 +234,13 @@ export function useGetLibraryItemsQuery({ const variables = { after: cursor, first: limit, - query: searchQuery, + query: fullQuery, includeContent, } const { data, error, mutate, size, setSize, isValidating } = useSWRInfinite( (pageIndex, previousPageData) => { - const key = [query, limit, sortDescending, searchQuery, undefined] + const key = [query, variables.first, variables.query, undefined] const previousResult = previousPageData as LibraryItemsData if (pageIndex === 0) { return key @@ -250,7 +248,6 @@ export function useGetLibraryItemsQuery({ return [ query, limit, - sortDescending, searchQuery, pageIndex === 0 ? undefined : previousResult.search.pageInfo.endCursor, ] diff --git a/packages/web/pages/archive/index.tsx b/packages/web/pages/archive/index.tsx new file mode 100644 index 000000000..b11b73f5c --- /dev/null +++ b/packages/web/pages/archive/index.tsx @@ -0,0 +1,16 @@ +import { NavigationLayout } from '../../components/templates/NavigationLayout' +import { LibraryContainer } from '../../components/templates/library/LibraryContainer' + +export default function Archive(): JSX.Element { + return ( + + + + ) +} diff --git a/packages/web/pages/library/index.tsx b/packages/web/pages/library/index.tsx index 796d7a4b5..e21915ad2 100644 --- a/packages/web/pages/library/index.tsx +++ b/packages/web/pages/library/index.tsx @@ -1,5 +1,4 @@ import { NavigationLayout } from '../../components/templates/NavigationLayout' -import { Box } from '../../components/elements/LayoutPrimitives' import { LibraryContainer } from '../../components/templates/library/LibraryContainer' export default function Library(): JSX.Element { @@ -11,7 +10,7 @@ export default function Library(): JSX.Element { path: '/library', }} > - + ) } diff --git a/packages/web/pages/settings/account.tsx b/packages/web/pages/settings/account.tsx index 3cf0f6a84..e9ef3838b 100644 --- a/packages/web/pages/settings/account.tsx +++ b/packages/web/pages/settings/account.tsx @@ -99,7 +99,7 @@ export default function Account(): JSX.Element { isUsernameValidationLoading, ]) - const { itemsPages, isValidating } = useGetLibraryItemsQuery({ + const { itemsPages, isValidating } = useGetLibraryItemsQuery('', { limit: 0, searchQuery: 'in:all', sortDescending: false, diff --git a/packages/web/pages/subscriptions/index.tsx b/packages/web/pages/subscriptions/index.tsx index 3b79509b0..dae9f6acc 100644 --- a/packages/web/pages/subscriptions/index.tsx +++ b/packages/web/pages/subscriptions/index.tsx @@ -1,7 +1,4 @@ import { NavigationLayout } from '../../components/templates/NavigationLayout' -import { PrimaryLayout } from '../../components/templates/PrimaryLayout' -import { HomeFeedContainer } from '../../components/templates/homeFeed/HomeFeedContainer' -import { Box, VStack } from '../../components/elements/LayoutPrimitives' import { LibraryContainer } from '../../components/templates/library/LibraryContainer' export default function Subscriptions(): JSX.Element { @@ -13,7 +10,7 @@ export default function Subscriptions(): JSX.Element { path: '/subscriptions', }} > - + ) } diff --git a/packages/web/pages/tools/bulk.tsx b/packages/web/pages/tools/bulk.tsx index 1229aa4bd..24efa499f 100644 --- a/packages/web/pages/tools/bulk.tsx +++ b/packages/web/pages/tools/bulk.tsx @@ -33,7 +33,7 @@ export default function BulkPerformer(): JSX.Element { const [errorMessage, setErrorMessage] = useState() const [runningState, setRunningState] = useState('none') - const { itemsPages, isValidating } = useGetLibraryItemsQuery({ + const { itemsPages, isValidating } = useGetLibraryItemsQuery('', { searchQuery: query, limit: 1, sortDescending: false, diff --git a/packages/web/pages/trash/index.tsx b/packages/web/pages/trash/index.tsx new file mode 100644 index 000000000..1d3d29bc7 --- /dev/null +++ b/packages/web/pages/trash/index.tsx @@ -0,0 +1,16 @@ +import { NavigationLayout } from '../../components/templates/NavigationLayout' +import { LibraryContainer } from '../../components/templates/library/LibraryContainer' + +export default function Trash(): JSX.Element { + return ( + + + + ) +}