benjaminramey/lunchrun-amplify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bunch o changes

Browse Source
This commit is contained in:
Benjamin Ramey
2020-07-24 22:07:22 -05:00
parent 4627f5bdc5
commit b0fd4403c6
12 changed files with 879 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

787
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@@ -8,7 +8,10 @@
"@testing-library/react": "^9.5.0", "@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1", "@testing-library/user-event": "^7.2.1",
"aws-amplify": "^3.0.12", "aws-amplify": "^3.0.12",
"bootstrap": "^4.5.0",
"node-sass": "^4.14.1",
"react": "^16.13.1", "react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-scripts": "3.4.1" "react-scripts": "3.4.1"

2
public/index.html
View File

@@ -28,7 +28,7 @@
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root" class="h-100"></div>
<!-- <!--
This HTML file is a template. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. If you open it directly in the browser, you will see an empty page.

7
src/App.js
View File

@@ -3,13 +3,16 @@ import React from 'react';
import { Route } from 'react-router-dom'; import { Route } from 'react-router-dom';
import Home from './components/Home'; import Home from './components/Home';
import Run from './components/Run'; import Run from './components/Run';
import Container from 'react-bootstrap/Container';
import './App.scss';
const App = () => { const App = () => {
return ( return (
<div> <Container className="h-100">
<Route exact path="/" component={Home} /> <Route exact path="/" component={Home} />
<Route exact path="/run/:id" component={Run}/> <Route exact path="/run/:id" component={Run}/>
</div> </Container>
) )
} }

0
src/App.css → src/App.scss
View File

46
src/components/AddRunForm.js Normal file
View File

@@ -0,0 +1,46 @@
/* src/components/AddRunForm.js */
import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';
import { API, graphqlOperation } from 'aws-amplify';
import { createRun } from '../graphql/mutations';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
const initialState = { name: '' };
const AddRunForm = () => {
const [formState, setFormState] = useState(initialState);
const history = useHistory();
function setInput(key, value) {
setFormState({ ...formState, [key]: value })
}
async function addRun(e) {
e.preventDefault();
try {
if (!formState.name) return;
const run = { ...formState }
setFormState(initialState)
let response = await API.graphql(graphqlOperation(createRun, { input: run }))
history.push("/run/" + response.data.createRun.id);
}
catch (err) {
console.log('error creating run:', err)
}
}
return (
<Form inline onSubmit={addRun}>
<Form.Group controlId="runName">
<Form.Control type="text" placeholder="Name"
onChange={event => setInput('name', event.target.value)}
value={formState.name} />
</Form.Group>
<Button type="submit" className="ml-1">Run!</Button>
</Form>
)
}
export default AddRunForm;

36
src/components/Home.js
View File

@@ -1,41 +1,13 @@
/* src/components/Home.js */ /* src/components/Home.js */
import React, { useState } from 'react'; import React from 'react';
import { useHistory } from 'react-router-dom'; import AddRunForm from './AddRunForm';
import { API, graphqlOperation } from 'aws-amplify';
import { createRun } from '../graphql/mutations';
const initialState = { name: '' };
const Home = () => { const Home = () => {
const [formState, setFormState] = useState(initialState);
const history = useHistory();
function setInput(key, value) {
setFormState({ ...formState, [key]: value })
}
async function addRun() {
try {
if (!formState.name) return;
const run = { ...formState }
setFormState(initialState)
let response = await API.graphql(graphqlOperation(createRun, { input: run }))
history.push("/run/" + response.data.createRun.id);
}
catch (err) {
console.log('error creating run:', err)
}
}
return ( return (
<div> <div class="h-100 d-flex flex-column justify-content-center align-items-center">
<h2>Start a run</h2> <h2>Start a run</h2>
<input <AddRunForm />
onChange={event => setInput('name', event.target.value)}
value={formState.name}
placeholder="Name"
/>
<button onClick={addRun}>Run!</button>
</div> </div>
) )
} }

10
src/components/Run.js
View File

@@ -1,5 +1,5 @@
/* src/components/Run.js */ /* src/components/Run.js */
import React, { useState, useEffect, useCallback } from 'react'; import React, { useState, useEffect } from 'react';
import { API, graphqlOperation } from 'aws-amplify'; import { API, graphqlOperation } from 'aws-amplify';
import { getRun } from '../graphql/queries'; import { getRun } from '../graphql/queries';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
@@ -8,7 +8,7 @@ const Run = () => {
const [run, setRun] = useState({}); const [run, setRun] = useState({});
const { id } = useParams(); const { id } = useParams();
const loadRun = useCallback(async () => { async function loadRun() {
try { try {
let response = await API.graphql(graphqlOperation(getRun, { id: id })); let response = await API.graphql(graphqlOperation(getRun, { id: id }));
setRun(response.data.getRun); setRun(response.data.getRun);
@@ -16,11 +16,9 @@ const Run = () => {
catch (err) { catch (err) {
console.log('error creating todo:', err) console.log('error creating todo:', err)
} }
}, [id]); };
useEffect(() => { useEffect(() => { loadRun(); });
loadRun();
}, [loadRun]);
return ( return (
<div> <div>

0
src/index.css
View File

2
src/index.js
View File

@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './index.css'; import './index.scss';
import { BrowserRouter } from 'react-router-dom'; import { BrowserRouter } from 'react-router-dom';
import App from './App'; import App from './App';
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker';

5
src/index.scss Normal file
View File

@@ -0,0 +1,5 @@
@import "~bootstrap/scss/bootstrap";
html, body {
height: 100%;
}