Skip to content

Commit d5df579

Browse files
njonsmartingaston
njons
authored and
martingaston
committed
Cleanup (#114)
* added initial styles for cases page * style header on cases page * final styling to layout of cases' * fix spacing * change names of files and components and classes * add import RevisionCaseTitle to RevisionContainer component * fix caseTitle prop * add import Case to App.js * combine ExamName and StationName style under id= title * add font smoothing on all pages * styled the revisions page * fix add new styling * fix travis tests * change stations to peter-green * add peter-green to swipe icons * add triangle back button * add white tick button * diabled eslint in Home component * changed History component to StationsPage * renamed all History files, moved .scss and component into StationPage folder and updated all paths * change all use of stations to tiles for styling * change stations to tile in AddNewStation component * moved AddNewStations component into StationsPage folder * create CasesPage folder * move Title components into StationsPage and CasesPage folders * refactor filenames in Stations and Case folders * refactor Stations and Cases folders * move files into Revision folder * add Revision folder * added folder Navbar * removed empty or redundant files * remove header.scss file * add final folders * moved #title sass to universal file * final cleanup of index.scss * clean up background spacing issues on all pages * render same content on the pages accessible through the navbar * fix broken filepath in test * fix merge conflict: convert CasesPage component to fetch data from airtable API
1 parent bb56457 commit d5df579

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+576
-458
lines changed

‎__test__/HistoryCaseRevision.test.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import React from "react";
22
import { BrowserRouter as Router } from "react-router-dom";
3-
import HistoryCaseRevision from "../src/components/HistoryCaseRevision";
3+
import Revision from "../src/components/Pages/Revision/RevisionPage";
44
import { render, fireEvent } from "react-testing-library";
55

66
const { getByTestId } = render(
77
<Router>
8-
<HistoryCaseRevision
9-
match={{ params: { station: "chest-pain", caseid: "0" } }}
10-
/>
8+
<Revision match={{ params: { station: "chest-pain", caseid: "0" } }} />
119
</Router>
1210
);
1311

‎index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>OSCEBossKey</title>
8-
<link href="https://fonts.googleapis.com/css?family=Nova+Round|Roboto:400,900" rel="stylesheet">
8+
<link href="https://fonts.googleapis.com/css?family=Nova+Round|Roboto:400,700,900" rel="stylesheet">
99
</head>
1010

1111
<body>
1212
<div id="root"></div>
1313
<script src="index.js"></script>
1414
</body>
1515

16-
</html>
16+
</html>

‎src/assets/back-button.scss

-16
This file was deleted.

‎src/assets/colors-peter.scss

-5
This file was deleted.

‎src/assets/colors.scss

+7
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,10 @@ $green: #0cce6b;
66
$grey: #e6e6d4;
77
$red: #b93848;
88
$faded-blue: rgba(28, 129, 158, 0.2);
9+
10+
//peter's colors
11+
$peter-blue: #1c3b8b;
12+
$darkgrey: #c7c7b2;
13+
$peter-green: #009f5c;
14+
$peter-red: #e53d00;
15+
$peter-green-faded: rgba(0, 159, 92, 0.2);

‎src/assets/exam-name.scss

-7
This file was deleted.

‎src/assets/header.scss

-12
This file was deleted.

‎src/assets/history-case-revision.scss

-82
This file was deleted.

‎src/assets/icons/back.svg

+3
Loading

‎src/assets/icons/tick_white.svg

+3
Loading

‎src/assets/index.scss

+7-11
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,12 @@
22
@import "./fonts.scss";
33
@import "./colors.scss";
44

5-
//peter's colors
6-
@import "./colors-peter.scss";
7-
85
// components
96
@import "./universal-styles.scss";
10-
@import "./back-button.scss";
11-
@import "./exam-name.scss";
12-
@import "./header.scss";
13-
@import "./history-case-revision.scss";
14-
@import "./history.scss";
15-
@import "./navbar.scss";
16-
@import "./station-name.scss";
17-
@import "./tick-button.scss";
7+
@import "../components/Stations/style.scss";
8+
@import "../components/Cases/style.scss";
9+
@import "../components/Navbar/navbar.scss";
10+
@import "../components/TopBar/style.scss";
11+
12+
// pages
13+
@import "../components/Pages/Revision/style.scss";

‎src/assets/station-name.scss

-7
This file was deleted.

‎src/assets/tick-button.scss

-12
This file was deleted.

‎src/assets/universal-styles.scss

+34-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,36 @@
1+
* {
2+
-webkit-font-smoothing: antialiased;
3+
-moz-osx-font-smoothing: grayscale;
4+
}
5+
6+
body {
7+
background-color: #e6e6d4;
8+
}
9+
110
#root {
2-
background-color: $grey;
3-
margin-bottom: 48px;
4-
padding-bottom: 4px;
11+
margin-bottom: 52px;
12+
font-family: $text-font;
13+
color: black;
14+
font-size: 20px;
15+
font-weight: 400;
16+
}
17+
18+
#root a {
19+
text-decoration: none;
20+
color: black;
21+
}
22+
23+
#root .page-wrapper {
24+
display: flex;
25+
flex-direction: column;
26+
}
27+
28+
#root #title {
29+
text-transform: uppercase;
30+
font-family: $title-font;
31+
font-size: 28pt;
32+
letter-spacing: 10%;
33+
text-align: center;
34+
padding: 32px 0;
35+
// border: 1px solid yellow;
536
}

