Add programmatical support for downloading source code back

package.json

@@ -10,6 +10,7 @@
     "dayjs": "^1.8.8",
     "mime": "^2.4.0",
     "react": "^16.6.3",
+    "react-ace": "^6.4.0",
     "react-codemirror": "^1.0.0",
     "react-dom": "^16.6.3",
     "react-router-dom": "^4.3.1",

src/app/submissions/stub/download.js

@@ -0,0 +1,27 @@
+/**
+ * @name downloadSubmission
+ * @param {String} `id` - ID of the submission to be downloaded
+ * @returns {Promise<Response>}
+ */
+
+import { pushNotification } from "../../notifier/notify.js";
+
+export default async function downloadSubmission(id) {
+    return fetch(`/api/subs/${String(id)}/source`)
+        .then((res) => {
+            if (res.status !== 200)
+                throw new Error(
+                    "Error fetching source code : response code is not 200"
+                );
+            return res.text();
+        })
+        .catch((err) => {
+            if (process.env.NODE_ENV === "development") {
+                console.log(err);
+                if (typeof pushNotification === "function") {
+                    pushNotification("Failed retrieving submissions.");
+                }
+            }
+            return undefined;
+        });
+}

src/app/submissions/submission.js

@@ -1,13 +1,15 @@
-import React from 'react'
-import { TableRow, TableCell } from '@material-ui/core'
+import React from "react";
+import { TableRow, TableCell } from "@material-ui/core";
 
-import ContestantSignature from './signature/contestantSignature.js'
-import ProblemSignature from './signature/problemSignature.js'
-import LanguageSignature from './signature/languageSignature.js'
-import VerdictSignature from './signature/verdictSignature.js'
-import ExecTimeSignature from './signature/execTimeSignature.js'
+import ContestantSignature from "./signature/contestantSignature.js";
+import ProblemSignature from "./signature/problemSignature.js";
+import LanguageSignature from "./signature/languageSignature.js";
+import VerdictSignature from "./signature/verdictSignature.js";
+import ExecTimeSignature from "./signature/execTimeSignature.js";
 // import TimestampSignature from './signature/timestampSignature.js'
-import MemorySignature from './signature/memorySignature.js'
+import MemorySignature from "./signature/memorySignature.js";
+
+// import SubmissionDownloadButton from './submission/downloadCell.js'
 
 /**
  * @name Submission
@@ -18,69 +20,56 @@ import MemorySignature from './signature/memorySignature.js'
  * @param {String} verdict : Submission's judged verdict
  * @param {String} executionTime : Submission's execution time
  * @param {String} memory : memory consumption of the submission
- * @param {String} timestamp : The time of submission.
- * @param {Array : Object ({verdict, executionTime, memory, mark})} tests
+ * @param {String} timestamp` : The time of submission.
+ * @param {String} id` : Submission ID - used to provide download link
+ * @param {Array <Object ({verdict : String, executionTime : String, memory : String, mark : String})>} `tests`
  *        			- an array with objects satisfying the given schema
- * @returns {React.Component} : A <TableRow> containing all nicely-formatted information.
+ * @returns {React.Component} : A `<TableRow>` containing all nicely-formatted information.
  */
 
-class Submission extends React.Component {
-    constructor(props) {
-        super(props)
-        this.state = {
-            detailsExpanded: false,
-        }
-    }
+class Submission extends React.PureComponent {
     render() {
         return (
             <>
-                <TableRow
-                    style={
-                        {
-                            // backgroundColor: (this.props.verdict==="AC"
-                            // || this.props.verdict==="Accepted" ? '#A5D6A7' : '')
-                            // green color if successful
-                        }
-                    }
-                    {...this.props}
-                >
+                <TableRow {...this.props}>
                     <TableCell>
                         <ContestantSignature
-                            contestantName={this.props.contestant || 'N/A'}
+                            contestantName={this.props.contestant || "N/A"}
                         />
                     </TableCell>
                     <TableCell>
                         <ProblemSignature
-                            problemName={this.props.problem || 'N/A'}
+                            problemName={this.props.problem || "N/A"}
                         />
                     </TableCell>
                     <TableCell>
                         <LanguageSignature
-                            languageName={this.props.language || 'N/A'}
+                            languageName={this.props.language || "N/A"}
                         />
                     </TableCell>
                     <TableCell>
                         <VerdictSignature
-                            verdict={this.props.verdict || 'N/A'}
+                            verdict={this.props.verdict || "N/A"}
                         />
                     </TableCell>
                     <TableCell>
                         <ExecTimeSignature
-                            time={this.props.executionTime || 'N/A'}
+                            time={this.props.executionTime || "N/A"}
                         />
                     </TableCell>
                     <TableCell>
-                        <MemorySignature memory={this.props.memory || 'N/A'} />
+                        <MemorySignature memory={this.props.memory || "N/A"} />
                     </TableCell>
                     <TableCell>
                         {/* <TimestampSignature time={this.props.timestamp || "N/A"} /> */}
                         {/* table overflow; will fix later, I guess */}
-                        {new Date(this.props.timestamp).toLocaleString() || 'N/A'}
+                        {new Date(this.props.timestamp).toLocaleString() ||
+                            "N/A"}
                     </TableCell>
                 </TableRow>
             </>
-        )
+        );
     }
 }
 
-export default Submission
+export default Submission;

src/app/submissions/submissionDetail/codePanel/codeDialog.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { Dialog, Button, DialogActions } from "@material-ui/core";
+
+import CodePanel from "./codePanel.js";
+
+export let toggleCodeDialog;
+
+export default class CodeDialog extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            open: false
+        };
+
+        toggleCodeDialog = this.toggle = this.toggle.bind(this);
+    }
+
+    toggle() {
+        this.setState({
+            open: !this.state.open
+        });
+    }
+
+    render() {
+        return (
+            <Dialog open={this.state.open} onClose={this.toggle} scroll="body">
+                <CodePanel id={this.props.id} />
+                <DialogActions>
+                    <Button onClick={this.toggle}>Close</Button>
+                </DialogActions>
+            </Dialog>
+        );
+    }
+}

src/app/submissions/submissionDetail/codePanel/codePanel.js

@@ -0,0 +1,59 @@
+import React from "react";
+import downloadSubmission from "../../stub/download.js";
+import { CardContent, Typography } from "@material-ui/core";
+import AceEditor from "react-ace";
+
+/**
+ * @name CodePanel
+ * @param {String} id : Submission ID to get
+ */
+
+export default class CodePanel extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            code: undefined,
+            ref: React.createRef()
+        };
+    }
+
+    componentDidMount() {
+        if (this.props.id && this.props.id.constructor === String) {
+            downloadSubmission(this.props.id).then((code) => {
+                this.setState({
+                    code: code
+                });
+            });
+        }
+    }
+
+    componentDidUpdate() {
+        this.componentDidMount();
+    }
+
+    render() {
+        return (
+            <>
+                {this.state.code !== undefined ? (
+                    <CardContent>
+                        <AceEditor
+                            value={this.state.code}
+                            readOnly
+                            ref={this.state.ref}
+                            width="100%"
+                        />
+                    </CardContent>
+                ) : (
+                    <CardContent>
+                        <Typography variant="h6">
+                            No code is available.
+                        </Typography>
+                        <Typography component="p">
+                            What are you expecting?
+                        </Typography>
+                    </CardContent>
+                )}
+            </>
+        );
+    }
+}