-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fred/Generators and Paperwork Refactor
Added generator for React components, refactored Paperwork components
- Loading branch information
Showing
52 changed files
with
6,027 additions
and
973 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,5 @@ | ||
| { | ||
| "processors": ["stylelint-processor-styled-components"], | ||
| "extends": [ | ||
| "stylelint-config-recommended", | ||
| "stylelint-config-styled-components" | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,46 @@ | ||
| # README | ||
|
|
||
| This README would normally document whatever steps are necessary to get the | ||
| application up and running. | ||
|
|
||
| Things you may want to cover: | ||
|
|
||
| * Ruby version | ||
|
|
||
| * System dependencies | ||
|
|
||
| * Configuration | ||
|
|
||
| * Database creation | ||
|
|
||
| * Database initialization | ||
|
|
||
| * How to run the test suite | ||
|
|
||
| * Services (job queues, cache servers, search engines, etc.) | ||
|
|
||
| * Deployment instructions | ||
|
|
||
| * ... | ||
| # Unloop | ||
|
|
||
| ## Technologies | ||
| * Ruby 2.5.6 | ||
| * Rails 6.0.0 | ||
| * Postgresql | ||
|
|
||
| ## Installation | ||
| ### Local Development | ||
| 1. Clone the repo | ||
| ```bash | ||
| git clone https://github.com/calblueprint/unloop.git | ||
| cd unloop | ||
| ``` | ||
| 2. Install dependencies | ||
| ```bash | ||
| bundle install | ||
| yarn install | ||
| ``` | ||
| 3. Setup database | ||
| ```bash | ||
| rails db:setup | ||
| # This runs db:create, db:schema:load, and db:seed | ||
| ``` | ||
|
|
||
| ## Create React Components | ||
| ### Generate Components | ||
| Functional components are components that are made of a function. You need to use hooks in order to use state or lifecycle methods. Most frequently used for components that are stateless but not always. Class components are components that use a class structure. This has been the standard format for React components. | ||
| ```bash | ||
| yarn generate | ||
| ``` | ||
| You can also attach `functional` or `class` after generate to quickly specify which component to generate. | ||
| 1. Do you want to wrap your component in React.memo? | ||
| * This adds memoization to the component. A rule of thumb to think about whether or not your component needs `memo` is if it | ||
| 1. Renders the same thing given the same props | ||
| 2. Renders often | ||
| 3. Re-renders with the same props | ||
| 4. Medium to big size | ||
| 2. Do you want headers? (Only for containers) | ||
| * This changes the title tag and the meta tag for this page. | ||
| 3. Do you want styles? | ||
| * This uses `withStyles` higher order component to add styles from `styles.js` to override Material UI default styles. Use `classes` in `className` to assign properties. | ||
| 4. Do you want to load resources asynchronously? | ||
| * This adds React lazy and Suspense before importing. In order to use this, you need to import the Loadable file rather than the index file. This only works with importing on an existing React component, and doesn't work in Rails. | ||
| ### After Generating | ||
| If your component is not a root for a page or shared component, move your component to the folder that matches the page or shared component that it will live under. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| // Action Cable provides the framework to deal with WebSockets in Rails. | ||
| // You can generate new channels where WebSocket features live using the `rails generate channel` command. | ||
|
|
||
| import { createConsumer } from "@rails/actioncable" | ||
| import { createConsumer } from '@rails/actioncable'; | ||
|
|
||
| export default createConsumer() | ||
| export default createConsumer(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| // Load all the channels within this directory and all subdirectories. | ||
| // Channel files must be named *_channel.js. | ||
|
|
||
| const channels = require.context('.', true, /_channel\.js$/) | ||
| channels.keys().forEach(channels) | ||
| const channels = require.context('.', true, /_channel\.js$/); | ||
| channels.keys().forEach(channels); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,80 +1,90 @@ | ||
| import React from "react"; | ||
| import { makeStyles } from '@material-ui/core/styles'; | ||
| import CssBaseline from '@material-ui/core/CssBaseline'; | ||
| import Typography from '@material-ui/core/Typography'; | ||
| import Container from '@material-ui/core/Container'; | ||
| import Grid from '@material-ui/core/Grid'; | ||
| import Paper from '@material-ui/core/Paper'; | ||
| import NewCaseNote from 'components/NewCaseNote'; | ||
| import CaseNoteCard from 'components/CaseNoteCard'; | ||
| import React from 'react'; | ||
| import { makeStyles } from '@material-ui/core/styles'; | ||
| import CssBaseline from '@material-ui/core/CssBaseline'; | ||
| import Typography from '@material-ui/core/Typography'; | ||
| import Container from '@material-ui/core/Container'; | ||
| import Grid from '@material-ui/core/Grid'; | ||
| import Paper from '@material-ui/core/Paper'; | ||
| import NewCaseNote from 'components/NewCaseNote'; | ||
| import CaseNoteCard from 'components/CaseNoteCard'; | ||
|
|
||
| const styles = { | ||
| headerStyle: { | ||
| marginLeft: '20px', | ||
| marginTop: '0px', | ||
| fontSize: '24px', | ||
| } | ||
| } | ||
| headerStyle: { | ||
| marginLeft: '20px', | ||
| marginTop: '0px', | ||
| fontSize: '24px', | ||
| }, | ||
| }; | ||
|
|
||
| const classes = makeStyles(theme => ({ | ||
| root: { | ||
| flexGrow: 1, | ||
| }, | ||
| paper: { | ||
| padding: theme.spacing(2), | ||
| textAlign: 'center', | ||
| color: theme.palette.text.secondary, | ||
| }, | ||
| const classes = makeStyles(theme => ({ | ||
| root: { | ||
| flexGrow: 1, | ||
| }, | ||
| paper: { | ||
| padding: theme.spacing(2), | ||
| textAlign: 'center', | ||
| color: theme.palette.text.secondary, | ||
| }, | ||
| })); | ||
|
|
||
| class CaseNoteContainer extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| case_notes: this.props.case_notes, | ||
| participant: this.props.participant | ||
| }; | ||
| } | ||
| class CaseNoteContainer extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| case_notes: this.props.caseNotes, | ||
| participant: this.props.participant, | ||
| }; | ||
| } | ||
|
|
||
| render() { | ||
| let participant_id = 1; | ||
| let case_note_cards = this.state.case_notes.map((case_note, index) => { | ||
| return ( | ||
| <div key={index}> | ||
| <CaseNoteCard | ||
| title={case_note.title} | ||
| description={case_note.description} | ||
| internal={case_note.internal} | ||
| /> | ||
| </div> | ||
| ); | ||
| }); | ||
|
|
||
| render () { | ||
| let participant_id = 1; | ||
| let case_note_cards = this.state.case_notes.map((case_note, index) => { | ||
| return <div key={index}> | ||
| <CaseNoteCard | ||
| title={case_note.title} | ||
| description={case_note.description} | ||
| internal = {case_note.internal} | ||
| /> | ||
| return ( | ||
| <> | ||
| <CssBaseline /> | ||
| <Container maxWidth="sm"> | ||
| <Grid> | ||
| <Typography | ||
| component="div" | ||
| style={{ height: '100vh', maxHeight: '700px' }} | ||
| > | ||
| <div className={classes.root} style={{ paddingTop: '20px' }}> | ||
| <Grid container spacing={3}> | ||
| <Grid item xs={6}> | ||
| <h2 style={styles.headerStyle}>Casenotes</h2> | ||
| </Grid> | ||
| <Grid item xs={5}> | ||
| <NewCaseNote participantId={this.state.participant.id} /> | ||
| </Grid> | ||
| </Grid> | ||
| <div | ||
| style={{ | ||
| maxHeight: '80vh', | ||
| overflowX: 'hidden', | ||
| overflowY: 'auto', | ||
| height: '100vh', | ||
| }} | ||
| > | ||
| {case_note_cards} | ||
| </div> | ||
| } | ||
| ); | ||
|
|
||
| return ( | ||
| <React.Fragment> | ||
| <CssBaseline /> | ||
| <Container maxWidth="sm"> | ||
| <Grid> | ||
| <Typography component="div" style={{ backgroundColor: '#F4F4F4', height: '100vh', maxHeight: '700px'}}> | ||
| <div className={classes.root} style={{paddingTop: '20px'}}> | ||
| <Grid container spacing={3}> | ||
| <Grid item xs={6}> | ||
| <h2 style={styles.headerStyle}>Casenotes</h2> | ||
| </Grid> | ||
| <Grid item xs={5}> | ||
| <NewCaseNote participant_id={this.state.participant.id}/> | ||
| </Grid> | ||
| </Grid> | ||
| <div style={{ maxHeight: '80vh', overflowX: 'hidden', overflowY: 'auto', height: '100vh'}}> | ||
| {case_note_cards} | ||
| </div> | ||
| </div> | ||
| </Typography> | ||
| </Grid> | ||
| </Container> | ||
| </React.Fragment> | ||
| ); | ||
| } | ||
| </div> | ||
| </Typography> | ||
| </Grid> | ||
| </Container> | ||
| </> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default CaseNoteContainer; | ||
|
|
||
| export default CaseNoteContainer; |
Oops, something went wrong.