Merge pull request #40 from csci4950tgt/js-component

Make a code view component, #36

package.json

@@ -3,9 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "js-beautify": "^1.10.2",
     "moment": "^2.24.0",
     "perms": "^0.1.0",
     "react": "^16.9.0",
+    "react-ace": "^8.0.0",
     "react-dom": "^16.9.0",
     "react-moment": "^0.9.6",
     "react-router-dom": "^5.1.2",

src/views/home/Home.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 // Components
 import UserInput from './UserInput';

src/views/tickets/JSViewer.js

@@ -0,0 +1,99 @@
+import React, { Component } from 'react';
+
+import { Dropdown } from 'semantic-ui-react';
+
+import AceEditor from 'react-ace';
+import { js as beautify } from 'js-beautify';
+
+import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/theme-monokai';
+
+export default class CodeBlock extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      ready: false,
+    };
+  }
+
+  fileList = [];
+
+  fetchArtifacts() {
+    const artifactURL = `http://localhost:8080/api/tickets/${this.props.ticketID}/artifacts`;
+    try {
+      fetch(artifactURL, { method: 'GET' })
+        .then(res => res.json())
+        .then(res => {
+          const artifacts = res.fileArtifacts.filter(artifact =>
+            artifact.filename.endsWith('.js')
+          );
+
+          const numberOfFiles = artifacts.count;
+
+          for (let i in artifacts) {
+            const name = artifacts[i].filename;
+
+            if (
+              this.fileList.find(i => {
+                return i.key === name;
+              }) === undefined
+            ) {
+              const fileURL = `http://localhost:8080/api/tickets/${this.props.ticketID}/artifacts/${name}`;
+
+              fetch(fileURL, {
+                method: 'GET',
+                responseType: 'text',
+              })
+                .then(res => res.text())
+                .then(res => {
+                  this.fileList.push({
+                    key: name,
+                    text: <span className="text">{name}</span>,
+                    value: beautify(res),
+                  });
+
+                  if (this.fileList.count === numberOfFiles) {
+                    this.setState({ ready: true });
+                  }
+                });
+            }
+          }
+        });
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  componentDidMount() {
+    this.fetchArtifacts();
+  }
+
+  handleOnChange = (e, data) => {
+    this.props.onFileSelectionChange(e, data);
+  };
+
+  render() {
+    return (
+      <>
+        <Dropdown
+          placeholder="Select a File"
+          fluid
+          selection
+          options={this.fileList}
+          onChange={this.handleOnChange}
+        />
+        <AceEditor
+          mode="javascript"
+          theme="monokai"
+          readOnly={true}
+          width=""
+          height="800px"
+          value={this.props.code}
+          cursorStart={1}
+          wrapEnabled={true}
+          editorProps={{ $blockScrolling: true }}
+        />
+      </>
+    );
+  }
+}

src/views/tickets/Screenshot.js

@@ -1,31 +1,20 @@
 import React, { Component } from 'react';
-import { Header, Image, Segment } from 'semantic-ui-react';
+import { Image, Segment } from 'semantic-ui-react';
 
 export default class Screenshot extends Component {
   render() {
-    const { ticketID, processed } = this.props.ticketInfo;
     return (
-      <div>
-        <Segment inverted>
-          <Header as="h3" inverted color="blue">
-            {' '}
-            Screenshot for ticket #{ticketID}{' '}
-          </Header>
-          {processed && (
-            <Image
-              alt="fullpage screenshot"
-              src={`http://localhost:8080/api/tickets/${ticketID}/artifacts/screenshotFull.png`}
-              fluid
-            />
-          )}
-          {!processed && (
-            <Header as="h3" inverted color="blue">
-              {' '}
-              This ticket has not been processed. Please wait.{' '}
-            </Header>
-          )}
-        </Segment>
-      </div>
+      <Segment inverted>
+        <Image
+          alt="fullpage screenshot"
+          src={
+            'http://localhost:8080/api/tickets/' +
+            this.props.ticketID +
+            '/artifacts/screenshotFull.png'
+          }
+          fluid
+        />
+      </Segment>
     );
   }
 }