Merge pull request #137 from vnma0/lazy-enhancements

Lazier loading
vnma0 · Apr 19, 2019 · f7c102b · f7c102b
2 parents f63647e + 001847e
commit f7c102b
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 97 deletions.
diff --git a/src/app/problemList/codeEditor/codeBox.js b/src/app/problemList/codeEditor/codeBox.js
@@ -1,13 +1,15 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { AppBar, Grid, Divider } from '@material-ui/core';
 import LocalizedMessage from 'react-l10n';
 
-import CodeEditor from './codeEditor.js';
 import SubmitButton from './submitButton.js';
 import LangSelection from './langSelection.js';
 import UploadButton from './uploadButton.js';
 
 import { pushNotification } from '../../notifier/notify.js';
+import { LoadingIndicator } from '../problemLazyAssistance.js';
+
+const CodeEditor = React.lazy(() => import('./codeEditor.js'));
 
 var reader = new FileReader();
 
@@ -122,16 +124,19 @@ class CodeBox extends React.PureComponent {
                     style={
                         this.state.submitting || this.state.fileLoading ? { opacity: 0.4, pointerEvents: 'none' } : {}
                     }>
-                    <CodeEditor
-                        readOnly={this.state.submitting || this.state.fileLoading}
-                        ext={this.props.ext[this.state.langId]}
-                        update={code => {
-                            if (code.length <= byte_limit) this.setState({ code: code });
-                            // enforce source limit even for editor
-                        }}
-                        code={this.state.code}
-                        editorHeight={this.state.editorHeight}
-                    />
+                    <Suspense fallback={<LoadingIndicator />}>
+                        {/* no need to catch, we already have an error boundary above */}
+                        <CodeEditor
+                            readOnly={this.state.submitting || this.state.fileLoading}
+                            ext={this.props.ext[this.state.langId]}
+                            update={code => {
+                                if (code.length <= byte_limit) this.setState({ code: code });
+                                // enforce source limit even for editor
+                            }}
+                            code={this.state.code}
+                            editorHeight={this.state.editorHeight}
+                        />
+                    </Suspense>
                 </div>
                 <input
                     type='file'

diff --git a/src/app/problemList/codeEditor/codeEditor.js b/src/app/problemList/codeEditor/codeEditor.js
@@ -57,7 +57,6 @@ class CodeEditor extends React.PureComponent {
     render() {
         return (
             <AceEditor
-                defaultValue='Your code here'
                 mode={parseExt(this.props.ext.replace('.', '').toLowerCase())}
                 value={this.props.code}
                 onChange={this.props.update}

diff --git a/src/app/problemList/problemLazyAssistance.js b/src/app/problemList/problemLazyAssistance.js
@@ -2,18 +2,18 @@ import React from 'react';
 import { CircularProgress, Typography, Button } from '@material-ui/core';
 import LocalizedMessage from 'react-l10n';
 
-function LoadingIndicator () {
+function LoadingIndicator() {
     return (
-        <div align="center" style={{ marginTop: '10%' }}>
+        <div align='center' style={{ marginTop: '10%' }}>
             <CircularProgress />
         </div>
-    )
+    );
 }
 
 class ProblemError extends React.PureComponent {
     constructor(props) {
         super(props);
-        this.state = { error: false }
+        this.state = { error: false };
     }
 
     // error boundary for ProblemWrapper
@@ -26,26 +26,22 @@ class ProblemError extends React.PureComponent {
             // if no error, render normally
             return this.props.children;
         else
-        return (
-            <div
-                align="center"
-                style={{ margin: '10%' }}>
-                <Typography variant="h6">
-                    <LocalizedMessage id="problems.lazyAssistant.failedLoadInfo.text[0]"/>
-                </Typography>
-                <Typography variant="p">
-                    <LocalizedMessage id="problems.lazyAssistant.failedLoadInfo.text[1]"/>
-                </Typography>
-                <div style={{ marginTop: 20 }}>
-                    <Button
-                        onClick={() => window.location.reload(true)}
-                        color="primary">
-                        <LocalizedMessage id="problems.lazyAssistant.failedLoadInfo.control.reload"/>
-                    </Button>
+            return (
+                <div align='center' style={{ margin: '10%' }}>
+                    <Typography variant='h6'>
+                        <LocalizedMessage id='problems.lazyAssistant.failedLoadInfo.text[0]' />
+                    </Typography>
+                    <Typography variant='p'>
+                        <LocalizedMessage id='problems.lazyAssistant.failedLoadInfo.text[1]' />
+                    </Typography>
+                    <div style={{ marginTop: 20 }}>
+                        <Button onClick={() => window.location.reload(true)} color='primary'>
+                            <LocalizedMessage id='problems.lazyAssistant.failedLoadInfo.control.reload' />
+                        </Button>
+                    </div>
                 </div>
-            </div>
-        )
+            );
     }
 }
 
-export { LoadingIndicator, ProblemError };
+export { LoadingIndicator, ProblemError };
diff --git a/src/app/problemList/problemWrapper.js b/src/app/problemList/problemWrapper.js
@@ -1,6 +1,6 @@
 import React, { Suspense } from 'react';
 import publicParse from '../globalStatusBar/staticStub/public.js';
-import { LoadingIndicator, ProblemError } from './problemLazyAssistance.js'
+import { LoadingIndicator, ProblemError } from './problemLazyAssistance.js';
 
 const ProblemTabEditor = React.lazy(() => import('./problemTabEditor.js'));
 
@@ -33,14 +33,14 @@ class ProblemWrapper extends React.Component {
     render() {
         return (
             <Suspense fallback={<LoadingIndicator />}>
-                <ProblemTabEditor ext={this.state.ext} problems={this.state.problems}/>
+                <ProblemTabEditor ext={this.state.ext} problems={this.state.problems} />
             </Suspense>
-        )
+        );
     }
 }
 
-export default (props) => (
+export default props => (
     <ProblemError>
-        <ProblemWrapper />
+        <ProblemWrapper {...props} />
     </ProblemError>
 );
diff --git a/src/app/scoreboard/scoreboardLazyAssistance.js b/src/app/scoreboard/scoreboardLazyAssistance.js
@@ -1,20 +1,20 @@
 import React from 'react';
 import { CircularProgress, Typography, Button } from '@material-ui/core';
 
-import LocalizedMessage from 'react-l10n'
+import LocalizedMessage from 'react-l10n';
 
-function LoadingIndicator () {
+function LoadingIndicator() {
     return (
-        <div align="center" style={{ marginTop: '10%' }}>
+        <div align='center' style={{ marginTop: '10%' }}>
             <CircularProgress />
         </div>
-    )
+    );
 }
 
 class ScoreboardError extends React.PureComponent {
     constructor(props) {
         super(props);
-        this.state = { error: false }
+        this.state = { error: false };
     }
 
     // error boundary for ProblemWrapper
@@ -27,26 +27,22 @@ class ScoreboardError extends React.PureComponent {
             // if no error, render normally
             return this.props.children;
         else
-        return (
-            <div
-                align="center"
-                style={{ margin: '10%' }}>
-                <Typography variant="h6">
-                    <LocalizedMessage id="scoreboard.lazyAssistant.failedLoadInfo.text[0]"/>
-                </Typography>
-                <Typography variant="p">
-                    <LocalizedMessage id="scoreboard.lazyAssistant.failedLoadInfo.text[1]"/>
-                </Typography>
-                <div style={{ marginTop: 20 }}>
-                    <Button
-                        onClick={() => window.location.reload(true)}
-                        color="primary">
-                        <LocalizedMessage id="scoreboard.lazyAssistant.failedLoadInfo.control.reload"/>
-                    </Button>
+            return (
+                <div align='center' style={{ margin: '10%' }}>
+                    <Typography variant='h6'>
+                        <LocalizedMessage id='scoreboard.lazyAssistant.failedLoadInfo.text[0]' />
+                    </Typography>
+                    <Typography variant='p'>
+                        <LocalizedMessage id='scoreboard.lazyAssistant.failedLoadInfo.text[1]' />
+                    </Typography>
+                    <div style={{ marginTop: 20 }}>
+                        <Button onClick={() => window.location.reload(true)} color='primary'>
+                            <LocalizedMessage id='scoreboard.lazyAssistant.failedLoadInfo.control.reload' />
+                        </Button>
+                    </div>
                 </div>
-            </div>
-        )
+            );
     }
 }
 
-export { LoadingIndicator, ScoreboardError };
+export { LoadingIndicator, ScoreboardError };
diff --git a/src/app/scoreboard/scoreboardLazyWrapper.js b/src/app/scoreboard/scoreboardLazyWrapper.js
@@ -1,12 +1,12 @@
 import React, { Suspense } from 'react';
 import { LoadingIndicator, ScoreboardError } from './scoreboardLazyAssistance.js';
 
-const Scoreboard  = React.lazy(() => import('./scoreboardWrapper.js'))
+const Scoreboard = React.lazy(() => import('./scoreboardWrapper.js'));
 
-export default (props) => (
+export default props => (
     <ScoreboardError>
         <Suspense fallback={<LoadingIndicator />}>
-            <Scoreboard />
+            <Scoreboard {...props} />
         </Suspense>
     </ScoreboardError>
-)
+);
diff --git a/src/app/scoreboard/scoreboardWrapper.js b/src/app/scoreboard/scoreboardWrapper.js
@@ -14,6 +14,14 @@ class ScoreboardWrapper extends React.Component {
             interval: undefined
         };
         this.update = this.update.bind(this);
+
+        publicParse().then(data => {
+            this.setState({
+                problems: data.problems,
+                mode: data.mode
+            });
+        });
+        this.update();
     }
 
     componentDidMount() {
@@ -25,7 +33,11 @@ class ScoreboardWrapper extends React.Component {
             });
         });
         this.update();
-        setInterval(this.update, 30000);
+        this.interval = setInterval(this.update, 30000);
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.interval);
     }
 
     componentDidUpdate() {

diff --git a/src/app/submissions/submissionLazyAssistance.js b/src/app/submissions/submissionLazyAssistance.js
@@ -1,20 +1,20 @@
 import React from 'react';
 import { CircularProgress, Typography, Button } from '@material-ui/core';
 
-import LocalizedMessage from 'react-l10n'
+import LocalizedMessage from 'react-l10n';
 
-function LoadingIndicator () {
+function LoadingIndicator() {
     return (
-        <div align="center" style={{ marginTop: '10%' }}>
+        <div align='center' style={{ marginTop: '10%' }}>
             <CircularProgress />
         </div>
-    )
+    );
 }
 
 class SubmissionError extends React.PureComponent {
     constructor(props) {
         super(props);
-        this.state = { error: false }
+        this.state = { error: false };
     }
 
     // error boundary for ProblemWrapper
@@ -27,26 +27,22 @@ class SubmissionError extends React.PureComponent {
             // if no error, render normally
             return this.props.children;
         else
-        return (
-            <div
-                align="center"
-                style={{ margin: '10%' }}>
-                <Typography variant="h6">
-                    <LocalizedMessage id="submissions.lazyAssistant.failedLoadInfo.text[0]"/>
-                </Typography>
-                <Typography variant="p">
-                    <LocalizedMessage id="submissions.lazyAssistant.failedLoadInfo.text[1]"/>
-                </Typography>
-                <div style={{ marginTop: 20 }}>
-                    <Button
-                        onClick={() => window.location.reload(true)}
-                        color="primary" variant="raised">
-                        <LocalizedMessage id="submissions.lazyAssistant.failedLoadInfo.control.reload"/>
-                    </Button>
+            return (
+                <div align='center' style={{ margin: '10%' }}>
+                    <Typography variant='h6'>
+                        <LocalizedMessage id='submissions.lazyAssistant.failedLoadInfo.text[0]' />
+                    </Typography>
+                    <Typography variant='p'>
+                        <LocalizedMessage id='submissions.lazyAssistant.failedLoadInfo.text[1]' />
+                    </Typography>
+                    <div style={{ marginTop: 20 }}>
+                        <Button onClick={() => window.location.reload(true)} color='primary' variant='raised'>
+                            <LocalizedMessage id='submissions.lazyAssistant.failedLoadInfo.control.reload' />
+                        </Button>
+                    </div>
                 </div>
-            </div>
-        )
+            );
     }
 }
 
-export { LoadingIndicator, SubmissionError };
+export { LoadingIndicator, SubmissionError };
diff --git a/src/app/submissions/submissionLazyWrapper.js b/src/app/submissions/submissionLazyWrapper.js
@@ -3,10 +3,10 @@ import { LoadingIndicator, SubmissionError } from './submissionLazyAssistance.js
 
 const Submissions = React.lazy(() => import('./submissionWrapper.js'));
 
-export default (props) => (
+export default props => (
     <SubmissionError>
         <Suspense fallback={<LoadingIndicator />}>
-            <Submissions />
+            <Submissions {...props} />
         </Suspense>
     </SubmissionError>
-)
+);