Merge pull request #230 from graasp/216/lang

216/lang

cypress/integration/item/create/createApp.spec.js

@@ -8,7 +8,7 @@ import { createItem } from './utils';
 
 describe('Create App', () => {
   describe('create app on Home', () => {
-    it('Create app on Home with dropdown', () =>{
+    it('Create app on Home with dropdown', () => {
       cy.setUpApi();
       cy.visit(HOME_PATH);
 
@@ -27,7 +27,7 @@ describe('Create App', () => {
       });
     });
 
-    it('Create app on Home by typing', () =>{
+    it('Create app on Home by typing', () => {
       cy.setUpApi();
       cy.visit(HOME_PATH);
 
@@ -51,37 +51,37 @@ describe('Create App', () => {
     it('Create app with dropdown', () => {
       cy.setUpApi(SAMPLE_ITEMS);
       const { id } = SAMPLE_ITEMS.items[0];
-  
+
       // go to children item
       cy.visit(buildItemPath(id));
-  
+
       if (DEFAULT_ITEM_LAYOUT_MODE !== ITEM_LAYOUT_MODES.LIST) {
         cy.switchMode(ITEM_LAYOUT_MODES.LIST);
       }
-  
+
       // create
       createItem(GRAASP_APP_ITEM, ITEM_LAYOUT_MODES.LIST);
-  
+
       cy.wait('@postItem').then(() => {
         // expect update
         cy.wait('@getItem').its('response.url').should('contain', id);
       });
     });
-  
+
     it('Create app by typing', () => {
       cy.setUpApi(SAMPLE_ITEMS);
       const { id } = SAMPLE_ITEMS.items[0];
-  
+
       // go to children item
       cy.visit(buildItemPath(id));
-  
+
       if (DEFAULT_ITEM_LAYOUT_MODE !== ITEM_LAYOUT_MODES.LIST) {
         cy.switchMode(ITEM_LAYOUT_MODES.LIST);
       }
-  
+
       // create
       createItem(GRAASP_APP_ITEM, { type: true });
-  
+
       cy.wait('@postItem').then(() => {
         // expect update
         cy.wait('@getItem').its('response.url').should('contain', id);

cypress/integration/item/view/utils.js

@@ -49,9 +49,6 @@ export const expectItemHeaderLayout = ({
 }) => {
   const header = cy.get(`#${ITEM_HEADER_ID}`);
 
-  if (ITEM_TYPES_WITH_CAPTIONS.includes(type)) {
-    header.get(`#${buildEditButtonId(id)}`).should('exist');
-  }
   header.get(`#${buildShareButtonId(id)}`).should('exist');
   header.get(`#${buildPerformButtonId(id)}`).should('exist');
 
@@ -60,8 +57,12 @@ export const expectItemHeaderLayout = ({
       memberships,
       memberId: currentMember?.id,
     })
-  )
+  ) {
+    if (ITEM_TYPES_WITH_CAPTIONS.includes(type)) {
+      header.get(`#${buildEditButtonId(id)}`).should('exist');
+    }
     header.get(`#${buildSettingsButtonId(id)}`).should('exist');
+  }
 };
 
 export const expectDocumentViewScreenLayout = ({

cypress/support/commands.js

@@ -62,6 +62,7 @@ import {
   mockGetRecycledItems,
   mockDeleteItemTag,
   mockRestoreItems,
+  mockGetMembers,
 } from './server';
 import './commands/item';
 import './commands/navigation';
@@ -143,6 +144,8 @@ Cypress.Commands.add(
 
     mockGetMember(cachedMembers);
 
+    mockGetMembers(cachedMembers);
+
     mockGetMemberBy(cachedMembers, getMemberError);
 
     mockUploadItem(cachedItems, defaultUploadError);
@@ -179,7 +182,7 @@ Cypress.Commands.add(
 
     mockEditItemMembershipForItem(items);
 
-    mockDeleteItemMembershipForItem(items);
+    mockDeleteItemMembershipForItem();
 
     mockGetFlags(flags);
 

cypress/support/server.js

@@ -59,7 +59,7 @@ const {
   SIGN_OUT_ROUTE,
   buildPostItemLoginSignInRoute,
   buildGetItemLoginRoute,
-  buildGetItemMembershipsForItemRoute,
+  buildGetItemMembershipsForItemsRoute,
   buildGetItemTagsRoute,
   GET_TAGS_ROUTE,
   buildPutItemLoginSchema,
@@ -75,6 +75,8 @@ const {
   buildRecycleItemRoute,
   GET_RECYCLED_ITEMS_ROUTE,
   buildDeleteItemTagRoute,
+  buildDeleteItemsRoute,
+  buildGetMembersRoute,
 } = API_ROUTES;
 
 const API_HOST = Cypress.env('API_HOST');
@@ -109,7 +111,6 @@ export const mockGetAppListRoute = (apps) => {
   ).as('getApps');
 };
 
-
 export const mockGetCurrentMember = (
   currentMember = MEMBERS.ANNA,
   shouldThrowError = false,
@@ -222,8 +223,7 @@ export const mockDeleteItems = (items, shouldThrowError) => {
   cy.intercept(
     {
       method: DEFAULT_DELETE.method,
-      pathname: `/${ITEMS_ROUTE}`,
-      query: { id: new RegExp(ID_FORMAT) },
+      url: new RegExp(`${API_HOST}/${buildDeleteItemsRoute([])}`),
     },
     ({ url, reply }) => {
       const ids = qs.parse(url.slice(url.indexOf('?') + 1)).id;
@@ -640,6 +640,32 @@ export const mockGetMember = (members) => {
     },
   ).as('getMember');
 };
+export const mockGetMembers = (members) => {
+  cy.intercept(
+    {
+      method: DEFAULT_GET.method,
+      url: `${API_HOST}/${buildGetMembersRoute([''])}`,
+    },
+    ({ url, reply }) => {
+      let { id: memberIds } = qs.parse(url.slice(url.indexOf('?') + 1));
+      if (typeof memberIds === 'string') {
+        memberIds = [memberIds];
+      }
+      const allMembers = memberIds?.map((id) => getMemberById(members, id));
+      // member does not exist in db
+      if (!allMembers) {
+        return reply({
+          statusCode: StatusCodes.NOT_FOUND,
+        });
+      }
+
+      return reply({
+        body: allMembers,
+        statusCode: StatusCodes.OK,
+      });
+    },
+  ).as('getMembers');
+};
 
 export const mockGetMemberBy = (members, shouldThrowError) => {
   cy.intercept(
@@ -876,56 +902,54 @@ export const mockGetItemMembershipsForItem = (items) => {
       method: DEFAULT_GET.method,
       url: new RegExp(
         `${API_HOST}/${parseStringToRegExp(
-          buildGetItemMembershipsForItemRoute(ID_FORMAT),
-        )}$`,
+          buildGetItemMembershipsForItemsRoute([]),
+        )}`,
       ),
     },
     ({ reply, url }) => {
       const { itemId } = qs.parse(url.slice(url.indexOf('?') + 1));
-      const item = items.find(({ id }) => id === itemId);
-      if (!item) {
-        return reply([]);
-      }
-      const result = item.memberships || [
-        {
-          permission: PERMISSION_LEVELS.ADMIN,
-          memberId: item.creator,
-          itemId: item.id,
-        },
-      ];
-      return reply(result);
+      const selectedItems = items.filter(({ id }) => itemId.includes(id));
+      const allMemberships = selectedItems.map(
+        ({ creator, id, memberships }) =>
+          memberships || [
+            {
+              permission: PERMISSION_LEVELS.ADMIN,
+              memberId: creator,
+              itemId: id,
+            },
+          ],
+      );
+      reply(allMemberships);
     },
   ).as('getItemMemberships');
 };
 
-export const mockEditItemMembershipForItem = (items) => {
+export const mockEditItemMembershipForItem = () => {
   cy.intercept(
     {
       method: DEFAULT_PATCH.method,
       url: new RegExp(
         `${API_HOST}/${buildEditItemMembershipRoute(ID_FORMAT)}$`,
       ),
     },
-    ({ reply, url }) => {
-      const mId = url.slice(API_HOST.length).split('/')[2];
-      const result = items.find(({ id }) => id === mId)?.memberships || [];
-      reply(result?.find(({ id }) => id === mId));
+    ({ reply }) => {
+      // this mock intercept does nothing
+      reply(true);
     },
   ).as('editItemMembership');
 };
 
-export const mockDeleteItemMembershipForItem = (items) => {
+export const mockDeleteItemMembershipForItem = () => {
   cy.intercept(
     {
       method: DEFAULT_DELETE.method,
       url: new RegExp(
         `${API_HOST}/${buildDeleteItemMembershipRoute(ID_FORMAT)}$`,
       ),
     },
-    ({ reply, url }) => {
-      const mId = url.slice(API_HOST.length).split('/')[2];
-      const result = items.find(({ id }) => id === mId)?.memberships || [];
-      reply(result?.find(({ id }) => id === mId));
+    ({ reply }) => {
+      // this mock intercept does nothing
+      reply(true);
     },
   ).as('deleteItemMembership');
 };

package.json

@@ -5,7 +5,7 @@
   "license": "AGPL-3.0-only",
   "dependencies": {
     "@graasp/chatbox": "git://github.com/graasp/graasp-chatbox.git#main",
-    "@graasp/query-client": "git://github.com/graasp/graasp-query-client.git#main",
+    "@graasp/query-client": "git://github.com/graasp/graasp-query-client.git#82/updateDeleteItemsRoute",
     "@graasp/ui": "git://github.com/graasp/graasp-ui.git#master",
     "@material-ui/core": "4.11.2",
     "@material-ui/icons": "5.0.0-beta.4",

src/components/App.js

@@ -35,6 +35,7 @@ import {
   ITEM_LOGIN_SIGN_IN_PASSWORD_ID,
   ITEM_LOGIN_SIGN_IN_USERNAME_ID,
 } from '../config/selectors';
+import { CurrentUserContextProvider } from './context/CurrentUserContext';
 
 const App = () => {
   const { useCurrentMember, useItem, useItemLogin } = hooks;
@@ -63,39 +64,41 @@ const App = () => {
 
   return (
     <ModalProviders>
-      <Router>
-        <Switch>
-          <Route path={HOME_PATH} exact component={Authorization()(Home)} />
-          <Route
-            path={SHARED_ITEMS_PATH}
-            exact
-            component={Authorization()(SharedItems)}
-          />
-          <Route
-            path={FAVORITE_ITEMS_PATH}
-            exact
-            component={Authorization()(FavoriteItems)}
-          />
-          <Route path={buildItemPath()} render={renderItemScreen} />
-          <Route
-            path={MEMBER_PROFILE_PATH}
-            exact
-            component={Authorization()(MemberProfileScreen)}
-          />
-          <Route
-            path={RECYCLE_BIN_PATH}
-            exact
-            component={Authorization()(RecycleBinScreen)}
-          />
-          <Route path={ITEMS_PATH} exact component={Authorization()(Home)} />
-          <Route
-            path={REDIRECT_PATH}
-            exact
-            component={Authorization()(Redirect)}
-          />
-          <Redirect to={HOME_PATH} />
-        </Switch>
-      </Router>
+      <CurrentUserContextProvider>
+        <Router>
+          <Switch>
+            <Route path={HOME_PATH} exact component={Authorization()(Home)} />
+            <Route
+              path={SHARED_ITEMS_PATH}
+              exact
+              component={Authorization()(SharedItems)}
+            />
+            <Route
+              path={FAVORITE_ITEMS_PATH}
+              exact
+              component={Authorization()(FavoriteItems)}
+            />
+            <Route path={buildItemPath()} render={renderItemScreen} />
+            <Route
+              path={MEMBER_PROFILE_PATH}
+              exact
+              component={Authorization()(MemberProfileScreen)}
+            />
+            <Route
+              path={RECYCLE_BIN_PATH}
+              exact
+              component={Authorization()(RecycleBinScreen)}
+            />
+            <Route path={ITEMS_PATH} exact component={Authorization()(Home)} />
+            <Route
+              path={REDIRECT_PATH}
+              exact
+              component={Authorization()(Redirect)}
+            />
+            <Redirect to={HOME_PATH} />
+          </Switch>
+        </Router>
+      </CurrentUserContextProvider>
     </ModalProviders>
   );
 };

src/components/common/Authorization.js

@@ -1,15 +1,15 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { useLocation } from 'react-router';
 import { API_ROUTES } from '@graasp/query-client';
 import {
   AUTHENTICATION_HOST,
   REDIRECT_URL_LOCAL_STORAGE_KEY,
   NODE_ENV,
 } from '../../config/constants';
-import { hooks } from '../../config/queryClient';
 import Loader from './Loader';
 import RedirectPage from './RedirectionContent';
 import { redirect } from '../../utils/navigation';
+import { CurrentUserContext } from '../context/CurrentUserContext';
 
 const Authorization = () => (ChildComponent) => {
   const ComposedComponent = (props) => {
@@ -23,7 +23,7 @@ const Authorization = () => (ChildComponent) => {
       );
     };
 
-    const { data: currentMember, isLoading } = hooks.useCurrentMember();
+    const { data: currentMember, isLoading } = useContext(CurrentUserContext);
 
     if (isLoading) {
       return <Loader />;