Migrate to React functional components

package.json

@@ -77,7 +77,6 @@
     "filenamify": "^4.3.0",
     "lodash": "^4.17.21",
     "mobx": "^5.15.7",
-    "mobx-react": "^6.3.1",
     "mobx-react-lite": "^2.2.2",
     "mobx-utils": "^5.6.2",
     "parse-filepath": "^1.0.2",

src/app/AlignmentCard.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import PropTypes from 'prop-types';
 import IconButton from '@mui/material/IconButton';
 import MoreVertIcon from '@mui/icons-material/MoreVert';

src/app/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { Allotment } from 'allotment';
 import 'allotment/dist/style.css';
 import { styled } from '@mui/material/styles';

src/app/AstralTreeCard.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import PropTypes from 'prop-types';
 import IconButton from '@mui/material/IconButton';
 import MoreVertIcon from '@mui/icons-material/MoreVert';

src/app/CitationModal.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import PropTypes from 'prop-types';
 import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';

src/app/Console.js

@@ -1,93 +1,78 @@
-import React from 'react';
-import { observer } from 'mobx-react';
+import React, { useRef, useEffect, useCallback } from 'react';
+import { observer } from 'mobx-react-lite';
 import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 
-@observer
-class Console extends React.Component {
-  keepToBottom = true;
+const Console = ({ run }) => {
+  const stdoutContainerRef = useRef(null);
 
-  onMountStdoutContainer = el => {
-    this.stdoutContainer = el;
-  };
-
-  componentDidUpdate() {
-    if (this.keepToBottom) {
-      this.scrollConsoleToBottom();
-    }
-  }
-
-  isAtBottom = () => {
-    const { scrollTop, scrollHeight, clientHeight } = this.stdoutContainer;
+  const scrollConsoleToBottom = useCallback(() => {
+    if (!stdoutContainerRef.current) return;
+    const { scrollHeight, clientHeight } = stdoutContainerRef.current;
     const diff = scrollHeight - clientHeight;
-    const scrollIsAtBottom = scrollTop === diff;
-    return scrollIsAtBottom;
-  };
+    stdoutContainerRef.current.scrollTop = diff;
+  }, []);
 
-  scrollConsoleToBottom = () => {
-    const { scrollHeight, clientHeight } = this.stdoutContainer;
-    const diff = scrollHeight - clientHeight;
-    this.stdoutContainer.scrollTop = diff;
-  };
+  // Every time the component updates, scroll to the bottom
+  useEffect(() => {
+    scrollConsoleToBottom();
+  });
 
-  render() {
-    const { run } = this.props;
-    return (
-      <Box
-        ref={this.onMountStdoutContainer}
-        sx={{
-          color: (theme) => theme.palette.console.contrastText,
-          background: (theme) => theme.palette.console.background,
-          padding: '10px',
-          width: '100%',
-          height: '100%',
-          overflowY: 'auto',
-          position: 'relative',
-        }}
-      >
-        <div>
-          {run.stdout && (
-            <Box
-              component="code"
-              sx={{
-                color: (theme) => theme.palette.console.contrastText,
-                fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
-                fontSize: '12px',
-                height: '100%',
-                position: 'absolute',
-                width: '100%',
-                whiteSpace: 'pre-wrap',
-                wordBreak: 'break-all',
-              }}
-            >
-              {run.stdout}
-            </Box>
-          )}
-          {run.stderr && (
-            <Box
-              component="code"
-              sx={{
-                color: (theme) => theme.palette.console.contrastText,
-                fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
-                fontSize: '12px',
-                height: '100%',
-                position: 'absolute',
-                width: '100%',
-                whiteSpace: 'pre-wrap',
-                wordBreak: 'break-all',
-              }}
-            >
-              {run.stderr}
-            </Box>
-          )}
-        </div>
-      </Box>
-    );
-  }
-}
+  return (
+    <Box
+      ref={stdoutContainerRef}
+      sx={{
+        color: (theme) => theme.palette.console.contrastText,
+        background: (theme) => theme.palette.console.background,
+        padding: '10px',
+        width: '100%',
+        height: '100%',
+        overflowY: 'auto',
+        position: 'relative',
+      }}
+    >
+      <div>
+        {run.stdout && (
+          <Box
+            component="code"
+            sx={{
+              color: (theme) => theme.palette.console.contrastText,
+              fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
+              fontSize: '12px',
+              height: '100%',
+              position: 'absolute',
+              width: '100%',
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-all',
+            }}
+          >
+            {run.stdout}
+          </Box>
+        )}
+        {run.stderr && (
+          <Box
+            component="code"
+            sx={{
+              color: (theme) => theme.palette.console.contrastText,
+              fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
+              fontSize: '12px',
+              height: '100%',
+              position: 'absolute',
+              width: '100%',
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-all',
+            }}
+          >
+            {run.stderr}
+          </Box>
+        )}
+      </div>
+    </Box>
+  );
+};
 
 Console.propTypes = {
   run: PropTypes.object.isRequired
 };
 
