Skip to content
This repository has been archived by the owner on Jan 23, 2025. It is now read-only.

Commit

Permalink
refactor: factor out in ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@pyphilia
pyphilia committed Sep 23, 2024
1 parent 896705f commit 69d9207
Show file tree
Hide file tree
Showing 6 changed files with 63 additions and 110 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"@graasp/sdk": "4.29.1",
"@graasp/stylis-plugin-rtl": "2.2.0",
"@graasp/translations": "github:graasp/graasp-translations#membership-request",
"@graasp/ui": "5.1.0",
"@graasp/ui": "github:graasp/graasp-ui#enroll",
"@mui/icons-material": "5.16.4",
"@mui/lab": "5.0.0-alpha.172",
"@mui/material": "5.16.4",
Expand Down
10 changes: 1 addition & 9 deletions src/components/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ import RecycledItemsScreen from './pages/RecycledItemsScreen';
import HomeScreen from './pages/home/HomeScreen';
import ItemPageLayout from './pages/item/ItemPageLayout';
import ItemScreen from './pages/item/ItemScreen';
import ItemScreenLayout from './pages/item/ItemScreenLayout';
import ItemSettingsPage from './pages/item/ItemSettingsPage';
import ItemSharingPage from './pages/item/ItemSharingPage';
import LibrarySettingsPage from './pages/item/LibrarySettingsPage';
Expand Down Expand Up @@ -117,14 +116,7 @@ const App = (): JSX.Element => {
</Route>

{/* item pages - can be public */}
<Route
path={buildItemPath()}
element={
<ItemLoginWrapper>
<ItemScreenLayout />
</ItemLoginWrapper>
}
>
<Route path={buildItemPath()} element={<ItemAccessWrapper />}>
<Route index element={<ItemScreen />} />
<Route element={<ItemPageLayout />}>
<Route path={ITEM_SHARE_PATH} element={<ItemSharingPage />} />
Expand Down
42 changes: 0 additions & 42 deletions src/components/pages/item/ItemScreenLayout.tsx
View file

This file was deleted.

100 changes: 52 additions & 48 deletions src/components/pages/item/accessWrapper/ItemAccessWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,14 @@ import { Outlet, useParams } from 'react-router-dom';

import { Stack } from '@mui/material';

import { ForbiddenContent, ItemLoginScreen } from '@graasp/ui';
import {
AccountType,
PermissionLevel,
PermissionLevelCompare,
} from '@graasp/sdk';
import { ForbiddenContent, ItemLoginWrapper } from '@graasp/ui';

import LoadingScreen from '@/components/layout/LoadingScreen';
import Redirect from '@/components/main/Redirect';
import EnrollContent from '@/components/pages/item/accessWrapper/EnrollContent';
import RequestAccessContent from '@/components/pages/item/accessWrapper/RequestAccessContent';
import { hooks, mutations } from '@/config/queryClient';
Expand All @@ -15,65 +20,64 @@ import {
ITEM_LOGIN_SIGN_IN_USERNAME_ID,
} from '@/config/selectors';

const { useItem, useCurrentMember, useItemLoginSchemaType } = hooks;

const ItemAccessWrapper = (): JSX.Element => {
const { itemId } = useParams();
const { data: item, isLoading: itemIsLoading } = useItem(itemId);
const { data: item, isLoading: itemIsLoading } = hooks.useItem(itemId);
const { data: currentMember, isLoading: currentMemberIsLoading } =
useCurrentMember();
hooks.useCurrentMember();
const { data: itemLoginSchemaType, isLoading: itemLoginSchemaTypeIsLoading } =
useItemLoginSchemaType({ itemId });
hooks.useItemLoginSchemaType({ itemId });

const { mutate: itemLoginSignIn } = mutations.usePostItemLogin();

if (itemId) {
// user has access to item - show item
if (item) {
return <Outlet context={{ item }} />;
}
const canWrite = item?.permission
? PermissionLevelCompare.gte(item.permission, PermissionLevel.Write)
: false;

if (currentMember) {
// user is logged in and item login enabled - request automatic membership
if (itemLoginSchemaType) {
return <EnrollContent itemId={itemId} />;
}
const canAdmin = item?.permission
? PermissionLevelCompare.gte(item.permission, PermissionLevel.Admin)
: false;

// user is logged in and item login disabled - request access
return <RequestAccessContent itemId={itemId} member={currentMember} />;
}

// user is logged out and has item login enabled - show form
if (itemLoginSchemaType) {
return (
<ItemLoginScreen
signInButtonId={ITEM_LOGIN_SIGN_IN_BUTTON_ID}
usernameInputId={ITEM_LOGIN_SIGN_IN_USERNAME_ID}
passwordInputId={ITEM_LOGIN_SIGN_IN_PASSWORD_ID}
signIn={itemLoginSignIn}
itemLoginSchemaType={itemLoginSchemaType}
itemId={itemId}
/>
);
}
if (!itemId) {
return <Redirect />;
}

if (currentMemberIsLoading || itemLoginSchemaTypeIsLoading || itemIsLoading) {
return <LoadingScreen />;
}

// item is not defined or user is logged out
return (
<Stack
id={ITEM_LOGIN_SCREEN_FORBIDDEN_ID}
direction="column"
justifyContent="center"
alignItems="center"
height="100%"
gap={2}
<ItemLoginWrapper
item={item}
currentAccount={currentMember}
enrollContent={<EnrollContent itemId={itemId} />}
signInButtonId={ITEM_LOGIN_SIGN_IN_BUTTON_ID}
usernameInputId={ITEM_LOGIN_SIGN_IN_USERNAME_ID}
passwordInputId={ITEM_LOGIN_SIGN_IN_PASSWORD_ID}
signIn={itemLoginSignIn}
itemLoginSchemaType={itemLoginSchemaType}
itemId={itemId}
isLoading={
currentMemberIsLoading || itemLoginSchemaTypeIsLoading || itemIsLoading
}
requestAccessContent={
currentMember?.type === AccountType.Individual ? (
<RequestAccessContent itemId={itemId} member={currentMember} />
) : undefined
}
forbiddenContent={
<Stack
id={ITEM_LOGIN_SCREEN_FORBIDDEN_ID}
direction="column"
justifyContent="center"
alignItems="center"
height="100%"
gap={2}
>
<ForbiddenContent />
</Stack>
}
>
<ForbiddenContent />
</Stack>
<Outlet
context={{ item, permission: item?.permission, canWrite, canAdmin }}
/>
</ItemLoginWrapper>
);
};

Expand Down
5 changes: 2 additions & 3 deletions src/components/pages/item/accessWrapper/RequestAccessContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,8 @@ import { LoadingButton } from '@mui/lab';
import { Stack, Typography } from '@mui/material';

import {
CompleteMember,
CurrentAccount,
DiscriminatedItem,
Member,
MembershipRequestStatus,
} from '@graasp/sdk';

Expand All @@ -19,7 +18,7 @@ import {
import { BUILDER } from '@/langs/constants';

type Props = {
member: CurrentAccount;
member: Member;
itemId: DiscriminatedItem['id'];
};

Expand Down
14 changes: 7 additions & 7 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1779,8 +1779,8 @@ __metadata:
linkType: hard

"@graasp/query-client@github:graasp/graasp-query-client#membership-request":
version: 3.22.4
resolution: "@graasp/query-client@https://github.com/graasp/graasp-query-client.git#commit=6469b16733935286d3de33e1fb63d1bd662d40eb"
version: 3.23.0
resolution: "@graasp/query-client@https://github.com/graasp/graasp-query-client.git#commit=8fb1f15af74b4204d74341825de2c8b9ec6bea7e"
dependencies:
"@tanstack/react-query": "npm:4.36.1"
"@tanstack/react-query-devtools": "npm:4.36.1"
Expand All @@ -1790,7 +1790,7 @@ __metadata:
"@graasp/sdk": ^4.0.0
"@graasp/translations": "*"
react: ^18.0.0
checksum: 10/9cda0843954b0dcc61e5e46b1154b665fbf80be3c522804988740eba51bc872bb4c68f797761fba71e5863ca56e3ae00bac68c114bf62758ecd63dc0df0c399f
checksum: 10/0688fe606c43da47aa06efcc5232a525f31c78aec11840cce6ed7a53394ab42f438d7ca16b8b1ecb141322651682dd35cddc8451da7a1cef8ebf8c09d8b0da64
languageName: node
linkType: hard

Expand Down Expand Up @@ -1829,9 +1829,9 @@ __metadata:
languageName: node
linkType: hard

"@graasp/ui@npm:5.1.0":
"@graasp/ui@github:graasp/graasp-ui#enroll":
version: 5.1.0
resolution: "@graasp/ui@npm:5.1.0"
resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=7fe19bb72e1f66d07fb18cb71732448359f65131"
dependencies:
http-status-codes: "npm:2.3.0"
interweave: "npm:13.1.0"
Expand Down Expand Up @@ -1860,7 +1860,7 @@ __metadata:
react-i18next: ^13.0.0 || ^14.0.0 || ^15.0.0
react-router-dom: ^6.11.0
stylis: ^4.1.3
checksum: 10/fcab9f3d021848e81f8779be9508a6e6efcae249a364611e4adf888410658d83dd1ecfe8b0fbcda26c3bd3f840b44e6efe73cd2e3f9af53917c4510499a3b37a
checksum: 10/6bc3e6b815a55b1c2304fcd8cdc348b3329fb345996c988a115bdd2f48a789d78bd852d6224beb0e2d4b14bfe5ac3c4a1f12fa1092f3fcf8663b0319ff2729dd
languageName: node
linkType: hard

Expand Down Expand Up @@ -6600,7 +6600,7 @@ __metadata:
"@graasp/sdk": "npm:4.29.1"
"@graasp/stylis-plugin-rtl": "npm:2.2.0"
"@graasp/translations": "github:graasp/graasp-translations#membership-request"
"@graasp/ui": "npm:5.1.0"
"@graasp/ui": "github:graasp/graasp-ui#enroll"
"@mui/icons-material": "npm:5.16.4"
"@mui/lab": "npm:5.0.0-alpha.172"
"@mui/material": "npm:5.16.4"
Expand Down

0 comments on commit 69d9207

Please sign in to comment.