Merge pull request #59 from feedernet/prettier-js

Add Prettier Formatting
feedernet · May 23, 2021 · f1009b0 · f1009b0
2 parents c118ff8 + c96d2e2
commit f1009b0
Show file tree

Hide file tree

Showing 96 changed files with 5,305 additions and 4,516 deletions.
diff --git a/.github/workflows/backend.yml → .github/workflows/lint_and_test.yml b/.github/workflows/backend.yml → .github/workflows/lint_and_test.yml
@@ -1,4 +1,4 @@
-name: Backend Testing/Linting
+name: Testing and Linting
 
 on:
   push:
@@ -25,6 +25,10 @@ jobs:
       uses: actions/setup-python@v2
       with:
         python-version: ${{ matrix.python-version }}
+    - name: Setup node
+      uses: actions/setup-node@v2
+      with:
+        node-version: '14'
     - name: Install dependencies
       run: |
         python -m pip install --upgrade pip

diff --git a/README.md b/README.md
@@ -33,7 +33,7 @@ To run the daemon locally:
 poetry run python -m feeder
 ```
 
-If you are planning on soley developing for the backend, you can build a static version of the frontend and access the backend directly:
+If you are planning on solely developing for the backend, you can build a static version of the frontend and access the backend directly:
 
 ```
 cd static
