refactor: update

package.json

@@ -40,12 +40,13 @@
     "@graasp/query-client": "3.25.0",
     "@graasp/sdk": "4.31.0",
     "@graasp/stylis-plugin-rtl": "2.2.0",
-    "@graasp/translations": "1.37.1",
+    "@graasp/translations": "1.39.0",
     "@graasp/ui": "5.2.0",
     "@mui/icons-material": "5.16.7",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.7",
     "@sentry/react": "7.119.0",
+    "classnames": "2.5.1",
     "date-fns": "4.1.0",
     "i18next": "23.15.1",
     "katex": "0.16.11",

src/App.tsx

@@ -24,7 +24,7 @@ import { AUTHENTICATION_HOST, DOMAIN } from '@/config/env';
 import { HOME_PATH, buildContentPagePath, buildMainPath } from '@/config/paths';
 import { useCurrentMemberContext } from '@/contexts/CurrentMemberContext';
 import HomePage from '@/modules/pages/HomePage';
-import ItemPage from '@/modules/pages/ItemPage';
+import ItemPage from '@/modules/pages/itemPage/ItemPage';
 
 import { usePlayerTranslation } from './config/i18n';
 import { mutations } from './config/queryClient';

src/langs/constants.ts

@@ -44,4 +44,13 @@ export const PLAYER = {
   ENROLL_SCREEN_TITLE: 'ENROLL_SCREEN_TITLE',
   ENROLL_SCREEN_DESCRIPTION: 'ENROLL_SCREEN_DESCRIPTION',
   ENROLL_BUTTON_TEXT: 'ENROLL_BUTTON_TEXT',
+  REQUEST_ACCESS_PENDING_TITLE: 'REQUEST_ACCESS_PENDING_TITLE',
+  REQUEST_ACCESS_PENDING_DESCRIPTION: 'REQUEST_ACCESS_PENDING_DESCRIPTION',
+  REQUEST_ACCESS_TITLE: 'REQUEST_ACCESS_TITLE',
+  REQUEST_ACCESS_BUTTON: 'REQUEST_ACCESS_BUTTON',
+  REQUEST_ACCESS_SENT_BUTTON: 'REQUEST_ACCESS_SENT_BUTTON',
+  ENROLL_TITLE: 'ENROLL_TITLE',
+  ENROLL_BUTTON: 'ENROLL_BUTTON',
+  ENROLL_DESCRIPTION: 'ENROLL_DESCRIPTION',
+  ITEM_LOGIN_HELPER_SIGN_OUT: 'ITEM_LOGIN_HELPER_SIGN_OUT',
 };

src/langs/en.json

@@ -37,5 +37,14 @@
   "GUEST_SIGN_OUT_BUTTON": "Log out and Create a Graasp account",
   "ENROLL_SCREEN_TITLE": "Enroll to {{name}}",
   "ENROLL_SCREEN_DESCRIPTION": "This resource allows access with your Graasp account. To access this course, simply click Enroll",
-  "ENROLL_BUTTON_TEXT": "Enroll"
+  "ENROLL_BUTTON_TEXT": "Enroll",
+  "REQUEST_ACCESS_PENDING_TITLE": "Your access request is pending",
+  "REQUEST_ACCESS_PENDING_DESCRIPTION": "An admin needs to approve your request for you to access this item.",
+  "REQUEST_ACCESS_TITLE": "Request access to this item",
+  "REQUEST_ACCESS_BUTTON": "Request access",
+  "REQUEST_ACCESS_SENT_BUTTON": "Request sent",
+  "ENROLL_TITLE": "Enroll to this item",
+  "ENROLL_BUTTON": "Enroll",
+  "ENROLL_DESCRIPTION": "Click on the button below to enroll and access this item.",
+  "ITEM_LOGIN_HELPER_SIGN_OUT": "You're logged in as {{email}}"
 }

src/modules/pages/HomePage.tsx

@@ -1,7 +1,13 @@
 import { useState } from 'react';
 import { Helmet } from 'react-helmet';
 
-import { Pagination, PaginationItem, Stack, Typography } from '@mui/material';
+import {
+  Alert,
+  Pagination,
+  PaginationItem,
+  Stack,
+  Typography,
+} from '@mui/material';
 import Grid2 from '@mui/material/Unstable_Grid2';
 
 import { PackedItem } from '@graasp/sdk';
