Skip to content

Commit

Permalink
F/prettier (#87)
Browse files Browse the repository at this point in the history
* feat(prettier): incorporate automatic formatting on commit

* chore(prettier): normalize all source code to prettier style

* feat(prettier): prettify additional filetypes

* feat(prettier): prettify secrets, ignore package.json

* chore(prettier): re-normalize according to stated prefs

* feat(prettier): make automatic prettification opt-in

* chore(prettier): prettify merged files (seed.js)

* fix(scripts): re-remove prepush
  • Loading branch information
glebec authored Jun 6, 2018
1 parent ad468c9 commit 5813f45
Show file tree
Hide file tree
Showing 23 changed files with 5,779 additions and 4,427 deletions.
11 changes: 5 additions & 6 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
{
"root": true,
"extends": "fullstack",
"rules": {
"semi": 0,
"new-cap": [1, { "capIsNewExceptions": ["Router"] }]
}
"root": true,
"extends": ["fullstack", "prettier", "prettier/react"],
"rules": {
"semi": 0
}
}
2 changes: 1 addition & 1 deletion .github/ISSUE_TEMPLATE.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,4 @@ For features, please specify at least minimal requirements, e.g.:

---

*Issue description here…*
_Issue description here…_
8 changes: 4 additions & 4 deletions .github/PULL_REQUEST_TEMPLATE.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
### Assignee Tasks

- [ ] added unit tests (or none needed)
- [ ] written relevant docs (or none needed)
- [ ] referenced any relevant issues (or none exist)
* [ ] added unit tests (or none needed)
* [ ] written relevant docs (or none needed)
* [ ] referenced any relevant issues (or none exist)

### Guidelines

Please add a description of this Pull Request's motivation, scope, outstanding issues or potential alternatives, reasoning behind the current solution, and any other relevant information for posterity.

---

*Your PR Notes Here*
_Your PR Notes Here_
4 changes: 4 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
public/bundle.js
public/bundle.js.map
package-lock.json
package.json
9 changes: 9 additions & 0 deletions .prettierrc.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# printWidth: 80 # 80
# tabWidth: 2 # 2
# useTabs: false # false
semi: false # true
singleQuote: true # false
# trailingComma: none # none | es5 | all
bracketSpacing: false # true
# jsxBracketSameLine: false # false
# arrowParens: avoid # avoid | always
64 changes: 35 additions & 29 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Boilermaker

*Good things come in pairs*
_Good things come in pairs_

Looking to mix up a backend with express/sequelize and a frontend with react/redux? That's `boilermaker`!

Expand Down Expand Up @@ -35,9 +35,10 @@ Now that you've got the code, follow these steps to get acclimated:
* Create two postgres databases: `boilermaker` and `boilermaker-test` (you can substitute these with the name of your own application - just be sure to go through and change the `package.json` and `.travis.yml` to refer to the new name)
* By default, running `npm test` will use `boilermaker-test`, while regular development uses `boilermaker`
* Create a file called `secrets.js` in the project root
* This file is `.gitignore`'d, and will *only* be required in your *development* environment

* This file is `.gitignore`'d, and will _only_ be required in your _development_ environment
* Its purpose is to attach the secret env variables that you'll use while developing
* However, it's **very** important that you **not** push it to Github! Otherwise, *prying eyes* will find your secret API keys!
* However, it's **very** important that you **not** push it to Github! Otherwise, _prying eyes_ will find your secret API keys!
* It might look like this:

```
Expand Down Expand Up @@ -78,15 +79,19 @@ Ready to go world wide? Here's a guide to deployment! There are two (compatible)
Either way, you'll need to set up your deployment server to start:

### Prep
1. Set up the [Heroku command line tools](https://devcenter.heroku.com/articles/heroku-cli)
2. `heroku login`
3. Add a git remote for heroku:
- **If you're creating a new app...**
1. `heroku create` or `heroku create your-app-name` if you have a name in mind.
2. `heroku addons:create heroku-postgresql:hobby-dev` to add ("provision") a postgres database to your heroku dyno

- **If you already have a Heroku app...**
1. `heroku git:remote your-app-name` You'll need to be a collaborator on the app.
1. Set up the [Heroku command line tools](https://devcenter.heroku.com/articles/heroku-cli)
2. `heroku login`
3. Add a git remote for heroku:

* **If you're creating a new app...**

1. `heroku create` or `heroku create your-app-name` if you have a name in mind.
2. `heroku addons:create heroku-postgresql:hobby-dev` to add ("provision") a postgres database to your heroku dyno

* **If you already have a Heroku app...**

1. `heroku git:remote your-app-name` You'll need to be a collaborator on the app.

### When you're ready to deploy

Expand All @@ -96,31 +101,32 @@ Either way, you'll need to set up your deployment server to start:

CI is not about testing per se – it's about _continuously integrating_ your changes into the live application, instead of periodically _releasing_ new versions. CI tools can not only test your code, but then automatically deploy your app. Boilermaker comes with a `.travis.yml` configuration almost ready for deployment; follow these steps to complete the job.

1. Run `git checkout master && git pull && git checkout -b f/travis-deploy` (or use some other new branch name).
2. Un-comment the bottom part of `.travis.yml` (the `before_deploy` and `deploy` sections)
3. Add your Heroku app name to `deploy.app`, where it says "YOUR HEROKU APP NAME HERE". For example, if your domain is `cool-salty-conifer.herokuapp.com`, your app name is `cool-salty-conifer`.
4. Install the Travis CLI tools by following [the instructions here](https://github.com/travis-ci/travis.rb#installation).
5. Run `travis encrypt $(heroku auth:token) --org` to encrypt your Heroku API key. _**Warning:** do not run the `--add` command suggested by Travis, that will rewrite part of our existing config!_
6. Copy-paste your encrypted API key into the `.travis.yml` file under `deploy.api_key.secure`, where it says "YOUR ENCRYPTED API KEY HERE".
7. `git add -A && git commit -m 'travis: activate deployment' && git push -u origin f/travis-deploy`
8. Make a PR for the new branch, get it approved, and merge it into master.
1. Run `git checkout master && git pull && git checkout -b f/travis-deploy` (or use some other new branch name).
2. Un-comment the bottom part of `.travis.yml` (the `before_deploy` and `deploy` sections)
3. Add your Heroku app name to `deploy.app`, where it says "YOUR HEROKU APP NAME HERE". For example, if your domain is `cool-salty-conifer.herokuapp.com`, your app name is `cool-salty-conifer`.
4. Install the Travis CLI tools by following [the instructions here](https://github.com/travis-ci/travis.rb#installation).
5. Run `travis encrypt $(heroku auth:token)` to encrypt your Heroku API key. _**Warning:** do not run the `--add` command suggested by Travis, that will rewrite part of our existing config!_
6. Copy-paste your encrypted API key into the `.travis.yml` file under `deploy.api_key.secure`, where it says "YOUR ENCRYPTED API KEY HERE".
7. `git add -A && git commit -m 'travis: activate deployment' && git push -u origin f/travis-deploy`
8. Make a PR for the new branch, get it approved, and merge it into master.

That's it! From now on, whenever `master` is updated on GitHub, Travis will automatically push the app to Heroku for you.

#### Option B: Manual Deployment from your Local Machine

Some developers may prefer to control deployment rather than rely on automation. Your local copy of the application can be pushed up to Heroku at will, using Boilermaker's handy deployment script:

1. Make sure that all your work is fully committed and pushed to your master branch on Github.
2. If you currently have an existing branch called "deploy", delete it now (`git branch -d deploy`). We're going to use a dummy branch with the name "deploy" (see below), so if you have one lying around, the script below will error
3. `npm run deploy` - this will cause the following commands to happen in order:
- `git checkout -b deploy`: checks out a new branch called "deploy". Note that the name "deploy" here isn't magical, but it needs to match the name of the branch we specify when we push to our heroku remote.
- `webpack -p`: webpack will run in "production mode"
- `git add -f public/bundle.js public/bundle.js.map`: "force" add the otherwise gitignored build files
- `git commit --allow-empty -m 'Deploying'`: create a commit, even if nothing changed
- `git push --force heroku deploy:master`: push your local "deploy" branch to the "master" branch on heroku
- `git checkout master`: return to your master branch
- `git branch -D deploy`: remove the deploy branch
1. Make sure that all your work is fully committed and pushed to your master branch on Github.
2. If you currently have an existing branch called "deploy", delete it now (`git branch -d deploy`). We're going to use a dummy branch with the name "deploy" (see below), so if you have one lying around, the script below will error
3. `npm run deploy` - this will cause the following commands to happen in order:

* `git checkout -b deploy`: checks out a new branch called "deploy". Note that the name "deploy" here isn't magical, but it needs to match the name of the branch we specify when we push to our heroku remote.
* `webpack -p`: webpack will run in "production mode"
* `git add -f public/bundle.js public/bundle.js.map`: "force" add the otherwise gitignored build files
* `git commit --allow-empty -m 'Deploying'`: create a commit, even if nothing changed
* `git push --force heroku deploy:master`: push your local "deploy" branch to the "master" branch on heroku
* `git checkout master`: return to your master branch
* `git branch -D deploy`: remove the deploy branch

Now, you should be deployed!

Expand Down
1 change: 0 additions & 1 deletion client/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import React from 'react'
import {Navbar} from './components'
import Routes from './routes'


const App = () => {
return (
<div>
Expand Down
18 changes: 11 additions & 7 deletions client/components/auth-form.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,22 @@ import {auth} from '../store'
/**
* COMPONENT
*/
const AuthForm = (props) => {
const AuthForm = props => {
const {name, displayName, handleSubmit, error} = props

return (
<div>
<form onSubmit={handleSubmit} name={name}>
<div>
<label htmlFor="email"><small>Email</small></label>
<label htmlFor="email">
<small>Email</small>
</label>
<input name="email" type="text" />
</div>
<div>
<label htmlFor="password"><small>Password</small></label>
<label htmlFor="password">
<small>Password</small>
</label>
<input name="password" type="password" />
</div>
<div>
Expand All @@ -37,25 +41,25 @@ const AuthForm = (props) => {
* function, and share the same Component. This is a good example of how we
* can stay DRY with interfaces that are very similar to each other!
*/
const mapLogin = (state) => {
const mapLogin = state => {
return {
name: 'login',
displayName: 'Login',
error: state.user.error
}
}

const mapSignup = (state) => {
const mapSignup = state => {
return {
name: 'signup',
displayName: 'Sign Up',
error: state.user.error
}
}

const mapDispatch = (dispatch) => {
const mapDispatch = dispatch => {
return {
handleSubmit (evt) {
handleSubmit(evt) {
evt.preventDefault()
const formName = evt.target.name
const email = evt.target.email.value
Expand Down
2 changes: 1 addition & 1 deletion client/components/navbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {connect} from 'react-redux'
import {Link} from 'react-router-dom'
import {logout} from '../store'

const Navbar = ({ handleClick, isLoggedIn }) => (
const Navbar = ({handleClick, isLoggedIn}) => (
<div>
<h1>BOILERMAKER</h1>
<nav>
Expand Down
4 changes: 2 additions & 2 deletions client/components/user-home.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {connect} from 'react-redux'
/**
* COMPONENT
*/
export const UserHome = (props) => {
export const UserHome = props => {
const {email} = props

return (
Expand All @@ -18,7 +18,7 @@ export const UserHome = (props) => {
/**
* CONTAINER
*/
const mapState = (state) => {
const mapState = state => {
return {
email: state.user.email
}
Expand Down
3 changes: 2 additions & 1 deletion client/history.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import createHistory from 'history/createBrowserHistory'
import createMemoryHistory from 'history/createMemoryHistory'

const history = process.env.NODE_ENV === 'test' ? createMemoryHistory() : createHistory()
const history =
process.env.NODE_ENV === 'test' ? createMemoryHistory() : createHistory()

export default history
23 changes: 11 additions & 12 deletions client/routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,24 @@ import {me} from './store'
* COMPONENT
*/
class Routes extends Component {
componentDidMount () {
componentDidMount() {
this.props.loadInitialData()
}

render () {
render() {
const {isLoggedIn} = this.props

return (
<Switch>
{/* Routes placed here are available to all visitors */}
<Route path="/login" component={Login} />
<Route path="/signup" component={Signup} />
{
isLoggedIn &&
<Switch>
{/* Routes placed here are only available after logging in */}
<Route path="/home" component={UserHome} />
</Switch>
}
{isLoggedIn && (
<Switch>
{/* Routes placed here are only available after logging in */}
<Route path="/home" component={UserHome} />
</Switch>
)}
{/* Displays our Login component as a fallback */}
<Route component={Login} />
</Switch>
Expand All @@ -38,17 +37,17 @@ class Routes extends Component {
/**
* CONTAINER
*/
const mapState = (state) => {
const mapState = state => {
return {
// Being 'logged in' for our purposes will be defined has having a state.user that has a truthy id.
// Otherwise, state.user will be an empty object, and state.user.id will be falsey
isLoggedIn: !!state.user.id
}
}

const mapDispatch = (dispatch) => {
const mapDispatch = dispatch => {
return {
loadInitialData () {
loadInitialData() {
dispatch(me())
}
}
Expand Down
7 changes: 3 additions & 4 deletions client/store/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,9 @@ import {composeWithDevTools} from 'redux-devtools-extension'
import user from './user'

const reducer = combineReducers({user})
const middleware = composeWithDevTools(applyMiddleware(
thunkMiddleware,
createLogger({collapsed: true})
))
const middleware = composeWithDevTools(
applyMiddleware(thunkMiddleware, createLogger({collapsed: true}))
)
const store = createStore(reducer, middleware)

export default store
Expand Down
47 changes: 25 additions & 22 deletions client/store/user.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,37 +21,40 @@ const removeUser = () => ({type: REMOVE_USER})
/**
* THUNK CREATORS
*/
export const me = () =>
dispatch =>
axios.get('/auth/me')
.then(res =>
dispatch(getUser(res.data || defaultUser)))
.catch(err => console.log(err))
export const me = () => dispatch =>
axios
.get('/auth/me')
.then(res => dispatch(getUser(res.data || defaultUser)))
.catch(err => console.log(err))

export const auth = (email, password, method) =>
dispatch =>
axios.post(`/auth/${method}`, { email, password })
.then(res => {
export const auth = (email, password, method) => dispatch =>
axios
.post(`/auth/${method}`, {email, password})
.then(
res => {
dispatch(getUser(res.data))
history.push('/home')
}, authError => { // rare example: a good use case for parallel (non-catch) error handler
},
authError => {
// rare example: a good use case for parallel (non-catch) error handler
dispatch(getUser({error: authError}))
})
.catch(dispatchOrHistoryErr => console.error(dispatchOrHistoryErr))
}
)
.catch(dispatchOrHistoryErr => console.error(dispatchOrHistoryErr))

export const logout = () =>
dispatch =>
axios.post('/auth/logout')
.then(_ => {
dispatch(removeUser())
history.push('/login')
})
.catch(err => console.log(err))
export const logout = () => dispatch =>
axios
.post('/auth/logout')
.then(_ => {
dispatch(removeUser())
history.push('/login')
})
.catch(err => console.log(err))

/**
* REDUCER
*/
export default function (state = defaultUser, action) {
export default function(state = defaultUser, action) {
switch (action.type) {
case GET_USER:
return action.user
Expand Down
Loading

0 comments on commit 5813f45

Please sign in to comment.