Skip to content

Commit c7a12e0

Browse files
Mahoney0101Mahoney0101
committedMar 1, 2021
Added navbar, form few other things
1 parent bfd4211 commit c7a12e0

28 files changed

+26222
-2046
lines changed
 

‎package-lock.json

+175-1,721
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+10-7
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,27 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"bootstrap": "4.5.3",
7-
"chart.js": "2.9.4",
8-
"node-sass": "4.14.1",
9-
"perfect-scrollbar": "1.5.0",
10-
"prop-types": "15.7.2",
11-
"react-notification-alert": "0.0.13",
12-
"node-sass-package-importer": "5.3.2",
136
"@aws-amplify/ui-react": "^0.2.37",
147
"@testing-library/jest-dom": "^5.11.9",
158
"@testing-library/react": "^11.2.5",
169
"@testing-library/user-event": "^12.6.3",
1710
"aws-amplify": "^3.3.17",
1811
"aws-sdk": "^2.851.0",
12+
"bootstrap": "^4.5.3",
13+
"chart.js": "2.9.4",
1914
"classnames": "^2.2.6",
2015
"cypress": "^6.4.0",
16+
"jquery": "^3.5.1",
17+
"node-sass": "4.14.1",
18+
"node-sass-package-importer": "5.3.2",
19+
"perfect-scrollbar": "1.5.0",
20+
"popper.js": "^1.16.1",
21+
"prop-types": "15.7.2",
2122
"react": "^17.0.1",
2223
"react-chartjs-2": "^2.11.1",
2324
"react-dom": "^17.0.1",
25+
"react-notification-alert": "0.0.13",
26+
"react-router-dom": "^5.2.0",
2427
"react-scripts": "4.0.2",
2528
"reactstrap": "^8.9.0",
2629
"recharts": "^2.0.8",

‎src/App.js

+18-313
Original file line numberDiff line numberDiff line change
@@ -1,320 +1,25 @@
1-
import React, { useState, useEffect } from 'react';
1+
import React from 'react';
2+
import { Route } from 'react-router';
3+
import { Layout } from './Layout';
24
import './App.scss';
3-
import { Auth } from "@aws-amplify/auth";
4-
import { API, graphqlOperation, Storage } from 'aws-amplify';import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
5-
import { listNotes , getHrv, listHrVs, listUserStatss} from './graphql/queries';
6-
import { createNote as createNoteMutation, deleteNote as deleteNoteMutation } from './graphql/mutations';
7-
import {
8-
LineChart,
9-
XAxis,
10-
YAxis,
11-
Tooltip,
12-
Line
13-
} from "recharts";
14-
import jsonData from './HRVdata.json';
15-
import { onCreateHrv } from './graphql/subscriptions';
16-
//import jsonDataH from './HRD.json';
17-
18-
19-
20-
const json = JSON.parse(JSON.stringify(jsonData));
21-
//const jsonH = JSON.parse(JSON.stringify(jsonDataH));
22-
const initialFormState = { name: '', description: '' }
5+
import './bootstrap-4.3.1-dist/css/bootstrap.css';
6+
import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
7+
import UserForm from './Form';
8+
import Dashboard from './Dashboard';
239

