feat: rename favorite to bookmark (#1082)

* feat: rename favorite to bookmakr * refactor: upgrade graasp deps * refactor: apply PR requested changes
graasp · Mar 13, 2024 · 4cc6a4c · 4cc6a4c
1 parent f29d176
commit 4cc6a4c
Show file tree

Hide file tree

Showing 22 changed files with 156 additions and 129 deletions.
diff --git a/cypress/e2e/item/favorite/favoriteItem.cy.ts b/cypress/e2e/item/favorite/favoriteItem.cy.ts
@@ -1,72 +1,72 @@
 import i18n from '../../../../src/config/i18n';
-import { FAVORITE_ITEMS_PATH, HOME_PATH } from '../../../../src/config/paths';
+import { BOOKMARKED_ITEMS_PATH, HOME_PATH } from '../../../../src/config/paths';
 import {
+  BOOKMARKED_ITEMS_ID,
+  BOOKMARKED_ITEM_BUTTON_CLASS,
   CREATE_ITEM_BUTTON_ID,
-  FAVORITE_ITEMS_ID,
-  FAVORITE_ITEM_BUTTON_CLASS,
   buildItemMenu,
   buildItemMenuButtonId,
   buildItemsTableRowIdAttribute,
 } from '../../../../src/config/selectors';
-import { SAMPLE_FAVORITE, SAMPLE_ITEMS } from '../../../fixtures/items';
+import { SAMPLE_BOOKMARK, SAMPLE_ITEMS } from '../../../fixtures/items';
 import { CURRENT_USER } from '../../../fixtures/members';
 
-const toggleFavoriteButton = (itemId: string) => {
+const toggleBookmarkButton = (itemId: string) => {
   cy.get(`#${buildItemMenuButtonId(itemId)}`).click();
-  cy.get(`#${buildItemMenu(itemId)} .${FAVORITE_ITEM_BUTTON_CLASS}`).click();
+  cy.get(`#${buildItemMenu(itemId)} .${BOOKMARKED_ITEM_BUTTON_CLASS}`).click();
 };
 
-describe('Favorite Item', () => {
-  describe('Member has no favorite items', () => {
+describe('Bookmarked Item', () => {
+  describe('Member has no bookmarked items', () => {
     beforeEach(() => {
       cy.setUpApi({
         ...SAMPLE_ITEMS,
       });
-      cy.visit(FAVORITE_ITEMS_PATH);
+      cy.visit(BOOKMARKED_ITEMS_PATH);
     });
 
     it('Show empty table', () => {
-      cy.get(`#${FAVORITE_ITEMS_ID}`).should('exist');
+      cy.get(`#${BOOKMARKED_ITEMS_ID}`).should('exist');
     });
   });
 
-  describe('Member has several valid favorite items', () => {
+  describe('Member has several valid bookmarked items', () => {
     beforeEach(() => {
       cy.setUpApi({
         ...SAMPLE_ITEMS,
-        favoriteItems: SAMPLE_FAVORITE,
+        bookmarkedItems: SAMPLE_BOOKMARK,
       });
       i18n.changeLanguage(CURRENT_USER.extra.lang as string);
       cy.visit(HOME_PATH);
     });
 
     it("New button doesn't exist", () => {
-      cy.visit(FAVORITE_ITEMS_PATH);
+      cy.visit(BOOKMARKED_ITEMS_PATH);
       cy.get(`#${CREATE_ITEM_BUTTON_ID}`).should('not.exist');
     });
 
-    it('add item to favorites', () => {
+    it('add item to bookmarkeds', () => {
       const item = SAMPLE_ITEMS.items[0];
 
-      toggleFavoriteButton(item.id);
+      toggleBookmarkButton(item.id);
 
-      cy.wait('@favoriteItem').then(({ request }) => {
+      cy.wait('@bookmarkItem').then(({ request }) => {
         expect(request.url).to.contain(item.id);
       });
     });
 
-    it('remove item from favorites', () => {
+    it('remove item from bookmarkeds', () => {
       const itemId = SAMPLE_ITEMS.items[1].id;
 
-      toggleFavoriteButton(itemId);
+      toggleBookmarkButton(itemId);
 
-      cy.wait('@unfavoriteItem').then(({ request }) => {
+      cy.wait('@unbookmarkItem').then(({ request }) => {
         expect(request.url).to.contain(itemId);
       });
     });
 
-    it('check favorite items view', () => {
-      cy.visit(FAVORITE_ITEMS_PATH);
+    it('check bookmarked items view', () => {
+      cy.visit(BOOKMARKED_ITEMS_PATH);
 
       const itemId = SAMPLE_ITEMS.items[1].id;
 
@@ -75,15 +75,15 @@ describe('Favorite Item', () => {
   });
 
   describe('Error Handling', () => {
-    it('check favorite items view with server error', () => {
+    it('check bookmarked items view with server error', () => {
       cy.setUpApi({
         ...SAMPLE_ITEMS,
         getFavoriteError: true,
       });
-      cy.visit(FAVORITE_ITEMS_PATH);
+      cy.visit(BOOKMARKED_ITEMS_PATH);
 
       it('Show empty table', () => {
-        cy.get(`#${FAVORITE_ITEMS_ID}`).should('exist');
+        cy.get(`#${BOOKMARKED_ITEMS_ID}`).should('exist');
       });
     });
   });

diff --git a/cypress/fixtures/items.ts b/cypress/fixtures/items.ts
@@ -247,7 +247,7 @@ export const SAMPLE_READ_ITEMS: ApiConfig = {
   ],
 };
 
-export const SAMPLE_FAVORITE: ItemFavorite[] = [
+export const SAMPLE_BOOKMARK: ItemFavorite[] = [
   {
     id: '49883c9b-050b-43d5-bd37-6921e25b55da5',
     createdAt: '2021-08-11T12:56:36.834Z',

diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -99,7 +99,7 @@ Cypress.Commands.add(
   ({
     items = [],
     recycledItemData = [],
-    favoriteItems = [],
+    bookmarkedItems = [],
     members = Object.values(MEMBERS),
     currentMember = CURRENT_USER,
     mentions = SAMPLE_MENTIONS,
@@ -320,7 +320,7 @@ Cypress.Commands.add(
 
     mockDeleteItemLoginSchemaRoute(items);
 
-    mockGetItemFavorites(favoriteItems, getFavoriteError);
+    mockGetItemFavorites(bookmarkedItems, getFavoriteError);
 
     mockAddFavorite(cachedItems, addFavoriteError);
 

diff --git a/cypress/support/server.ts b/cypress/support/server.ts
@@ -6,7 +6,7 @@ import {
   DiscriminatedItem,
   HttpMethod,
   Invitation,
-  ItemFavorite,
+  ItemBookmark,
   ItemMembership,
   ItemPublished,
   ItemTagType,
@@ -59,6 +59,7 @@ const {
   buildUploadFilesRoute,
   buildDownloadFilesRoute,
   GET_CURRENT_MEMBER_ROUTE,
+  GET_BOOKMARKED_ITEMS_ROUTE,
   SIGN_OUT_ROUTE,
   buildPostItemLoginSignInRoute,
   buildGetItemLoginSchemaRoute,
@@ -75,7 +76,6 @@ const {
   buildPostItemChatMessageRoute,
   buildClearItemChatRoute,
   GET_RECYCLED_ITEMS_DATA_ROUTE,
-  GET_FAVORITE_ITEMS_ROUTE,
   buildDeleteItemTagRoute,
   buildDeleteItemsRoute,
   buildGetMembersRoute,
@@ -1964,13 +1964,13 @@ export const mockUpdatePassword = (
 };
 
 export const mockGetItemFavorites = (
-  itemFavorites: ItemFavorite[],
+  itemFavorites: ItemBookmark[],
   shouldThrowError: boolean,
 ): void => {
   cy.intercept(
     {
       method: HttpMethod.Get,
-      url: `${API_HOST}/${GET_FAVORITE_ITEMS_ROUTE}`,
+      url: `${API_HOST}/${GET_BOOKMARKED_ITEMS_ROUTE}`,
     },
     ({ reply }) => {
       if (shouldThrowError) {
@@ -1989,7 +1989,7 @@ export const mockAddFavorite = (
   cy.intercept(
     {
       method: HttpMethod.Post,
-      url: new RegExp(`${API_HOST}/${GET_FAVORITE_ITEMS_ROUTE}/${ID_FORMAT}`),
+      url: new RegExp(`${API_HOST}/${GET_BOOKMARKED_ITEMS_ROUTE}/${ID_FORMAT}`),
     },
     ({ reply, body }) => {
       if (shouldThrowError) {
@@ -1998,14 +1998,14 @@ export const mockAddFavorite = (
 
       return reply(body);
     },
-  ).as('favoriteItem');
+  ).as('bookmarkItem');
 };
 
 export const mockDeleteFavorite = (shouldThrowError: boolean): void => {
   cy.intercept(
     {
       method: HttpMethod.Delete,
-      url: new RegExp(`${API_HOST}/${GET_FAVORITE_ITEMS_ROUTE}/${ID_FORMAT}`),
+      url: new RegExp(`${API_HOST}/${GET_BOOKMARKED_ITEMS_ROUTE}/${ID_FORMAT}`),
     },
     ({ reply, body }) => {
       if (shouldThrowError) {
@@ -2014,7 +2014,7 @@ export const mockDeleteFavorite = (shouldThrowError: boolean): void => {
 
       return reply(body);
     },
-  ).as('unfavoriteItem');
+  ).as('unbookmarkItem');
 };
 
 // Intercept ShortLinks calls

diff --git a/package.json b/package.json
@@ -21,10 +21,10 @@
     "@emotion/styled": "11.11.0",
     "@graasp/chatbox": "3.1.0",
     "@graasp/map": "1.4.0",
-    "@graasp/query-client": "2.9.0",
+    "@graasp/query-client": "3.0.0",
     "@graasp/sdk": "4.1.0",
     "@graasp/translations": "1.25.2",
-    "@graasp/ui": "4.9.3",
+    "@graasp/ui": "4.11.0",
     "@mui/icons-material": "5.15.11",
     "@mui/lab": "5.0.0-alpha.166",
     "@mui/material": "5.15.11",

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -8,7 +8,7 @@ import { DOMAIN } from '@/config/env';
 import { SIGN_IN_PATH } from '@/config/externalPaths';
 
 import {
-  FAVORITE_ITEMS_PATH,
+  BOOKMARKED_ITEMS_PATH,
   HOME_PATH,
   ITEMS_PATH,
   ITEM_INFORMATION_PATH,
@@ -25,7 +25,7 @@ import { hooks } from '../config/queryClient';
 import { useCurrentUserContext } from './context/CurrentUserContext';
 import Main from './main/Main';
 import Redirect from './main/Redirect';
-import FavoriteItemsScreen from './pages/FavoriteItemsScreen';
+import BookmarkedItemsScreen from './pages/BookmarkedItemsScreen';
 import HomeScreen from './pages/HomeScreen';
 import PublishedItemsScreen from './pages/PublishedItemsScreen';
 import RecycledItemsScreen from './pages/RecycledItemsScreen';
@@ -68,7 +68,7 @@ const App = (): JSX.Element => {
     withAuthorizationProps,
   );
   const FavoriteWithAuthorization = withAuthorization(
-    FavoriteItemsScreen,
+    BookmarkedItemsScreen,
     withAuthorizationProps,
   );
   const PublishedWithAuthorization = withAuthorization(
@@ -92,7 +92,7 @@ const App = (): JSX.Element => {
         <Route path={HOME_PATH} element={<HomeWithAuthorization />} />
         <Route path={SHARED_ITEMS_PATH} element={<SharedWithAuthorization />} />
         <Route
-          path={FAVORITE_ITEMS_PATH}
+          path={BOOKMARKED_ITEMS_PATH}
           element={<FavoriteWithAuthorization />}
         />
         <Route

diff --git a/src/components/common/FavoriteButton.tsx → src/components/common/BookmarkButton.tsx b/src/components/common/FavoriteButton.tsx → src/components/common/BookmarkButton.tsx
@@ -3,12 +3,12 @@ import { IconButtonProps } from '@mui/material';
 import { DiscriminatedItem, ItemBookmark } from '@graasp/sdk';
 import {
   ActionButtonVariant,
-  FavoriteButton as GraaspFavoriteButton,
+  BookmarkButton as GraaspBookmarkButton,
 } from '@graasp/ui';
 
 import { useBuilderTranslation } from '../../config/i18n';
 import { hooks, mutations } from '../../config/queryClient';
-import { FAVORITE_ITEM_BUTTON_CLASS } from '../../config/selectors';
+import { BOOKMARKED_ITEM_BUTTON_CLASS } from '../../config/selectors';
 import { BUILDER } from '../../langs/constants';
 import { useCurrentUserContext } from '../context/CurrentUserContext';
 
@@ -19,50 +19,50 @@ type Props = {
   size?: IconButtonProps['size'];
 };
 
-const isItemFavorite = (
+const isItemBookmarked = (
   item: DiscriminatedItem,
-  favorites?: ItemBookmark[],
-): boolean => favorites?.some((f) => f.item.id === item.id) || false;
+  bookmarks?: ItemBookmark[],
+): boolean => bookmarks?.some((f) => f.item.id === item.id) || false;
 
-const FavoriteButton = ({
+const BookmarkButton = ({
   item,
   size,
   type,
   onClick,
 }: Props): JSX.Element | null => {
   const { data: member } = useCurrentUserContext();
-  const { data: favorites } = hooks.useFavoriteItems();
+  const { data: bookmarks } = hooks.useBookmarkedItems();
   const { t: translateBuilder } = useBuilderTranslation();
-  const addFavorite = mutations.useAddFavoriteItem();
-  const deleteFavorite = mutations.useRemoveFavoriteItem();
+  const addFavorite = mutations.useAddBookmarkedItem();
+  const deleteFavorite = mutations.useRemoveBookmarkedItem();
 
   if (!member) {
     return null;
   }
 
-  const isFavorite = isItemFavorite(item, favorites);
+  const isFavorite = isItemBookmarked(item, bookmarks);
 
   const handleFavorite = () => {
     addFavorite.mutate(item.id);
     onClick?.();
   };
 
-  const handleUnfavorite = () => {
+  const handleUnbookmark = () => {
     deleteFavorite.mutate(item.id);
     onClick?.();
   };
 
   const text = isFavorite
-    ? translateBuilder(BUILDER.FAVORITE_ITEM_REMOVE_TEXT)
-    : translateBuilder(BUILDER.FAVORITE_ITEM_ADD_TEXT);
+    ? translateBuilder(BUILDER.BOOKMARKED_ITEM_REMOVE_TEXT)
+    : translateBuilder(BUILDER.BOOKMARKED_ITEM_ADD_TEXT);
 
   return (
-    <GraaspFavoriteButton
+    <GraaspBookmarkButton
       isFavorite={isFavorite}
-      className={FAVORITE_ITEM_BUTTON_CLASS}
+      className={BOOKMARKED_ITEM_BUTTON_CLASS}
       ariaLabel={text}
-      handleUnfavorite={handleUnfavorite}
-      handleFavorite={handleFavorite}
+      handleUnbookmark={handleUnbookmark}
+      handleBookmark={handleFavorite}
       tooltip={text}
       type={type}
       size={size}
@@ -71,4 +71,4 @@ const FavoriteButton = ({
   );
 };
 
-export default FavoriteButton;
+export default BookmarkButton;
diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx
@@ -4,7 +4,7 @@ import { HomeMenu, ItemMenu, Navigation } from '@graasp/ui';
 
 import { useBuilderTranslation } from '../../config/i18n';
 import {
-  FAVORITE_ITEMS_PATH,
+  BOOKMARKED_ITEMS_PATH,
   HOME_PATH,
   SHARED_ITEMS_PATH,
   buildItemPath,
@@ -65,9 +65,9 @@ const Navigator = (): JSX.Element | null => {
       to: SHARED_ITEMS_PATH,
     },
     {
-      name: translateBuilder(BUILDER.NAVIGATION_FAVORITE_ITEMS_TITLE),
-      id: 'favorite',
-      to: FAVORITE_ITEMS_PATH,
+      name: translateBuilder(BUILDER.NAVIGATION_BOOKMARKED_ITEMS_TITLE),
+      id: 'bookmark',
+      to: BOOKMARKED_ITEMS_PATH,
     },
   ];
 

diff --git a/src/components/main/ItemCard.tsx b/src/components/main/ItemCard.tsx
@@ -21,8 +21,8 @@ import { hooks } from '../../config/queryClient';
 import { buildItemCard, buildItemLink } from '../../config/selectors';
 import defaultImage from '../../resources/avatar.png';
 import { stripHtml } from '../../utils/item';
+import BookmarkButton from '../common/BookmarkButton';
 import EditButton from '../common/EditButton';
-import FavoriteButton from '../common/FavoriteButton';
 import { useCurrentUserContext } from '../context/CurrentUserContext';
 import BadgesCellRenderer, { ItemsStatuses } from '../table/BadgesCellRenderer';
 import DownloadButton from './DownloadButton';
@@ -103,7 +103,7 @@ const ItemComponent = ({
       {((member && member.id) || itemsStatuses?.[item.id]?.isPublic) && (
         <DownloadButton id={item.id} name={item.name} />
       )}
-      {member && member.id && <FavoriteButton size="medium" item={item} />}
+      {member && member.id && <BookmarkButton size="medium" item={item} />}
     </>
   );
   // here we use the same component as the table this is why it is instantiated a bit weirdly