‎src/components/App.js

+11-16
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ import React from "react";
66
import { BrowserRouter as Router, Route } from "react-router-dom";
77

88
// import all page classes here
9-
import Home from "./Home";
10-
import HistoryStationCases from "./HistoryStationCases";
11-
import HistoryCaseRevision from "./HistoryCaseRevision";
12-
import History from "./History";
13-
import Examinations from "./Examinations";
14-
import Extras from "./Extras";
15-
import Statistics from "./Statistics";
16-
import NewHistoryCase from "./NewHistoryCase";
9+
import Home from "./Pages/Home";
10+
import Cases from "./Cases/CasesPage";
11+
import Revision from "./Pages/Revision/RevisionPage";
12+
import History from "./Pages/History";
13+
import Examinations from "./Pages/Examinations";
14+
import Extras from "./Pages/Extras";
15+
import Statistics from "./Pages/Statistics";
16+
import NewCase from "./Cases/NewCase";
1717

1818
// App is no longer a React component, but a function that returns a different page component, e.g. HistoryCaseRevision, depending on the route
1919
// we should probably add a 404 component to display when the user hits a route for which there is no component
@@ -25,23 +25,18 @@ const App = () => (
2525
<Route strict exact path="/examinations" component={Examinations} />
2626
<Route strict exact path="/extras" component={Extras} />
2727
<Route strict exact path="/stats" component={Statistics} />
28-
<Route
29-
strict
30-
exact
31-
path="/history/:station"
32-
component={HistoryStationCases}
33-
/>
28+
<Route strict exact path="/history/:station" component={Cases} />
3429
<Route
3530
strict
3631
exact
3732
path="/history/:station/add-case"
38-
component={NewHistoryCase}
33+
component={NewCase}
3934
/>
4035
<Route
4136
strict
4237
exact
4338
path="/history/:station/case/:caseid"
44-
component={HistoryCaseRevision}
39+
component={Revision}
4540
/>
4641
</div>
4742
</Router>

‎src/components/CaseTitle.js

-9
This file was deleted.

‎src/components/AddNewCase.js ‎src/components/Cases/AddNew.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@ import React from "react";
22
import { Link } from "react-router-dom";
33
import PropTypes from "prop-types";
44

5-
export default class AddNewCase extends React.Component {
5+
export default class AddNew extends React.Component {
66
render() {
77
const link =
88
"/history/" + this.props.station.replace(" ", "-") + "/add-case";
99
return (
10-
<Link to={link}>
11-
<div>Add Case</div>
10+
<Link to={link} id="add-case" className="banner">
11+
<div className="banner-text"> Add New</div>
1212
</Link>
1313
);
1414
}
1515
}
1616

17-
AddNewCase.propTypes = {
17+
AddNew.propTypes = {
1818
station: PropTypes.string
1919
};

‎src/components/Cases/CasesPage.js

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/* eslint-disable class-methods-use-this */
2+
3+
import React from "react";
4+
import { withRouter } from "react-router";
5+
import { Link } from "react-router-dom";
6+
import PropTypes from "prop-types";
7+
8+
import Title from "./Title";
9+
import AddNew from "./AddNew";
10+
import Navbar from "../Navbar/Navbar";
11+
12+
import airtableQuery from "../../utils/fetch";
13+
14+
class CasesPage extends React.Component {
15+
state = {
16+
station: this.props.match.params.station,
17+
cases: []
18+
};
19+
20+
componentDidMount() {
21+
airtableQuery(`/api/history/${this.state.station}`).then(res => {
22+
this.setState(() => ({
23+
cases: res.payload
24+
}));
25+
});
26+
}
27+
28+
render() {
29+
const caseBanners = this.state.cases.map((banner, index) => (
30+
<Link key={index} to={`/history/${this.state.station}/case/${banner.id}`}>
31+
<div className="banner" key={index}>
32+
<p className="banner-text">{banner.title}</p>
33+
</div>
34+
</Link>
35+
));
36+
return (
37+
<React.Fragment>
38+
<Title stationName={this.state.station} />
39+
<div id="banner-wrapper">
40+
<AddNew station={this.state.station} />
41+
{caseBanners}
42+
</div>
43+
<Navbar />
44+
</React.Fragment>
45+
);
46+
}
47+
}
48+
49+
CasesPage.propTypes = {
50+
match: PropTypes.object
51+
};
52+
53+
export default withRouter(CasesPage);

0 commit comments

Comments
 (0)