When implementing flows

1. Use the index.js file

// src/jobs/edit/index.js
const JobEditFlow = props => {
	const { location: { state } } = props // from <Route>

	return (
		state.inputDetails ?
		<EditDetails {...props} /> :
		state.inviteWorkers ?
		<InviteWorkers {...props} /> :
		null
	)
})

JobEditFlow.displayName = "JobEditFlow"

export default JobEditFlow

When implementing pages for a resource

1. Add a page here: src/pages/{resource_name}/{view_name}.js
2. Write all components used in the same file. Do not split it up. All the context for your component should reside in that one file. You may import libraries, and you may also use other APIs as exported by any module in the src/ directory.

When adding components to a page

1. If the component is only used in that page, place it in the same file: src/pages/{resource_name}/{view_name}.js as the root page.
   1. If that file is getting too big (use your best judgment), place it in: src/pages/{resource_name}/{view_name}/{component_name}.js
2. Otherwise, and the component already exists, import it from that module. If it is not exported, consider refactoring it to src/pages/{resource_name}/components/{component_name}.js

Once you've written your code

Review the function component you've written. The ideal function component has this form:

const IdealComponent = props => {
	const { values, you, need, user } = props
	const [state, setState] = useState(0)
	const { data, isLoading, isError } = useAsync({ promiseFn: loadUser(user._id) })
	const { items, loadNextPage, setOptions } = useCustomStateHook()

	return (
		// JSX
	)
}

Refactor when appropriate

1. If a subsection of the JSX markup has to maintain state and can be extracted into its own component, do so at the top of the file.
2. If the subsection of JSX is purely for display, and it is used across 2 pages for the same resource, refactor into src/pages/{resource_name}/components/{component_name}.js