Skip to content

Commit 9758d04

Browse files
jtkleinjtklein
authored
Migrate to React functional components (#374)
* Exchange import * Update Input.js * Update Raxml.js * Update Console.js * Update Console.js * Update Console.js * Update Console.js * Update Console.js * Update Console.js * Update Console.js * Update Console.js * Update Console.js * Update Console.js * Update Console.js * Update Console.js * Remove mobx-react
1 parent 7c135b8 commit 9758d04

18 files changed

+90
-121
lines changed

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,6 @@
7777
"filenamify": "^4.3.0",
7878
"lodash": "^4.17.21",
7979
"mobx": "^5.15.7",
80-
"mobx-react": "^6.3.1",
8180
"mobx-react-lite": "^2.2.2",
8281
"mobx-utils": "^5.6.2",
8382
"parse-filepath": "^1.0.2",

‎src/app/AlignmentCard.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { observer } from 'mobx-react';
2+
import { observer } from 'mobx-react-lite';
33
import PropTypes from 'prop-types';
44
import IconButton from '@mui/material/IconButton';
55
import MoreVertIcon from '@mui/icons-material/MoreVert';

‎src/app/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { observer } from 'mobx-react';
2+
import { observer } from 'mobx-react-lite';
33
import { Allotment } from 'allotment';
44
import 'allotment/dist/style.css';
55
import { styled } from '@mui/material/styles';

‎src/app/AstralTreeCard.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { observer } from 'mobx-react';
2+
import { observer } from 'mobx-react-lite';
33
import PropTypes from 'prop-types';
44
import IconButton from '@mui/material/IconButton';
55
import MoreVertIcon from '@mui/icons-material/MoreVert';

‎src/app/CitationModal.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { observer } from 'mobx-react';
2+
import { observer } from 'mobx-react-lite';
33
import PropTypes from 'prop-types';
44
import Button from '@mui/material/Button';
55
import Card from '@mui/material/Card';

‎src/app/Console.js‎

Lines changed: 66 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,78 @@
1-
import React from 'react';
2-
import { observer } from 'mobx-react';
1+
import React, { useRef, useEffect, useCallback } from 'react';
2+
import { observer } from 'mobx-react-lite';
33
import PropTypes from 'prop-types';
44
import Box from '@mui/material/Box';
55

6-
@observer
7-
class Console extends React.Component {
8-
keepToBottom = true;
6+
const Console = ({ run }) => {
7+
const stdoutContainerRef = useRef(null);
98

10-
onMountStdoutContainer = el => {
11-
this.stdoutContainer = el;
12-
};
13-
14-
componentDidUpdate() {
15-
if (this.keepToBottom) {
16-
this.scrollConsoleToBottom();
17-
}
18-
}
19-
20-
isAtBottom = () => {
21-
const { scrollTop, scrollHeight, clientHeight } = this.stdoutContainer;
9+
const scrollConsoleToBottom = useCallback(() => {
10+
if (!stdoutContainerRef.current) return;
11+
const { scrollHeight, clientHeight } = stdoutContainerRef.current;
2212
const diff = scrollHeight - clientHeight;
23-
const scrollIsAtBottom = scrollTop === diff;
24-
return scrollIsAtBottom;
25-
};
13+
stdoutContainerRef.current.scrollTop = diff;
14+
}, []);
2615

27-
scrollConsoleToBottom = () => {
28-
const { scrollHeight, clientHeight } = this.stdoutContainer;
29-
const diff = scrollHeight - clientHeight;
30-
this.stdoutContainer.scrollTop = diff;
31-
};
16+
// Every time the component updates, scroll to the bottom
17+
useEffect(() => {
18+
scrollConsoleToBottom();
19+
});
3220

33-
render() {
34-
const { run } = this.props;
35-
return (
36-
<Box
37-
ref={this.onMountStdoutContainer}
38-
sx={{
39-
color: (theme) => theme.palette.console.contrastText,
40-
background: (theme) => theme.palette.console.background,
41-
padding: '10px',
42-
width: '100%',
43-
height: '100%',
44-
overflowY: 'auto',
45-
position: 'relative',
46-
}}
47-
>
48-
<div>
49-
{run.stdout && (
50-
<Box
51-
component="code"
52-
sx={{
53-
color: (theme) => theme.palette.console.contrastText,
54-
fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
55-
fontSize: '12px',
56-
height: '100%',
57-
position: 'absolute',
58-
width: '100%',
59-
whiteSpace: 'pre-wrap',
60-
wordBreak: 'break-all',
61-
}}
62-
>
63-
{run.stdout}
64-
</Box>
65-
)}
66-
{run.stderr && (
67-
<Box
68-
component="code"
69-
sx={{
70-
color: (theme) => theme.palette.console.contrastText,
71-
fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
72-
fontSize: '12px',
73-
height: '100%',
74-
position: 'absolute',
75-
width: '100%',
76-
whiteSpace: 'pre-wrap',
77-
wordBreak: 'break-all',
78-
}}
79-
>
80-
{run.stderr}
81-
</Box>
82-
)}
83-
</div>
84-
</Box>
85-
);
86-
}
87-
}
21+
return (
22+
<Box
23+
ref={stdoutContainerRef}
24+
sx={{
25+
color: (theme) => theme.palette.console.contrastText,
26+
background: (theme) => theme.palette.console.background,
27+
padding: '10px',
28+
width: '100%',
29+
height: '100%',
30+
overflowY: 'auto',
31+
position: 'relative',
32+
}}
33+
>
34+
<div>
35+
{run.stdout && (
36+
<Box
37+
component="code"
38+
sx={{
39+
color: (theme) => theme.palette.console.contrastText,
40+
fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
41+
fontSize: '12px',
42+
height: '100%',
43+
position: 'absolute',
44+
width: '100%',
45+
whiteSpace: 'pre-wrap',
46+
wordBreak: 'break-all',
47+
}}
48+
>
49+
{run.stdout}
50+
</Box>
51+
)}
52+
{run.stderr && (
53+
<Box
54+
component="code"
55+
sx={{
56+
color: (theme) => theme.palette.console.contrastText,
57+
fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
58+
fontSize: '12px',
59+
height: '100%',
60+
position: 'absolute',
61+
width: '100%',
62+
whiteSpace: 'pre-wrap',
63+
wordBreak: 'break-all',
64+
}}
65+
>
66+
{run.stderr}
67+
</Box>
68+
)}
69+
</div>
70+
</Box>
71+
);
72+
};
8873

8974
Console.propTypes = {
9075
run: PropTypes.object.isRequired
9176
};
9277

93-
export default Console;
78+
export default observer(Console);

‎src/app/Input.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { observer } from 'mobx-react';
2+
import { observer } from 'mobx-react-lite';
33
import PropTypes from 'prop-types';
44
import Button from '@mui/material/Button';
55
import AlignmentCard, { FinalAlignmentCard } from './AlignmentCard';
@@ -256,9 +256,6 @@ const Input = ({ run }) => {
256256
</Box>
257257
);
258258
};
259-
// <Box mt={1} display="flex">
260-
// { run.ok ? null : run.missing }
261-
// </Box>
262259

263260
Input.propTypes = {
264261
run: PropTypes.object.isRequired,

‎src/app/Model.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { observer } from 'mobx-react';
2+
import { observer } from 'mobx-react-lite';
33
import PropTypes from 'prop-types';
44
import Box from '@mui/material/Box';
55
import OptionSelect from './components/OptionSelect';

‎src/app/Output.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { observer } from 'mobx-react';
2+
import { observer } from 'mobx-react-lite';
33
import PropTypes from 'prop-types';
44
import Box from '@mui/material/Box';
55
import TextField from '@mui/material/TextField';

‎src/app/PartitionEditor.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { observer } from 'mobx-react';
2+
import { observer } from 'mobx-react-lite';
33
import PropTypes from 'prop-types';
44
import Button from '@mui/material/Button';
55
import TextField from '@mui/material/TextField';

0 commit comments

Comments
 (0)