From 9ea3a8774cfd2c197ce3650031a3aff4069b91bc Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Tue, 16 May 2023 00:46:33 +0200 Subject: [PATCH 01/27] start implementing tab based overview content selection --- .../components/common/OverviewContainer.tsx | 33 +++++++++++++++++++ .../components/common/PictureOverview.scss | 19 +++++++++++ .../src/components/common/PictureOverview.tsx | 4 +-- 3 files changed, 54 insertions(+), 2 deletions(-) create mode 100644 projects/bp-gallery/src/components/common/OverviewContainer.tsx diff --git a/projects/bp-gallery/src/components/common/OverviewContainer.tsx b/projects/bp-gallery/src/components/common/OverviewContainer.tsx new file mode 100644 index 000000000..9f776b2f9 --- /dev/null +++ b/projects/bp-gallery/src/components/common/OverviewContainer.tsx @@ -0,0 +1,33 @@ +import { IconProps, Tab, Tabs } from '@mui/material'; +import { Children, PropsWithChildren, ReactElement, useState } from 'react'; + +const OverviewContainer = ({ + titles, + icons, + children, +}: PropsWithChildren<{ titles?: string[]; icons: ReactElement[] }>) => { + const childrenArray = Children.toArray(children); + const [tabIndex, setTabIndex] = useState(0); + + return ( +
+
+ {titles &&

{titles[tabIndex]}

} + { + setTabIndex(value as number); + }} + > + {icons.map((icon, index) => ( + + ))} + +
+ {childrenArray[tabIndex]} +
+ ); +}; + +export default OverviewContainer; diff --git a/projects/bp-gallery/src/components/common/PictureOverview.scss b/projects/bp-gallery/src/components/common/PictureOverview.scss index 1f910f955..c2b1a7e70 100644 --- a/projects/bp-gallery/src/components/common/PictureOverview.scss +++ b/projects/bp-gallery/src/components/common/PictureOverview.scss @@ -21,3 +21,22 @@ height: fit-content; } } + +.overview-selection-container { + display: flex; + flex-direction: column; + + .overview-selection-header { + display: flex; + flex-direction: row; + margin: 2rem 0 0.75rem 0; + @media (max-width: $mobile-breakpoint) { + flex-direction: column; + } + .overview-selection-title { + margin-left: 0; + margin-right: auto; + margin-bottom: 0; + } + } +} diff --git a/projects/bp-gallery/src/components/common/PictureOverview.tsx b/projects/bp-gallery/src/components/common/PictureOverview.tsx index 1fd2b7058..4337c47c1 100644 --- a/projects/bp-gallery/src/components/common/PictureOverview.tsx +++ b/projects/bp-gallery/src/components/common/PictureOverview.tsx @@ -9,7 +9,7 @@ import useGetPictures from '../../hooks/get-pictures.hook'; import PrimaryButton from './PrimaryButton'; interface PictureOverviewProps { - title: string; + title?: string; queryParams: PictureFiltersInput | { searchTerms: string[]; searchTimes: string[][] }; onClick: MouseEventHandler; sortBy?: string[]; @@ -39,7 +39,7 @@ const PictureOverview = ({ return (
-

{title}

+ {title &&

{title}

} {pictures && (
Date: Tue, 16 May 2023 13:27:32 +0200 Subject: [PATCH 02/27] allow custom width for tag and picture overview --- .../components/common/PictureOverview.scss | 6 ++++- .../src/components/common/TagOverview.tsx | 24 ++++++++++++------- .../common/picture-gallery/PictureGrid.tsx | 24 +++++++++++++------ 3 files changed, 37 insertions(+), 17 deletions(-) diff --git a/projects/bp-gallery/src/components/common/PictureOverview.scss b/projects/bp-gallery/src/components/common/PictureOverview.scss index c2b1a7e70..8cae19920 100644 --- a/projects/bp-gallery/src/components/common/PictureOverview.scss +++ b/projects/bp-gallery/src/components/common/PictureOverview.scss @@ -25,11 +25,15 @@ .overview-selection-container { display: flex; flex-direction: column; + border-radius: 15px; + margin-top: 2rem; + padding: 0 16px 16px 16px; + background-color: #efeae5; .overview-selection-header { display: flex; flex-direction: row; - margin: 2rem 0 0.75rem 0; + margin: 4px 0 0.75rem 0; @media (max-width: $mobile-breakpoint) { flex-direction: column; } diff --git a/projects/bp-gallery/src/components/common/TagOverview.tsx b/projects/bp-gallery/src/components/common/TagOverview.tsx index ac83ed21f..832fa4ded 100644 --- a/projects/bp-gallery/src/components/common/TagOverview.tsx +++ b/projects/bp-gallery/src/components/common/TagOverview.tsx @@ -1,4 +1,4 @@ -import React, { MouseEventHandler, useCallback, useEffect, useState } from 'react'; +import React, { MouseEventHandler, useCallback, useEffect, useRef, useState } from 'react'; import './PictureOverview.scss'; import { FlatTag, TagType, Thumbnail } from '../../types/additionalFlatTypes'; import { @@ -34,27 +34,33 @@ const TagOverview = ({ archiveId, }: TagOverviewProps) => { const { t } = useTranslation(); + const ref = useRef(); const basePath = archiveId ? '/archives/' + archiveId + '/show-more/' + type + '/' : '/show-more/' + type + '/'; - const calculateMaxCategoriesPerRow = () => { - const tempRowLength = Math.max(1, Math.floor(Math.min(window.innerWidth - 64, 1200) / 300)); - if (Math.min(window.innerWidth - 64, 1200) >= tempRowLength * 300 + (tempRowLength - 1) * 8) { + const calculateMaxCategoriesPerRow = useCallback((width: number) => { + const tempRowLength = Math.max(1, Math.floor(Math.min(width, 1200) / 300)); + if (Math.min(width, 1200) >= tempRowLength * 300 + (tempRowLength - 1) * 8) { return tempRowLength; } return Math.max(1, tempRowLength - 1); - }; + }, []); const [rowLength, setRowLength] = useState(() => { - const initialState = calculateMaxCategoriesPerRow(); + const initialState = calculateMaxCategoriesPerRow((ref.current?.clientWidth ?? 0) as number); return initialState; }); const onResize = useCallback(() => { - setRowLength(calculateMaxCategoriesPerRow()); - }, []); + setRowLength(calculateMaxCategoriesPerRow((ref.current?.clientWidth ?? 0) as number)); + }, [calculateMaxCategoriesPerRow]); + + //ensure correct set up of + useEffect(() => { + setRowLength(calculateMaxCategoriesPerRow((ref.current?.clientWidth ?? 0) as number)); + }, [ref.current?.clientWidth, calculateMaxCategoriesPerRow]); // Set up eventListener on mount and cleanup on unmount useEffect(() => { @@ -82,7 +88,7 @@ const TagOverview = ({ return
; } else { return ( -
+
{title &&

{title}

}
{type !== TagType.TIME_RANGE ? ( diff --git a/projects/bp-gallery/src/components/common/picture-gallery/PictureGrid.tsx b/projects/bp-gallery/src/components/common/picture-gallery/PictureGrid.tsx index b650880b1..edb665626 100644 --- a/projects/bp-gallery/src/components/common/picture-gallery/PictureGrid.tsx +++ b/projects/bp-gallery/src/components/common/picture-gallery/PictureGrid.tsx @@ -1,7 +1,7 @@ import { CheckBox, CheckBoxOutlineBlank, Delete, DoneAll, RemoveDone } from '@mui/icons-material'; import { Button, Portal } from '@mui/material'; import { union } from 'lodash'; -import { useCallback, useEffect, useMemo, useState } from 'react'; +import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { root } from '../../../helpers/app-helpers'; import hashCode from '../../../helpers/hash-code'; @@ -39,13 +39,18 @@ const PictureGrid = ({ allowClicks = true, rows, }: PictureGridProps) => { - const calculateMaxPicturesPerRow = () => - Math.max(2, Math.round(Math.min(window.innerWidth, 1200) / 200)); + const ref = useRef(); + + const calculateMaxPicturesPerRow = useCallback((width: number) => { + return Math.max(2, Math.round(Math.min(width, 1200) / 200)); + }, []); const { role } = useAuth(); const { t } = useTranslation(); - const [maxRowLength, setMaxRowLength] = useState(calculateMaxPicturesPerRow()); + const [maxRowLength, setMaxRowLength] = useState( + calculateMaxPicturesPerRow((ref.current?.clientWidth ?? 0) as number) + ); const [table, setTable] = useState<(FlatPicture | undefined)[][]>([[]]); const [focusedPicture, setFocusedPicture] = useState(undefined); const [bulkEditPictureIds, setBulkEditPictureIds] = useState(undefined); @@ -83,11 +88,16 @@ const PictureGrid = ({ const deletePicture = useDeletePicture(); const onResize = useCallback(() => { - const newMaxRowLength = calculateMaxPicturesPerRow(); + const newMaxRowLength = calculateMaxPicturesPerRow((ref.current?.clientWidth ?? 0) as number); if (newMaxRowLength !== maxRowLength) { setMaxRowLength(newMaxRowLength); } - }, [maxRowLength]); + }, [maxRowLength, calculateMaxPicturesPerRow]); + + //ensure correct set up of + useEffect(() => { + setMaxRowLength(calculateMaxPicturesPerRow((ref.current?.clientWidth ?? 0) as number)); + }, [ref.current?.clientWidth, calculateMaxPicturesPerRow]); // Set up eventListener on mount and cleanup on unmount useEffect(() => { @@ -210,7 +220,7 @@ const PictureGrid = ({ ); return ( -
+
{Boolean(selectedPictures.length) && bulkOperations && ( Date: Tue, 16 May 2023 14:09:44 +0200 Subject: [PATCH 03/27] adjust tag preview min width to fit to mobile screen --- projects/bp-gallery/src/components/common/ItemList.scss | 2 +- projects/bp-gallery/src/components/common/TagOverview.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/bp-gallery/src/components/common/ItemList.scss b/projects/bp-gallery/src/components/common/ItemList.scss index 8ca67c817..caa090584 100644 --- a/projects/bp-gallery/src/components/common/ItemList.scss +++ b/projects/bp-gallery/src/components/common/ItemList.scss @@ -22,7 +22,7 @@ .large { display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(max(260px, 100%/4), 1fr)); grid-gap: 0.5rem; padding-bottom: 6px; } diff --git a/projects/bp-gallery/src/components/common/TagOverview.tsx b/projects/bp-gallery/src/components/common/TagOverview.tsx index 832fa4ded..b5b62e72d 100644 --- a/projects/bp-gallery/src/components/common/TagOverview.tsx +++ b/projects/bp-gallery/src/components/common/TagOverview.tsx @@ -41,8 +41,8 @@ const TagOverview = ({ : '/show-more/' + type + '/'; const calculateMaxCategoriesPerRow = useCallback((width: number) => { - const tempRowLength = Math.max(1, Math.floor(Math.min(width, 1200) / 300)); - if (Math.min(width, 1200) >= tempRowLength * 300 + (tempRowLength - 1) * 8) { + const tempRowLength = Math.max(1, Math.floor(Math.min(width, 1200) / 260)); + if (Math.min(width, 1200) >= tempRowLength * 260 + (tempRowLength - 1) * 8) { return tempRowLength; } return Math.max(1, tempRowLength - 1); From 1a2a03f2a7132acc63e8d8335c9547e804feb056 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Tue, 16 May 2023 15:21:31 +0200 Subject: [PATCH 04/27] minor changes to css --- .../bp-gallery/src/components/common/PictureOverview.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/projects/bp-gallery/src/components/common/PictureOverview.scss b/projects/bp-gallery/src/components/common/PictureOverview.scss index 8cae19920..a1f8474d6 100644 --- a/projects/bp-gallery/src/components/common/PictureOverview.scss +++ b/projects/bp-gallery/src/components/common/PictureOverview.scss @@ -38,9 +38,7 @@ flex-direction: column; } .overview-selection-title { - margin-left: 0; - margin-right: auto; - margin-bottom: 0; + margin: auto auto 0 0; } } } From c81b162258183311366fba2616501cded5243459 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Tue, 16 May 2023 21:49:26 +0200 Subject: [PATCH 05/27] start fixing tests --- .../components/common/picture-gallery/PictureGrid.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/projects/bp-gallery/src/components/common/picture-gallery/PictureGrid.tsx b/projects/bp-gallery/src/components/common/picture-gallery/PictureGrid.tsx index edb665626..f6af4d95c 100644 --- a/projects/bp-gallery/src/components/common/picture-gallery/PictureGrid.tsx +++ b/projects/bp-gallery/src/components/common/picture-gallery/PictureGrid.tsx @@ -49,7 +49,7 @@ const PictureGrid = ({ const { t } = useTranslation(); const [maxRowLength, setMaxRowLength] = useState( - calculateMaxPicturesPerRow((ref.current?.clientWidth ?? 0) as number) + calculateMaxPicturesPerRow((ref.current?.clientWidth ?? window.innerWidth) as number) ); const [table, setTable] = useState<(FlatPicture | undefined)[][]>([[]]); const [focusedPicture, setFocusedPicture] = useState(undefined); @@ -88,7 +88,9 @@ const PictureGrid = ({ const deletePicture = useDeletePicture(); const onResize = useCallback(() => { - const newMaxRowLength = calculateMaxPicturesPerRow((ref.current?.clientWidth ?? 0) as number); + const newMaxRowLength = calculateMaxPicturesPerRow( + (ref.current?.clientWidth ?? window.innerWidth) as number + ); if (newMaxRowLength !== maxRowLength) { setMaxRowLength(newMaxRowLength); } @@ -96,7 +98,9 @@ const PictureGrid = ({ //ensure correct set up of useEffect(() => { - setMaxRowLength(calculateMaxPicturesPerRow((ref.current?.clientWidth ?? 0) as number)); + setMaxRowLength( + calculateMaxPicturesPerRow((ref.current?.clientWidth ?? window.innerWidth) as number) + ); }, [ref.current?.clientWidth, calculateMaxPicturesPerRow]); // Set up eventListener on mount and cleanup on unmount From be7dd070cb73375b60734ace603c892eb58a4a83 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Wed, 17 May 2023 11:16:22 +0200 Subject: [PATCH 06/27] =?UTF-8?q?add=20option=20to=20show=20most=20liked?= =?UTF-8?q?=20pictures=20instead=20of=20neuzug=C3=A4nge/unsere=20bilder?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/views/archives/ArchiveView.tsx | 28 +++++++++++++------ .../views/discover/DiscoverView.tsx | 27 +++++++++++++----- .../views/show-more/ShowMoreView.tsx | 6 +++- .../views/show-more/ShowMoreViewHeader.tsx | 2 +- .../src/components/views/start/StartView.tsx | 25 +++++++++++++---- .../bp-gallery/src/hooks/get-pictures.hook.ts | 1 + .../bp-gallery/src/shared/locales/de.json | 7 +++-- 7 files changed, 72 insertions(+), 24 deletions(-) diff --git a/projects/bp-gallery/src/components/views/archives/ArchiveView.tsx b/projects/bp-gallery/src/components/views/archives/ArchiveView.tsx index 7cd1942b5..c14b096bc 100644 --- a/projects/bp-gallery/src/components/views/archives/ArchiveView.tsx +++ b/projects/bp-gallery/src/components/views/archives/ArchiveView.tsx @@ -1,4 +1,4 @@ -import { Edit, Link } from '@mui/icons-material'; +import { AccessTime, Edit, Link, ThumbUp } from '@mui/icons-material'; import { Button } from '@mui/material'; import { Redirect } from 'react-router-dom'; import { useGetArchiveQuery } from '../../../graphql/APIConnector'; @@ -16,6 +16,7 @@ import ArchiveDescription from './ArchiveDescription'; import './ArchiveView.scss'; import DonateButton from '../../common/DonateButton'; import { useTranslation } from 'react-i18next'; +import OverviewContainer from '../../common/OverviewContainer'; interface ArchiveViewProps { archiveId: string; @@ -106,13 +107,24 @@ const ArchiveView = ({ archiveId }: ArchiveViewProps) => { )}
- { - visit('/archives/' + archiveId + '/show-more/pictures'); - }} - /> + , ]} + > + { + visit('/archives/' + archiveId + '/show-more/pictures'); + }} + /> + { + visit('/archives/' + archiveId + '/show-more/most-liked'); + }} + sortBy={['likes:asc']} + /> + { const { visit } = useVisit(); @@ -13,13 +15,24 @@ const DiscoverView = () => { return (
- { - visit('/show-more/latest'); - }} - /> + , ]} + > + { + visit('/show-more/latest'); + }} + /> + { + visit('/show-more/most-liked'); + }} + sortBy={['likes:asc']} + /> +
diff --git a/projects/bp-gallery/src/components/views/show-more/ShowMoreViewHeader.tsx b/projects/bp-gallery/src/components/views/show-more/ShowMoreViewHeader.tsx index 1af76bd99..82c5a1b74 100644 --- a/projects/bp-gallery/src/components/views/show-more/ShowMoreViewHeader.tsx +++ b/projects/bp-gallery/src/components/views/show-more/ShowMoreViewHeader.tsx @@ -27,7 +27,7 @@ const ShowMoreViewHeader = ({ const getShowMoreHeader = () => t(`show-more.${categoryType}-title`); const getShowMoreText = () => t(`show-more.${categoryType}-text`); - if (categoryType === 'pictures' || categoryType === 'latest') { + if (categoryType === 'pictures' || categoryType === 'latest' || categoryType === 'most-liked') { if (categoryId && collectionsInfo && collectionsInfo.collections.length > 0) { return ( { const { visit } = useVisit(); @@ -99,11 +101,24 @@ const StartView = () => {
- visit('/show-more/latest')} - /> + , ]} + > + { + visit('/show-more/latest'); + }} + /> + { + visit('/show-more/most-liked'); + }} + sortBy={['likes:asc']} + /> +

{t('startpage.our-archives')}

{archiveCards}
diff --git a/projects/bp-gallery/src/hooks/get-pictures.hook.ts b/projects/bp-gallery/src/hooks/get-pictures.hook.ts index cd89480b7..1702bebad 100644 --- a/projects/bp-gallery/src/hooks/get-pictures.hook.ts +++ b/projects/bp-gallery/src/hooks/get-pictures.hook.ts @@ -44,6 +44,7 @@ const useGetPictures = ( : (queryParams as PictureFiltersInput); }, [filterOutTexts, queryParams]); const queryResult = useGetPicturesQuery({ + fetchPolicy: 'no-cache', variables: { filters, pagination: { diff --git a/projects/bp-gallery/src/shared/locales/de.json b/projects/bp-gallery/src/shared/locales/de.json index 4c3621c34..0005acba2 100755 --- a/projects/bp-gallery/src/shared/locales/de.json +++ b/projects/bp-gallery/src/shared/locales/de.json @@ -373,7 +373,9 @@ "person-title": "Personen", "person-text": "Hier finden Sie alle Personen unseres Archiv", "location-title": "Orte", - "location-text": "Hier finden Sie alle Orte unseres Archivs" + "location-text": "Hier finden Sie alle Orte unseres Archivs", + "most-liked-title": "Bestbewertete Bilder", + "most-liked-text": "Hier finden sie die 500 bestbewerteten Bilder der Fotoarchive. Wer einen Überblick haben will, welche Bilder anderen Nutzern gefallen ist hier richtig." }, "discover": { "discover-button": "Stöbere in allen Archiven", @@ -381,6 +383,7 @@ "decades": "Jahrzehnte", "locations": "Orte", "more-info": "Wissen Sie mehr über diese Bilder?", - "our-categories": "Unsere Kategorien" + "our-categories": "Unsere Kategorien", + "most-liked": "Bestbewertete Bilder" } } From 6db9f5df1df43bef6b8a2d06cb8a69c754fc2a76 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Wed, 17 May 2023 11:50:14 +0200 Subject: [PATCH 07/27] add tooltips for tabs --- .../bp-gallery/src/components/common/OverviewContainer.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/projects/bp-gallery/src/components/common/OverviewContainer.tsx b/projects/bp-gallery/src/components/common/OverviewContainer.tsx index 9f776b2f9..6b01852ec 100644 --- a/projects/bp-gallery/src/components/common/OverviewContainer.tsx +++ b/projects/bp-gallery/src/components/common/OverviewContainer.tsx @@ -1,4 +1,4 @@ -import { IconProps, Tab, Tabs } from '@mui/material'; +import { IconProps, Tab, Tabs, Tooltip } from '@mui/material'; import { Children, PropsWithChildren, ReactElement, useState } from 'react'; const OverviewContainer = ({ @@ -21,7 +21,9 @@ const OverviewContainer = ({ }} > {icons.map((icon, index) => ( - + index ? titles[index] : ''}> + + ))}
From 6df6daec27b601836d2061c5e010a3a0390e25fe Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Wed, 17 May 2023 12:48:41 +0200 Subject: [PATCH 08/27] show scroll buttons on mobile --- projects/bp-gallery/src/components/common/OverviewContainer.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/bp-gallery/src/components/common/OverviewContainer.tsx b/projects/bp-gallery/src/components/common/OverviewContainer.tsx index 6b01852ec..873099840 100644 --- a/projects/bp-gallery/src/components/common/OverviewContainer.tsx +++ b/projects/bp-gallery/src/components/common/OverviewContainer.tsx @@ -15,6 +15,7 @@ const OverviewContainer = ({ {titles &&

{titles[tabIndex]}

} { setTabIndex(value as number); From c1d5ca18b26a094684b91f899b984cdd941d2907 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Wed, 17 May 2023 13:04:22 +0200 Subject: [PATCH 09/27] dont use Children anymore --- .../components/common/OverviewContainer.tsx | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/projects/bp-gallery/src/components/common/OverviewContainer.tsx b/projects/bp-gallery/src/components/common/OverviewContainer.tsx index 873099840..6036d47c5 100644 --- a/projects/bp-gallery/src/components/common/OverviewContainer.tsx +++ b/projects/bp-gallery/src/components/common/OverviewContainer.tsx @@ -1,18 +1,17 @@ import { IconProps, Tab, Tabs, Tooltip } from '@mui/material'; -import { Children, PropsWithChildren, ReactElement, useState } from 'react'; +import { ReactElement, useState } from 'react'; const OverviewContainer = ({ - titles, - icons, - children, -}: PropsWithChildren<{ titles?: string[]; icons: ReactElement[] }>) => { - const childrenArray = Children.toArray(children); + tabs, +}: { + tabs: { title: string; icon: ReactElement; content: ReactElement }[]; +}) => { const [tabIndex, setTabIndex] = useState(0); return (
- {titles &&

{titles[tabIndex]}

} +

{tabs[tabIndex].title}

- {icons.map((icon, index) => ( - index ? titles[index] : ''}> - + {tabs.map((tab, index) => ( + + ))}
- {childrenArray[tabIndex]} + {tabs[tabIndex].content}
); }; From 99ad2fcffaff11a2ea1cf37abfb2add735e83cf0 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Wed, 17 May 2023 13:08:35 +0200 Subject: [PATCH 10/27] remove unneccessary const --- projects/bp-gallery/src/components/common/TagOverview.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/projects/bp-gallery/src/components/common/TagOverview.tsx b/projects/bp-gallery/src/components/common/TagOverview.tsx index b5b62e72d..9f7439a66 100644 --- a/projects/bp-gallery/src/components/common/TagOverview.tsx +++ b/projects/bp-gallery/src/components/common/TagOverview.tsx @@ -49,8 +49,7 @@ const TagOverview = ({ }, []); const [rowLength, setRowLength] = useState(() => { - const initialState = calculateMaxCategoriesPerRow((ref.current?.clientWidth ?? 0) as number); - return initialState; + return calculateMaxCategoriesPerRow((ref.current?.clientWidth ?? 0) as number); }); const onResize = useCallback(() => { From 7ba9db54f465914a774c32dd3fe4e9690f129dff Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Wed, 17 May 2023 13:54:41 +0200 Subject: [PATCH 11/27] adjust to changes made to OverviewContainer --- .../components/views/archives/ArchiveView.tsx | 45 +++++++++++------- .../views/discover/DiscoverView.tsx | 46 ++++++++++++------- .../src/components/views/start/StartView.tsx | 45 +++++++++++------- .../bp-gallery/src/shared/locales/de.json | 5 +- 4 files changed, 88 insertions(+), 53 deletions(-) diff --git a/projects/bp-gallery/src/components/views/archives/ArchiveView.tsx b/projects/bp-gallery/src/components/views/archives/ArchiveView.tsx index c14b096bc..96e95a2fa 100644 --- a/projects/bp-gallery/src/components/views/archives/ArchiveView.tsx +++ b/projects/bp-gallery/src/components/views/archives/ArchiveView.tsx @@ -108,23 +108,34 @@ const ArchiveView = ({ archiveId }: ArchiveViewProps) => {
, ]} - > - { - visit('/archives/' + archiveId + '/show-more/pictures'); - }} - /> - { - visit('/archives/' + archiveId + '/show-more/most-liked'); - }} - sortBy={['likes:asc']} - /> - + tabs={[ + { + title: t('discover.our-pictures'), + icon: , + content: ( + { + visit('/archives/' + archiveId + '/show-more/pictures'); + }} + /> + ), + }, + { + title: t('discover.most-liked'), + icon: , + content: ( + { + visit('/archives/' + archiveId + '/show-more/most-liked'); + }} + sortBy={['likes:asc']} + /> + ), + }, + ]} + /> {
, ]} - > - { - visit('/show-more/latest'); - }} - /> - { - visit('/show-more/most-liked'); - }} - sortBy={['likes:asc']} - /> - + tabs={[ + { + title: t('discover.latest-pictures'), + icon: , + content: ( + { + visit('/show-more/latest'); + }} + /> + ), + }, + { + title: t('discover.most-liked'), + icon: , + content: ( + { + visit('/show-more/most-liked'); + }} + sortBy={['likes:asc']} + /> + ), + }, + ]} + /> + { , ]} - > - { - visit('/show-more/latest'); - }} - /> - { - visit('/show-more/most-liked'); - }} - sortBy={['likes:asc']} - /> - + tabs={[ + { + title: t('discover.latest-pictures'), + icon: , + content: ( + { + visit('/show-more/latest'); + }} + /> + ), + }, + { + title: t('discover.most-liked'), + icon: , + content: ( + { + visit('/show-more/most-liked'); + }} + sortBy={['likes:asc']} + /> + ), + }, + ]} + />

{t('startpage.our-archives')}

{archiveCards}
diff --git a/projects/bp-gallery/src/shared/locales/de.json b/projects/bp-gallery/src/shared/locales/de.json index 0005acba2..e4c4eff2c 100755 --- a/projects/bp-gallery/src/shared/locales/de.json +++ b/projects/bp-gallery/src/shared/locales/de.json @@ -375,7 +375,7 @@ "location-title": "Orte", "location-text": "Hier finden Sie alle Orte unseres Archivs", "most-liked-title": "Bestbewertete Bilder", - "most-liked-text": "Hier finden sie die 500 bestbewerteten Bilder der Fotoarchive. Wer einen Überblick haben will, welche Bilder anderen Nutzern gefallen ist hier richtig." + "most-liked-text": "Hier finden sie die 500 bestbewerteten Bilder. Wer einen Überblick haben will, welche Bilder anderen Nutzern besonders gut gefallen ist hier richtig." }, "discover": { "discover-button": "Stöbere in allen Archiven", @@ -384,6 +384,7 @@ "locations": "Orte", "more-info": "Wissen Sie mehr über diese Bilder?", "our-categories": "Unsere Kategorien", - "most-liked": "Bestbewertete Bilder" + "most-liked": "Bestbewertete Bilder", + "our-pictures": "Unsere Bilder" } } From 876d22be9013f7e0ae32933888ee2353cf567524 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Wed, 17 May 2023 14:36:06 +0200 Subject: [PATCH 12/27] correct sorting order for most liked, make it work for staging --- .../bp-gallery/src/components/views/archives/ArchiveView.tsx | 5 +++-- .../src/components/views/discover/DiscoverView.tsx | 5 +++-- .../src/components/views/show-more/ShowMoreView.tsx | 2 +- .../views/show-more/helpers/queryParams-helpers.tsx | 4 ++++ projects/bp-gallery/src/components/views/start/StartView.tsx | 5 +++-- projects/bp-gallery/src/hooks/get-pictures.hook.ts | 1 - 6 files changed, 14 insertions(+), 8 deletions(-) diff --git a/projects/bp-gallery/src/components/views/archives/ArchiveView.tsx b/projects/bp-gallery/src/components/views/archives/ArchiveView.tsx index 96e95a2fa..1e2f98972 100644 --- a/projects/bp-gallery/src/components/views/archives/ArchiveView.tsx +++ b/projects/bp-gallery/src/components/views/archives/ArchiveView.tsx @@ -118,6 +118,7 @@ const ArchiveView = ({ archiveId }: ArchiveViewProps) => { onClick={() => { visit('/archives/' + archiveId + '/show-more/pictures'); }} + sortBy={['createdAt:desc']} /> ), }, @@ -126,11 +127,11 @@ const ArchiveView = ({ archiveId }: ArchiveViewProps) => { icon: , content: ( { visit('/archives/' + archiveId + '/show-more/most-liked'); }} - sortBy={['likes:asc']} + sortBy={['likes:desc']} /> ), }, diff --git a/projects/bp-gallery/src/components/views/discover/DiscoverView.tsx b/projects/bp-gallery/src/components/views/discover/DiscoverView.tsx index 40d7fe031..d52bfc7da 100644 --- a/projects/bp-gallery/src/components/views/discover/DiscoverView.tsx +++ b/projects/bp-gallery/src/components/views/discover/DiscoverView.tsx @@ -26,6 +26,7 @@ const DiscoverView = () => { onClick={() => { visit('/show-more/latest'); }} + sortBy={['createdAt:desc']} /> ), }, @@ -34,11 +35,11 @@ const DiscoverView = () => { icon: , content: ( { visit('/show-more/most-liked'); }} - sortBy={['likes:asc']} + sortBy={['likes:desc']} /> ), }, diff --git a/projects/bp-gallery/src/components/views/show-more/ShowMoreView.tsx b/projects/bp-gallery/src/components/views/show-more/ShowMoreView.tsx index 756020354..4f5dd4316 100644 --- a/projects/bp-gallery/src/components/views/show-more/ShowMoreView.tsx +++ b/projects/bp-gallery/src/components/views/show-more/ShowMoreView.tsx @@ -80,7 +80,7 @@ const ShowMoreView = ({ categoryType !== 'pictures' && categoryId ? ['time_range_tag.start:asc'] : categoryType === 'most-liked' - ? ['likes:asc'] + ? ['likes:desc'] : ['createdAt:desc'] } hashbase={'show-more'} diff --git a/projects/bp-gallery/src/components/views/show-more/helpers/queryParams-helpers.tsx b/projects/bp-gallery/src/components/views/show-more/helpers/queryParams-helpers.tsx index 9793a7014..8d0db198f 100644 --- a/projects/bp-gallery/src/components/views/show-more/helpers/queryParams-helpers.tsx +++ b/projects/bp-gallery/src/components/views/show-more/helpers/queryParams-helpers.tsx @@ -74,6 +74,10 @@ export const getPictureQueryParams = ( ? { id: { not: { eq: '-1' } } } // make sure all images get fetched : { archive_tag: { id: { eq: archiveId } }, id: { not: { eq: '-1' } } }; } + } else if (categoryType === 'most-liked') { + return !archiveId + ? { likes: { ne: null }, id: { not: { eq: '-1' } } } + : { archive_tag: { id: { eq: archiveId } }, likes: { ne: null }, id: { not: { eq: '-1' } } }; } else if (categoryId) { return categoryQueryParams(categoryType, categoryId, archiveId); } else { diff --git a/projects/bp-gallery/src/components/views/start/StartView.tsx b/projects/bp-gallery/src/components/views/start/StartView.tsx index f397da813..61cf5865e 100644 --- a/projects/bp-gallery/src/components/views/start/StartView.tsx +++ b/projects/bp-gallery/src/components/views/start/StartView.tsx @@ -112,6 +112,7 @@ const StartView = () => { onClick={() => { visit('/show-more/latest'); }} + sortBy={['createdAt:desc']} /> ), }, @@ -120,11 +121,11 @@ const StartView = () => { icon: , content: ( { visit('/show-more/most-liked'); }} - sortBy={['likes:asc']} + sortBy={['likes:desc']} /> ), }, diff --git a/projects/bp-gallery/src/hooks/get-pictures.hook.ts b/projects/bp-gallery/src/hooks/get-pictures.hook.ts index 1702bebad..cd89480b7 100644 --- a/projects/bp-gallery/src/hooks/get-pictures.hook.ts +++ b/projects/bp-gallery/src/hooks/get-pictures.hook.ts @@ -44,7 +44,6 @@ const useGetPictures = ( : (queryParams as PictureFiltersInput); }, [filterOutTexts, queryParams]); const queryResult = useGetPicturesQuery({ - fetchPolicy: 'no-cache', variables: { filters, pagination: { From dcc8121d46bacf35aa6c2ca1c7a03cb0dbb8a3c2 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Wed, 17 May 2023 15:12:10 +0200 Subject: [PATCH 13/27] support to set default option --- .../bp-gallery/src/components/common/OverviewContainer.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/projects/bp-gallery/src/components/common/OverviewContainer.tsx b/projects/bp-gallery/src/components/common/OverviewContainer.tsx index 6036d47c5..630ddcffe 100644 --- a/projects/bp-gallery/src/components/common/OverviewContainer.tsx +++ b/projects/bp-gallery/src/components/common/OverviewContainer.tsx @@ -2,11 +2,13 @@ import { IconProps, Tab, Tabs, Tooltip } from '@mui/material'; import { ReactElement, useState } from 'react'; const OverviewContainer = ({ + defaultValue = 0, tabs, }: { + defaultValue: number; tabs: { title: string; icon: ReactElement; content: ReactElement }[]; }) => { - const [tabIndex, setTabIndex] = useState(0); + const [tabIndex, setTabIndex] = useState(defaultValue); return (
From 2947b5a19af39d6bba3739fa8d6d23cbedc1c344 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Wed, 17 May 2023 15:21:13 +0200 Subject: [PATCH 14/27] make default option optional --- .../bp-gallery/src/components/common/OverviewContainer.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/bp-gallery/src/components/common/OverviewContainer.tsx b/projects/bp-gallery/src/components/common/OverviewContainer.tsx index 630ddcffe..c4d4011d5 100644 --- a/projects/bp-gallery/src/components/common/OverviewContainer.tsx +++ b/projects/bp-gallery/src/components/common/OverviewContainer.tsx @@ -2,13 +2,13 @@ import { IconProps, Tab, Tabs, Tooltip } from '@mui/material'; import { ReactElement, useState } from 'react'; const OverviewContainer = ({ - defaultValue = 0, tabs, + defaultValue, }: { - defaultValue: number; tabs: { title: string; icon: ReactElement; content: ReactElement }[]; + defaultValue?: number; }) => { - const [tabIndex, setTabIndex] = useState(defaultValue); + const [tabIndex, setTabIndex] = useState(defaultValue ?? 0); return (
From 085d30d98aa0b98c67ad0e14250ab066f9957357 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Wed, 17 May 2023 15:33:15 +0200 Subject: [PATCH 15/27] show most liked as default option on start page --- projects/bp-gallery/src/components/views/start/StartView.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/bp-gallery/src/components/views/start/StartView.tsx b/projects/bp-gallery/src/components/views/start/StartView.tsx index 61cf5865e..5f2b3f375 100644 --- a/projects/bp-gallery/src/components/views/start/StartView.tsx +++ b/projects/bp-gallery/src/components/views/start/StartView.tsx @@ -102,6 +102,7 @@ const StartView = () => { Date: Mon, 22 May 2023 15:41:02 +0200 Subject: [PATCH 16/27] add support for live updates for most liked pictures in overview --- .../src/components/common/PictureOverview.tsx | 50 ++++++-- .../components/views/archives/ArchiveView.tsx | 14 +- .../views/discover/DiscoverView.tsx | 7 +- .../views/picture/sidebar/like-hooks.tsx | 2 +- .../src/components/views/start/StartView.tsx | 7 +- .../bp-gallery/src/graphql/APIConnector.tsx | 121 ++++++++++++++++++ .../bp-gallery/src/graphql/operation.graphql | 1 + .../bp-gallery/src/helpers/app-helpers.ts | 2 +- .../src/hooks/generic-picture-endpoints.ts | 20 +++ .../src/types/additionalFlatTypes.ts | 5 + .../src/operations/getMostLikedPictures.ts | 39 ++++++ 11 files changed, 243 insertions(+), 25 deletions(-) mode change 100755 => 100644 projects/bp-gallery/src/graphql/operation.graphql create mode 100644 projects/bp-gallery/src/hooks/generic-picture-endpoints.ts create mode 100644 projects/bp-graphql/src/operations/getMostLikedPictures.ts diff --git a/projects/bp-gallery/src/components/common/PictureOverview.tsx b/projects/bp-gallery/src/components/common/PictureOverview.tsx index 4337c47c1..2ff8f6bd2 100644 --- a/projects/bp-gallery/src/components/common/PictureOverview.tsx +++ b/projects/bp-gallery/src/components/common/PictureOverview.tsx @@ -1,12 +1,12 @@ import React, { MouseEventHandler } from 'react'; import './PictureOverview.scss'; import PictureGrid from './picture-gallery/PictureGrid'; -import { useSimplifiedQueryResponseData } from '../../graphql/queryUtils'; import { PictureFiltersInput } from '../../graphql/APIConnector'; -import { FlatPicture } from '../../types/additionalFlatTypes'; +import { FlatPicture, PictureOverviewType } from '../../types/additionalFlatTypes'; import { useTranslation } from 'react-i18next'; -import useGetPictures from '../../hooks/get-pictures.hook'; import PrimaryButton from './PrimaryButton'; +import { useSimplifiedQueryResponseData } from '../../graphql/queryUtils'; +import useGenericPictureEndpoints from '../../hooks/generic-picture-endpoints'; interface PictureOverviewProps { title?: string; @@ -14,6 +14,7 @@ interface PictureOverviewProps { onClick: MouseEventHandler; sortBy?: string[]; rows?: number; + type?: PictureOverviewType; } const ABSOLUTE_MAX_PICTURES_PER_ROW = 6; @@ -24,18 +25,45 @@ const PictureOverview = ({ onClick, sortBy, rows = 2, + type = PictureOverviewType.CUSTOM, }: PictureOverviewProps) => { const { t } = useTranslation(); - const { data, loading, refetch } = useGetPictures( - queryParams, - false, - sortBy, - true, - ABSOLUTE_MAX_PICTURES_PER_ROW * rows - ); + const { getPicturesQuery } = useGenericPictureEndpoints(type); + + const { data, loading, refetch } = getPicturesQuery({ + variables: { + filters: { + and: [ + { + or: [ + { + is_text: { + eq: false, + }, + }, + { + is_text: { + null: true, + }, + }, + ], + }, + queryParams as PictureFiltersInput, + ], + }, + pagination: { + start: 0, + limit: ABSOLUTE_MAX_PICTURES_PER_ROW * rows, + }, + sortBy, + }, + fetchPolicy: 'network-only', + }); - const pictures: FlatPicture[] | undefined = useSimplifiedQueryResponseData(data)?.pictures; + const pictures: FlatPicture[] | undefined = useSimplifiedQueryResponseData( + data as { [key: string]: any } | undefined + )?.pictures; return (
diff --git a/projects/bp-gallery/src/components/views/archives/ArchiveView.tsx b/projects/bp-gallery/src/components/views/archives/ArchiveView.tsx index 1e2f98972..61e186b9e 100644 --- a/projects/bp-gallery/src/components/views/archives/ArchiveView.tsx +++ b/projects/bp-gallery/src/components/views/archives/ArchiveView.tsx @@ -4,7 +4,12 @@ import { Redirect } from 'react-router-dom'; import { useGetArchiveQuery } from '../../../graphql/APIConnector'; import { useSimplifiedQueryResponseData } from '../../../graphql/queryUtils'; import { asUploadPath } from '../../../helpers/app-helpers'; -import { FlatArchiveTag, FlatPicture, TagType } from '../../../types/additionalFlatTypes'; +import { + FlatArchiveTag, + FlatPicture, + PictureOverviewType, + TagType, +} from '../../../types/additionalFlatTypes'; import PictureOverview from '../../common/PictureOverview'; import TagOverview from '../../common/TagOverview'; import PicturePreview from '../../common/picture-gallery/PicturePreview'; @@ -118,7 +123,6 @@ const ArchiveView = ({ archiveId }: ArchiveViewProps) => { onClick={() => { visit('/archives/' + archiveId + '/show-more/pictures'); }} - sortBy={['createdAt:desc']} /> ), }, @@ -127,11 +131,13 @@ const ArchiveView = ({ archiveId }: ArchiveViewProps) => { icon: , content: ( { visit('/archives/' + archiveId + '/show-more/most-liked'); }} - sortBy={['likes:desc']} /> ), }, diff --git a/projects/bp-gallery/src/components/views/discover/DiscoverView.tsx b/projects/bp-gallery/src/components/views/discover/DiscoverView.tsx index d52bfc7da..7e51e05ee 100644 --- a/projects/bp-gallery/src/components/views/discover/DiscoverView.tsx +++ b/projects/bp-gallery/src/components/views/discover/DiscoverView.tsx @@ -1,6 +1,6 @@ import { useTranslation } from 'react-i18next'; import { useVisit } from '../../../helpers/history'; -import { TagType } from '../../../types/additionalFlatTypes'; +import { PictureOverviewType, TagType } from '../../../types/additionalFlatTypes'; import PictureOverview from '../../common/PictureOverview'; import TagOverview from '../../common/TagOverview'; import { ShowStats } from '../../provider/ShowStatsProvider'; @@ -26,7 +26,6 @@ const DiscoverView = () => { onClick={() => { visit('/show-more/latest'); }} - sortBy={['createdAt:desc']} /> ), }, @@ -35,11 +34,11 @@ const DiscoverView = () => { icon: , content: ( { visit('/show-more/most-liked'); }} - sortBy={['likes:desc']} /> ), }, diff --git a/projects/bp-gallery/src/components/views/picture/sidebar/like-hooks.tsx b/projects/bp-gallery/src/components/views/picture/sidebar/like-hooks.tsx index b9150618c..1d88af05c 100644 --- a/projects/bp-gallery/src/components/views/picture/sidebar/like-hooks.tsx +++ b/projects/bp-gallery/src/components/views/picture/sidebar/like-hooks.tsx @@ -26,7 +26,7 @@ const useLike = (pictureId: string, likeCount: number) => { const [likeMutation] = useLikeMutation({ variables: { pictureId: pictureId }, - refetchQueries: ['getPictureInfo'], + refetchQueries: ['getPictureInfo', 'getMostLikedPictures'], }); const like = useCallback( diff --git a/projects/bp-gallery/src/components/views/start/StartView.tsx b/projects/bp-gallery/src/components/views/start/StartView.tsx index 5f2b3f375..b4149ac76 100644 --- a/projects/bp-gallery/src/components/views/start/StartView.tsx +++ b/projects/bp-gallery/src/components/views/start/StartView.tsx @@ -7,7 +7,7 @@ import { import { useSimplifiedQueryResponseData } from '../../../graphql/queryUtils'; import { useVariant } from '../../../helpers/growthbook'; import { useMobile } from '../../../hooks/context-hooks'; -import { FlatArchiveTag } from '../../../types/additionalFlatTypes'; +import { FlatArchiveTag, PictureOverviewType } from '../../../types/additionalFlatTypes'; import DonateButton from '../../common/DonateButton'; import { IfFlagEnabled } from '../../common/IfFlagEnabled'; import PictureOverview from '../../common/PictureOverview'; @@ -113,7 +113,6 @@ const StartView = () => { onClick={() => { visit('/show-more/latest'); }} - sortBy={['createdAt:desc']} /> ), }, @@ -122,11 +121,11 @@ const StartView = () => { icon: , content: ( { visit('/show-more/most-liked'); }} - sortBy={['likes:desc']} /> ), }, diff --git a/projects/bp-gallery/src/graphql/APIConnector.tsx b/projects/bp-gallery/src/graphql/APIConnector.tsx index 2b4eb3abc..a12a0e14b 100644 --- a/projects/bp-gallery/src/graphql/APIConnector.tsx +++ b/projects/bp-gallery/src/graphql/APIConnector.tsx @@ -2499,6 +2499,37 @@ export type GetLocationTagsWithThumbnailQuery = { } | null; }; +export type GetMostLikedPicturesQueryVariables = Exact<{ + filters: PictureFiltersInput; + pagination: PaginationArg; +}>; + +export type GetMostLikedPicturesQuery = { + pictures?: { + data: Array<{ + id?: string | null; + attributes?: { + is_text?: boolean | null; + likes?: number | null; + comments?: { data: Array<{ id?: string | null }> } | null; + media: { + data?: { + id?: string | null; + attributes?: { + width?: number | null; + height?: number | null; + formats?: any | null; + url: string; + updatedAt?: any | null; + provider: string; + } | null; + } | null; + }; + } | null; + }>; + } | null; +}; + export type GetMultiplePictureInfoQueryVariables = Exact<{ pictureIds?: InputMaybe | Scalars['ID']>; }>; @@ -4546,6 +4577,96 @@ export type GetLocationTagsWithThumbnailQueryResult = Apollo.QueryResult< GetLocationTagsWithThumbnailQueryVariables >; +export const GetMostLikedPicturesDocument = gql` + query getMostLikedPictures($filters: PictureFiltersInput!, $pagination: PaginationArg!) { + pictures( + filters: { and: [{ likes: { ne: null } }, $filters] } + pagination: $pagination + sort: ["likes:desc"] + ) { + data { + id + attributes { + is_text + comments { + data { + id + } + } + likes + media { + data { + id + attributes { + width + height + formats + url + updatedAt + provider + } + } + } + } + } + } + } +`; + +/** + * __useGetMostLikedPicturesQuery__ + * + * To run a query within a React component, call `useGetMostLikedPicturesQuery` and pass it any options that fit your needs. + * When your component renders, `useGetMostLikedPicturesQuery` returns an object from Apollo Client that contains loading, error, and data properties + * you can use to render your UI. + * + * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; + * + * @example + * const { data, loading, error } = useGetMostLikedPicturesQuery({ + * variables: { + * filters: // value for 'filters' + * pagination: // value for 'pagination' + * }, + * }); + */ +export function useGetMostLikedPicturesQuery( + baseOptions: Apollo.QueryHookOptions< + GetMostLikedPicturesQuery, + GetMostLikedPicturesQueryVariables + > +) { + const options = { ...defaultOptions, ...baseOptions }; + return Apollo.useQuery( + GetMostLikedPicturesDocument, + options + ); +} + +export function useGetMostLikedPicturesLazyQuery( + baseOptions?: Apollo.LazyQueryHookOptions< + GetMostLikedPicturesQuery, + GetMostLikedPicturesQueryVariables + > +) { + const options = { ...defaultOptions, ...baseOptions }; + return Apollo.useLazyQuery( + GetMostLikedPicturesDocument, + options + ); +} + +export type GetMostLikedPicturesQueryHookResult = ReturnType; + +export type GetMostLikedPicturesLazyQueryHookResult = ReturnType< + typeof useGetMostLikedPicturesLazyQuery +>; + +export type GetMostLikedPicturesQueryResult = Apollo.QueryResult< + GetMostLikedPicturesQuery, + GetMostLikedPicturesQueryVariables +>; + export const GetMultiplePictureInfoDocument = gql` query getMultiplePictureInfo($pictureIds: [ID!]) { pictures(filters: { id: { in: $pictureIds } }) { diff --git a/projects/bp-gallery/src/graphql/operation.graphql b/projects/bp-gallery/src/graphql/operation.graphql old mode 100755 new mode 100644 index 6ca6cd147..a8e1b0b85 --- a/projects/bp-gallery/src/graphql/operation.graphql +++ b/projects/bp-gallery/src/graphql/operation.graphql @@ -13,6 +13,7 @@ query getDecadePreviewThumbnails( $filter40s: PictureFiltersInput! $filter50s: P query getFaceTags($pictureId: ID!) { faceTags(filters: { picture: { id: { eq: $pictureId } } }) { data { id attributes { x y tag_direction person_tag { data { id attributes { name } } } } } } } query getKeywordTagsWithThumbnail( $filters: KeywordTagFiltersInput = {} $thumbnailFilters: PictureFiltersInput = {} $start: Int $limit: Int $sortBy: [String] ) { keywordTags(filters: $filters pagination: { start: $start limit: $limit } sort: $sortBy) { data { id attributes { name thumbnail: pictures(filters: $thumbnailFilters pagination: { limit: 1 }) { data { attributes { media { data { attributes { formats provider } } } } } } verified_thumbnail: verified_pictures( filters: $thumbnailFilters pagination: { limit: 1 } ) { data { attributes { media { data { attributes { formats provider } } } } } } } } } } query getLocationTagsWithThumbnail( $filters: LocationTagFiltersInput = {} $thumbnailFilters: PictureFiltersInput = {} $start: Int $limit: Int $sortBy: [String] ) { locationTags(filters: $filters pagination: { start: $start limit: $limit } sort: $sortBy) { data { id attributes { name thumbnail: pictures(filters: $thumbnailFilters pagination: { limit: 1 }) { data { attributes { media { data { attributes { formats provider } } } } } } verified_thumbnail: verified_pictures( filters: $thumbnailFilters pagination: { limit: 1 } ) { data { attributes { media { data { attributes { formats provider } } } } } } } } } } +query getMostLikedPictures($filters: PictureFiltersInput! $pagination: PaginationArg!) { pictures( filters: { and: [{ likes: { ne: null } } $filters] } pagination: $pagination sort: ["likes:desc"] ) { data { id attributes { is_text comments { data { id } } likes media { data { id attributes { width height formats url updatedAt provider } } } } } } } query getMultiplePictureInfo($pictureIds: [ID!]) { pictures(filters: { id: { in: $pictureIds } }) { data { id attributes { descriptions(sort: "createdAt:asc") { data { id attributes { text } } } time_range_tag { data { id attributes { start end isEstimate } } } verified_time_range_tag { data { id attributes { start end isEstimate } } } keyword_tags(sort: "updatedAt:asc") { data { id attributes { name updatedAt } } } verified_keyword_tags(sort: "updatedAt:asc") { data { id attributes { name updatedAt } } } location_tags(sort: "updatedAt:asc") { data { id attributes { name updatedAt } } } verified_location_tags(sort: "updatedAt:asc") { data { id attributes { name updatedAt } } } person_tags(sort: "updatedAt:asc") { data { id attributes { name updatedAt } } } verified_person_tags(sort: "updatedAt:asc") { data { id attributes { name updatedAt } } } collections(publicationState: PREVIEW) { data { id attributes { name } } } media { data { id attributes { url updatedAt provider } } } comments(publicationState: PREVIEW sort: "date:asc") { data { id attributes { text author date publishedAt pinned } } } is_text linked_pictures { data { id } } linked_texts { data { id } } archive_tag { data { id attributes { name } } } } } } } query getPersonTag($id: ID!) { personTag(id: $id) { data { attributes { name } } } } query getPersonTagsWithThumbnail( $filters: PersonTagFiltersInput = {} $thumbnailFilters: PictureFiltersInput = {} $start: Int $limit: Int $sortBy: [String] ) { personTags(filters: $filters pagination: { start: $start limit: $limit } sort: $sortBy) { data { id attributes { name thumbnail: pictures(filters: $thumbnailFilters pagination: { limit: 1 }) { data { attributes { media { data { attributes { formats url provider } } } } } } verified_thumbnail: verified_pictures( filters: $thumbnailFilters pagination: { limit: 1 } ) { data { attributes { media { data { attributes { formats url provider } } } } } } } } } } diff --git a/projects/bp-gallery/src/helpers/app-helpers.ts b/projects/bp-gallery/src/helpers/app-helpers.ts index 9e7295af5..2bf5ae8a7 100644 --- a/projects/bp-gallery/src/helpers/app-helpers.ts +++ b/projects/bp-gallery/src/helpers/app-helpers.ts @@ -92,7 +92,7 @@ type Ref = { __ref: string }; type MergeInput = { __typename: string; data: Ref[] }; export const mergeByRef = (existing: Ref[] | undefined = undefined, incoming: Ref[]): Ref[] => - unionWith(existing ?? [], incoming, (a, b) => a.__ref === b.__ref); + unionWith(incoming, existing ?? [], (a, b) => a.__ref === b.__ref); export const mergeByRefWrappedInData = ( existing: MergeInput | undefined = undefined, diff --git a/projects/bp-gallery/src/hooks/generic-picture-endpoints.ts b/projects/bp-gallery/src/hooks/generic-picture-endpoints.ts new file mode 100644 index 000000000..5e121af30 --- /dev/null +++ b/projects/bp-gallery/src/hooks/generic-picture-endpoints.ts @@ -0,0 +1,20 @@ +import { useMemo } from 'react'; +import { useGetMostLikedPicturesQuery, useGetPicturesQuery } from '../graphql/APIConnector'; +import { PictureOverviewType } from '../types/additionalFlatTypes'; + +const useGenericPictureEndpoints = (type: PictureOverviewType) => { + return useMemo(() => { + switch (type) { + case PictureOverviewType.MOST_LIKED: + return { + getPicturesQuery: useGetMostLikedPicturesQuery, + }; + default: + return { + getPicturesQuery: useGetPicturesQuery, + }; + } + }, [type]); +}; + +export default useGenericPictureEndpoints; diff --git a/projects/bp-gallery/src/types/additionalFlatTypes.ts b/projects/bp-gallery/src/types/additionalFlatTypes.ts index 976662e6d..c07802ce3 100755 --- a/projects/bp-gallery/src/types/additionalFlatTypes.ts +++ b/projects/bp-gallery/src/types/additionalFlatTypes.ts @@ -153,3 +153,8 @@ export enum TagType { TIME_RANGE = 'date', ARCHIVE = 'archive', } + +export enum PictureOverviewType { + MOST_LIKED = 'most-liked', + CUSTOM = 'custom', +} diff --git a/projects/bp-graphql/src/operations/getMostLikedPictures.ts b/projects/bp-graphql/src/operations/getMostLikedPictures.ts new file mode 100644 index 000000000..68f6aae31 --- /dev/null +++ b/projects/bp-graphql/src/operations/getMostLikedPictures.ts @@ -0,0 +1,39 @@ +import { Operation, graphql } from '../Operation.js'; + +export default { + document: graphql` + query getMostLikedPictures($filters: PictureFiltersInput!, $pagination: PaginationArg!) { + pictures( + filters: { and: [{ likes: { ne: null } }, $filters] } + pagination: $pagination + sort: ["likes:desc"] + ) { + data { + id + attributes { + is_text + comments { + data { + id + } + } + likes + media { + data { + id + attributes { + width + height + formats + url + updatedAt + provider + } + } + } + } + } + } + } + `, +} satisfies Operation; From 184a11a82cd283084567d1341f77b2cb486ad3b9 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Mon, 22 May 2023 16:09:19 +0200 Subject: [PATCH 17/27] requested changes --- .../src/components/common/OverviewContainer.tsx | 12 +++++++++--- .../bp-gallery/src/components/common/TagOverview.tsx | 8 ++++---- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/projects/bp-gallery/src/components/common/OverviewContainer.tsx b/projects/bp-gallery/src/components/common/OverviewContainer.tsx index c4d4011d5..c402ea967 100644 --- a/projects/bp-gallery/src/components/common/OverviewContainer.tsx +++ b/projects/bp-gallery/src/components/common/OverviewContainer.tsx @@ -1,14 +1,20 @@ import { IconProps, Tab, Tabs, Tooltip } from '@mui/material'; import { ReactElement, useState } from 'react'; +export interface OverviewContainerTab { + title: string; + icon: ReactElement; + content: ReactElement; +} + const OverviewContainer = ({ tabs, - defaultValue, + defaultValue = 0, }: { - tabs: { title: string; icon: ReactElement; content: ReactElement }[]; + tabs: OverviewContainerTab[]; defaultValue?: number; }) => { - const [tabIndex, setTabIndex] = useState(defaultValue ?? 0); + const [tabIndex, setTabIndex] = useState(defaultValue); return (
diff --git a/projects/bp-gallery/src/components/common/TagOverview.tsx b/projects/bp-gallery/src/components/common/TagOverview.tsx index 9f7439a66..68e92a324 100644 --- a/projects/bp-gallery/src/components/common/TagOverview.tsx +++ b/projects/bp-gallery/src/components/common/TagOverview.tsx @@ -34,7 +34,7 @@ const TagOverview = ({ archiveId, }: TagOverviewProps) => { const { t } = useTranslation(); - const ref = useRef(); + const ref = useRef(null); const basePath = archiveId ? '/archives/' + archiveId + '/show-more/' + type + '/' @@ -49,16 +49,16 @@ const TagOverview = ({ }, []); const [rowLength, setRowLength] = useState(() => { - return calculateMaxCategoriesPerRow((ref.current?.clientWidth ?? 0) as number); + return calculateMaxCategoriesPerRow(ref.current?.clientWidth ?? 0); }); const onResize = useCallback(() => { - setRowLength(calculateMaxCategoriesPerRow((ref.current?.clientWidth ?? 0) as number)); + setRowLength(calculateMaxCategoriesPerRow(ref.current?.clientWidth ?? 0)); }, [calculateMaxCategoriesPerRow]); //ensure correct set up of useEffect(() => { - setRowLength(calculateMaxCategoriesPerRow((ref.current?.clientWidth ?? 0) as number)); + setRowLength(calculateMaxCategoriesPerRow(ref.current?.clientWidth ?? 0)); }, [ref.current?.clientWidth, calculateMaxCategoriesPerRow]); // Set up eventListener on mount and cleanup on unmount From 4d10d8b3dc9450c79d2dcef2965cf54571b049d6 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Mon, 22 May 2023 19:09:19 +0200 Subject: [PATCH 18/27] fix some tests --- .../bp-gallery/cypress/e2e/archives.cy.ts | 6 ++- .../cypress/e2e/bulk-edit/helper.ts | 2 +- .../bp-gallery/cypress/e2e/discover.cy.ts | 2 +- .../bp-gallery/cypress/e2e/show-more.cy.ts | 6 ++- .../src/components/common/PictureOverview.tsx | 49 +++++++++++-------- .../bp-gallery/src/helpers/app-helpers.ts | 2 +- 6 files changed, 40 insertions(+), 27 deletions(-) diff --git a/projects/bp-gallery/cypress/e2e/archives.cy.ts b/projects/bp-gallery/cypress/e2e/archives.cy.ts index 8261caa26..14bbe4888 100644 --- a/projects/bp-gallery/cypress/e2e/archives.cy.ts +++ b/projects/bp-gallery/cypress/e2e/archives.cy.ts @@ -78,7 +78,9 @@ describe('Archives View', () => { }); it('successfully sets an image as showcase picture when pressing on the star button via "Unsere Bilder"', () => { - cy.get('.overview-container:contains(Unsere Bilder)').contains('Mehr anzeigen').click(); + cy.get('.overview-selection-container:contains(Unsere Bilder)') + .contains('Mehr anzeigen') + .click(); cy.get(`[data-testid="StarIcon"]:first`).click(); cy.contains('Zurück').click(); cy.get('.archive-showcase #picture-preview-for-5').should('exist'); @@ -98,7 +100,7 @@ describe('Archives View', () => { it('shows "Unsere Bilder" picture overview', () => { // check for basic components (title, show more button) - cy.get('.overview-container:contains(Unsere Bilder)').contains('Mehr anzeigen'); + cy.get('.overview-selection-container:contains(Unsere Bilder)').contains('Mehr anzeigen'); // check if it contains rows with images cy.get( diff --git a/projects/bp-gallery/cypress/e2e/bulk-edit/helper.ts b/projects/bp-gallery/cypress/e2e/bulk-edit/helper.ts index db19dd884..2418b26bf 100644 --- a/projects/bp-gallery/cypress/e2e/bulk-edit/helper.ts +++ b/projects/bp-gallery/cypress/e2e/bulk-edit/helper.ts @@ -6,5 +6,5 @@ export const selectPictures = (...ids: string[]) => { export const visitArchive1Pictures = () => { cy.visit('/archives/1'); - cy.contains('.overview-container', 'Unsere Bilder').contains('Mehr anzeigen').click(); + cy.contains('.overview-selection-container', 'Unsere Bilder').contains('Mehr anzeigen').click(); }; diff --git a/projects/bp-gallery/cypress/e2e/discover.cy.ts b/projects/bp-gallery/cypress/e2e/discover.cy.ts index d6e9c7358..8e0c65e49 100644 --- a/projects/bp-gallery/cypress/e2e/discover.cy.ts +++ b/projects/bp-gallery/cypress/e2e/discover.cy.ts @@ -9,7 +9,7 @@ describe('Discover View', () => { it('shows "Neuzugänge" picture overview', () => { // check for basic components (title, show more button) - cy.get('.overview-container:first') + cy.get('.overview-selection-container:first') .children() .should('contain.text', 'Neuzugänge') .and('contain.text', 'Mehr anzeigen'); diff --git a/projects/bp-gallery/cypress/e2e/show-more.cy.ts b/projects/bp-gallery/cypress/e2e/show-more.cy.ts index 821064d93..908f46f24 100644 --- a/projects/bp-gallery/cypress/e2e/show-more.cy.ts +++ b/projects/bp-gallery/cypress/e2e/show-more.cy.ts @@ -6,7 +6,7 @@ describe('Navigation to Show More View from Discover View', () => { }); it('works for "Neuzugänge"', () => { - cy.get('.overview-container:contains(Neuzugänge)').contains('Mehr anzeigen').click(); + cy.get('.overview-selection-container:contains(Neuzugänge)').contains('Mehr anzeigen').click(); urlIs('/show-more/latest'); }); @@ -76,7 +76,9 @@ describe('Navigation to Show More View from Archive View', () => { }); it('works for "Unsere Bilder"', () => { - cy.get('.overview-container:contains(Unsere Bilder)').contains('Mehr anzeigen').click(); + cy.get('.overview-selection-container:contains(Unsere Bilder)') + .contains('Mehr anzeigen') + .click(); urlIs('/archives/1/show-more/pictures'); }); diff --git a/projects/bp-gallery/src/components/common/PictureOverview.tsx b/projects/bp-gallery/src/components/common/PictureOverview.tsx index 2ff8f6bd2..78207df18 100644 --- a/projects/bp-gallery/src/components/common/PictureOverview.tsx +++ b/projects/bp-gallery/src/components/common/PictureOverview.tsx @@ -1,4 +1,4 @@ -import React, { MouseEventHandler } from 'react'; +import React, { MouseEventHandler, useMemo } from 'react'; import './PictureOverview.scss'; import PictureGrid from './picture-gallery/PictureGrid'; import { PictureFiltersInput } from '../../graphql/APIConnector'; @@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next'; import PrimaryButton from './PrimaryButton'; import { useSimplifiedQueryResponseData } from '../../graphql/queryUtils'; import useGenericPictureEndpoints from '../../hooks/generic-picture-endpoints'; +import { AuthRole, useAuth } from '../provider/AuthProvider'; interface PictureOverviewProps { title?: string; @@ -28,30 +29,38 @@ const PictureOverview = ({ type = PictureOverviewType.CUSTOM, }: PictureOverviewProps) => { const { t } = useTranslation(); + const { role } = useAuth(); const { getPicturesQuery } = useGenericPictureEndpoints(type); - const { data, loading, refetch } = getPicturesQuery({ - variables: { - filters: { - and: [ - { - or: [ - { - is_text: { - eq: false, + const textFilter = useMemo(() => { + return role < AuthRole.CURATOR + ? { + and: [ + { + or: [ + { + is_text: { + eq: false, + }, }, - }, - { - is_text: { - null: true, + { + is_text: { + null: true, + }, }, - }, - ], - }, - queryParams as PictureFiltersInput, - ], - }, + ], + }, + {} as PictureFiltersInput, + queryParams as PictureFiltersInput, + ], + } + : queryParams; + }, [queryParams, role]); + + const { data, loading, refetch } = getPicturesQuery({ + variables: { + filters: textFilter as PictureFiltersInput, pagination: { start: 0, limit: ABSOLUTE_MAX_PICTURES_PER_ROW * rows, diff --git a/projects/bp-gallery/src/helpers/app-helpers.ts b/projects/bp-gallery/src/helpers/app-helpers.ts index 2bf5ae8a7..9e7295af5 100644 --- a/projects/bp-gallery/src/helpers/app-helpers.ts +++ b/projects/bp-gallery/src/helpers/app-helpers.ts @@ -92,7 +92,7 @@ type Ref = { __ref: string }; type MergeInput = { __typename: string; data: Ref[] }; export const mergeByRef = (existing: Ref[] | undefined = undefined, incoming: Ref[]): Ref[] => - unionWith(incoming, existing ?? [], (a, b) => a.__ref === b.__ref); + unionWith(existing ?? [], incoming, (a, b) => a.__ref === b.__ref); export const mergeByRefWrappedInData = ( existing: MergeInput | undefined = undefined, From 5b65ef857433da40a5a844cd091d00a4a43b8ee5 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Tue, 23 May 2023 00:54:44 +0200 Subject: [PATCH 19/27] maybe it works now, love caching --- .../src/components/common/PictureOverview.tsx | 1 - .../common/picture-gallery/PictureScrollGrid.tsx | 7 ++++++- .../src/components/views/show-more/ShowMoreView.tsx | 1 + projects/bp-gallery/src/helpers/app-helpers.ts | 13 ++++++++++--- projects/bp-gallery/src/hooks/get-pictures.hook.ts | 5 ++++- 5 files changed, 21 insertions(+), 6 deletions(-) diff --git a/projects/bp-gallery/src/components/common/PictureOverview.tsx b/projects/bp-gallery/src/components/common/PictureOverview.tsx index 78207df18..5fe5ed346 100644 --- a/projects/bp-gallery/src/components/common/PictureOverview.tsx +++ b/projects/bp-gallery/src/components/common/PictureOverview.tsx @@ -51,7 +51,6 @@ const PictureOverview = ({ }, ], }, - {} as PictureFiltersInput, queryParams as PictureFiltersInput, ], } diff --git a/projects/bp-gallery/src/components/common/picture-gallery/PictureScrollGrid.tsx b/projects/bp-gallery/src/components/common/picture-gallery/PictureScrollGrid.tsx index e14cc6ca5..e7845b053 100644 --- a/projects/bp-gallery/src/components/common/picture-gallery/PictureScrollGrid.tsx +++ b/projects/bp-gallery/src/components/common/picture-gallery/PictureScrollGrid.tsx @@ -14,6 +14,7 @@ import PictureGrid from './PictureGrid'; import { PicturePreviewAdornment } from './PicturePreview'; import './PictureScrollGrid.scss'; import PictureUploadArea, { PictureUploadAreaProps } from './PictureUploadArea'; +import { WatchQueryFetchPolicy } from '@apollo/client'; const PictureScrollGrid = ({ queryParams, @@ -29,6 +30,7 @@ const PictureScrollGrid = ({ showDefaultAdornments = true, allowClicks = true, filterOutTextsForNonCurators = true, + fetchPolicy, }: { queryParams: PictureFiltersInput | { searchTerms: string[]; searchTimes: string[][] }; hashbase: string; @@ -43,6 +45,7 @@ const PictureScrollGrid = ({ showDefaultAdornments?: boolean; allowClicks?: boolean; filterOutTextsForNonCurators?: boolean; + fetchPolicy?: WatchQueryFetchPolicy; }) => { const { t } = useTranslation(); const [lastScrollHeight, setLastScrollHeight] = useState(0); @@ -52,7 +55,9 @@ const PictureScrollGrid = ({ queryParams, isAllSearchActive, sortBy, - filterOutTextsForNonCurators + filterOutTextsForNonCurators, + NUMBER_OF_PICTURES_LOADED_PER_FETCH, + fetchPolicy ); const pictures: FlatPicture[] | undefined = useSimplifiedQueryResponseData(data)?.pictures; diff --git a/projects/bp-gallery/src/components/views/show-more/ShowMoreView.tsx b/projects/bp-gallery/src/components/views/show-more/ShowMoreView.tsx index 4f5dd4316..2bb56c280 100644 --- a/projects/bp-gallery/src/components/views/show-more/ShowMoreView.tsx +++ b/projects/bp-gallery/src/components/views/show-more/ShowMoreView.tsx @@ -89,6 +89,7 @@ const ShowMoreView = ({ maxNumPictures={ categoryType === 'latest' || categoryType === 'most-liked' ? 500 : undefined } + fetchPolicy='network-only' />
diff --git a/projects/bp-gallery/src/helpers/app-helpers.ts b/projects/bp-gallery/src/helpers/app-helpers.ts index 9e7295af5..d96190c1d 100644 --- a/projects/bp-gallery/src/helpers/app-helpers.ts +++ b/projects/bp-gallery/src/helpers/app-helpers.ts @@ -1,7 +1,7 @@ import { createHttpLink, from } from '@apollo/client'; import { onError as createErrorLink } from '@apollo/client/link/error'; import { Maybe } from 'graphql/jsutils/Maybe'; -import { isEmpty, unionWith } from 'lodash'; +import { intersectionBy, isEmpty, unionWith } from 'lodash'; import { AlertOptions, AlertType } from '../components/provider/AlertProvider'; import type { FlatUploadFile } from '../types/additionalFlatTypes'; @@ -91,8 +91,15 @@ export const buildHttpLink = ( type Ref = { __ref: string }; type MergeInput = { __typename: string; data: Ref[] }; -export const mergeByRef = (existing: Ref[] | undefined = undefined, incoming: Ref[]): Ref[] => - unionWith(existing ?? [], incoming, (a, b) => a.__ref === b.__ref); +export const mergeByRef = (existing: Ref[] | undefined = undefined, incoming: Ref[]): Ref[] => { + const intersection = intersectionBy(incoming, existing ?? [], '__ref'); + const mergedExisting = unionWith( + intersection, + existing ?? [], + (a, b) => a.__ref === b.__ref + ); + return unionWith(mergedExisting, incoming, (a, b) => a.__ref === b.__ref); +}; export const mergeByRefWrappedInData = ( existing: MergeInput | undefined = undefined, diff --git a/projects/bp-gallery/src/hooks/get-pictures.hook.ts b/projects/bp-gallery/src/hooks/get-pictures.hook.ts index cd89480b7..b208b1522 100644 --- a/projects/bp-gallery/src/hooks/get-pictures.hook.ts +++ b/projects/bp-gallery/src/hooks/get-pictures.hook.ts @@ -6,6 +6,7 @@ import { useGetPicturesByAllSearchQuery, useGetPicturesQuery, } from '../graphql/APIConnector'; +import { WatchQueryFetchPolicy } from '@apollo/client'; export const NUMBER_OF_PICTURES_LOADED_PER_FETCH = 100; @@ -14,7 +15,8 @@ const useGetPictures = ( isAllSearchActive: boolean, sortBy?: string[], filterOutTextsForNonCurators = true, - limit: number = NUMBER_OF_PICTURES_LOADED_PER_FETCH + limit: number = NUMBER_OF_PICTURES_LOADED_PER_FETCH, + fetchPolicy?: WatchQueryFetchPolicy ) => { const { role } = useAuth(); @@ -52,6 +54,7 @@ const useGetPictures = ( }, sortBy, }, + fetchPolicy, notifyOnNetworkStatusChange: true, skip: isAllSearchActive, }); From e6d1338c2806da4d55fdbe3e191f863c0c0002de Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Wed, 24 May 2023 12:33:53 +0200 Subject: [PATCH 20/27] some requested changes --- .../src/components/common/PictureOverview.tsx | 52 ++++--------------- .../show-more/helpers/queryParams-helpers.tsx | 4 +- .../bp-gallery/src/graphql/APIConnector.tsx | 2 +- .../bp-gallery/src/graphql/operation.graphql | 2 +- .../bp-gallery/src/hooks/get-pictures.hook.ts | 36 ++++++++++--- .../src/operations/getMostLikedPictures.ts | 2 +- 6 files changed, 45 insertions(+), 53 deletions(-) diff --git a/projects/bp-gallery/src/components/common/PictureOverview.tsx b/projects/bp-gallery/src/components/common/PictureOverview.tsx index 5fe5ed346..0c2b4c399 100644 --- a/projects/bp-gallery/src/components/common/PictureOverview.tsx +++ b/projects/bp-gallery/src/components/common/PictureOverview.tsx @@ -1,4 +1,4 @@ -import React, { MouseEventHandler, useMemo } from 'react'; +import React, { MouseEventHandler } from 'react'; import './PictureOverview.scss'; import PictureGrid from './picture-gallery/PictureGrid'; import { PictureFiltersInput } from '../../graphql/APIConnector'; @@ -6,8 +6,7 @@ import { FlatPicture, PictureOverviewType } from '../../types/additionalFlatType import { useTranslation } from 'react-i18next'; import PrimaryButton from './PrimaryButton'; import { useSimplifiedQueryResponseData } from '../../graphql/queryUtils'; -import useGenericPictureEndpoints from '../../hooks/generic-picture-endpoints'; -import { AuthRole, useAuth } from '../provider/AuthProvider'; +import useGetPictures from '../../hooks/get-pictures.hook'; interface PictureOverviewProps { title?: string; @@ -29,45 +28,16 @@ const PictureOverview = ({ type = PictureOverviewType.CUSTOM, }: PictureOverviewProps) => { const { t } = useTranslation(); - const { role } = useAuth(); - const { getPicturesQuery } = useGenericPictureEndpoints(type); - - const textFilter = useMemo(() => { - return role < AuthRole.CURATOR - ? { - and: [ - { - or: [ - { - is_text: { - eq: false, - }, - }, - { - is_text: { - null: true, - }, - }, - ], - }, - queryParams as PictureFiltersInput, - ], - } - : queryParams; - }, [queryParams, role]); - - const { data, loading, refetch } = getPicturesQuery({ - variables: { - filters: textFilter as PictureFiltersInput, - pagination: { - start: 0, - limit: ABSOLUTE_MAX_PICTURES_PER_ROW * rows, - }, - sortBy, - }, - fetchPolicy: 'network-only', - }); + const { data, loading, refetch } = useGetPictures( + queryParams, + false, + sortBy, + true, + ABSOLUTE_MAX_PICTURES_PER_ROW * rows, + 'cache-and-network', + type + ); const pictures: FlatPicture[] | undefined = useSimplifiedQueryResponseData( data as { [key: string]: any } | undefined diff --git a/projects/bp-gallery/src/components/views/show-more/helpers/queryParams-helpers.tsx b/projects/bp-gallery/src/components/views/show-more/helpers/queryParams-helpers.tsx index 8d0db198f..7bcca7c4e 100644 --- a/projects/bp-gallery/src/components/views/show-more/helpers/queryParams-helpers.tsx +++ b/projects/bp-gallery/src/components/views/show-more/helpers/queryParams-helpers.tsx @@ -76,8 +76,8 @@ export const getPictureQueryParams = ( } } else if (categoryType === 'most-liked') { return !archiveId - ? { likes: { ne: null }, id: { not: { eq: '-1' } } } - : { archive_tag: { id: { eq: archiveId } }, likes: { ne: null }, id: { not: { eq: '-1' } } }; + ? { likes: { gt: 0 }, id: { not: { eq: '-1' } } } + : { archive_tag: { id: { eq: archiveId } }, likes: { gt: 0 }, id: { not: { eq: '-1' } } }; } else if (categoryId) { return categoryQueryParams(categoryType, categoryId, archiveId); } else { diff --git a/projects/bp-gallery/src/graphql/APIConnector.tsx b/projects/bp-gallery/src/graphql/APIConnector.tsx index a12a0e14b..739318553 100644 --- a/projects/bp-gallery/src/graphql/APIConnector.tsx +++ b/projects/bp-gallery/src/graphql/APIConnector.tsx @@ -4580,7 +4580,7 @@ export type GetLocationTagsWithThumbnailQueryResult = Apollo.QueryResult< export const GetMostLikedPicturesDocument = gql` query getMostLikedPictures($filters: PictureFiltersInput!, $pagination: PaginationArg!) { pictures( - filters: { and: [{ likes: { ne: null } }, $filters] } + filters: { and: [{ likes: { gt: 0 } }, $filters] } pagination: $pagination sort: ["likes:desc"] ) { diff --git a/projects/bp-gallery/src/graphql/operation.graphql b/projects/bp-gallery/src/graphql/operation.graphql index a8e1b0b85..bfd414fc3 100644 --- a/projects/bp-gallery/src/graphql/operation.graphql +++ b/projects/bp-gallery/src/graphql/operation.graphql @@ -13,7 +13,7 @@ query getDecadePreviewThumbnails( $filter40s: PictureFiltersInput! $filter50s: P query getFaceTags($pictureId: ID!) { faceTags(filters: { picture: { id: { eq: $pictureId } } }) { data { id attributes { x y tag_direction person_tag { data { id attributes { name } } } } } } } query getKeywordTagsWithThumbnail( $filters: KeywordTagFiltersInput = {} $thumbnailFilters: PictureFiltersInput = {} $start: Int $limit: Int $sortBy: [String] ) { keywordTags(filters: $filters pagination: { start: $start limit: $limit } sort: $sortBy) { data { id attributes { name thumbnail: pictures(filters: $thumbnailFilters pagination: { limit: 1 }) { data { attributes { media { data { attributes { formats provider } } } } } } verified_thumbnail: verified_pictures( filters: $thumbnailFilters pagination: { limit: 1 } ) { data { attributes { media { data { attributes { formats provider } } } } } } } } } } query getLocationTagsWithThumbnail( $filters: LocationTagFiltersInput = {} $thumbnailFilters: PictureFiltersInput = {} $start: Int $limit: Int $sortBy: [String] ) { locationTags(filters: $filters pagination: { start: $start limit: $limit } sort: $sortBy) { data { id attributes { name thumbnail: pictures(filters: $thumbnailFilters pagination: { limit: 1 }) { data { attributes { media { data { attributes { formats provider } } } } } } verified_thumbnail: verified_pictures( filters: $thumbnailFilters pagination: { limit: 1 } ) { data { attributes { media { data { attributes { formats provider } } } } } } } } } } -query getMostLikedPictures($filters: PictureFiltersInput! $pagination: PaginationArg!) { pictures( filters: { and: [{ likes: { ne: null } } $filters] } pagination: $pagination sort: ["likes:desc"] ) { data { id attributes { is_text comments { data { id } } likes media { data { id attributes { width height formats url updatedAt provider } } } } } } } +query getMostLikedPictures($filters: PictureFiltersInput! $pagination: PaginationArg!) { pictures( filters: { and: [{ likes: { gt: 0 } } $filters] } pagination: $pagination sort: ["likes:desc"] ) { data { id attributes { is_text comments { data { id } } likes media { data { id attributes { width height formats url updatedAt provider } } } } } } } query getMultiplePictureInfo($pictureIds: [ID!]) { pictures(filters: { id: { in: $pictureIds } }) { data { id attributes { descriptions(sort: "createdAt:asc") { data { id attributes { text } } } time_range_tag { data { id attributes { start end isEstimate } } } verified_time_range_tag { data { id attributes { start end isEstimate } } } keyword_tags(sort: "updatedAt:asc") { data { id attributes { name updatedAt } } } verified_keyword_tags(sort: "updatedAt:asc") { data { id attributes { name updatedAt } } } location_tags(sort: "updatedAt:asc") { data { id attributes { name updatedAt } } } verified_location_tags(sort: "updatedAt:asc") { data { id attributes { name updatedAt } } } person_tags(sort: "updatedAt:asc") { data { id attributes { name updatedAt } } } verified_person_tags(sort: "updatedAt:asc") { data { id attributes { name updatedAt } } } collections(publicationState: PREVIEW) { data { id attributes { name } } } media { data { id attributes { url updatedAt provider } } } comments(publicationState: PREVIEW sort: "date:asc") { data { id attributes { text author date publishedAt pinned } } } is_text linked_pictures { data { id } } linked_texts { data { id } } archive_tag { data { id attributes { name } } } } } } } query getPersonTag($id: ID!) { personTag(id: $id) { data { attributes { name } } } } query getPersonTagsWithThumbnail( $filters: PersonTagFiltersInput = {} $thumbnailFilters: PictureFiltersInput = {} $start: Int $limit: Int $sortBy: [String] ) { personTags(filters: $filters pagination: { start: $start limit: $limit } sort: $sortBy) { data { id attributes { name thumbnail: pictures(filters: $thumbnailFilters pagination: { limit: 1 }) { data { attributes { media { data { attributes { formats url provider } } } } } } verified_thumbnail: verified_pictures( filters: $thumbnailFilters pagination: { limit: 1 } ) { data { attributes { media { data { attributes { formats url provider } } } } } } } } } } diff --git a/projects/bp-gallery/src/hooks/get-pictures.hook.ts b/projects/bp-gallery/src/hooks/get-pictures.hook.ts index b208b1522..92259c6be 100644 --- a/projects/bp-gallery/src/hooks/get-pictures.hook.ts +++ b/projects/bp-gallery/src/hooks/get-pictures.hook.ts @@ -3,10 +3,12 @@ import { AuthRole, useAuth } from '../components/provider/AuthProvider'; import { GetPicturesByAllSearchQueryVariables, PictureFiltersInput, + useGetMostLikedPicturesQuery, useGetPicturesByAllSearchQuery, useGetPicturesQuery, } from '../graphql/APIConnector'; import { WatchQueryFetchPolicy } from '@apollo/client'; +import { PictureOverviewType } from '../types/additionalFlatTypes'; export const NUMBER_OF_PICTURES_LOADED_PER_FETCH = 100; @@ -16,7 +18,8 @@ const useGetPictures = ( sortBy?: string[], filterOutTextsForNonCurators = true, limit: number = NUMBER_OF_PICTURES_LOADED_PER_FETCH, - fetchPolicy?: WatchQueryFetchPolicy + fetchPolicy?: WatchQueryFetchPolicy, + type: PictureOverviewType = PictureOverviewType.CUSTOM ) => { const { role } = useAuth(); @@ -56,7 +59,7 @@ const useGetPictures = ( }, fetchPolicy, notifyOnNetworkStatusChange: true, - skip: isAllSearchActive, + skip: isAllSearchActive || type !== PictureOverviewType.CUSTOM, }); const customQueryResult = useGetPicturesByAllSearchQuery({ variables: { @@ -67,8 +70,21 @@ const useGetPictures = ( limit: limit, }, }, + fetchPolicy, + notifyOnNetworkStatusChange: true, + skip: !isAllSearchActive || type !== PictureOverviewType.CUSTOM, + }); + const mostLikedQueryResult = useGetMostLikedPicturesQuery({ + variables: { + filters, + pagination: { + start: 0, + limit: limit, + }, + }, + fetchPolicy, notifyOnNetworkStatusChange: true, - skip: !isAllSearchActive, + skip: type !== PictureOverviewType.MOST_LIKED, }); const allSearchResult = useMemo( @@ -79,10 +95,16 @@ const useGetPictures = ( [customQueryResult] ); - if (isAllSearchActive) { - return allSearchResult; - } else { - return queryResult; + switch (type) { + case PictureOverviewType.MOST_LIKED: + return mostLikedQueryResult; + case PictureOverviewType.CUSTOM: + default: + if (isAllSearchActive) { + return allSearchResult; + } else { + return queryResult; + } } }; diff --git a/projects/bp-graphql/src/operations/getMostLikedPictures.ts b/projects/bp-graphql/src/operations/getMostLikedPictures.ts index 68f6aae31..9278d6656 100644 --- a/projects/bp-graphql/src/operations/getMostLikedPictures.ts +++ b/projects/bp-graphql/src/operations/getMostLikedPictures.ts @@ -4,7 +4,7 @@ export default { document: graphql` query getMostLikedPictures($filters: PictureFiltersInput!, $pagination: PaginationArg!) { pictures( - filters: { and: [{ likes: { ne: null } }, $filters] } + filters: { and: [{ likes: { gt: 0 } }, $filters] } pagination: $pagination sort: ["likes:desc"] ) { From 71436fe05b000a66e9eff580d6ce4a439e618274 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Wed, 24 May 2023 12:37:07 +0200 Subject: [PATCH 21/27] fix fetching problem for show-more most-liked --- .../views/show-more/ShowMoreView.tsx | 2 +- .../bp-gallery/src/helpers/app-helpers.ts | 24 ++++++++++--------- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/projects/bp-gallery/src/components/views/show-more/ShowMoreView.tsx b/projects/bp-gallery/src/components/views/show-more/ShowMoreView.tsx index 2bb56c280..5406901b7 100644 --- a/projects/bp-gallery/src/components/views/show-more/ShowMoreView.tsx +++ b/projects/bp-gallery/src/components/views/show-more/ShowMoreView.tsx @@ -89,7 +89,7 @@ const ShowMoreView = ({ maxNumPictures={ categoryType === 'latest' || categoryType === 'most-liked' ? 500 : undefined } - fetchPolicy='network-only' + fetchPolicy='cache-and-network' />
diff --git a/projects/bp-gallery/src/helpers/app-helpers.ts b/projects/bp-gallery/src/helpers/app-helpers.ts index d96190c1d..dac3385c7 100644 --- a/projects/bp-gallery/src/helpers/app-helpers.ts +++ b/projects/bp-gallery/src/helpers/app-helpers.ts @@ -1,7 +1,7 @@ import { createHttpLink, from } from '@apollo/client'; import { onError as createErrorLink } from '@apollo/client/link/error'; import { Maybe } from 'graphql/jsutils/Maybe'; -import { intersectionBy, isEmpty, unionWith } from 'lodash'; +import { isEmpty, unionWith } from 'lodash'; import { AlertOptions, AlertType } from '../components/provider/AlertProvider'; import type { FlatUploadFile } from '../types/additionalFlatTypes'; @@ -91,20 +91,22 @@ export const buildHttpLink = ( type Ref = { __ref: string }; type MergeInput = { __typename: string; data: Ref[] }; -export const mergeByRef = (existing: Ref[] | undefined = undefined, incoming: Ref[]): Ref[] => { - const intersection = intersectionBy(incoming, existing ?? [], '__ref'); - const mergedExisting = unionWith( - intersection, - existing ?? [], - (a, b) => a.__ref === b.__ref - ); - return unionWith(mergedExisting, incoming, (a, b) => a.__ref === b.__ref); +export const mergeByRef = ( + existing: Ref[] | undefined = undefined, + incoming: Ref[], + args: any +): Ref[] => { + if (args.pagination.start === 0) { + return incoming; + } + return unionWith(existing ?? [], incoming, (a, b) => a.__ref === b.__ref); }; export const mergeByRefWrappedInData = ( existing: MergeInput | undefined = undefined, - incoming: MergeInput + incoming: MergeInput, + { args }: any ): MergeInput => ({ ...incoming, - data: mergeByRef(existing?.data, incoming.data), + data: mergeByRef(existing?.data, incoming.data, args), }); From 08053762674e0f1aa76a88a071b96f345eb11fd1 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Wed, 24 May 2023 13:34:30 +0200 Subject: [PATCH 22/27] fix errors for tags caused by args being null, add pagination and fetchPolicy for tags --- .../src/components/common/TagOverview.tsx | 5 ++- .../src/components/views/search/TagList.tsx | 1 - .../views/show-more/ShowMoreView.tsx | 6 ++- .../bp-gallery/src/graphql/APIConnector.tsx | 39 +++++++------------ .../bp-gallery/src/graphql/operation.graphql | 6 +-- .../bp-gallery/src/helpers/app-helpers.ts | 2 +- .../src/hooks/get-tags-with-thumbnail.hook.ts | 16 +++++--- .../operations/getKeywordTagsWithThumbnail.ts | 5 +-- .../getLocationTagsWithThumbnail.ts | 5 +-- .../operations/getPersonTagsWithThumbnail.ts | 5 +-- 10 files changed, 43 insertions(+), 47 deletions(-) diff --git a/projects/bp-gallery/src/components/common/TagOverview.tsx b/projects/bp-gallery/src/components/common/TagOverview.tsx index 68e92a324..db067886e 100644 --- a/projects/bp-gallery/src/components/common/TagOverview.tsx +++ b/projects/bp-gallery/src/components/common/TagOverview.tsx @@ -69,13 +69,14 @@ const TagOverview = ({ }; }, [onResize]); + // check if there is a tag const { data } = useGetTagsWithThumbnail( queryParams, thumbnailQueryParams, - false, type, ['name:asc'], - 1 + 1, + 'no-cache' ); const flattened = useSimplifiedQueryResponseData(data); diff --git a/projects/bp-gallery/src/components/views/search/TagList.tsx b/projects/bp-gallery/src/components/views/search/TagList.tsx index 151727fb6..0331d4688 100644 --- a/projects/bp-gallery/src/components/views/search/TagList.tsx +++ b/projects/bp-gallery/src/components/views/search/TagList.tsx @@ -48,7 +48,6 @@ const TagList = ({ const { data, loading, error, fetchMore } = useGetTagsWithThumbnail( queryParams, thumbnailQueryParams, - false, type, ['name:asc'], currentItemAmount ?? (scroll ? 30 : undefined) diff --git a/projects/bp-gallery/src/components/views/show-more/ShowMoreView.tsx b/projects/bp-gallery/src/components/views/show-more/ShowMoreView.tsx index 5406901b7..fa0afb5dd 100644 --- a/projects/bp-gallery/src/components/views/show-more/ShowMoreView.tsx +++ b/projects/bp-gallery/src/components/views/show-more/ShowMoreView.tsx @@ -46,8 +46,12 @@ const ShowMoreView = ({ id: { eq: categoryId }, } : { id: { eq: '-1' } }, - limit: 1, + pagination: { + start: 0, + limit: 1, + }, }, + fetchPolicy: 'no-cache', }); const flattened = useSimplifiedQueryResponseData(tagInfo.data); diff --git a/projects/bp-gallery/src/graphql/APIConnector.tsx b/projects/bp-gallery/src/graphql/APIConnector.tsx index 739318553..43d71c3fd 100644 --- a/projects/bp-gallery/src/graphql/APIConnector.tsx +++ b/projects/bp-gallery/src/graphql/APIConnector.tsx @@ -2428,8 +2428,7 @@ export type GetFaceTagsQuery = { export type GetKeywordTagsWithThumbnailQueryVariables = Exact<{ filters?: InputMaybe; thumbnailFilters?: InputMaybe; - start?: InputMaybe; - limit?: InputMaybe; + pagination: PaginationArg; sortBy?: InputMaybe> | InputMaybe>; }>; @@ -2465,8 +2464,7 @@ export type GetKeywordTagsWithThumbnailQuery = { export type GetLocationTagsWithThumbnailQueryVariables = Exact<{ filters?: InputMaybe; thumbnailFilters?: InputMaybe; - start?: InputMaybe; - limit?: InputMaybe; + pagination: PaginationArg; sortBy?: InputMaybe> | InputMaybe>; }>; @@ -2633,8 +2631,7 @@ export type GetPersonTagQuery = { export type GetPersonTagsWithThumbnailQueryVariables = Exact<{ filters?: InputMaybe; thumbnailFilters?: InputMaybe; - start?: InputMaybe; - limit?: InputMaybe; + pagination: PaginationArg; sortBy?: InputMaybe> | InputMaybe>; }>; @@ -4363,11 +4360,10 @@ export const GetKeywordTagsWithThumbnailDocument = gql` query getKeywordTagsWithThumbnail( $filters: KeywordTagFiltersInput = {} $thumbnailFilters: PictureFiltersInput = {} - $start: Int - $limit: Int + $pagination: PaginationArg! $sortBy: [String] ) { - keywordTags(filters: $filters, pagination: { start: $start, limit: $limit }, sort: $sortBy) { + keywordTags(filters: $filters, pagination: $pagination, sort: $sortBy) { data { id attributes { @@ -4423,14 +4419,13 @@ export const GetKeywordTagsWithThumbnailDocument = gql` * variables: { * filters: // value for 'filters' * thumbnailFilters: // value for 'thumbnailFilters' - * start: // value for 'start' - * limit: // value for 'limit' + * pagination: // value for 'pagination' * sortBy: // value for 'sortBy' * }, * }); */ export function useGetKeywordTagsWithThumbnailQuery( - baseOptions?: Apollo.QueryHookOptions< + baseOptions: Apollo.QueryHookOptions< GetKeywordTagsWithThumbnailQuery, GetKeywordTagsWithThumbnailQueryVariables > @@ -4472,11 +4467,10 @@ export const GetLocationTagsWithThumbnailDocument = gql` query getLocationTagsWithThumbnail( $filters: LocationTagFiltersInput = {} $thumbnailFilters: PictureFiltersInput = {} - $start: Int - $limit: Int + $pagination: PaginationArg! $sortBy: [String] ) { - locationTags(filters: $filters, pagination: { start: $start, limit: $limit }, sort: $sortBy) { + locationTags(filters: $filters, pagination: $pagination, sort: $sortBy) { data { id attributes { @@ -4532,14 +4526,13 @@ export const GetLocationTagsWithThumbnailDocument = gql` * variables: { * filters: // value for 'filters' * thumbnailFilters: // value for 'thumbnailFilters' - * start: // value for 'start' - * limit: // value for 'limit' + * pagination: // value for 'pagination' * sortBy: // value for 'sortBy' * }, * }); */ export function useGetLocationTagsWithThumbnailQuery( - baseOptions?: Apollo.QueryHookOptions< + baseOptions: Apollo.QueryHookOptions< GetLocationTagsWithThumbnailQuery, GetLocationTagsWithThumbnailQueryVariables > @@ -4926,11 +4919,10 @@ export const GetPersonTagsWithThumbnailDocument = gql` query getPersonTagsWithThumbnail( $filters: PersonTagFiltersInput = {} $thumbnailFilters: PictureFiltersInput = {} - $start: Int - $limit: Int + $pagination: PaginationArg! $sortBy: [String] ) { - personTags(filters: $filters, pagination: { start: $start, limit: $limit }, sort: $sortBy) { + personTags(filters: $filters, pagination: $pagination, sort: $sortBy) { data { id attributes { @@ -4988,14 +4980,13 @@ export const GetPersonTagsWithThumbnailDocument = gql` * variables: { * filters: // value for 'filters' * thumbnailFilters: // value for 'thumbnailFilters' - * start: // value for 'start' - * limit: // value for 'limit' + * pagination: // value for 'pagination' * sortBy: // value for 'sortBy' * }, * }); */ export function useGetPersonTagsWithThumbnailQuery( - baseOptions?: Apollo.QueryHookOptions< + baseOptions: Apollo.QueryHookOptions< GetPersonTagsWithThumbnailQuery, GetPersonTagsWithThumbnailQueryVariables > diff --git a/projects/bp-gallery/src/graphql/operation.graphql b/projects/bp-gallery/src/graphql/operation.graphql index bfd414fc3..12048baa3 100644 --- a/projects/bp-gallery/src/graphql/operation.graphql +++ b/projects/bp-gallery/src/graphql/operation.graphql @@ -11,12 +11,12 @@ query getCollectionInfoByName( $collectionName: String $publicationState: Public query getDailyPictureInfo($pictureId: ID!) { picture(id: $pictureId) { data { id attributes { descriptions(sort: "createdAt:asc") { data { id attributes { text } } } time_range_tag { data { id attributes { start end isEstimate } } } comments { data { id } } likes media { data { id attributes { url updatedAt provider } } } archive_tag { data { id attributes { name } } } } } } } query getDecadePreviewThumbnails( $filter40s: PictureFiltersInput! $filter50s: PictureFiltersInput! $filter60s: PictureFiltersInput! $filter70s: PictureFiltersInput! $filter80s: PictureFiltersInput! $filter90s: PictureFiltersInput! ) { decade40s: pictures( filters: { and: [$filter40s { or: [{ is_text: { eq: false } } { is_text: { null: true } }] }] } pagination: { limit: 1 } ) { data { attributes { media { data { attributes { formats provider } } } } } } decade50s: pictures( filters: { and: [$filter50s { or: [{ is_text: { eq: false } } { is_text: { null: true } }] }] } pagination: { limit: 1 } ) { data { attributes { media { data { attributes { formats provider } } } } } } decade60s: pictures( filters: { and: [$filter60s { or: [{ is_text: { eq: false } } { is_text: { null: true } }] }] } pagination: { limit: 1 } ) { data { attributes { media { data { attributes { formats provider } } } } } } decade70s: pictures( filters: { and: [$filter70s { or: [{ is_text: { eq: false } } { is_text: { null: true } }] }] } pagination: { limit: 1 } ) { data { attributes { media { data { attributes { formats provider } } } } } } decade80s: pictures( filters: { and: [$filter80s { or: [{ is_text: { eq: false } } { is_text: { null: true } }] }] } pagination: { limit: 1 } ) { data { attributes { media { data { attributes { formats provider } } } } } } decade90s: pictures( filters: { and: [$filter90s { or: [{ is_text: { eq: false } } { is_text: { null: true } }] }] } pagination: { limit: 1 } ) { data { attributes { media { data { attributes { formats provider } } } } } } } query getFaceTags($pictureId: ID!) { faceTags(filters: { picture: { id: { eq: $pictureId } } }) { data { id attributes { x y tag_direction person_tag { data { id attributes { name } } } } } } } -query getKeywordTagsWithThumbnail( $filters: KeywordTagFiltersInput = {} $thumbnailFilters: PictureFiltersInput = {} $start: Int $limit: Int $sortBy: [String] ) { keywordTags(filters: $filters pagination: { start: $start limit: $limit } sort: $sortBy) { data { id attributes { name thumbnail: pictures(filters: $thumbnailFilters pagination: { limit: 1 }) { data { attributes { media { data { attributes { formats provider } } } } } } verified_thumbnail: verified_pictures( filters: $thumbnailFilters pagination: { limit: 1 } ) { data { attributes { media { data { attributes { formats provider } } } } } } } } } } -query getLocationTagsWithThumbnail( $filters: LocationTagFiltersInput = {} $thumbnailFilters: PictureFiltersInput = {} $start: Int $limit: Int $sortBy: [String] ) { locationTags(filters: $filters pagination: { start: $start limit: $limit } sort: $sortBy) { data { id attributes { name thumbnail: pictures(filters: $thumbnailFilters pagination: { limit: 1 }) { data { attributes { media { data { attributes { formats provider } } } } } } verified_thumbnail: verified_pictures( filters: $thumbnailFilters pagination: { limit: 1 } ) { data { attributes { media { data { attributes { formats provider } } } } } } } } } } +query getKeywordTagsWithThumbnail( $filters: KeywordTagFiltersInput = {} $thumbnailFilters: PictureFiltersInput = {} $pagination: PaginationArg! $sortBy: [String] ) { keywordTags(filters: $filters pagination: $pagination sort: $sortBy) { data { id attributes { name thumbnail: pictures(filters: $thumbnailFilters pagination: { limit: 1 }) { data { attributes { media { data { attributes { formats provider } } } } } } verified_thumbnail: verified_pictures( filters: $thumbnailFilters pagination: { limit: 1 } ) { data { attributes { media { data { attributes { formats provider } } } } } } } } } } +query getLocationTagsWithThumbnail( $filters: LocationTagFiltersInput = {} $thumbnailFilters: PictureFiltersInput = {} $pagination: PaginationArg! $sortBy: [String] ) { locationTags(filters: $filters pagination: $pagination sort: $sortBy) { data { id attributes { name thumbnail: pictures(filters: $thumbnailFilters pagination: { limit: 1 }) { data { attributes { media { data { attributes { formats provider } } } } } } verified_thumbnail: verified_pictures( filters: $thumbnailFilters pagination: { limit: 1 } ) { data { attributes { media { data { attributes { formats provider } } } } } } } } } } query getMostLikedPictures($filters: PictureFiltersInput! $pagination: PaginationArg!) { pictures( filters: { and: [{ likes: { gt: 0 } } $filters] } pagination: $pagination sort: ["likes:desc"] ) { data { id attributes { is_text comments { data { id } } likes media { data { id attributes { width height formats url updatedAt provider } } } } } } } query getMultiplePictureInfo($pictureIds: [ID!]) { pictures(filters: { id: { in: $pictureIds } }) { data { id attributes { descriptions(sort: "createdAt:asc") { data { id attributes { text } } } time_range_tag { data { id attributes { start end isEstimate } } } verified_time_range_tag { data { id attributes { start end isEstimate } } } keyword_tags(sort: "updatedAt:asc") { data { id attributes { name updatedAt } } } verified_keyword_tags(sort: "updatedAt:asc") { data { id attributes { name updatedAt } } } location_tags(sort: "updatedAt:asc") { data { id attributes { name updatedAt } } } verified_location_tags(sort: "updatedAt:asc") { data { id attributes { name updatedAt } } } person_tags(sort: "updatedAt:asc") { data { id attributes { name updatedAt } } } verified_person_tags(sort: "updatedAt:asc") { data { id attributes { name updatedAt } } } collections(publicationState: PREVIEW) { data { id attributes { name } } } media { data { id attributes { url updatedAt provider } } } comments(publicationState: PREVIEW sort: "date:asc") { data { id attributes { text author date publishedAt pinned } } } is_text linked_pictures { data { id } } linked_texts { data { id } } archive_tag { data { id attributes { name } } } } } } } query getPersonTag($id: ID!) { personTag(id: $id) { data { attributes { name } } } } -query getPersonTagsWithThumbnail( $filters: PersonTagFiltersInput = {} $thumbnailFilters: PictureFiltersInput = {} $start: Int $limit: Int $sortBy: [String] ) { personTags(filters: $filters pagination: { start: $start limit: $limit } sort: $sortBy) { data { id attributes { name thumbnail: pictures(filters: $thumbnailFilters pagination: { limit: 1 }) { data { attributes { media { data { attributes { formats url provider } } } } } } verified_thumbnail: verified_pictures( filters: $thumbnailFilters pagination: { limit: 1 } ) { data { attributes { media { data { attributes { formats url provider } } } } } } } } } } +query getPersonTagsWithThumbnail( $filters: PersonTagFiltersInput = {} $thumbnailFilters: PictureFiltersInput = {} $pagination: PaginationArg! $sortBy: [String] ) { personTags(filters: $filters pagination: $pagination sort: $sortBy) { data { id attributes { name thumbnail: pictures(filters: $thumbnailFilters pagination: { limit: 1 }) { data { attributes { media { data { attributes { formats url provider } } } } } } verified_thumbnail: verified_pictures( filters: $thumbnailFilters pagination: { limit: 1 } ) { data { attributes { media { data { attributes { formats url provider } } } } } } } } } } query getPictureGeoInfo($pictureId: ID!) { pictureGeoInfos(filters: { picture: { id: { eq: $pictureId } } }) { data { id attributes { latitude longitude radius } } } } query getPictureInfo($pictureId: ID!) { picture(id: $pictureId) { data { id attributes { descriptions(sort: "createdAt:asc") { data { id attributes { text } } } time_range_tag { data { id attributes { start end isEstimate } } } verified_time_range_tag { data { id attributes { start end isEstimate } } } keyword_tags(sort: "updatedAt:asc") { data { id attributes { name updatedAt } } } verified_keyword_tags(sort: "updatedAt:asc") { data { id attributes { name updatedAt } } } location_tags(sort: "updatedAt:asc") { data { id attributes { name updatedAt } } } verified_location_tags(sort: "updatedAt:asc") { data { id attributes { name updatedAt } } } person_tags(sort: "updatedAt:asc") { data { id attributes { name updatedAt } } } verified_person_tags(sort: "updatedAt:asc") { data { id attributes { name updatedAt } } } collections(publicationState: PREVIEW) { data { id attributes { name } } } comments( publicationState: PREVIEW sort: "date:desc" filters: { picture: { id: { eq: $pictureId } } } ) { data { id attributes { text author picture { data { id } } date parentComment { data { id } } childComments(publicationState: PREVIEW sort: "date:asc") { data { id } } publishedAt pinned } } } media { data { id attributes { width height formats url updatedAt provider } } } is_text linked_pictures { data { id } } linked_texts { data { id } } archive_tag { data { id attributes { name } } } likes } } } } query getPictureMediaInfo($pictureId: ID!) { picture(id: $pictureId) { data { id attributes { media { data { id attributes { width height formats url updatedAt provider } } } } } } } diff --git a/projects/bp-gallery/src/helpers/app-helpers.ts b/projects/bp-gallery/src/helpers/app-helpers.ts index dac3385c7..d7977b885 100644 --- a/projects/bp-gallery/src/helpers/app-helpers.ts +++ b/projects/bp-gallery/src/helpers/app-helpers.ts @@ -96,7 +96,7 @@ export const mergeByRef = ( incoming: Ref[], args: any ): Ref[] => { - if (args.pagination.start === 0) { + if (args?.pagination?.start === 0) { return incoming; } return unionWith(existing ?? [], incoming, (a, b) => a.__ref === b.__ref); diff --git a/projects/bp-gallery/src/hooks/get-tags-with-thumbnail.hook.ts b/projects/bp-gallery/src/hooks/get-tags-with-thumbnail.hook.ts index 415f74e40..44025b145 100644 --- a/projects/bp-gallery/src/hooks/get-tags-with-thumbnail.hook.ts +++ b/projects/bp-gallery/src/hooks/get-tags-with-thumbnail.hook.ts @@ -7,14 +7,15 @@ import { } from '../graphql/APIConnector'; import { TagType } from '../types/additionalFlatTypes'; import useGenericTagEndpoints from './generic-endpoints.hook'; +import { WatchQueryFetchPolicy } from '@apollo/client'; const useGetTagsWithThumbnail = ( queryParams: LocationTagFiltersInput | KeywordTagFiltersInput | PersonTagFiltersInput | undefined, thumbnailQueryParams: PictureFiltersInput | undefined, - isAllSearchActive: boolean, type: TagType, - sortBy?: string[], - limit: number = NUMBER_OF_PICTURES_LOADED_PER_FETCH + sortBy: string[] = ['name:asc'], + limit: number = NUMBER_OF_PICTURES_LOADED_PER_FETCH, + fetchPolicy?: WatchQueryFetchPolicy ) => { const { tagsWithThumbnailQuery } = useGenericTagEndpoints(type); @@ -27,10 +28,13 @@ const useGetTagsWithThumbnail = ( { or: [{ is_text: { eq: false } }, { is_text: { null: true } }] }, ], } as PictureFiltersInput, - start: 0, - limit: limit, - sortBy: ['name:asc'], + pagination: { + start: 0, + limit: limit, + }, + sortBy, }, + fetchPolicy, }); return queryResult; diff --git a/projects/bp-graphql/src/operations/getKeywordTagsWithThumbnail.ts b/projects/bp-graphql/src/operations/getKeywordTagsWithThumbnail.ts index 9db54e8b8..85a65f82c 100644 --- a/projects/bp-graphql/src/operations/getKeywordTagsWithThumbnail.ts +++ b/projects/bp-graphql/src/operations/getKeywordTagsWithThumbnail.ts @@ -5,11 +5,10 @@ export default { query getKeywordTagsWithThumbnail( $filters: KeywordTagFiltersInput = {} $thumbnailFilters: PictureFiltersInput = {} - $start: Int - $limit: Int + $pagination: PaginationArg! $sortBy: [String] ) { - keywordTags(filters: $filters, pagination: { start: $start, limit: $limit }, sort: $sortBy) { + keywordTags(filters: $filters, pagination: $pagination, sort: $sortBy) { data { id attributes { diff --git a/projects/bp-graphql/src/operations/getLocationTagsWithThumbnail.ts b/projects/bp-graphql/src/operations/getLocationTagsWithThumbnail.ts index 6c730bbdf..f55d38eb9 100644 --- a/projects/bp-graphql/src/operations/getLocationTagsWithThumbnail.ts +++ b/projects/bp-graphql/src/operations/getLocationTagsWithThumbnail.ts @@ -5,11 +5,10 @@ export default { query getLocationTagsWithThumbnail( $filters: LocationTagFiltersInput = {} $thumbnailFilters: PictureFiltersInput = {} - $start: Int - $limit: Int + $pagination: PaginationArg! $sortBy: [String] ) { - locationTags(filters: $filters, pagination: { start: $start, limit: $limit }, sort: $sortBy) { + locationTags(filters: $filters, pagination: $pagination, sort: $sortBy) { data { id attributes { diff --git a/projects/bp-graphql/src/operations/getPersonTagsWithThumbnail.ts b/projects/bp-graphql/src/operations/getPersonTagsWithThumbnail.ts index 8a75ba894..cc692cd71 100644 --- a/projects/bp-graphql/src/operations/getPersonTagsWithThumbnail.ts +++ b/projects/bp-graphql/src/operations/getPersonTagsWithThumbnail.ts @@ -5,11 +5,10 @@ export default { query getPersonTagsWithThumbnail( $filters: PersonTagFiltersInput = {} $thumbnailFilters: PictureFiltersInput = {} - $start: Int - $limit: Int + $pagination: PaginationArg! $sortBy: [String] ) { - personTags(filters: $filters, pagination: { start: $start, limit: $limit }, sort: $sortBy) { + personTags(filters: $filters, pagination: $pagination, sort: $sortBy) { data { id attributes { From 6fe1843caa9dbbe8502d0ef6301d640a00d785ca Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Wed, 24 May 2023 13:40:07 +0200 Subject: [PATCH 23/27] remove unused generic picture endpoint --- .../src/hooks/generic-picture-endpoints.ts | 20 ------------------- 1 file changed, 20 deletions(-) delete mode 100644 projects/bp-gallery/src/hooks/generic-picture-endpoints.ts diff --git a/projects/bp-gallery/src/hooks/generic-picture-endpoints.ts b/projects/bp-gallery/src/hooks/generic-picture-endpoints.ts deleted file mode 100644 index 5e121af30..000000000 --- a/projects/bp-gallery/src/hooks/generic-picture-endpoints.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { useMemo } from 'react'; -import { useGetMostLikedPicturesQuery, useGetPicturesQuery } from '../graphql/APIConnector'; -import { PictureOverviewType } from '../types/additionalFlatTypes'; - -const useGenericPictureEndpoints = (type: PictureOverviewType) => { - return useMemo(() => { - switch (type) { - case PictureOverviewType.MOST_LIKED: - return { - getPicturesQuery: useGetMostLikedPicturesQuery, - }; - default: - return { - getPicturesQuery: useGetPicturesQuery, - }; - } - }, [type]); -}; - -export default useGenericPictureEndpoints; From 4777bcbdaceb37dd595efa63f430478c80c353e9 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Wed, 24 May 2023 13:59:03 +0200 Subject: [PATCH 24/27] fix to many tags fetched for tag overview --- projects/bp-gallery/src/components/common/TagOverview.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/projects/bp-gallery/src/components/common/TagOverview.tsx b/projects/bp-gallery/src/components/common/TagOverview.tsx index db067886e..663e77d68 100644 --- a/projects/bp-gallery/src/components/common/TagOverview.tsx +++ b/projects/bp-gallery/src/components/common/TagOverview.tsx @@ -14,6 +14,8 @@ import { useSimplifiedQueryResponseData } from '../../graphql/queryUtils'; import useGetTagsWithThumbnail from '../../hooks/get-tags-with-thumbnail.hook'; import PrimaryButton from './PrimaryButton'; +export const MAX_TAGS_PER_ROW = 3; + interface TagOverviewProps { title?: string; type: TagType; @@ -43,9 +45,9 @@ const TagOverview = ({ const calculateMaxCategoriesPerRow = useCallback((width: number) => { const tempRowLength = Math.max(1, Math.floor(Math.min(width, 1200) / 260)); if (Math.min(width, 1200) >= tempRowLength * 260 + (tempRowLength - 1) * 8) { - return tempRowLength; + return Math.min(tempRowLength, MAX_TAGS_PER_ROW); } - return Math.max(1, tempRowLength - 1); + return Math.min(Math.max(1, tempRowLength - 1), MAX_TAGS_PER_ROW); }, []); const [rowLength, setRowLength] = useState(() => { From c7f533c5ee83e81f646c67a09d78ab3843d5d929 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Wed, 24 May 2023 14:28:18 +0200 Subject: [PATCH 25/27] fix start test --- projects/bp-gallery/cypress/e2e/start.cy.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/projects/bp-gallery/cypress/e2e/start.cy.ts b/projects/bp-gallery/cypress/e2e/start.cy.ts index 9b3880391..9d995c362 100644 --- a/projects/bp-gallery/cypress/e2e/start.cy.ts +++ b/projects/bp-gallery/cypress/e2e/start.cy.ts @@ -21,6 +21,11 @@ describe('Start view', () => { cy.get('.collection-picture-display .item').should('exist'); }); + it('should have selectable custom overview', () => { + cy.get('.overview-selection-container'); + cy.get('[data-testid="AccessTimeIcon"]').click(); + }); + it('should show a picture preview', () => { cy.get('.picture-grid').find('img').first().should('exist'); }); From cdb40c3817b67f28e0a11058d3b94ba83e0a912d Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Thu, 25 May 2023 15:14:55 +0200 Subject: [PATCH 26/27] requested changes --- .../src/components/common/PictureOverview.tsx | 4 +- .../src/components/common/TagOverview.tsx | 2 +- .../components/views/archives/ArchiveView.tsx | 66 ++++++++++--------- .../views/discover/DiscoverView.tsx | 63 +++++++++--------- .../views/show-more/ShowMoreView.tsx | 1 - .../src/components/views/start/StartView.tsx | 64 +++++++++--------- .../bp-gallery/src/helpers/app-helpers.ts | 6 +- 7 files changed, 107 insertions(+), 99 deletions(-) diff --git a/projects/bp-gallery/src/components/common/PictureOverview.tsx b/projects/bp-gallery/src/components/common/PictureOverview.tsx index 0c2b4c399..7228b3bf1 100644 --- a/projects/bp-gallery/src/components/common/PictureOverview.tsx +++ b/projects/bp-gallery/src/components/common/PictureOverview.tsx @@ -39,9 +39,7 @@ const PictureOverview = ({ type ); - const pictures: FlatPicture[] | undefined = useSimplifiedQueryResponseData( - data as { [key: string]: any } | undefined - )?.pictures; + const pictures: FlatPicture[] | undefined = useSimplifiedQueryResponseData(data)?.pictures; return (
diff --git a/projects/bp-gallery/src/components/common/TagOverview.tsx b/projects/bp-gallery/src/components/common/TagOverview.tsx index 663e77d68..91c581582 100644 --- a/projects/bp-gallery/src/components/common/TagOverview.tsx +++ b/projects/bp-gallery/src/components/common/TagOverview.tsx @@ -14,7 +14,7 @@ import { useSimplifiedQueryResponseData } from '../../graphql/queryUtils'; import useGetTagsWithThumbnail from '../../hooks/get-tags-with-thumbnail.hook'; import PrimaryButton from './PrimaryButton'; -export const MAX_TAGS_PER_ROW = 3; +const MAX_TAGS_PER_ROW = 3; interface TagOverviewProps { title?: string; diff --git a/projects/bp-gallery/src/components/views/archives/ArchiveView.tsx b/projects/bp-gallery/src/components/views/archives/ArchiveView.tsx index 61e186b9e..89d974d52 100644 --- a/projects/bp-gallery/src/components/views/archives/ArchiveView.tsx +++ b/projects/bp-gallery/src/components/views/archives/ArchiveView.tsx @@ -22,6 +22,8 @@ import './ArchiveView.scss'; import DonateButton from '../../common/DonateButton'; import { useTranslation } from 'react-i18next'; import OverviewContainer from '../../common/OverviewContainer'; +import { useMemo } from 'react'; +import { OverviewContainerTab } from '../../common/OverviewContainer'; interface ArchiveViewProps { archiveId: string; @@ -44,6 +46,38 @@ const ArchiveView = ({ archiveId }: ArchiveViewProps) => { const showcasePicture: FlatPicture | undefined = archive?.showcasePicture; + const tabs: OverviewContainerTab[] = useMemo(() => { + return [ + { + title: t('discover.our-pictures'), + icon: , + content: ( + { + visit('/archives/' + archiveId + '/show-more/pictures'); + }} + /> + ), + }, + { + title: t('discover.most-liked'), + icon: , + content: ( + { + visit('/archives/' + archiveId + '/show-more/most-liked'); + }} + /> + ), + }, + ]; + }, [archiveId, t, visit]); + if (!archive) { return !loading ? : <>; } @@ -112,37 +146,7 @@ const ArchiveView = ({ archiveId }: ArchiveViewProps) => { )}
- , - content: ( - { - visit('/archives/' + archiveId + '/show-more/pictures'); - }} - /> - ), - }, - { - title: t('discover.most-liked'), - icon: , - content: ( - { - visit('/archives/' + archiveId + '/show-more/most-liked'); - }} - /> - ), - }, - ]} - /> + { const { visit } = useVisit(); const { t } = useTranslation(); + const tabs: OverviewContainerTab[] = useMemo(() => { + return [ + { + title: t('discover.latest-pictures'), + icon: , + content: ( + { + visit('/show-more/latest'); + }} + /> + ), + }, + { + title: t('discover.most-liked'), + icon: , + content: ( + { + visit('/show-more/most-liked'); + }} + /> + ), + }, + ]; + }, [t, visit]); + return (
- , - content: ( - { - visit('/show-more/latest'); - }} - /> - ), - }, - { - title: t('discover.most-liked'), - icon: , - content: ( - { - visit('/show-more/most-liked'); - }} - /> - ), - }, - ]} - /> + { const { visit } = useVisit(); @@ -58,6 +59,36 @@ const StartView = () => { ); }); + const tabs: OverviewContainerTab[] = useMemo(() => { + return [ + { + title: t('discover.latest-pictures'), + icon: , + content: ( + { + visit('/show-more/latest'); + }} + /> + ), + }, + { + title: t('discover.most-liked'), + icon: , + content: ( + { + visit('/show-more/most-liked'); + }} + /> + ), + }, + ]; + }, [t, visit]); + return (
@@ -101,36 +132,7 @@ const StartView = () => {
- , - content: ( - { - visit('/show-more/latest'); - }} - /> - ), - }, - { - title: t('discover.most-liked'), - icon: , - content: ( - { - visit('/show-more/most-liked'); - }} - /> - ), - }, - ]} - /> +

{t('startpage.our-archives')}

{archiveCards}
diff --git a/projects/bp-gallery/src/helpers/app-helpers.ts b/projects/bp-gallery/src/helpers/app-helpers.ts index d7977b885..60a9762a3 100644 --- a/projects/bp-gallery/src/helpers/app-helpers.ts +++ b/projects/bp-gallery/src/helpers/app-helpers.ts @@ -4,6 +4,7 @@ import { Maybe } from 'graphql/jsutils/Maybe'; import { isEmpty, unionWith } from 'lodash'; import { AlertOptions, AlertType } from '../components/provider/AlertProvider'; import type { FlatUploadFile } from '../types/additionalFlatTypes'; +import { PaginationArg } from '../graphql/APIConnector'; const OPERATIONS_WITH_OWN_ERROR_HANDLING = ['login']; @@ -90,11 +91,12 @@ export const buildHttpLink = ( type Ref = { __ref: string }; type MergeInput = { __typename: string; data: Ref[] }; +type Args = { pagination?: PaginationArg } | null; export const mergeByRef = ( existing: Ref[] | undefined = undefined, incoming: Ref[], - args: any + args: Args ): Ref[] => { if (args?.pagination?.start === 0) { return incoming; @@ -105,7 +107,7 @@ export const mergeByRef = ( export const mergeByRefWrappedInData = ( existing: MergeInput | undefined = undefined, incoming: MergeInput, - { args }: any + { args }: { args: Args } ): MergeInput => ({ ...incoming, data: mergeByRef(existing?.data, incoming.data, args), From 88a56baa4a477e7fad9b38ad84e000c159202a01 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Thu, 25 May 2023 18:08:26 +0200 Subject: [PATCH 27/27] fix type error --- projects/bp-gallery/src/helpers/app-helpers.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/projects/bp-gallery/src/helpers/app-helpers.ts b/projects/bp-gallery/src/helpers/app-helpers.ts index 60a9762a3..d7977b885 100644 --- a/projects/bp-gallery/src/helpers/app-helpers.ts +++ b/projects/bp-gallery/src/helpers/app-helpers.ts @@ -4,7 +4,6 @@ import { Maybe } from 'graphql/jsutils/Maybe'; import { isEmpty, unionWith } from 'lodash'; import { AlertOptions, AlertType } from '../components/provider/AlertProvider'; import type { FlatUploadFile } from '../types/additionalFlatTypes'; -import { PaginationArg } from '../graphql/APIConnector'; const OPERATIONS_WITH_OWN_ERROR_HANDLING = ['login']; @@ -91,12 +90,11 @@ export const buildHttpLink = ( type Ref = { __ref: string }; type MergeInput = { __typename: string; data: Ref[] }; -type Args = { pagination?: PaginationArg } | null; export const mergeByRef = ( existing: Ref[] | undefined = undefined, incoming: Ref[], - args: Args + args: any ): Ref[] => { if (args?.pagination?.start === 0) { return incoming; @@ -107,7 +105,7 @@ export const mergeByRef = ( export const mergeByRefWrappedInData = ( existing: MergeInput | undefined = undefined, incoming: MergeInput, - { args }: { args: Args } + { args }: any ): MergeInput => ({ ...incoming, data: mergeByRef(existing?.data, incoming.data, args),