2410
function App() {
25-
const [notes, setNotes] = useState([]);
26-
const [formData, setFormData] = useState(initialFormState);
27-
const [user, setUser] = useState("");
28-
const [HRVValue, setHRVValue] = useState("");
29-
const [userDetails, setUserDetails] = useState(JSON.parse(`{"weight":"","age":"","height":""}`));
30-
const [BMI, setBMI] = useState("");
31-
32-
useEffect(async() => {
33-
await fetchNotes();
34-
await listHRVs()
35-
await getUsername();
36-
await subscribeToHrv();
37-
}, []);
38-
39-
40-
async function getUsername(){
41-
await Auth.currentAuthenticatedUser()
42-
.then(user => {
43-
setUser(user.username);
44-
listUserDetails(user.username);
45-
});
46-
47-
}
48-
49-
function getBMI(weight, height){
50-
let BMI = (weight/(height*height))*10000;
51-
setBMI(Math.round(BMI));
52-
}
53-
54-
async function fetchNotes() {
55-
const apiData = await API.graphql({ query: listNotes });
56-
const notesFromAPI = apiData.data.listNotes.items;
57-
await Promise.all(notesFromAPI.map(async note => {
58-
if (note.image) {
59-
const image = await Storage.get(note.image);
60-
note.image = image;
61-
}
62-
return note;
63-
}))
64-
setNotes(apiData.data.listNotes.items);
65-
}
66-
67-
async function getHrvValue(hrvId) {
68-
const apiData = await API.graphql({ query: getHrv,variables: {id: hrvId} });
69-
const HrvFromAPI = apiData.data.getHRV.value;
70-
setHRVValue(HrvFromAPI);
71-
}
72-
73-
async function listUserDetails(username) {
74-
if(user == null){return;}
75-
let filter = {
76-
username: {eq:username}
77-
};
78-
let apiData = await API.graphql(graphqlOperation(listUserStatss, { filter:filter}));
79-
apiData = apiData.data.listUserStatss.items[0];
80-
setUserDetails(apiData);
81-
getBMI(apiData.weight, apiData.height)
82-
}
83-
84-
async function listHRVs() {
85-
const apiData = await API.graphql({ query: listHrVs });
86-
const HRVFromAPI = apiData.data.listHRVs.items;
87-
let datetime = "0";
88-
let idd =0;
89-
await Promise.all(HRVFromAPI.map(async hrv => {
90-
if(hrv.createdAt>datetime)
91-
{
92-
datetime = hrv.createdAt;
93-
idd = hrv.id;
94-
}
95-
}))
96-
getHrvValue(idd)
97-
}
98-
99-
async function subscribeToHrv() {
100-
await API.graphql(graphqlOperation(onCreateHrv))
101-
.subscribe({
102-
next: event => {
103-
if (event){
104-
getHrvValue(event.value.data.onCreateHRV.id);
105-
}
106-
}
107-
});
108-
109-
}
110-
111-
async function createNote() {
112-
if (!formData.name || !formData.description) return;
113-
await API.graphql({ query: createNoteMutation, variables: { input: formData } });
114-
if (formData.image) {
115-
const image = await Storage.get(formData.image);
116-
formData.image = image;
117-
}
118-
setNotes([ ...notes, formData ]);
119-
setFormData(initialFormState);
120-
}
121-
122-
async function deleteNote({ id }) {
123-
const newNotesArray = notes.filter(note => note.id !== id);
124-
setNotes(newNotesArray);
125-
await API.graphql({ query: deleteNoteMutation, variables: { input: { id } }});
126-
}
127-
128-
async function onChange(e) {
129-
if (!e.target.files[0]) return
130-
const file = e.target.files[0];
131-
setFormData({ ...formData, image: file.name });
132-
await Storage.put(file.name, file);
133-
fetchNotes();
134-
}
135-
136-
return (
137-
<div className="App">
138-
<div className="container">
139-
<div className="summary-column">
140-
<div className="profile-img" id="profileImage"><img src="https://placeimg.com/400/400/face" />
141-
<div className="name">James <br /> Mahoney</div>
142-
</div>
143-
<div className="statistics">
144-
<h2>summary</h2>
145-
<div className="age"><span className="title title-age">{userDetails.age}</span></div>
146-
<div className="weight"><span className="title title-weight">{userDetails.weight}</span></div>
147-
<div className="float-none" />
148-
<div className="height">
149-
<div className="icon" />
150-
<div className="data"><span>{userDetails.height}cm</span></div>
151-
</div>
152-
<div className="bmi"><span className="title title-bmi">{BMI}</span></div>
153-
<div className="fat"><span className="title title-fat">11<span className="percentage">%</span></span></div>
154-
<div className="float-none" />
155-
<h2 className="allergies">allergies</h2>
156-
<div className="row">peanuts<div className="severity">
157-
<div className="fill" style={{width: '45%', height: 'inherit'}} />
158-
</div>
159-
</div>
160-
<div className="row">penicilin<div className="severity">
161-
<div className="fill" style={{width: '80%', height: 'inherit'}} />
162-
</div>
163-
</div>
164-
</div>
165-
</div>
166-
<div className="content-column">
167-
<div className="header-container" id="headerContainer">
168-
<div className="nav">
169-
<div className="content">
170-
<p> hi <span className="name">{user}</span>, it seems you are in</p><span className="shape score">good</span><span className="shape"> shape</span>
171-
</div>
172-
</div>
173-
<div className="select-boxes">
174-
<div className="content">
175-
<div className="select-wrapper"><select>
176-
<option>Bl. Pressure</option>
177-
</select></div>
178-
<div className="select-wrapper"><select>
179-
<option>Today</option>
180-
</select></div>
181-
</div>
182-
</div>
183-
<div className="float-none" />
184-
<div className="graph">
185-
<LineChart
186-
width={730}
187-
height={250}
188-
data={json}
189-
margin={{ top: 2, right: 30, left: 60, bottom: 5 }}
190-
>
191-
<XAxis />
192-
<YAxis />
193-
<Tooltip/>
194-
<Line name="Recent Pulse Wave" dot={false} type="monotone" dataKey="Samples" stroke="#8884d8" />
195-
</LineChart></div>
196-
</div>
197-
<div className="split-container">
198-
<div className="split">
199-
<h3>Temperature</h3>
200-
<div className="temperature">36.7</div>
201-
<div className="split-graph"><canvas id="temperatureGraph" /></div>
202-
</div>
203-
<div className="split">
204-
<h3>HRV</h3>
205-
<div className="calories">{HRVValue}</div>
206-
<div className="split-graph"><canvas id="calorieGraph" /></div>
207-
</div>
208-
<div className="split">
209-
<h3>Resting Heart rate</h3>
210-
<div className="heart-rate">87</div>
211-
<div className="split-graph"><canvas id="heartRateGraph" /></div>
212-
</div>
213-
</div>
214-
<div className="sleep">
215-
<div className="totals">
216-
<div className="collective"><span className="hours">8</span><span className="minutes">25</span>
217-
<p>Total sleep time</p>
218-
</div>
219-
<div className="split first">6h 12m<p>Deep</p>
220-
</div>
221-
<div className="split">2h 13m<p>Light</p>
222-
</div>
223-
</div>
224-
<div className="sleep-graph">
225-
<div className="sleep-graph-container">
226-
<h2> Sleep Analytics</h2>
227-
<div className="sleep-select-wrapper"><select>
228-
<option value="today">Today</option>
229-
</select></div>
230-
<div className="chart-container"><canvas id="sleepChart" /></div>
231-
</div>
232-
</div>
233-
</div>
234-
<div className="float-none" />
235-
<div className="split-container">
236-
<div className="split bottom">
237-
<h2>Appointments</h2>
238-
<div className="appointments">
239-
<div className="calendar-container">
240-
<div className="calendar">25<span className="date">th</span><span className="month">Jul</span></div>
241-
<div className="content">
242-
<table className="appointment-table">
243-
<tbody><tr>
244-
<td id="time">13:00</td>
245-
</tr>
246-
<tr>
247-
<td id="title">Dentist</td>
248-
</tr>
249-
<tr>
250-
<td id="name">Jozef Novotny</td>
251-
</tr>
252-
</tbody></table>
253-
</div>
254-
</div>
255-
</div>
256-
</div>
257-
<div className="split bottom">
258-
<h2>Doctors around</h2>
259-
<table className="doctor-grid">
260-
<tbody><tr>
261-
<td height={65}><img src="https://placeimg.com/65/65/people" /></td>
262-
<td><img src="https://placeimg.com/65/65/face" /></td>
263-
<td><img src="https://placeimg.com/65/65/people" /></td>
264-
</tr>
265-
<tr>
266-
<td><img src="https://placeimg.com/65/65/face" /></td>
267-
<td><img src="https://placeimg.com/65/65/people" /></td>
268-
<td id="expand">
269-
<div className="background">+8
270-
</div>
271-
</td>
272-
</tr>
273-
</tbody></table>
274-
</div>
275-
<div className="split bottom">
276-
<div id="map" />
277-
<div className="map-overlay">
278-
<h2>Steps today</h2><span className="steps">4578</span><span className="distance">1.7 km</span>
279-
</div>
280-
</div>
281-
</div>
282-
</div>
283-
</div>
284-
<input
285-
onChange={e => setFormData({ ...formData, 'name': e.target.value})}
286-
placeholder="Note name"
287-
value={formData.name}
288-
/>
289-
<input
290-
onChange={e => setFormData({ ...formData, 'description': e.target.value})}
291-
placeholder="Note description"
292-
value={formData.description}
293-
/>
294-
<input
295-
type="file"
296-
onChange={onChange}
297-
/>
298-
299-
<button onClick={createNote}>Create Note</button>
300-
301-
<div style={{marginBottom: 30}}>
302-
{
303-
notes.map(note => (
304-
<div key={note.id || note.name}>
305-
<h2>{note.name}</h2>
306-
<p>{note.description}</p>
307-
<button onClick={() => deleteNote(note)}>Delete note</button>
308-
{
309-
note.image && <img src={note.image} style={{width: 400}} />
310-
}
311-
</div>
312-
))
313-
}
314-
</div>
315-
11+
return(
12+
<>
13+
<Layout>
14+
<Route exact path='/' render={props =>
15+
<Dashboard {...props}
16+
/>} />
17+
<Route path='/form' render={props =>
18+
<UserForm {...props}/>}
19+
/>
20+
</Layout>
31621
<AmplifySignOut button-color="blue"/>
317-
</div>
22+
</>
31823
);
31924
}
32025

‎src/Dashboard.js

+326
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,326 @@
1+
import React, { useState, useEffect } from 'react';
2+
import './App.scss';
3+
import './bootstrap-4.3.1-dist/css/bootstrap.css';
4+
5+
import { Auth } from "@aws-amplify/auth";
6+
import { API, graphqlOperation, Storage } from 'aws-amplify';
7+
import { listNotes , getHrv, listHrVs, listUserStatss} from './graphql/queries';
8+
import { createNote as createNoteMutation, deleteNote as deleteNoteMutation } from './graphql/mutations';
9+
import {
10+
LineChart,
11+
XAxis,
12+
YAxis,
13+
Tooltip,
14+
Line
15+
} from "recharts";
16+
import jsonData from './HRVdata.json';
17+
import { onCreateHrv } from './graphql/subscriptions';
18+
19+
20+
//import jsonDataH from './HRD.json';
21+
22+
23+
24+
const json = JSON.parse(JSON.stringify(jsonData));
25+
//const jsonH = JSON.parse(JSON.stringify(jsonDataH));
26+
const initialFormState = { name: '', description: '' }
27+
28+
function Dashboard() {
29+
const [notes, setNotes] = useState([]);
30+
const [formData, setFormData] = useState(initialFormState);
31+
const [user, setUser] = useState("");
32+
const [HRVValue, setHRVValue] = useState("");
33+
const [userDetails, setUserDetails] = useState(JSON.parse(`{"weight":"","age":"","height":""}`));
34+
const [BMI, setBMI] = useState("");
35+
36+
useEffect(async() => {
37+
await fetchNotes();
38+
await listHRVs()
39+
await getUsername();
40+
await subscribeToHrv();
41+
}, []);
42+
43+
44+
async function getUsername(){
45+
await Auth.currentAuthenticatedUser()
46+
.then(user => {
47+
setUser(user.username);
48+
listUserDetails(user.username);
49+
});
50+
51+
}
52+
53+
function getBMI(weight, height){
54+
let BMI = (weight/(height*height))*10000;
55+
setBMI(Math.round(BMI));
56+
}
57+
58+
async function fetchNotes() {
59+
const apiData = await API.graphql({ query: listNotes });
60+
const notesFromAPI = apiData.data.listNotes.items;
61+
await Promise.all(notesFromAPI.map(async note => {
62+
if (note.image) {
63+
const image = await Storage.get(note.image);
64+
note.image = image;
65+
}
66+
return note;
67+
}))
68+
setNotes(apiData.data.listNotes.items);
69+
}
70+
71+
async function getHrvValue(hrvId) {
72+
const apiData = await API.graphql({ query: getHrv,variables: {id: hrvId} });
73+
const HrvFromAPI = apiData.data.getHRV.value;
74+
setHRVValue(HrvFromAPI);
75+
}
76+
77+
async function listUserDetails(username) {
78+
if(user == null){return;}
79+
let filter = {
80+
username: {eq:username}
81+
};
82+
let apiData = await API.graphql(graphqlOperation(listUserStatss, { filter:filter}));
83+
apiData = apiData.data.listUserStatss.items[0];
84+
setUserDetails(apiData);
85+
getBMI(apiData.weight, apiData.height)
86+
}
87+
88+
async function listHRVs() {
89+
const apiData = await API.graphql({ query: listHrVs });
90+
const HRVFromAPI = apiData.data.listHRVs.items;
91+
let datetime = "0";
92+
let idd =0;
93+
await Promise.all(HRVFromAPI.map(async hrv => {
94+
if(hrv.createdAt>datetime)
95+
{
96+
datetime = hrv.createdAt;
97+
idd = hrv.id;
98+
}
99+
}))
100+
getHrvValue(idd)
101+
}
102+
103+
async function subscribeToHrv() {
104+
await API.graphql(graphqlOperation(onCreateHrv))
105+
.subscribe({
106+
next: event => {
107+
if (event){
108+
getHrvValue(event.value.data.onCreateHRV.id);
109+
}
110+
}
111+
});
112+
113+
}
114+
115+
async function createNote() {
116+
if (!formData.name || !formData.description) return;
117+
await API.graphql({ query: createNoteMutation, variables: { input: formData } });
118+
if (formData.image) {
119+
const image = await Storage.get(formData.image);
120+
formData.image = image;
121+
}
122+
setNotes([ ...notes, formData ]);
123+
setFormData(initialFormState);
124+
}
125+
126+
async function deleteNote({ id }) {
127+
const newNotesArray = notes.filter(note => note.id !== id);
128+
setNotes(newNotesArray);
129+
await API.graphql({ query: deleteNoteMutation, variables: { input: { id } }});
130+
}
131+
132+
async function onChange(e) {
133+
if (!e.target.files[0]) return
134+
const file = e.target.files[0];
135+
setFormData({ ...formData, image: file.name });
136+
await Storage.put(file.name, file);
137+
fetchNotes();
138+
}
139+
140+
return (
141+
<div className="App">
142+
<div className="container">
143+
144+
<div className="summary-column">
145+
<div className="profile-img" id="profileImage"><img src="https://placeimg.com/400/400/face" />
146+
<div className="name">James <br /> Mahoney</div>
147+
</div>
148+
<div className="statistics">
149+
<h2>summary</h2>
150+
<div className="age"><span className="title title-age">{userDetails.age}</span></div>
151+
<div className="weight"><span className="title title-weight">{userDetails.weight}</span></div>
152+
<div className="float-none" />
153+
<div className="height">
154+
<div className="icon" />
155+
<div className="data"><span>{userDetails.height}cm</span></div>
156+
</div>
157+
<div className="bmi"><span className="title title-bmi">{BMI}</span></div>
158+
<div className="fat"><span className="title title-fat">11<span className="percentage">%</span></span></div>
159+
<div className="float-none" />
160+
<h2 className="allergies">allergies</h2>
161+
<div className="row">peanuts<div className="severity">
162+
<div className="fill" style={{width: '45%', height: 'inherit'}} />
163+
</div>
164+
</div>
165+
<div className="row">penicilin<div className="severity">
166+
<div className="fill" style={{width: '80%', height: 'inherit'}} />
167+
</div>
168+
</div>
169+
</div>
170+
</div>
171+
<div className="content-column">
172+
<div className="header-container" id="headerContainer">
173+
<div className="nav">
174+
<div className="content">
175+
<p> hi <span className="name">{user}</span>, it seems you are in</p><span className="shape score">good</span><span className="shape"> shape</span>
176+
</div>
177+
</div>
178+
<div className="select-boxes">
179+
<div className="content">
180+
<div className="select-wrapper"><select>
181+
<option>Bl. Pressure</option>
182+
</select></div>
183+
<div className="select-wrapper"><select>
184+
<option>Today</option>
185+
</select></div>
186+
</div>
187+
</div>
188+
<div className="float-none" />
189+
<div className="graph">
190+
<LineChart
191+
width={730}
192+
height={250}
193+
data={json}
194+
margin={{ top: 2, right: 30, left: 60, bottom: 5 }}
195+
>
196+
<XAxis />
197+
<YAxis />
198+
<Tooltip/>
199+
<Line name="Recent Pulse Wave" dot={false} type="monotone" dataKey="Samples" stroke="#8884d8" />
200+
</LineChart></div>
201+
</div>
202+
<div className="split-container">
203+
<div className="split">
204+
<h3>Temperature</h3>
205+
<div className="temperature">36.7</div>
206+
<div className="split-graph"><canvas id="temperatureGraph" /></div>
207+
</div>
208+
<div className="split">
209+
<h3>HRV</h3>
210+
<div className="calories">{HRVValue}</div>
211+
<div className="split-graph"><canvas id="calorieGraph" /></div>
212+
</div>
213+
<div className="split">
214+
<h3>Resting Heart rate</h3>
215+
<div className="heart-rate">87</div>
216+
<div className="split-graph"><canvas id="heartRateGraph" /></div>
217+
</div>
218+
</div>
219+
<div className="sleep">
220+
<div className="totals">
221+
<div className="collective"><span className="hours">8</span><span className="minutes">25</span>
222+
<p>Total sleep time</p>
223+
</div>
224+
<div className="split first">6h 12m<p>Deep</p>
225+
</div>
226+
<div className="split">2h 13m<p>Light</p>
227+
</div>
228+
</div>
229+
<div className="sleep-graph">
230+
<div className="sleep-graph-container">
231+
<h2> Sleep Analytics</h2>
232+
<div className="sleep-select-wrapper"><select>
233+
<option value="today">Today</option>
234+
</select></div>
235+
<div className="chart-container"><canvas id="sleepChart" /></div>
236+
</div>
237+
</div>
238+
</div>
239+
<div className="float-none" />
240+
<div className="split-container">
241+
<div className="split bottom">
242+
<h2>Appointments</h2>
243+
<div className="appointments">
244+
<div className="calendar-container">
245+
<div className="calendar">25<span className="date">th</span><span className="month">Jul</span></div>
246+
<div className="content">
247+
<table className="appointment-table">
248+
<tbody><tr>
249+
<td id="time">13:00</td>
250+
</tr>
251+
<tr>
252+
<td id="title">Dentist</td>
253+
</tr>
254+
<tr>
255+
<td id="name">Jozef Novotny</td>
256+
</tr>
257+
</tbody></table>
258+
</div>
259+
</div>
260+
</div>
261+
</div>
262+
<div className="split bottom">
263+
<h2>Doctors around</h2>
264+
<table className="doctor-grid">
265+
<tbody><tr>
266+
<td height={65}><img src="https://placeimg.com/65/65/people" /></td>
267+
<td><img src="https://placeimg.com/65/65/face" /></td>
268+
<td><img src="https://placeimg.com/65/65/people" /></td>
269+
</tr>
270+
<tr>
271+
<td><img src="https://placeimg.com/65/65/face" /></td>
272+
<td><img src="https://placeimg.com/65/65/people" /></td>
273+
<td id="expand">
274+
<div className="background">+8
275+
</div>
276+
</td>
277+
</tr>
278+
</tbody></table>
279+
</div>
280+
<div className="split bottom">
281+
<div id="map" />
282+
<div className="map-overlay">
283+
<h2>Steps today</h2><span className="steps">4578</span><span className="distance">1.7 km</span>
284+
</div>
285+
</div>
286+
</div>
287+
</div>
288+
</div>
289+
<input
290+
onChange={e => setFormData({ ...formData, 'name': e.target.value})}
291+
placeholder="Note name"
292+
value={formData.name}
293+
/>
294+
<input
295+
onChange={e => setFormData({ ...formData, 'description': e.target.value})}
296+
placeholder="Note description"
297+
value={formData.description}
298+
/>
299+
<input
300+
type="file"
301+
onChange={onChange}
302+
/>
303+
304+
<button onClick={createNote}>Create Note</button>
305+
306+
<div style={{marginBottom: 30}}>
307+
{
308+
notes.map(note => (
309+
<div key={note.id || note.name}>
310+
<h2>{note.name}</h2>
311+
<p>{note.description}</p>
312+
<button onClick={() => deleteNote(note)}>Delete note</button>
313+
{
314+
note.image && <img src={note.image} style={{width: 400}} />
315+
}
316+
</div>
317+
))
318+
}
319+
</div>
320+
321+
{/* <AmplifySignOut button-color="blue"/> */}
322+
</div>
323+
);
324+
}
325+
326+
export default Dashboard;

‎src/Form.js

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from 'react';
2+
import { useState } from 'react';
3+
import './bootstrap-4.3.1-dist/css/bootstrap.css';
4+
5+
function UserForm() {
6+
const [choreDesc, setChoreDesc] = useState();
7+
const [name, setName] = useState();
8+
const [date, setDate] = useState();
9+
const handleSubmit= (e) => {
10+
e.preventDefault();
11+
}
12+
13+
return (
14+
<form onSubmit={e => { handleSubmit(e) }}>
15+
<label>Chore description:</label>
16+
<br />
17+
<input
18+
name='choreDesc'
19+
type='text'
20+
value={choreDesc}
21+
onChange={e => setChoreDesc(e.target.value)}
22+
/>
23+
<br/>
24+
<label>Name:</label>
25+
<br />
26+
<input
27+
name='name'
28+
type='text'
29+
value={name}
30+
onChange={e => setName(e.target.value)}
31+
/>
32+
<br />
33+
<label>Date:</label>
34+
<br />
35+
<input
36+
name='date'
37+
type='date'
38+
value={date}
39+
onChange={e => setDate(e.target.value)}
40+
/>
41+
<br/>
42+
<input
43+
type='submit'
44+
value='Add Log'
45+
/>
46+
</form>
47+
)
48+
}
49+
50+
export default UserForm;

‎src/Layout.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React, { Component } from 'react';
2+
import { Container } from 'reactstrap';
3+
import { NavMenu } from './NavMenu';
4+
import PropTypes from 'prop-types';
5+
6+
export class Layout extends Component {
7+
static displayName = Layout.name;
8+
9+
render () {
10+
return (
11+
<div>
12+
<NavMenu />
13+
<Container>
14+
{this.props.children}
15+
</Container>
16+
</div>
17+
);
18+
}
19+
}
20+
Layout.propTypes = {
21+
children: PropTypes.node.isRequired
22+
};

‎src/NavMenu.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React, { Component } from 'react';
2+
import { Container, Navbar, NavbarBrand, NavItem, NavLink } from 'reactstrap';
3+
import { Link } from 'react-router-dom';
4+
import 'bootstrap';
5+
6+
export class NavMenu extends Component {
7+
constructor (props) {
8+
super(props);
9+
}
10+
11+
render () {
12+
return (
13+
<div>
14+
<Navbar id="topNavBar" className="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow navColour" light>
15+
<Container>
16+
<NavbarBrand>V.0 FYP</NavbarBrand>
17+
<ul className="navbar-nav flex-grow">
18+
<NavItem className="displayNone">
19+
<NavLink tag={Link} className="text-dark" to="/">Dashboard</NavLink>
20+
</NavItem>
21+
<NavItem>
22+
<NavLink tag={Link} className="text-dark" to="/form">Edit Account Details</NavLink>
23+
</NavItem>
24+
</ul>
25+
</Container>
26+
</Navbar>
27+
</div>
28+
);
29+
}
30+
}

‎src/bootstrap-4.3.1-dist/css/bootstrap-grid.css

+3,719
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/bootstrap-4.3.1-dist/css/bootstrap-grid.css.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/bootstrap-4.3.1-dist/css/bootstrap-grid.min.css

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/bootstrap-4.3.1-dist/css/bootstrap-grid.min.css.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/bootstrap-4.3.1-dist/css/bootstrap-reboot.css

+331
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/bootstrap-4.3.1-dist/css/bootstrap-reboot.css.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/bootstrap-4.3.1-dist/css/bootstrap-reboot.min.css

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/bootstrap-4.3.1-dist/css/bootstrap-reboot.min.css.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/bootstrap-4.3.1-dist/css/bootstrap.css

+10,038
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/bootstrap-4.3.1-dist/css/bootstrap.css.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/bootstrap-4.3.1-dist/css/bootstrap.min.css

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/bootstrap-4.3.1-dist/css/bootstrap.min.css.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/bootstrap-4.3.1-dist/js/bootstrap.bundle.js

+7,013
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/bootstrap-4.3.1-dist/js/bootstrap.bundle.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/bootstrap-4.3.1-dist/js/bootstrap.bundle.min.js

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/bootstrap-4.3.1-dist/js/bootstrap.bundle.min.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/bootstrap-4.3.1-dist/js/bootstrap.js

+4,435
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/bootstrap-4.3.1-dist/js/bootstrap.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/bootstrap-4.3.1-dist/js/bootstrap.min.js

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/bootstrap-4.3.1-dist/js/bootstrap.min.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/index.js

+9-5
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,21 @@ import React from 'react';
22
import ReactDOM from 'react-dom';
33
import './index.css';
44
import App from './App';
5+
import './bootstrap-4.3.1-dist/css/bootstrap.css';
6+
//import UserForm from './Form.js';
57
import reportWebVitals from './reportWebVitals';
68
import Amplify from 'aws-amplify';
79
import config from './aws-exports';
810
Amplify.configure(config);
11+
import { BrowserRouter } from 'react-router-dom';
12+
const rootElement = document.getElementById('root');
913

1014
ReactDOM.render(
11-
<React.StrictMode>
12-
<App />
13-
</React.StrictMode>,
14-
document.getElementById('root')
15-
);
15+
<BrowserRouter basename={'/'}>
16+
<App />
17+
</BrowserRouter>
18+
19+
, rootElement);
1620

1721
// If you want to start measuring performance in your app, pass a function
1822
// to log results (for example: reportWebVitals(console.log))

0 commit comments

Comments
 (0)
Please sign in to comment.