Fixing ESLint GitHub test

.github/workflows/lint.yml

@@ -124,7 +124,12 @@ jobs:
         run: |
           set -eux
           npm install
-          node_modules/.bin/eslint --format unix . | \
+          npm install --save-dev -g eslint
+      - name: Run ESLint
+        working-directory: parlai/crowdsourcing/
+        run: |
+          set -eux
+          npx eslint --format unix . | \
             sed "s#${GITHUB_WORKSPACE}#.#" | \
             tee ${GITHUB_WORKSPACE}/output-annotations.txt
       - name: Add annotations

parlai/crowdsourcing/.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  env: {
+    browser: true,
+    node: true,
+    es2021: true
+  },
+  extends: ["eslint:recommended", "plugin:react/recommended"],
+  overrides: [],
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module"
+  },
+  rules: {
+    "react/prop-types": 0
+  }
+};

parlai/crowdsourcing/package.json

@@ -24,5 +24,11 @@
       "prettier --write",
       "git add"
     ]
-  }
+  },
+  "description": "Code for crowdsourcing tasks that use Mephisto. See the [Mephisto quick start guide](https://mephisto.ai/docs/guides/quickstart/) to quickly get started with Mephisto. **Please install Mephisto via poetry to avoid depdency conflits with ParlAI.** ``` # install poetry $ curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | python # from the root dir, install Mephisto: $ poetry install ``` This README provides a quick overview of how to run crowdsourcing tasks in ParlAI: see the [tutorial](https://github.com/facebookresearch/ParlAI/blob/main/docs/source/tutorial_crowdsourcing.md) for a deeper guide on how to set up and configure new crowdsourcing tasks.",
+  "version": "1.0.0",
+  "main": "index.js",
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
 }

parlai/crowdsourcing/tasks/dialcrowd/webapp-config/src/components/requesters/template/ColorPicker.js

@@ -1,11 +1,11 @@
 /*********************************************
-* @ Jessica Huynh, Ting-Rui Chiang, Kyusong Lee 
-* Carnegie Mellon University 2022
-*********************************************/
+ * @ Jessica Huynh, Ting-Rui Chiang, Kyusong Lee
+ * Carnegie Mellon University 2022
+ *********************************************/
 
-import React from 'react';
-import {Input, Form, Button} from 'antd';
-import { SketchPicker } from 'react-color';
+import React from "react";
+import { Input, Form, Button } from "antd";
+import { SketchPicker } from "react-color";
 
 class ColorPicker extends React.Component {
   /* Args:
@@ -15,7 +15,7 @@
      {@String} previewText
    */
 
-  constructor (props) {
+  constructor(props) {
     super(props);
     this.state = {
       visiblePicker: false,
@@ -25,43 +25,44 @@
   }
 
   handleClick = () => {
-    this.setState(
-      { visiblePicker: !this.state.visiblePicker }
-    );
+    this.setState({ visiblePicker: !this.state.visiblePicker });
   };
 
-  componentDidUpdate (prevProps) {
+  componentDidUpdate(prevProps) {
     if (prevProps.initialValue !== this.props.initialValue) {
-      this.setState({color: this.props.initialValue});
+      this.setState({ color: this.props.initialValue });
     }
   }
-  
-  close () {
+
+  close() {
     this.setState({
-      visiblePicker: false,
+      visiblePicker: false
     });
     if (this.color !== undefined) {
-      if (this.color.hex === undefined){
+      if (this.color.hex === undefined) {
         this.setState({
           color: this.color
         });
-        this.props.updateByKey(['style', 'global'], {"backgroundColor": this.color.toUpperCase()});
-      }
-      else{
+        this.props.updateByKey(["style", "global"], {
+          backgroundColor: this.color.toUpperCase()
+        });
+      } else {
         this.setState({
           color: this.color.hex
         });
-        this.props.updateByKey(['style', 'global'], {"backgroundColor": this.color.hex.toUpperCase()});
+        this.props.updateByKey(["style", "global"], {
+          backgroundColor: this.color.hex.toUpperCase()
+        });
       }
     }
-    console.log(this.props)
-  };
+    console.log(this.props);
+  }
 
-  handleChange (e) {
+  handleChange(e) {
     e.preventDefault();
-    this.setState({color: e.target.value});
+    this.setState({ color: e.target.value });
   }
-  
+
   render() {
     let colorStyle;
     if (this.props.previewText === undefined) {
@@ -74,59 +75,78 @@
         "border-color": "#BBBBBB"
       };
     } else {
       colorStyle = {
-        color: this.state.color,
+        color: this.state.color
       };
     }
 
-    return (<>
-      {this.showPicker()}
-      <div>
-        <div style={{display: 'inline-block', width: "20%"}}>
-        <Form.Item name={this.props.name} 
-                    rules={[{required: true, whitespace: true, message: "Please specify a color."}]}
-                    onChange={(e) => this.handleChange(e)} 
-                    validateTrigger={['onChange', 'onBlur']}>
-          <Input placeholder="#000000"
-                    style={{width: "1em", height: "1em", marginRight: "0.5em",
-                            color: 'transparent', background: this.props.initialValue}}
-                    onClick={this.handleClick}
-          />
-        </Form.Item> </div>
-      </div>
-    </>);
+    return (
+      <>
+        {this.showPicker()}
+        <div>
+          <div style={{ display: "inline-block", width: "20%" }}>
+            <Form.Item
+              name={this.props.name}
+              rules={[
+                {
+                  required: true,
+                  whitespace: true,
+                  message: "Please specify a color."
+                }
+              ]}
+              onChange={e => this.handleChange(e)}
+              validateTrigger={["onChange", "onBlur"]}
+            >
+              <Input
+                placeholder="#000000"
+                style={{
+                  width: "1em",
+                  height: "1em",
+                  marginRight: "0.5em",
+                  color: "transparent",
+                  background: this.props.initialValue
+                }}
+                onClick={this.handleClick}
+              />
+            </Form.Item>{" "}
+          </div>
+        </div>
+      </>
+    );
   }
 
-  handleColorChange (color, event) {
+  handleColorChange(color, event) {
     this.color = color;
   }
-  
-  showPicker () {
+
+  showPicker() {
     const popover = {
-      position: 'absolute',
-      zIndex: '2',
+      position: "absolute",
+      zIndex: "2"
     };
 
     const inner = {
       left: 0,
       bottom: 0,
-      position: 'absolute'
+      position: "absolute"
     };
 
     if (this.state.visiblePicker) {
-      return (<>
-        <div style={ popover }>
-          <div style={ inner }>
-            <SketchPicker
-              color={this.state.color}
-              onChangeComplete={(color) => this.handleColorChange(color)}
-            />
-            <Button onClick={() => this.close()}
-                    style={{width: "100%"}}>Done
-            </Button>
+      return (
+        <>
+          <div style={popover}>
+            <div style={inner}>
+              <SketchPicker
+                color={this.state.color}
+                onChangeComplete={color => this.handleColorChange(color)}
+              />
+              <Button onClick={() => this.close()} style={{ width: "100%" }}>
+                Done
+              </Button>
+            </div>
           </div>
-        </div>
-      </>);
+        </>
+      );
     } else {
       return null;
     }