-export default Console;
+export default observer(Console);

src/app/Input.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import PropTypes from 'prop-types';
 import Button from '@mui/material/Button';
 import AlignmentCard, { FinalAlignmentCard } from './AlignmentCard';
@@ -256,9 +256,6 @@ const Input = ({ run }) => {
     </Box>
   );
 };
-// <Box mt={1} display="flex">
-// { run.ok ? null : run.missing }
-// </Box>
 
 Input.propTypes = {
   run: PropTypes.object.isRequired,

src/app/Model.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import OptionSelect from './components/OptionSelect';

src/app/Output.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import TextField from '@mui/material/TextField';

src/app/PartitionEditor.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import PropTypes from 'prop-types';
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';

src/app/PartitionFileCard.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import PropTypes from 'prop-types';
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 import Chip from '@mui/material/Chip';

src/app/Raxml.js

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { clipboard } from 'electron';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import PropTypes from 'prop-types';
 import Button from '@mui/material/Button';
 import OptionSelect from './components/OptionSelect';
@@ -11,16 +11,11 @@ import IconButton from '@mui/material/IconButton';
 import FileCopyIcon from '@mui/icons-material/FileCopy';
 import { FormHelperText } from '@mui/material';
 
-@observer
-class Raxml extends React.Component {
-  copyCommand = () => {
-    const { run, store } = this.props;
+const Raxml = ({ run, store }) => {
+  const copyCommand = useCallback(() => {
     clipboard.writeText(run.command);
     store.setAppSnack();
-  };
-
-  render() {
-    const { run } = this.props;
+  }, [run.command, store]);
 
     return (
       <Box
@@ -75,7 +70,7 @@ class Raxml extends React.Component {
             <Tooltip aria-label="copy-command" title="Copy command">
               <IconButton
                 style={{ position: 'absolute', right: 0 }}
-                onClick={this.copyCommand}
+                onClick={copyCommand}
                 size="large"
               >
                 <FileCopyIcon />
@@ -87,11 +82,11 @@ class Raxml extends React.Component {
         </Box>
       </Box>
     );
-  }
-}
+};
 
 Raxml.propTypes = {
   run: PropTypes.object.isRequired,
+  store: PropTypes.object.isRequired,
 };
 
-export default Raxml;
+export default observer(Raxml);

src/app/TreeCard.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import PropTypes from 'prop-types';
 import IconButton from '@mui/material/IconButton';
 import MoreVertIcon from '@mui/icons-material/MoreVert';

src/app/components/OptionCheck.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import PropTypes from 'prop-types';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';

src/app/components/OptionSelect.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import PropTypes from 'prop-types';
 import FormControl from '@mui/material/FormControl';
 import FormHelperText from '@mui/material/FormHelperText';

src/app/components/OptionTextField.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import PropTypes from 'prop-types';
 import TextField from '@mui/material/TextField';
 

src/app/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
 import * as Sentry from '@sentry/electron/renderer';
 

yarn.lock

@@ -10700,18 +10700,11 @@ mkdirp@^1.0.3:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-mobx-react-lite@^2.2.0, mobx-react-lite@^2.2.2:
+mobx-react-lite@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-2.2.2.tgz#87c217dc72b4e47b22493daf155daf3759f868a6"
   integrity sha512-2SlXALHIkyUPDsV4VTKVR9DW7K3Ksh1aaIv3NrNJygTbhXe2A9GrcKHZ2ovIiOp/BXilOcTYemfHHZubP431dg==
 
-mobx-react@^6.3.1:
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-6.3.1.tgz#204f9756e42e19d91cb6598837063b7e7de87c52"
-  integrity sha512-IOxdJGnRSNSJrL2uGpWO5w9JH5q5HoxEqwOF4gye1gmZYdjoYkkMzSGMDnRCUpN/BNzZcFoMdHXrjvkwO7KgaQ==
-  dependencies:
-    mobx-react-lite "^2.2.0"
-
 mobx-utils@^5.6.2:
   version "5.6.2"
   resolved "https://registry.yarnpkg.com/mobx-utils/-/mobx-utils-5.6.2.tgz#4858acbdb03f0470e260854f87e8c2ba916ebaec"