Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add like button for unlogged users and redirect to login #399

Merged
merged 3 commits into from
Oct 19, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions cypress/e2e/collection/summary.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -83,15 +84,16 @@ 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));

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

Expand Down
65 changes: 54 additions & 11 deletions src/components/collection/summary/SummaryHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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';
Expand Down Expand Up @@ -52,6 +57,10 @@ const SummaryHeader: React.FC<SummaryHeaderProps> = ({
truncatedName,
tags,
}) => {
const { t } = useLibraryTranslation();

const [open, setOpen] = React.useState(false);

const { hooks, mutations } = useContext(QueryClientContext);

const { data: member } = hooks.useCurrentMember();
Expand All @@ -66,22 +75,44 @@ const SummaryHeader: React.FC<SummaryHeaderProps> = ({
(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,
});
};

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;
}
spaenleh marked this conversation as resolved.
Show resolved Hide resolved
deleteItemLike({
itemId: collection.id,
memberId: member.id,
Expand Down Expand Up @@ -135,15 +166,13 @@ const SummaryHeader: React.FC<SummaryHeaderProps> = ({
>
{truncatedName}
</Typography>
{member && member.id && (
<LikeButton
ariaLabel="like"
color="primary"
isLiked={Boolean(likeEntry)}
handleLike={handleLike}
handleUnlike={handleUnlike}
/>
)}
<LikeButton
ariaLabel="like"
color="primary"
isLiked={Boolean(likeEntry)}
handleLike={handleLike}
handleUnlike={handleUnlike}
/>
</Stack>
<SummaryActionButtons item={collection} isLogged={isLogged} />
</Stack>
Expand Down Expand Up @@ -227,6 +256,20 @@ const SummaryHeader: React.FC<SummaryHeaderProps> = ({
</Stack>
</Stack>
</Stack>
<Snackbar
anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
open={open}
autoHideDuration={6000}
onClose={handleCloseSnackBarMessage}
>
<Alert
id={LIKE_COLLECTION_NOT_LOGGED_ID}
onClose={handleCloseSnackBarMessage}
severity="error"
>
{t(LIBRARY.SIGNIN_MESSAGE)}
</Alert>
</Snackbar>
</Container>
);
};
Expand Down
2 changes: 2 additions & 0 deletions src/config/selectors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
1 change: 1 addition & 0 deletions src/langs/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
3 changes: 2 additions & 1 deletion src/langs/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -116,5 +116,6 @@
"SUGGESTION_TO_ENABLE_IN_DEPTH_SEARCH_TEXT": "Cannot find what you looked for?<br/>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"
}