diff --git a/cypress/e2e/collection/summary.cy.ts b/cypress/e2e/collection/summary.cy.ts index 2368c796..eb457fa3 100644 --- a/cypress/e2e/collection/summary.cy.ts +++ b/cypress/e2e/collection/summary.cy.ts @@ -7,6 +7,7 @@ import { buildCollectionRoute } from '../../../src/config/routes'; import { CHILDREN_ITEMS_GRID_ID, ITEM_SUMMARY_TITLE_ID, + LIKE_COLLECTION_NOT_LOGGED_ID, SUMMARY_AUTHOR_CONTAINER_ID, SUMMARY_CREATED_AT_CONTAINER_ID, SUMMARY_LAST_UPDATE_CONTAINER_ID, @@ -83,7 +84,7 @@ describe('Collection Summary', () => { }); }); - it('Show like button only to logged in users', () => { + it('Show like button', () => { cy.setUpApi(environment); const item = PUBLISHED_ITEMS[1]; cy.visit(buildCollectionRoute(item.id)); @@ -91,7 +92,8 @@ describe('Collection Summary', () => { if (environment.currentMember) { cy.get(`button[aria-label="like"]`).should('be.visible'); } else { - cy.get(`button[aria-label="like"]`).should('not.exist'); + cy.get(`button[aria-label="like"]`).click(); + cy.get(`#${LIKE_COLLECTION_NOT_LOGGED_ID}`).should('exist'); } }); diff --git a/src/components/collection/summary/SummaryHeader.tsx b/src/components/collection/summary/SummaryHeader.tsx index b781b8d6..bd43de1a 100644 --- a/src/components/collection/summary/SummaryHeader.tsx +++ b/src/components/collection/summary/SummaryHeader.tsx @@ -5,10 +5,12 @@ import React, { useContext } from 'react'; import { Favorite } from '@mui/icons-material'; import { Skeleton } from '@mui/lab'; import { + Alert, Box, Chip, Container, Divider, + Snackbar, Stack, Tooltip, Typography, @@ -18,10 +20,13 @@ import { ThumbnailSize } from '@graasp/sdk'; import { ItemLikeRecord, ItemRecord } from '@graasp/sdk/frontend'; import { GRAASP_COLOR } from '../../../config/constants'; +import { useLibraryTranslation } from '../../../config/i18n'; import { ITEM_SUMMARY_TITLE_ID, + LIKE_COLLECTION_NOT_LOGGED_ID, SUMMARY_TAGS_CONTAINER_ID, } from '../../../config/selectors'; +import LIBRARY from '../../../langs/constants'; import { QueryClientContext } from '../../QueryClientContext'; import CardMedia from '../../common/CardMediaComponent'; import { StyledCard } from '../../common/StyledCard'; @@ -52,6 +57,10 @@ const SummaryHeader: React.FC = ({ truncatedName, tags, }) => { + const { t } = useLibraryTranslation(); + + const [open, setOpen] = React.useState(false); + const { hooks, mutations } = useContext(QueryClientContext); const { data: member } = hooks.useCurrentMember(); @@ -66,11 +75,29 @@ const SummaryHeader: React.FC = ({ (itemLike: ItemLikeRecord) => itemLike?.item.id === collection?.id, ); + const openLoginSnackbarMessage = () => { + setOpen(true); + }; + + const handleCloseSnackBarMessage = ( + event: React.SyntheticEvent | Event, + reason?: string, + ) => { + if (reason === 'clickaway') { + return; + } + + setOpen(false); + }; const handleLike = () => { - if (!collection?.id || !member?.id) { + if (!collection?.id) { console.error('unable to like an item which id is undefined'); return; } + if (!member?.id) { + openLoginSnackbarMessage(); + return; + } postItemLike({ itemId: collection?.id, memberId: member.id, @@ -78,10 +105,14 @@ const SummaryHeader: React.FC = ({ }; const handleUnlike = () => { - if (!collection?.id || !member?.id) { + if (!collection?.id) { console.error('unable to unlike an item which id is undefined'); return; } + if (!member?.id) { + openLoginSnackbarMessage(); + return; + } deleteItemLike({ itemId: collection.id, memberId: member.id, @@ -135,15 +166,13 @@ const SummaryHeader: React.FC = ({ > {truncatedName} - {member && member.id && ( - - )} + @@ -227,6 +256,20 @@ const SummaryHeader: React.FC = ({ + + + {t(LIBRARY.SIGNIN_MESSAGE)} + + ); }; diff --git a/src/config/selectors.ts b/src/config/selectors.ts index dae96b14..69c10ba1 100644 --- a/src/config/selectors.ts +++ b/src/config/selectors.ts @@ -68,3 +68,5 @@ export const ENABLE_IN_DEPTH_SEARCH_CHECKBOX_ID = 'enableInDepthSearchCheckbox'; export const SEARCH_RESULTS_LIST_ID = 'searchResultsList'; export const SEARCH_RESULTS_SHOW_MORE_BUTTON = 'searchResultsShowMoreButton'; export const SEARCH_ERROR_MESSAGE_ID = 'searchErrorMessage'; + +export const LIKE_COLLECTION_NOT_LOGGED_ID = 'likeCollectionLoginMessage'; diff --git a/src/langs/constants.ts b/src/langs/constants.ts index 698dc187..85168ca7 100644 --- a/src/langs/constants.ts +++ b/src/langs/constants.ts @@ -120,5 +120,6 @@ export const LIBRARY = { SEARCH_NO_RESULTS: 'SEARCH_NO_RESULTS', SEARCH_RESULTS_LOAD_MORE: 'SEARCH_RESULTS_LOAD_MORE', CONTENT_CHIP: 'CONTENT_CHIP', + SIGNIN_MESSAGE: 'SIGNIN_MESSAGE', }; export default LIBRARY; diff --git a/src/langs/en.json b/src/langs/en.json index 2349754a..f15f028d 100644 --- a/src/langs/en.json +++ b/src/langs/en.json @@ -116,5 +116,6 @@ "SUGGESTION_TO_ENABLE_IN_DEPTH_SEARCH_TEXT": "Cannot find what you looked for?
Try to enable in-depth search to include content", "SEARCH_NO_RESULTS": "Nothing corresponds to your search", "SEARCH_RESULTS_LOAD_MORE": "Load more", - "CONTENT_CHIP": "Content" + "CONTENT_CHIP": "Content", + "SIGNIN_MESSAGE": "You need to sign in First" }