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

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

* test: fix like collection test

* feat: like collection login msg

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

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<SummaryHeaderProps> = ({
   truncatedName,
   tags,
 }) => {
+  const { t } = useLibraryTranslation();
+
+  const [open, setOpen] = React.useState(false);
+
   const { hooks, mutations } = useContext(QueryClientContext);
 
   const { data: member } = hooks.useCurrentMember();
@@ -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;
+    }
     deleteItemLike({
       itemId: collection.id,
       memberId: member.id,
@@ -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>
@@ -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>
   );
 };

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

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;

src/langs/en.json

@@ -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"
 }