Skip to content

Commit

Permalink
Merge pull request #59 from feedernet/prettier-js
Browse files Browse the repository at this point in the history
Add Prettier Formatting
  • Loading branch information
mbillow committed May 23, 2021
2 parents c118ff8 + c96d2e2 commit f1009b0
Show file tree
Hide file tree
Showing 96 changed files with 5,305 additions and 4,516 deletions.
@@ -1,4 +1,4 @@
name: Backend Testing/Linting
name: Testing and Linting

on:
push:
Expand All @@ -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
Expand Down
21 changes: 19 additions & 2 deletions README.md
Expand Up @@ -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
Expand All @@ -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.
Expand All @@ -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 (ted@timmons.me); introduce yourself and he'll send you a Slack invite.
If you have tech and coding experience, you can help! Drop Ted an email (ted@timmons.me); introduce yourself, and he'll send you a Slack invite.

**The Slack channel is _NOT_ for support requests.**

Expand Down
6 changes: 6 additions & 0 deletions static/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion static/package.json
Expand Up @@ -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"
}
}
158 changes: 82 additions & 76 deletions 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);
8 changes: 4 additions & 4 deletions 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();
Expand Down
68 changes: 38 additions & 30 deletions 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,
});
};

0 comments on commit f1009b0

Please sign in to comment.