Skip to content

Commit 4870aaf

Browse files
juancarlosfarahjuancarlosfarah
authored
Merge pull request #41 from graasp/40-auto-resize
40 auto resize
2 parents ffab6b2 + 24c26f0 commit 4870aaf

File tree

12 files changed

+214
-35
lines changed

12 files changed

+214
-35
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@
1919
"@fortawesome/free-regular-svg-icons": "6.2.0",
2020
"@fortawesome/free-solid-svg-icons": "6.2.0",
2121
"@fortawesome/react-fontawesome": "latest",
22-
"@graasp/apps-query-client": "github:graasp/graasp-apps-query-client",
22+
"@graasp/apps-query-client": "github:graasp/graasp-apps-query-client#v0",
2323
"@graasp/pyodide": "github:spaenleh/graasp-pyodide",
2424
"@graasp/sdk": "github:graasp/graasp-sdk",
25-
"@graasp/ui": "github:graasp/graasp-ui#v0.3.0",
25+
"@graasp/ui": "github:graasp/graasp-ui",
2626
"@mui/icons-material": "5.10.9",
2727
"@mui/lab": "5.0.0-alpha.84",
2828
"@mui/material": "5.10.11",

‎public/index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,12 @@
2929
Learn how to configure a non-root public URL by running `npm run build`.
3030
-->
3131
<title>Code Capsule App</title>
32+
<script>
33+
document.domain = '%REACT_APP_GRAASP_DOMAIN%';
34+
if (window.frameElement) {
35+
window.frameElement.style['min-height'] = '70vh';
36+
}
37+
</script>
3238
</head>
3339
<body>
3440
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/components/Root.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ const Root: FC = () => {
7575
const AppWithContextAndToken = withContext(AppWithContext, {
7676
LoadingComponent: <Loader />,
7777
useGetLocalContext: hooks.useGetLocalContext,
78+
useAutoResize: hooks.useAutoResize,
7879
onError:
7980
/* istanbul ignore next */
8081
() => {

‎src/components/codeReview/CodeReviewBody.tsx‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ import React, { FC, Fragment } from 'react';
77
import { Add } from '@mui/icons-material';
88
import { IconButton, styled } from '@mui/material';
99

10+
import { APP_ACTIONS_TYPES } from '../../config/appActionsTypes';
1011
import { APP_DATA_TYPES, APP_DATA_VISIBILITY } from '../../config/appDataTypes';
1112
import { GENERAL_SETTINGS_NAME } from '../../config/appSettingsTypes';
1213
import { REVIEW_MODE_INDIVIDUAL } from '../../config/constants';
1314
import { SMALL_BORDER_RADIUS } from '../../config/layout';
15+
import { MUTATION_KEYS, useMutation } from '../../config/queryClient';
1416
import {
1517
CODE_REVIEW_ADD_BUTTON_CYPRESS,
1618
CODE_REVIEW_LINE_CONTENT_CYPRESS,
@@ -94,6 +96,11 @@ const CodeReviewBody: FC<Props> = () => {
9496
const allowComments = settings[GeneralSettingsKeys.AllowComments];
9597
const reviewMode = settings[GeneralSettingsKeys.ReviewMode];
9698
const { postAppData, comments } = useAppDataContext();
99+
const { mutate: postAction } = useMutation<
100+
unknown,
101+
unknown,
102+
{ data: unknown; type: string }
103+
>(MUTATION_KEYS.POST_APP_ACTION);
97104

98105
const versionComments = comments?.filter((c) => c.data.codeId === codeId);
99106

@@ -174,25 +181,30 @@ const CodeReviewBody: FC<Props> = () => {
174181
<CommentEditor
175182
onCancel={closeComment}
176183
onSend={(text) => {
184+
const data = {
185+
content: text,
186+
line: i,
187+
// codeId corresponding to current code version
188+
codeId,
189+
// comment on top level has no parent
190+
parent: null,
191+
...(multilineRange?.start &&
192+
multilineRange?.end && {
193+
multiline: multilineRange,
194+
}),
195+
};
177196
postAppData({
178-
data: {
179-
content: text,
180-
line: i,
181-
// codeId corresponding to current code version
182-
codeId,
183-
// comment on top level has no parent
184-
parent: null,
185-
...(multilineRange?.start &&
186-
multilineRange?.end && {
187-
multiline: multilineRange,
188-
}),
189-
},
197+
data,
190198
type: APP_DATA_TYPES.COMMENT,
191199
visibility:
192200
reviewMode === REVIEW_MODE_INDIVIDUAL
193201
? APP_DATA_VISIBILITY.MEMBER
194202
: APP_DATA_VISIBILITY.ITEM,
195203
});
204+
postAction({
205+
data,
206+
type: APP_ACTIONS_TYPES.CREATE_COMMENT,
207+
});
196208
closeComment();
197209
}}
198210
/>

‎src/components/common/CommentActions.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { useTranslation } from 'react-i18next';
44
import { Delete, Edit, Flag } from '@mui/icons-material';
55
import { ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';
66

7+
import { APP_ACTIONS_TYPES } from '../../config/appActionsTypes';
8+
import { MUTATION_KEYS, useMutation } from '../../config/queryClient';
79
import { useAppDataContext } from '../context/AppDataContext';
810
import { useCommentContext } from '../context/CommentContext';
911
import { useReviewContext } from '../context/ReviewContext';
@@ -31,6 +33,11 @@ const CommentActions: FC<Props> = ({
3133
const comment = useCommentContext();
3234
const { editComment } = useReviewContext();
3335
const { deleteAppData } = useAppDataContext();
36+
const { mutate: postAction } = useMutation<
37+
unknown,
38+
unknown,
39+
{ data: unknown; type: string }
40+
>(MUTATION_KEYS.POST_APP_ACTION);
3441

3542
return (
3643
<Menu
@@ -52,6 +59,10 @@ const CommentActions: FC<Props> = ({
5259
<MenuItem
5360
onClick={() => {
5461
editComment(comment.id);
62+
postAction({
63+
data: { comment },
64+
type: APP_ACTIONS_TYPES.EDIT_COMMENT,
65+
});
5566
onClose();
5667
}}
5768
>
@@ -65,6 +76,10 @@ const CommentActions: FC<Props> = ({
6576
<MenuItem
6677
onClick={() => {
6778
deleteAppData({ id: comment.id });
79+
postAction({
80+
data: { comment },
81+
type: APP_ACTIONS_TYPES.DELETE_COMMENT,
82+
});
6883
onClose();
6984
}}
7085
>
@@ -78,6 +93,10 @@ const CommentActions: FC<Props> = ({
7893
<MenuItem
7994
onClick={() => {
8095
onClickFlag?.();
96+
postAction({
97+
data: { comment },
98+
type: APP_ACTIONS_TYPES.REPORT_COMMENT,
99+
});
81100
onClose();
82101
}}
83102
>

‎src/components/common/CommentThread.tsx‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ import { useTranslation } from 'react-i18next';
55

66
import { TextField, styled } from '@mui/material';
77

8+
import { APP_ACTIONS_TYPES } from '../../config/appActionsTypes';
89
import { APP_DATA_TYPES } from '../../config/appDataTypes';
910
import { BIG_BORDER_RADIUS } from '../../config/layout';
11+
import { MUTATION_KEYS, useMutation } from '../../config/queryClient';
1012
import { COMMENT_THREAD_CONTAINER_CYPRESS } from '../../config/selectors';
1113
import { CommentType } from '../../interfaces/comment';
1214
import { buildThread } from '../../utils/comments';
@@ -51,6 +53,11 @@ const CommentThread: FC<Props> = ({ children, hiddenState }) => {
5153
closeEditingComment,
5254
} = useReviewContext();
5355
const { patchAppData, postAppData } = useAppDataContext();
56+
const { mutate: postAction } = useMutation<
57+
unknown,
58+
unknown,
59+
{ data: unknown; type: string }
60+
>(MUTATION_KEYS.POST_APP_ACTION);
5461

5562
const isEdited = (id: string): boolean => id === currentEditedCommentId;
5663
const isReplied = (id: string): boolean => id === currentRepliedCommentId;
@@ -108,14 +115,19 @@ const CommentThread: FC<Props> = ({ children, hiddenState }) => {
108115
<CommentEditor
109116
onCancel={closeComment}
110117
onSend={(content) => {
118+
const data = {
119+
...c.data,
120+
parent: c.id,
121+
content,
122+
};
111123
postAppData({
112-
data: {
113-
...c.data,
114-
parent: c.id,
115-
content,
116-
},
124+
data,
117125
type: APP_DATA_TYPES.COMMENT,
118126
});
127+
postAction({
128+
data,
129+
type: APP_ACTIONS_TYPES.RESPOND_COMMENT,
130+
});
119131
closeComment();
120132
}}
121133
comment={{ ...c, data: { ...c.data, content: '' } }}

‎src/components/diffView/DiffView.tsx‎

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import { FC } from 'react';
1+
import { FC, useEffect, useRef, useState } from 'react';
22
import ReactDiffViewer from 'react-diff-viewer';
33

4+
import { useLocalContext } from '@graasp/apps-query-client';
5+
46
import { Stack } from '@mui/material';
57

68
import { DIFF_VIEW_SETTINGS_NAME } from '../../config/appSettingsTypes';
@@ -9,13 +11,52 @@ import { DEFAULT_DIFF_VIEW_SETTINGS } from '../../config/settings';
911
import { DiffViewSettingsKeys } from '../../interfaces/settings';
1012
import { useSettings } from '../context/SettingsContext';
1113

14+
const ADAPT_HEIGHT_TIMEOUT = 50;
15+
1216
const DiffView: FC = () => {
1317
const {
1418
[DIFF_VIEW_SETTINGS_NAME]: diffViewSettings = DEFAULT_DIFF_VIEW_SETTINGS,
1519
} = useSettings();
20+
const context = useLocalContext();
21+
const rootRef = useRef();
22+
const [height, setHeight] = useState(0);
23+
24+
const adaptHeight = (): void => {
25+
// set timeout to leave time for the height to be set
26+
setTimeout(() => {
27+
// adapt height when not in standalone (so when in an iframe)
28+
if (!context?.get('standalone')) {
29+
// get height from the root element and add a small margin
30+
// @ts-ignore
31+
const clientRect = rootRef?.current?.getBoundingClientRect();
32+
if (window.frameElement && clientRect) {
33+
const newHeight = clientRect.height;
34+
if (height !== newHeight) {
35+
setHeight(newHeight);
36+
// @ts-ignore
37+
window.frameElement.style['min-height'] = `${newHeight}px`;
38+
// @ts-ignore
39+
window.frameElement.style.overflowY = 'hidden';
40+
// @ts-ignore
41+
window.frameElement.scrolling = 'no';
42+
// @ts-ignore
43+
window.frameElement.style.height = `${newHeight}px`;
44+
}
45+
}
46+
}
47+
}, ADAPT_HEIGHT_TIMEOUT);
48+
};
49+
50+
useEffect(
51+
() => {
52+
adaptHeight();
53+
},
54+
// eslint-disable-next-line react-hooks/exhaustive-deps
55+
[],
56+
);
1657

1758
return (
18-
<Stack data-cy={DIFF_VIEW_CONTAINER_CY} direction="column" m={2}>
59+
<Stack data-cy={DIFF_VIEW_CONTAINER_CY} direction="column" ref={rootRef}>
1960
<ReactDiffViewer
2061
linesOffset={diffViewSettings[DiffViewSettingsKeys.LinesOffset]}
2162
oldValue={diffViewSettings[DiffViewSettingsKeys.OldCode]}

‎src/components/layout/MiniButton.cy.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ describe('MiniButton.cy.ts', () => {
2929
id={testId}
3030
text={testText}
3131
icon={<Edit />}
32-
// eslint-disable-next-line no-console
3332
tooltip="Test button"
33+
// eslint-disable-next-line no-console
3434
onClick={() => console.log('clicked')}
3535
/>,
3636
);

‎src/components/views/admin/settings/SettingsView.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -306,7 +306,7 @@ const SettingsView: FC = () => {
306306
</Box>
307307
</Stack>
308308
<Stack direction="row" spacing={1}>
309-
<Stack flex={1}>
309+
<Stack flex={1} width="50%">
310310
<FormLabel>{t('Old Code')}</FormLabel>
311311
<CodeEditor
312312
id={SETTING_DIFF_VIEW_OLD_CODE_CY}
@@ -319,7 +319,7 @@ const SettingsView: FC = () => {
319319
}
320320
/>
321321
</Stack>
322-
<Stack flex={1}>
322+
<Stack flex={1} width="50%">
323323
<FormLabel>{t('New Code')}</FormLabel>
324324
<CodeEditor
325325
id={SETTING_DIFF_VIEW_NEW_CODE_CY}

‎src/config/appActionsTypes.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,11 @@ export enum APP_ACTIONS_TYPES {
99
CANCEL_PROMPT = 'cancel_prompt',
1010
INITIALIZE_EXECUTION = 'initialize_execution',
1111
NEW_FIGURE = 'new_figure',
12+
13+
// Review actions
14+
CREATE_COMMENT = 'create_comment',
15+
EDIT_COMMENT = 'edit_comment',
16+
REPORT_COMMENT = 'report_comment',
17+
DELETE_COMMENT = 'delete_comment',
18+
RESPOND_COMMENT = 'respond_comment',
1219
}

0 commit comments

Comments
 (0)