@@ -35,17 +41,25 @@ const DisplayItems = ({
 }: {
   items?: PackedItem[];
   isLoading: boolean;
-}): JSX.Element[] | false => {
+}): JSX.Element[] | JSX.Element | false => {
   if (items) {
+    if (!items.length) {
+      return (
+        <Alert severity="info" sx={{ m: 1, width: '100%' }}>
+          You have no elements.
+        </Alert>
+      );
+    }
+
     return items.map((item) => (
       <GridWrapper key={item.id}>
         <ItemCard item={item} />
       </GridWrapper>
     ));
   }
   if (isLoading) {
-    return Array.from(Array(6)).map(() => (
-      <GridWrapper>
+    return Array.from(Array(6)).map((i) => (
+      <GridWrapper key={i}>
         <LoadingItemsIndicator />
       </GridWrapper>
     ));

src/modules/pages/itemPage/EnrollContent.tsx

@@ -0,0 +1,42 @@
+import { Stack, Typography } from '@mui/material';
+
+import { Button } from '@graasp/ui';
+
+import { CircleUser } from 'lucide-react';
+
+import { usePlayerTranslation } from '@/config/i18n';
+import { mutations } from '@/config/queryClient';
+import { PLAYER } from '@/langs/constants';
+
+// eslint-disable-next-line import/prefer-default-export
+export const EnrollContent = ({ itemId }: { itemId: string }): JSX.Element => {
+  const { t: translatePlayer } = usePlayerTranslation();
+
+  const { mutate: enroll } = mutations.useEnroll();
+
+  return (
+    <Stack
+      direction="column"
+      justifyContent="center"
+      alignItems="center"
+      height="100%"
+      gap={2}
+    >
+      <CircleUser size={40} />
+      <Typography variant="h3">
+        {translatePlayer(PLAYER.ENROLL_TITLE)}
+      </Typography>
+      <Typography variant="subtitle2">
+        {translatePlayer(PLAYER.ENROLL_DESCRIPTION)}
+      </Typography>
+      <Button
+        // dataCy={ENROLL_BUTTON_SELECTOR}
+        onClick={() => {
+          enroll({ itemId });
+        }}
+      >
+        {translatePlayer(PLAYER.ENROLL_BUTTON)}
+      </Button>
+    </Stack>
+  );
+};

src/modules/pages/itemPage/ItemPage.tsx

@@ -0,0 +1,63 @@
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { AccountType } from '@graasp/sdk';
+import { ItemLoginWrapper } from '@graasp/ui';
+
+import { HOME_PATH } from '@/config/paths';
+import { hooks, mutations } from '@/config/queryClient';
+import {
+  ITEM_LOGIN_PASSWORD_INPUT_ID,
+  ITEM_LOGIN_SIGN_IN_BUTTON_ID,
+  ITEM_LOGIN_USERNAME_INPUT_ID,
+} from '@/config/selectors';
+import PlayerCookiesBanner from '@/modules/cookies/PlayerCookiesBanner';
+
+import ItemForbiddenScreen from '../../item/ItemForbiddenScreen';
+import MainScreen from '../../item/MainScreen';
+import { EnrollContent } from './EnrollContent';
+import { RequestAccessContent } from './RequestAccessContent';
+
+const { useItem, useItemLoginSchemaType, useCurrentMember } = hooks;
+
+const ItemPage = (): JSX.Element | null => {
+  const { itemId } = useParams();
+  const navigate = useNavigate();
+  const { mutate: itemLoginSignIn } = mutations.usePostItemLogin();
+  const { data: item, isLoading: isItemLoading } = useItem(itemId);
+  const { data: itemLoginSchemaType, isLoading: isLoadingItemLoginSchemaType } =
+    useItemLoginSchemaType({ itemId });
+  const { data: currentAccount, isLoading: isLoadingMember } =
+    useCurrentMember();
+
+  if (!itemId) {
+    navigate(HOME_PATH);
+    return null;
+  }
+  return (
+    <ItemLoginWrapper
+      itemId={itemId}
+      item={item}
+      currentAccount={currentAccount}
+      signIn={itemLoginSignIn}
+      itemLoginSchemaType={itemLoginSchemaType}
+      usernameInputId={ITEM_LOGIN_USERNAME_INPUT_ID}
+      signInButtonId={ITEM_LOGIN_SIGN_IN_BUTTON_ID}
+      passwordInputId={ITEM_LOGIN_PASSWORD_INPUT_ID}
+      enrollContent={<EnrollContent itemId={itemId} />}
+      forbiddenContent={<ItemForbiddenScreen />}
+      requestAccessContent={
+        currentAccount?.type === AccountType.Individual ? (
+          <RequestAccessContent itemId={itemId} member={currentAccount} />
+        ) : undefined
+      }
+      isLoading={
+        isLoadingMember || isItemLoading || isLoadingItemLoginSchemaType
+      }
+    >
+      <MainScreen />
+      <PlayerCookiesBanner />
+    </ItemLoginWrapper>
+  );
+};
+
+export default ItemPage;