fix eslint and prettier errors

web/src/activity-bar.js

@@ -12,17 +12,19 @@ class ActivityBar extends Component {
       let button;
 
       if (activity.component) {
-        button = <activity.component key={activity.key} />
+        button = <activity.component key={activity.key} />;
       } else {
-        button = <IconButton
-                    key={activity.selector + activity.toggle}
-                    action={() => this.props.buttonAction(activity)}
-                    tooltipMessage={activity.tooltipMessage}
-                    tooltipPosition={activity.tooltipPosition}
-                    icon={activity.icon}
-                    color="hsl(0, 0%, 59%)"
-                    size="24"
-                  />
+        button = (
+          <IconButton
+            key={activity.selector + activity.toggle}
+            action={() => this.props.buttonAction(activity)}
+            tooltipMessage={activity.tooltipMessage}
+            tooltipPosition={activity.tooltipPosition}
+            icon={activity.icon}
+            color="hsl(0, 0%, 59%)"
+            size="24"
+          />
+        );
       }
 
       if (activity.position && activity.position === 'lower') {

web/src/api.js

@@ -9,8 +9,8 @@ function apiPath(p) {
 export const DUST_CODE_RESOURCE = apiPath('dust/code');
 export const DUST_AUDIO_RESOURCE = apiPath('dust/audio');
 export const DUST_DATA_RESOURCE = apiPath('dust/data');
-export const DUST_SOURCES_RESOURCE = apiPath('dust/data/sources')
-export const DUST_CATALOGS_RESOURCE = apiPath('dust/data/catalogs')
+export const DUST_SOURCES_RESOURCE = apiPath('dust/data/sources');
+export const DUST_CATALOGS_RESOURCE = apiPath('dust/data/catalogs');
 
 export const DUST_PROTECTED_RESOURCES = new Set([
   DUST_AUDIO_RESOURCE,
@@ -20,9 +20,7 @@ export const DUST_PROTECTED_RESOURCES = new Set([
   DUST_CATALOGS_RESOURCE,
 ]);
 
-export const isProtectedResource = resource => (
-  DUST_PROTECTED_RESOURCES.has(resource)
-);
+export const isProtectedResource = resource => DUST_PROTECTED_RESOURCES.has(resource);
 
 class API {
   static siblingResourceForName(name, siblingResource, category = 'scripts') {
@@ -184,7 +182,7 @@ class API {
 
   static updateCatalog(catalogURL, onSuccess, onFailure) {
     const url = `${catalogURL}/update`;
-    fetch(url, {'method': 'POST'}).then(response => {
+    fetch(url, { method: 'POST' }).then(response => {
       const cb = response.ok ? onSuccess : onFailure;
       response.json().then(body => {
         cb(body);
@@ -216,7 +214,7 @@ class API {
   static installProject(catalogURL, name, onSuccess, onFailure) {
     const encodedName = encodeURIComponent(name);
     const url = `${catalogURL}/install/${encodedName}`;
-    fetch(url, {'method': 'POST'}).then(response => {
+    fetch(url, { method: 'POST' }).then(response => {
       const cb = response.ok ? onSuccess : onFailure;
       response.json().then(body => {
         cb(body);
@@ -227,7 +225,7 @@ class API {
   static installProjectFromURL(sourceURL, onSuccess, onFailure) {
     const encodedURL = encodeURIComponent(sourceURL);
     const url = `${API_ROOT}/project/install?url=${encodedURL}`;
-    fetch(url, {'method': 'POST'}).then(response => {
+    fetch(url, { method: 'POST' }).then(response => {
       const cb = response.ok ? onSuccess : onFailure;
       response.json().then(body => {
         cb(body);
@@ -238,7 +236,7 @@ class API {
   static updateProject(projectURL, onSuccess, onFailure) {
     // FIXME: this really shouldn't be a GET verb
     const url = `${projectURL}?update=`;
-    return fetch(url, {'method': 'GET'}).then(response => {
+    return fetch(url, { method: 'GET' }).then(response => {
       const cb = response.ok ? onSuccess : onFailure;
       response.json().then(body => {
         cb(body);
@@ -247,7 +245,7 @@ class API {
   }
 
   static removeProject(projectURL, onSuccess, onFailure) {
-    fetch(projectURL, {'method': 'DELETE'}).then(response => {
+    fetch(projectURL, { method: 'DELETE' }).then(response => {
       const cb = response.ok ? onSuccess : onFailure;
       response.json().then(body => {
         cb(body);

web/src/api.test.js

@@ -21,7 +21,7 @@ describe('siblingResourceForName', () => {
     const r = api.siblingResourceForName('foo.lua', '/api/v1/scripts/one/two/three.lua');
     expect(r).toEqual('/api/v1/scripts/one/two/foo.lua');
   });
-})
+});
 
 describe('fileFromResource', () => {
   it('extracts basic path', () => {

web/src/app.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import BoundWorkspace from './bound-workspace';
-import BoundUrlHandler from './bound-url-handler'
+import BoundUrlHandler from './bound-url-handler';
 import activities from './activities';
 import './app.css';
 import './tool-tip.css';

web/src/bound-edit-activity.js

@@ -115,7 +115,9 @@ const mapDispatchToProps = dispatch => ({
     dispatch(bufferSelect(resource));
 
     const path = resourceToEditPath(resource);
-    path && dispatch(pushHistory(path));
+    if (path) {
+      dispatch(pushHistory(path));
+    }
   },
   bufferSave: (resource, code, completionCB = () => {}) => {
     dispatch(bufferSave(resource, code, completionCB));
@@ -125,7 +127,7 @@ const mapDispatchToProps = dispatch => ({
     if (file) {
       if (file.includes('/lib/') || file.includes('/data/') || file.includes('/audio/')) {
         console.log('files under /lib/, /data/, and /audio/ cannot be run as a script');
-        return undefined;
+        return;
       }
       const cmd = `norns.script.load("${file}")`;
       dispatch(replSend(MATRON_COMPONENT, cmd));

web/src/bound-project-activity.js

@@ -16,9 +16,7 @@ import {
   removeProject,
 } from './model/project-actions';
 
-import {
-  directoryRead,
-} from './model/edit-actions';
+import { directoryRead } from './model/edit-actions';
 
 import { DUST_CODE_RESOURCE } from './api';
 

web/src/bound-repl-activity.js

@@ -42,7 +42,7 @@ const mapDispatchToProps = dispatch => ({
   },
   unitMapping: cb => {
     dispatch(unitMapping(cb));
-  }
+  },
 });
 
 const BoundReplActivity = connect(mapStateToProps, mapDispatchToProps)(ReplActivity);

web/src/bound-url-handler.js

@@ -1,9 +1,9 @@
 import { Component } from 'react';
 import { connect } from 'react-redux';
-import { bufferSelect, directoryReadRecursive } from './model/edit-actions'
-import { isEditPath, pathToResource } from './url-utils'
+import { bufferSelect, directoryReadRecursive } from './model/edit-actions';
+import { isEditPath, pathToResource } from './url-utils';
 
-// This might be better as a hook (not much of a class), 
+// This might be better as a hook (not much of a class),
 // but they are only supported in react-redux ^7.1
 class UrlHandler extends Component {
   constructor(props) {
@@ -40,8 +40,8 @@ class UrlHandler extends Component {
 const mapStateToProps = state => {
   const { hash } = state.router.location;
   return {
-    pathname: hash && hash[0] === '#' ? hash.substring(1) : ''
-  }
+    pathname: hash && hash[0] === '#' ? hash.substring(1) : '',
+  };
 };
 
 const mapDispatchToProps = dispatch => ({
@@ -50,8 +50,8 @@ const mapDispatchToProps = dispatch => ({
   },
   directoryReadRecursive: async resource => {
     dispatch(directoryReadRecursive(resource));
-  }
+  },
 });
 
 const BoundUrlHandler = connect(mapStateToProps, mapDispatchToProps)(UrlHandler);
-export default BoundUrlHandler;
+export default BoundUrlHandler;

web/src/bound-workspace.js

@@ -35,10 +35,12 @@ const mapDispatchToProps = dispatch => ({
     dispatch(replConnect(component, endpoint));
   },
   userDataList: () => {
-    dispatch(rootList(USER_DATA_PATH, () => {
-      // NB: this directory read is here to ensure that the dust/code directory is materialized ahead of any implicit "untitled.lua" buffer generation in order to ensure the implicity script lands in the code directory instead of the root directory.
-      dispatch(directoryRead(DUST_CODE_RESOURCE));
-    }));
+    dispatch(
+      rootList(USER_DATA_PATH, () => {
+        // NB: this directory read is here to ensure that the dust/code directory is materialized ahead of any implicit "untitled.lua" buffer generation in order to ensure the implicity script lands in the code directory instead of the root directory.
+        dispatch(directoryRead(DUST_CODE_RESOURCE));
+      }),
+    );
   },
 });
 

web/src/components/badge.js

@@ -1,12 +1,6 @@
 import React from 'react';
 import './badge.css';
 
-const Badge = (props) => {
-  return (
-    <span className='badge'>
-      {props.children}
-    </span>
-  );
-}
+const Badge = props => <span className="badge">{props.children}</span>;
 
 export default Badge;

web/src/components/catalog-list.js

@@ -9,22 +9,31 @@ const CatalogList = props => {
     const catalog = props.catalogs.get(name);
     return (
       <li key={name}>
-        <Catalog catalog={catalog} installedProjects={props.installedProjects} installAction={props.installAction} refreshAction={props.refreshAction} />
+        <Catalog
+          catalog={catalog}
+          installedProjects={props.installedProjects}
+          installAction={props.installAction}
+          refreshAction={props.refreshAction}
+        />
       </li>
     );
   });
   return (
-    <div className='catalog-list-container'>
-      {catalogs.size ? (<TextButton
-        classes='catalog-refresh-all-button'
-        color='hsl(0, 0%, 45%)'
-        action={() => props.refreshAllAction(props.catalogSummary)}
-        >refresh all</TextButton>) : ''}
-      <ul className='catalog-list'>
-        {catalogs}
-      </ul>
+    <div className="catalog-list-container">
+      {catalogs.size ? (
+        <TextButton
+          classes="catalog-refresh-all-button"
+          color="hsl(0, 0%, 45%)"
+          action={() => props.refreshAllAction(props.catalogSummary)}
+        >
+          refresh all
+        </TextButton>
+      ) : (
+        ''
+      )}
+      <ul className="catalog-list">{catalogs}</ul>
     </div>
   );
 };
 
-export default CatalogList;
+export default CatalogList;

web/src/components/catalog.js

@@ -9,55 +9,49 @@ import ProjectControl from './project-control';
 
 import './catalog.css';
 
-const Catalog = (props) => {
-  const {catalog, installedProjects} = props;
+const Catalog = props => {
+  const { catalog, installedProjects } = props;
   const catalogURL = catalog.get('url');
 
   const entries = catalog.get('entries').map(e => {
     const projectName = e.get('project_name');
     const projectURL = e.get('project_url');
-    const key = `${projectName}-${projectURL || ""}`; // to silence warnings
+    const key = `${projectName}-${projectURL || ''}`; // to silence warnings
 
     return (
       <li key={key}>
-      <ProjectControl>
-        <ProjectInfo project={e} />
-        {(installedProjects || []).indexOf(projectName) === -1 ? (
-          <TextButton
-            action={() => props.installAction(catalogURL, projectName)}
-          >
-            install
-          </TextButton>
-        ) : (
-          <div className='catalog-installed-label'>
-              installed
-          </div>
-        )}
-      </ProjectControl>
+        <ProjectControl>
+          <ProjectInfo project={e} />
+          {(installedProjects || []).indexOf(projectName) === -1 ? (
+            <TextButton action={() => props.installAction(catalogURL, projectName)}>
+              install
+            </TextButton>
+          ) : (
+            <div className="catalog-installed-label">installed</div>
+          )}
+        </ProjectControl>
       </li>
     );
   });
 
   return (
-    <div className='catalog-container'>
-      <div className='catalog-name'>
+    <div className="catalog-container">
+      <div className="catalog-name">
         {catalog.get('name')}
         <IconButton
-          tooltipMessage='update catalog'
-          tooltipPosition='right'
-          icon={ICONS['loop2']}
-          size='12'
-          padding='1'
-          color='hsl(0, 0%, 45%)'
-          dark={true}
+          tooltipMessage="update catalog"
+          tooltipPosition="right"
+          icon={ICONS.loop2}
+          size="12"
+          padding="1"
+          color="hsl(0, 0%, 45%)"
+          dark
           action={() => props.refreshAction(catalogURL)}
         />
       </div>
-      <ul className='catalog-entries'>
-        {entries}
-      </ul>
+      <ul className="catalog-entries">{entries}</ul>
     </div>
   );
-}
+};
 
-export default Catalog;
+export default Catalog;

web/src/components/project-control.js

@@ -2,20 +2,16 @@ import React from 'react';
 
 import './project-control.css';
 
-const ProjectControl = (props) => {
+const ProjectControl = props => {
   const summary = props.children[0];
   const controls = props.children.slice(1);
 
   return (
-    <div className='project-control'>
-      <div className='project-summary-container'>
-        {summary}
-      </div>
-      <div className='project-control-container'>
-        {controls}
-      </div>
+    <div className="project-control">
+      <div className="project-summary-container">{summary}</div>
+      <div className="project-control-container">{controls}</div>
     </div>
-  )
+  );
 };
 
-export default ProjectControl;
+export default ProjectControl;