Skip to content

Commit 3e96b8b

Browse files
swoufswouf
authored
refactor: use graasp-ui for Loader (#146)
 refactor: use graasp-ui for error fallback chore(deps): update to graasp-ui 4.10.0
1 parent 5d225f6 commit 3e96b8b

File tree

11 files changed

+1975
-291
lines changed

11 files changed

+1975
-291
lines changed

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,17 @@
2121
"url": "https://github.com/graasp/graasp-app-collaborative-ideation"
2222
},
2323
"homepage": ".",
24+
"engines": {
25+
"node": ">=20"
26+
},
2427
"type": "module",
2528
"dependencies": {
2629
"@codemirror/lang-javascript": "^6.2.1",
2730
"@emotion/react": "11.11.4",
2831
"@emotion/styled": "11.11.0",
2932
"@graasp/apps-query-client": "^3.4.8",
3033
"@graasp/sdk": "4.1.0",
34+
"@graasp/ui": "4.10.0",
3135
"@mui/icons-material": "5.15.12",
3236
"@mui/lab": "5.0.0-alpha.167",
3337
"@mui/material": "5.15.12",

‎src/modules/ErrorBoundary.tsx‎

Lines changed: 29 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,140 +1,38 @@
1-
import { FC, ReactNode, useState } from 'react';
2-
import { useTranslation } from 'react-i18next';
1+
import { FC, ReactNode } from 'react';
32
import * as Sentry from '@sentry/react';
4-
import Container from '@mui/material/Container';
5-
import Alert from '@mui/material/Alert';
6-
7-
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
8-
import Accordion from '@mui/material/Accordion';
9-
import AccordionSummary from '@mui/material/AccordionSummary';
10-
import AccordionDetails from '@mui/material/AccordionDetails';
11-
import {
12-
Box,
13-
Button,
14-
Paper,
15-
Stack,
16-
TextField,
17-
Typography,
18-
useTheme,
19-
} from '@mui/material';
20-
import SendIcon from '@mui/icons-material/Send';
21-
import WarningIcon from '@mui/icons-material/WarningAmber';
22-
23-
interface ErrorFallbackProps {
24-
error: Error;
25-
componentStack: string;
26-
eventId: string;
27-
// resetError(): void;
28-
}
3+
import { ErrorFallback } from '@graasp/ui/apps';
4+
import { useTranslation } from 'react-i18next';
295

30-
const ErrorFallback: FC<ErrorFallbackProps> = ({
31-
error,
32-
componentStack,
33-
eventId /* , resetError */,
34-
}) => {
35-
const { t } = useTranslation('translations', {
6+
const ErrorBoundary: FC<{ children?: ReactNode }> = ({ children }) => {
7+
const { t: tFallback } = useTranslation('translations', {
368
keyPrefix: 'ERROR_BOUNDARY.FALLBACK',
379
});
38-
const [name, setName] = useState('');
39-
const [email, setEmail] = useState('');
40-
const [comment, setComment] = useState('');
41-
const [feedbackGiven, setFeedbackGiven] = useState(false);
42-
43-
const theme = useTheme();
44-
45-
const sendUserFeedback = (): void => {
46-
const userFeedback = {
47-
event_id: eventId,
48-
name,
49-
email,
50-
comments: comment,
51-
};
52-
Sentry.captureUserFeedback(userFeedback);
53-
setFeedbackGiven(true);
54-
};
5510
return (
56-
<Container>
57-
<Paper variant="outlined" sx={{ p: 4 }}>
58-
<Stack direction="column" spacing={1}>
59-
<Stack direction="row" spacing={2}>
60-
<WarningIcon sx={{ color: theme.palette.error.main }} />
61-
<Typography variant="h2" color={theme.palette.error.dark}>
62-
{t('MESSAGE_TITLE')}
63-
</Typography>
64-
</Stack>
65-
{feedbackGiven ? (
66-
<Alert severity="success">{t('THANKS_FOR_FEEDBACK')}</Alert>
67-
) : (
68-
<Box id="user-feedback">
69-
<Stack direction="column" spacing={1} maxWidth="82rem">
70-
<Typography variant="body1">{t('MESSAGE_FEEDBACK')}</Typography>
71-
<TextField
72-
value={name}
73-
onChange={(e) => setName(e.target.value)}
74-
label={t('NAME_LABEL')}
75-
helperText={t('NAME_HELPER')}
76-
/>
77-
<TextField
78-
value={email}
79-
onChange={(e) => setEmail(e.target.value)}
80-
label={t('EMAIL_LABEL')}
81-
helperText={t('EMAIL_HELPER')}
82-
/>
83-
<TextField
84-
multiline
85-
rows={5}
86-
value={comment}
87-
onChange={(e) => setComment(e.target.value)}
88-
label={t('COMMENT_LABEL')}
89-
helperText={t('COMMENT_HELPER')}
90-
/>
91-
<Box>
92-
<Button startIcon={<SendIcon />} onClick={sendUserFeedback}>
93-
{t('SEND')}
94-
</Button>
95-
</Box>
96-
</Stack>
97-
</Box>
98-
)}
99-
<Accordion>
100-
<AccordionSummary
101-
expandIcon={<ExpandMoreIcon />}
102-
aria-controls="error-details"
103-
id="error-details"
104-
>
105-
{t('ERROR_DETAILS')}
106-
</AccordionSummary>
107-
<AccordionDetails>
108-
<Typography variant="caption">{error.toString()}</Typography>
109-
<Typography variant="caption">{componentStack}</Typography>
110-
</AccordionDetails>
111-
</Accordion>
112-
</Stack>
113-
</Paper>
114-
</Container>
11+
<Sentry.ErrorBoundary
12+
// eslint-disable-next-line react/no-unstable-nested-components
13+
fallback={({ error, componentStack, eventId }) => (
14+
<ErrorFallback
15+
error={error}
16+
componentStack={componentStack}
17+
eventId={eventId}
18+
captureUserFeedback={Sentry.captureUserFeedback}
19+
title={tFallback('MESSAGE_TITLE')}
20+
formTitle={tFallback('MESSAGE_FEEDBACK')}
21+
nameLabel={tFallback('NAME_LABEL')}
22+
nameHelper={tFallback('NAME_HELPER')}
23+
emailLabel={tFallback('EMAIL_LABEL')}
24+
emailHelper={tFallback('EMAIL_HELPER')}
25+
commentLabel={tFallback('COMMENT_LABEL')}
26+
commentHelper={tFallback('COMMENT_HELPER')}
27+
thanksMessage={tFallback('THANKS_FOR_FEEDBACK')}
28+
sendButtonLabel={tFallback('SEND')}
29+
errorDetailsLabel={tFallback('ERROR_DETAILS')}
30+
/>
31+
)}
32+
>
33+
{children}
34+
</Sentry.ErrorBoundary>
11535
);
11636
};
11737

118-
const ErrorBoundary: FC<{ children?: ReactNode }> = ({ children }) => (
119-
<Sentry.ErrorBoundary
120-
// fallback={({ error, componentStack, eventId }) => (
121-
// <ErrorFallback
122-
// error={error}
123-
// componentStack={componentStack}
124-
// eventId={eventId}
125-
// />
126-
// )}
127-
// eslint-disable-next-line react/no-unstable-nested-components
128-
fallback={({ error, componentStack, eventId }) => (
129-
<ErrorFallback
130-
error={error}
131-
componentStack={componentStack}
132-
eventId={eventId}
133-
/>
134-
)}
135-
>
136-
{children}
137-
</Sentry.ErrorBoundary>
138-
);
139-
14038
export default ErrorBoundary;

‎src/modules/Root.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
} from '@graasp/apps-query-client';
1717

1818
import { defaultMockContext, mockMembers } from '@/mocks/db';
19-
import Loader from '@/modules/common/Loader';
19+
import { Loader } from '@graasp/ui';
2020

2121
import i18nConfig from '../config/i18n';
2222
import {

‎src/modules/context/AppDataContext.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import { Data } from '@graasp/apps-query-client';
44
import { AppData } from '@graasp/sdk';
55

66
import { UseQueryResult } from '@tanstack/react-query';
7+
import { Loader } from '@graasp/ui';
78
import {
89
QUERY_KEYS,
910
hooks,
1011
mutations,
1112
queryClient,
1213
} from '../../config/queryClient';
13-
import Loader from '../common/Loader';
1414

1515
type PostAppDataType = {
1616
data: Data;

‎src/modules/context/MembersContext.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import React, { FC, ReactElement, createContext, useMemo } from 'react';
22

33
import { Member } from '@graasp/sdk';
44

5+
import { Loader } from '@graasp/ui';
56
import { hooks } from '../../config/queryClient';
6-
import Loader from '../common/Loader';
77

88
export type MembersContextType = Member[];
99

‎src/modules/context/SettingsContext.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import {
55
defaultSettingsValues,
66
} from '@/config/appSettingsType';
77

8+
import { Loader } from '@graasp/ui';
89
import { hooks, mutations } from '../../config/queryClient';
9-
import Loader from '../common/Loader';
1010

1111
// list of the settings names
1212
const ALL_SETTING_NAMES = [

‎src/modules/responseCollection/ResponseChoose.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { PROPOSE_NEW_RESPONSE_BTN } from '@/config/selectors';
1111
import Response from '@/modules/common/response/Response';
1212
import { useAppDataContext } from '@/modules/context/AppDataContext';
1313

14-
import Loader from '../common/Loader';
14+
import { Loader } from '@graasp/ui';
1515
import { useSettings } from '../context/SettingsContext';
1616

1717
interface ResponseChooseProps {

‎src/modules/responseCollection/ResponseInput.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import {
2323
} from '@/config/selectors';
2424
import useAssistants from '@/hooks/useAssistants';
2525

26-
import Loader from '../common/Loader';
26+
import { Loader } from '@graasp/ui';
2727
import { useActivityContext } from '../context/ActivityContext';
2828
import { useSettings } from '../context/SettingsContext';
2929

‎src/modules/responseEvaluation/ResponseEvaluation.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { RESPONSE_EVALUATION_VIEW_CY } from '@/config/selectors';
1010
import Pausable from '@/modules/common/Pausable';
1111
import Response from '@/modules/common/response/Response';
1212

13-
import Loader from '../common/Loader';
13+
import { Loader } from '@graasp/ui';
1414
import { useActivityContext } from '../context/ActivityContext';
1515
import { useAppDataContext } from '../context/AppDataContext';
1616
import { useSettings } from '../context/SettingsContext';

‎tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"strict": true,
1111
"forceConsistentCasingInFileNames": true,
1212
"module": "ESNext",
13-
"moduleResolution": "Node",
13+
"moduleResolution": "Bundler",
1414
"resolveJsonModule": true,
1515
"isolatedModules": true,
1616
"noEmit": true,

0 commit comments

Comments
 (0)