@@ -46,6 +46,23 @@ Otherwise, in a different shell, run the Webpack development server:
 npm start
 ```
 
+### Linting and Code Formatting
+We use Black formatting for Python and Prettier for JS, JSON, etc.
+
+Tox will automatically run both of these tools when it runs it's normal test suite. 
+If either step fails, you will need to rerun the respective formatter.
+
+#### Black
+```shell
+black --target-version py38 feeder/ tests/
+```
+
+#### Prettier
+```shell
+cd static
+npx prettier --check ./src
+```
+
 ## Database and Schema Migrations
 
 This project uses SQLAlchemy and Alembic for managing database models and schema migrations.
@@ -66,7 +83,7 @@ DATABASE_PATH=./data.db alembic upgrade head
 
 # How can I help?
 
-If you have tech and coding experience, you can help! Drop Ted an email ([email protected]); introduce yourself and he'll send you a Slack invite.
+If you have tech and coding experience, you can help! Drop Ted an email ([email protected]); introduce yourself, and he'll send you a Slack invite.
 
 **The Slack channel is _NOT_ for support requests.**
 

diff --git a/static/package-lock.json b/static/package-lock.json
diff --git a/static/package.json b/static/package.json
@@ -56,6 +56,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
-    "npm-check": "^5.9.2"
+    "npm-check": "^5.9.2",
+    "prettier": "2.2.1"
   }
 }
diff --git a/static/src/App.js b/static/src/App.js
@@ -1,94 +1,100 @@
-import React from 'react';
-import {Switch, Route, withRouter, Link} from 'react-router-dom';
+import React from "react";
+import { Switch, Route, withRouter, Link } from "react-router-dom";
 import Container from "react-bootstrap/Container";
 import Navbar from "react-bootstrap/Navbar";
 import Nav from "react-bootstrap/Nav";
-import Icon from '@mdi/react'
-import {mdiSilverwareForkKnife, mdiCog, mdiPaw} from '@mdi/js';
-import {ErrorComponent} from "./components/Error";
+import Icon from "@mdi/react";
+import { mdiSilverwareForkKnife, mdiCog, mdiPaw } from "@mdi/js";
+import { ErrorComponent } from "./components/Error";
 import FeederCardList from "./containers/FeederCardListContainer";
 import FeedHistory from "./containers/FeedHistoryTableContainer";
-import {getRootPath} from "./util";
-import ProjectLogo from "./images/feeder-project-logo.svg"
+import { getRootPath } from "./util";
+import ProjectLogo from "./images/feeder-project-logo.svg";
 import NewFeederWizard from "./containers/NewFeederWizard";
 import SnackModal from "./containers/SnackModalContainer";
 import EditFeederModal from "./containers/EditFeederModalContainer";
 import PetCardList from "./containers/PetCardListContainer";
 import EditPetModal from "./containers/EditPetModalContainer";
 import ScheduleModal from "./containers/ScheduleModalContainer";
 
-const rootPath = getRootPath()
+const rootPath = getRootPath();
 
 class App extends React.Component {
-    state = {
-        routes: [
-            {
-                path: rootPath,
-                label: 'Feeder List',
-                exact: true,
-                render: props => {
-                    return <>
-                        <PetCardList {...props} />
-                        <FeederCardList {...props} />
-                        <FeedHistory {...props} />
-                        <NewFeederWizard/>
-                        <SnackModal/>
-                        <EditFeederModal/>
-                        <EditPetModal/>
-                        <ScheduleModal/>
-                    </>
-                }
-            },
-            {
-                label: 'Page Not Found',
-                render: () => {
-                    return <ErrorComponent message="Page Not Found!"/>;
-                }
-            }
-        ]
-    };
-
-    render() {
-        return (
-            <div>
-                <Navbar
-                    expand="lg"
-                    variant="dark"
-                    bg="primary"
-                    fixed="top"
-                    className={window.navigator.standalone === true ? "ios-app-nav" : null}>
-                    <Container>
-                        <Navbar.Brand href="#">
-                            <img src={ProjectLogo} alt={"FeederNet Logo"} width={175}/>
-                        </Navbar.Brand>
-                        <Navbar.Toggle aria-controls="basic-navbar-nav"/>
-                        <Navbar.Collapse id="basic-navbar-nav">
-                            <Nav className="mr-auto">
-                                <Link
-                                    to={rootPath}
-                                    component={Nav.Link}
-                                    active={window.location.pathname === `${rootPath}/`}
-                                >
-                                    <Icon path={mdiPaw} size={.75}/> Home
-                                </Link>
-                                <Link to={`${rootPath}/settings`} component={Nav.Link}>
-                                    <Icon path={mdiCog} size={.75}/> Settings
-                                </Link>
-                            </Nav>
-                        </Navbar.Collapse>
-                    </Container>
-                </Navbar>
-                <Container style={{marginTop: window.navigator.standalone === true ? 70 : 100}}>
-                    <Switch>
-                        {this.state.routes.map(ea => {
-                            return <Route key={ea.path} {...ea} />;
-                        })}
-                    </Switch>
-                </Container>
-            </div>
-        );
-    }
+  state = {
+    routes: [
+      {
+        path: rootPath,
+        label: "Feeder List",
+        exact: true,
+        render: (props) => {
+          return (
+            <>
+              <PetCardList {...props} />
+              <FeederCardList {...props} />
+              <FeedHistory {...props} />
+              <NewFeederWizard />
+              <SnackModal />
+              <EditFeederModal />
+              <EditPetModal />
+              <ScheduleModal />
+            </>
+          );
+        },
+      },
+      {
+        label: "Page Not Found",
+        render: () => {
+          return <ErrorComponent message="Page Not Found!" />;
+        },
+      },
+    ],
+  };
 
+  render() {
+    return (
+      <div>
+        <Navbar
+          expand="lg"
+          variant="dark"
+          bg="primary"
+          fixed="top"
+          className={
+            window.navigator.standalone === true ? "ios-app-nav" : null
+          }
+        >
+          <Container>
+            <Navbar.Brand href="#">
+              <img src={ProjectLogo} alt={"FeederNet Logo"} width={175} />
+            </Navbar.Brand>
+            <Navbar.Toggle aria-controls="basic-navbar-nav" />
+            <Navbar.Collapse id="basic-navbar-nav">
+              <Nav className="mr-auto">
+                <Link
+                  to={rootPath}
+                  component={Nav.Link}
+                  active={window.location.pathname === `${rootPath}/`}
+                >
+                  <Icon path={mdiPaw} size={0.75} /> Home
+                </Link>
+                <Link to={`${rootPath}/settings`} component={Nav.Link}>
+                  <Icon path={mdiCog} size={0.75} /> Settings
+                </Link>
+              </Nav>
+            </Navbar.Collapse>
+          </Container>
+        </Navbar>
+        <Container
+          style={{ marginTop: window.navigator.standalone === true ? 70 : 100 }}
+        >
+          <Switch>
+            {this.state.routes.map((ea) => {
+              return <Route key={ea.path} {...ea} />;
+            })}
+          </Switch>
+        </Container>
+      </div>
+    );
+  }
 }
 
 export default withRouter(App);
diff --git a/static/src/App.test.js b/static/src/App.test.js
@@ -1,8 +1,8 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
+import React from "react";
+import { render } from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   const { getByText } = render(<App />);
   const linkElement = getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();

diff --git a/static/src/actions/createPet.js b/static/src/actions/createPet.js
@@ -1,32 +1,40 @@
-import {PET_API_BASE} from "../constants";
-import {createPet} from "../constants/pet";
-import {createAction} from "redux-api-middleware";
+import { PET_API_BASE } from "../constants";
+import { createPet } from "../constants/pet";
+import { createAction } from "redux-api-middleware";
 
-export const createPetAction = (name, animal_type, weight, birthday, activity_level, image = null, device_hid = null) => {
-    const body = JSON.stringify({
-        name,
-        animal_type,
-        weight,
-        birthday,
-        image,
-        activity_level,
-        device_hid
-    });
+export const createPetAction = (
+  name,
+  animal_type,
+  weight,
+  birthday,
+  activity_level,
+  image = null,
+  device_hid = null
+) => {
+  const body = JSON.stringify({
+    name,
+    animal_type,
+    weight,
+    birthday,
+    image,
+    activity_level,
+    device_hid,
+  });
 
-    const meta = {
-        method: 'POST',
-        endpoint: `${PET_API_BASE}`,
-        body
-    };
-    return createAction({
-        endpoint: meta.endpoint,
-        types: [
-            {type: createPet.CREATE_PET, meta},
-            {type: createPet.CREATE_PET_SUCCESS, meta},
-            {type: createPet.CREATE_PET_FAILURE, meta},
-        ],
-        method: meta.method,
-        credentials: 'include',
-        body
-    });
-};
+  const meta = {
+    method: "POST",
+    endpoint: `${PET_API_BASE}`,
+    body,
+  };
+  return createAction({
+    endpoint: meta.endpoint,
+    types: [
+      { type: createPet.CREATE_PET, meta },
+      { type: createPet.CREATE_PET_SUCCESS, meta },
+      { type: createPet.CREATE_PET_FAILURE, meta },
+    ],
+    method: meta.method,
+    credentials: "include",
+    body,
+  });
+};