Skip to content

Commit

Permalink
fix: player home (#606)
Browse files Browse the repository at this point in the history
* fix: update home page of player

* fix: remove warnings with todos

* fix: redirect to account home directly

* fix: remove tip card

* fix: remove translations

* fix: tests
  • Loading branch information
spaenleh authored Jan 15, 2025
1 parent b50ff44 commit 468490d
Show file tree
Hide file tree
Showing 11 changed files with 36 additions and 138 deletions.
6 changes: 0 additions & 6 deletions cypress/e2e/account/homePage.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { ACCOUNT_HOME_PATH } from '../../../src/config/paths';
import {
AVATAR_UPLOAD_ICON_ID,
AVATAR_UPLOAD_INPUT_ID,
CARD_TIP_ID,
CROP_MODAL_CONFIRM_BUTTON_ID,
MEMBER_AVATAR_IMAGE_ID,
MEMBER_CREATED_AT_ID,
Expand Down Expand Up @@ -81,8 +80,6 @@ describe('Upload Avatar', () => {
});

it('Upload a new thumbnail', () => {
// at first card element should exist
cy.get(`#${CARD_TIP_ID}`).should('exist');
// select the avatar image
cy.get(`#${AVATAR_UPLOAD_INPUT_ID}`).selectFile(
THUMBNAIL_MEDIUM_PATH,
Expand All @@ -95,8 +92,6 @@ describe('Upload Avatar', () => {
cy.get(`#${MEMBER_AVATAR_IMAGE_ID}`).should('be.visible');
});
cy.wait('@uploadAvatar');
// card element should not exist
cy.get(`#${CARD_TIP_ID}`).should('not.exist');
});
});

Expand All @@ -108,7 +103,6 @@ describe('Image is not set', () => {

it('Image is not set', () => {
cy.wait('@getCurrentMember');
cy.get(`#${CARD_TIP_ID}`).should('exist');
// uploader icon should be visible
cy.get(`#${AVATAR_UPLOAD_ICON_ID}`).should('be.visible');
// image display element should not exist
Expand Down
1 change: 0 additions & 1 deletion src/config/selectors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ export const MEMBER_STORAGE_PARENT_FOLDER_ID = 'storage-parent-folder';
export const getCellId = (cellName: string, fileId: string): string =>
`${cellName}-${fileId}`;

export const CARD_TIP_ID = 'tip-card';
export const MEMBER_AVATAR_WRAPPER_ID = 'member-avatar';
export const MEMBER_AVATAR_IMAGE_ID = 'member-avatar-image';
export const MEMBER_CREATED_AT_ID = 'member-created-at';
Expand Down
2 changes: 0 additions & 2 deletions src/locales/de/player.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,6 @@
"MAP_BUTTON_TEXT": "{{name}} auf der Karte anzeigen",
"MAP_BUTTON_DISABLED_TEXT": "Dieser Artikel hat keine Geolokalisierung",
"FROM_SHORTCUT_BUTTON_TEXT": "Zurück zu {{name}}",
"GUEST_LIMITATION_TEXT": "Sie verwenden Graasp derzeit mit dem Gastkonto <1>{{name}}</1>. Um alle Funktionen von Graasp nutzen zu können, müssen Sie sich abmelden und ein Graasp-Konto erstellen.",
"GUEST_SIGN_OUT_BUTTON": "Melden Sie sich ab und erstellen Sie ein Graasp-Konto",
"ENROLL_SCREEN_TITLE": "Melden Sie sich bei {{name}} an",
"ENROLL_BUTTON_TEXT": "Einschreiben",
"REQUEST_ACCESS_PENDING_TITLE": "Ihre Zugriffsanforderung steht noch aus",
Expand Down
3 changes: 0 additions & 3 deletions src/locales/en/player.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
"RECENT_ITEMS_TITLE": "Most Recent Items",
"DRAWER_ARIAL_LABEL": "Open drawer",
"ERROR_FETCHING_ITEM": "There was an error fetching the requested item",

"SIGN_IN_BUTTON_TEXT": "Sign In",
"FALLBACK_TITLE": "Oops",
"FALLBACK_TEXT": "Something went wrong. Please try again. If the issue persists contact us.",
Expand All @@ -32,8 +31,6 @@
"MAP_BUTTON_TEXT": "See {{name}} on Map",
"MAP_BUTTON_DISABLED_TEXT": "This item does not have a geolocation",
"FROM_SHORTCUT_BUTTON_TEXT": "Back to {{name}}",
"GUEST_LIMITATION_TEXT": "You are currently using Graasp with the guest account <1>{{name}}</1>. In order to use all features of Graasp, you have to log out and create a Graasp account.",
"GUEST_SIGN_OUT_BUTTON": "Log out and Create a Graasp account",
"ENROLL_SCREEN_TITLE": "Enroll to {{name}}",
"ENROLL_BUTTON_TEXT": "Enroll",
"REQUEST_ACCESS_PENDING_TITLE": "Your access request is pending",
Expand Down
2 changes: 0 additions & 2 deletions src/locales/fr/player.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,6 @@
"MAP_BUTTON_TEXT": "Voir {{name}} sur la Carte",
"MAP_BUTTON_DISABLED_TEXT": "Cet élément n'a pas de localisation",
"FROM_SHORTCUT_BUTTON_TEXT": "Retourner vers {{name}}",
"GUEST_LIMITATION_TEXT": "Vous utilisez actuellement Graasp avec le compte invité <1>{{name}}</1>. Pour pouvoir utiliser toutes les fonctionnalités de Graasp, vous devez vous déconnecter et créer un compte Graasp.",
"GUEST_SIGN_OUT_BUTTON": "Déconnectez-vous et créez un compte Graasp",
"ENROLL_SCREEN_TITLE": "Inscrivez-vous à {{name}}",
"ENROLL_BUTTON_TEXT": "S'inscrire",
"REQUEST_ACCESS_PENDING_TITLE": "Votre demande d'accès est en attente",
Expand Down
2 changes: 0 additions & 2 deletions src/locales/it/player.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,6 @@
"MAP_BUTTON_TEXT": "Vedi {{name}} sulla mappa",
"MAP_BUTTON_DISABLED_TEXT": "Questo articolo non ha una geolocalizzazione",
"FROM_SHORTCUT_BUTTON_TEXT": "Torna a {{nome}}",
"GUEST_LIMITATION_TEXT": "Al momento stai utilizzando Graasp con l'account ospite <1>{{name}}</1>. Per utilizzare tutte le funzionalità di Graasp, devi effettuare il logout e creare un account Graasp.",
"GUEST_SIGN_OUT_BUTTON": "Esci e crea un account Graasp",
"ENROLL_SCREEN_TITLE": "Iscriviti a {{name}}",
"ENROLL_BUTTON_TEXT": "Iscriversi",
"REQUEST_ACCESS_PENDING_TITLE": "La tua richiesta di accesso è in sospeso",
Expand Down
51 changes: 0 additions & 51 deletions src/modules/account/home/TipCard.tsx

This file was deleted.

30 changes: 30 additions & 0 deletions src/modules/analytics/context/DataProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -157,23 +157,33 @@ const DataProvider = ({ children, itemId }: Props): JSX.Element => {
const { data: itemChildren } = hooks.useChildren(itemId, undefined, {
enabled: itemData?.type === ItemType.FOLDER,
});
// TODO: fix issue by refactoring code depending on this
// eslint-disable-next-line react-hooks/exhaustive-deps
const descendantApps =
itemData?.type === ItemType.APP
? [itemData, ...appDescendants]
: appDescendants;

useEffect(() => {
if (itemIsError) {
// TODO: fix this issue
// eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
setError(true);
}
}, [itemIsError]);

useEffect(() => {
if (enabledArray[Context.Builder]) {
// TODO: fix this issue
// eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
setIsLoading(builderIsLoading);
} else if (enabledArray[Context.Player]) {
// TODO: fix this issue
// eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
setIsLoading(playerIsLoading);
} else if (enabledArray[Context.Library]) {
// TODO: fix this issue
// eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
setIsLoading(explorerIsLoading);
}
}, [
Expand All @@ -189,6 +199,8 @@ const DataProvider = ({ children, itemId }: Props): JSX.Element => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
if (!enabledArray[view]) {
// TODO: fix this issue
// eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
setEnabledArray({ ...enabledArray, [view]: true });
}
}, [view, enabledArray]);
Expand All @@ -199,8 +211,14 @@ const DataProvider = ({ children, itemId }: Props): JSX.Element => {
view === Context.Builder &&
actions.length !== builderData?.actions?.length
) {
// TODO: fix this issue
// eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
setActions(builderData?.actions ?? []);
// TODO: fix this issue
// eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
setAllMembers(builderData?.members ?? []);
// TODO: fix this issue
// eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
setError(builderIsError);
}
}, [builderData, view, actions, builderIsError]);
Expand All @@ -211,8 +229,14 @@ const DataProvider = ({ children, itemId }: Props): JSX.Element => {
view === Context.Player &&
actions.length !== playerData?.actions?.length
) {
// TODO: fix this issue
// eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
setActions(playerData?.actions ?? []);
// TODO: fix this issue
// eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
setAllMembers(playerData?.members ?? []);
// TODO: fix this issue
// eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
setError(playerIsError);
}
}, [playerData, view, actions, playerIsError]);
Expand All @@ -223,8 +247,14 @@ const DataProvider = ({ children, itemId }: Props): JSX.Element => {
view === Context.Library &&
actions.length !== explorerData?.actions?.length
) {
// TODO: fix this issue
// eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
setActions(explorerData?.actions ?? []);
// TODO: fix this issue
// eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
setAllMembers(explorerData?.members ?? []);
// TODO: fix this issue
// eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
setError(explorerIsError);
}
}, [explorerData, view, actions, explorerIsError]);
Expand Down
2 changes: 2 additions & 0 deletions src/modules/player/contexts/LayoutContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,8 @@ export const LayoutContextProvider = ({ children }: Props): JSX.Element => {
const [isFullscreen, setIsFullscreen] = useState<boolean>(false);

useEffect(() => {
// TODO: fix this issue
// eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
setIsPinnedOpen(!isMobile);
}, [isMobile]);

Expand Down
2 changes: 0 additions & 2 deletions src/routes/account/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { Divider, Stack } from '@mui/material';
import { createFileRoute } from '@tanstack/react-router';

import { MemberCard } from '~account/home/MemberCard';
import { TipCard } from '~account/home/TipCard';
import { RecentItems } from '~account/home/recentItems/RecentItems';

export const Route = createFileRoute('/account/')({
Expand All @@ -14,7 +13,6 @@ function HomeRoute() {
return (
<Stack gap={4} alignItems="center">
<MemberCard />
<TipCard />
<Divider flexItem />
<RecentItems />
</Stack>
Expand Down
73 changes: 4 additions & 69 deletions src/routes/player/index.tsx
Original file line number Diff line number Diff line change
@@ -1,74 +1,9 @@
import { Trans, useTranslation } from 'react-i18next';

import {
Alert,
Box,
Button,
Container,
Stack,
Typography,
} from '@mui/material';

import { AccountType } from '@graasp/sdk';

import { createFileRoute, redirect } from '@tanstack/react-router';
import { ClipboardPenIcon } from 'lucide-react';

import { useAuth } from '@/AuthContext';
import { NS } from '@/config/constants';
import { LOG_IN_PAGE_PATH } from '@/config/paths';
import { PREVENT_GUEST_MESSAGE_ID } from '@/config/selectors';

export const Route = createFileRoute('/player/')({
beforeLoad: ({ context }) => {
// check if the user is authenticated.
// if not, redirect to `/auth/login` so the user can log in their account
if (!context.auth.isAuthenticated) {
throw redirect({
to: LOG_IN_PAGE_PATH,
search: {
url: window.location.href,
},
});
}
beforeLoad: () => {
throw redirect({
to: '/account',
});
},
component: HomePage,
});

function HomePage(): JSX.Element {
const { isAuthenticated, user, logout } = useAuth();
const { t } = useTranslation(NS.Player);
if (isAuthenticated && user.type === AccountType.Guest) {
return (
<Stack height="100%" justifyContent="center" alignItems="center">
<Container maxWidth="md">
<Alert severity="info" id={PREVENT_GUEST_MESSAGE_ID}>
<Typography>
{
<Trans
t={t}
i18nKey={'GUEST_LIMITATION_TEXT'}
values={{
name: user.name,
}}
components={{ 1: <strong /> }}
/>
}
</Typography>
<Box mt={2} textAlign="center">
<Button
startIcon={<ClipboardPenIcon />}
variant="contained"
sx={{ textTransform: 'none' }}
onClick={logout}
>
{t('GUEST_SIGN_OUT_BUTTON')}
</Button>
</Box>
</Alert>
</Container>
</Stack>
);
}
return <Button>helllo</Button>;
}

0 comments on commit 468490d

Please sign in to comment.