508 allow users to show most liked pictures

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(

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();
 };

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');

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');
   });
 

projects/bp-gallery/src/components/common/PictureOverview.tsx

@@ -1,19 +1,21 @@
-import React, { MouseEventHandler } from 'react';
+import React, { MouseEventHandler, useMemo } 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';
+import { AuthRole, useAuth } from '../provider/AuthProvider';
 
 interface PictureOverviewProps {
   title?: string;
   queryParams: PictureFiltersInput | { searchTerms: string[]; searchTimes: string[][] };
   onClick: MouseEventHandler<HTMLButtonElement>;
   sortBy?: string[];
   rows?: number;
+  type?: PictureOverviewType;
 }
 
 const ABSOLUTE_MAX_PICTURES_PER_ROW = 6;
@@ -24,18 +26,52 @@ const PictureOverview = ({
   onClick,
   sortBy,
   rows = 2,
+  type = PictureOverviewType.CUSTOM,
 }: PictureOverviewProps) => {
   const { t } = useTranslation();
+  const { role } = useAuth();
 
-  const { data, loading, refetch } = useGetPictures(
-    queryParams,
-    false,
-    sortBy,
-    true,
-    ABSOLUTE_MAX_PICTURES_PER_ROW * rows
-  );
+  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 pictures: FlatPicture[] | undefined = useSimplifiedQueryResponseData(data)?.pictures;
+  const pictures: FlatPicture[] | undefined = useSimplifiedQueryResponseData(
+    data as { [key: string]: any } | undefined
+  )?.pictures;
 
   return (
     <div className='overview-container'>

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<number>(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;

projects/bp-gallery/src/components/views/archives/ArchiveView.tsx

@@ -1,10 +1,15 @@
-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';
 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';
@@ -16,6 +21,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,12 +112,36 @@ const ArchiveView = ({ archiveId }: ArchiveViewProps) => {
         )}
       </div>
       <ShowStats>
-        <PictureOverview
-          title='Unsere Bilder'
-          queryParams={{ archive_tag: { id: { eq: archiveId } } }}
-          onClick={() => {
-            visit('/archives/' + archiveId + '/show-more/pictures');
-          }}
+        <OverviewContainer
+          tabs={[
+            {
+              title: t('discover.our-pictures'),
+              icon: <AccessTime key='0' />,
+              content: (
+                <PictureOverview
+                  queryParams={{ archive_tag: { id: { eq: archiveId } } }}
+                  onClick={() => {
+                    visit('/archives/' + archiveId + '/show-more/pictures');
+                  }}
+                />
+              ),
+            },
+            {
+              title: t('discover.most-liked'),
+              icon: <ThumbUp key='1' />,
+              content: (
+                <PictureOverview
+                  type={PictureOverviewType.MOST_LIKED}
+                  queryParams={{
+                    archive_tag: { id: { eq: archiveId } },
+                  }}
+                  onClick={() => {
+                    visit('/archives/' + archiveId + '/show-more/most-liked');
+                  }}
+                />
+              ),
+            },
+          ]}
         />
       </ShowStats>
 

projects/bp-gallery/src/components/views/discover/DiscoverView.tsx

@@ -1,10 +1,12 @@
 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';
 import './DiscoverView.scss';
+import OverviewContainer from '../../common/OverviewContainer';
+import { AccessTime, ThumbUp } from '@mui/icons-material';
 
 const DiscoverView = () => {
   const { visit } = useVisit();
@@ -13,13 +15,36 @@ const DiscoverView = () => {
   return (
     <div className='discover-container'>
       <ShowStats>
-        <PictureOverview
-          title={t('discover.latest-pictures')}
-          queryParams={{}}
-          onClick={() => {
-            visit('/show-more/latest');
-          }}
+        <OverviewContainer
+          tabs={[
+            {
+              title: t('discover.latest-pictures'),
+              icon: <AccessTime key='0' />,
+              content: (
+                <PictureOverview
+                  queryParams={{}}
+                  onClick={() => {
+                    visit('/show-more/latest');
+                  }}
+                />
+              ),
+            },
+            {
+              title: t('discover.most-liked'),
+              icon: <ThumbUp key='1' />,
+              content: (
+                <PictureOverview
+                  type={PictureOverviewType.MOST_LIKED}
+                  queryParams={{}}
+                  onClick={() => {
+                    visit('/show-more/most-liked');
+                  }}
+                />
+              ),
+            },
+          ]}
         />
+
         <PictureOverview
           title={t('discover.more-info')}
           queryParams={{ collections: { name: { eq: 'Fragezeichen' } } }}

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(

projects/bp-gallery/src/components/views/show-more/ShowMoreView.tsx

@@ -79,12 +79,17 @@ const ShowMoreView = ({
             sortBy={
               categoryType !== 'pictures' && categoryId
                 ? ['time_range_tag.start:asc']
+                : categoryType === 'most-liked'
+                ? ['likes:desc']
                 : ['createdAt:desc']
             }
             hashbase={'show-more'}
             extraAdornments={showcaseAdornment ? [showcaseAdornment] : []}
             bulkOperations={[removeFromCollection, linkToCollection, moveToCollection, bulkEdit]}
-            maxNumPictures={categoryType === 'latest' ? 500 : undefined}
+            maxNumPictures={
+              categoryType === 'latest' || categoryType === 'most-liked' ? 500 : undefined
+            }
+            fetchPolicy='network-only'
           />
         </ShowStats>
       </div>

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 (
         <CollectionDescription

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 {