Skip to content

Commit 8fc735a

Browse files
cammoorecammoore
committed
Using Bootstrap 5.2
1 parent d339e30 commit 8fc735a

20 files changed

+788
-3409
lines changed

‎app/.babelrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"presets": [
3+
"@babel/preset-react"
4+
]
5+
}

‎app/.eslintrc

-59
This file was deleted.

‎app/.eslintrc.js

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
module.exports = {
2+
env: {
3+
browser: true,
4+
es2021: true,
5+
},
6+
extends: [
7+
'plugin:react/recommended',
8+
'airbnb',
9+
],
10+
parserOptions: {
11+
ecmaFeatures: {
12+
jsx: true,
13+
},
14+
ecmaVersion: 'latest',
15+
sourceType: 'module',
16+
},
17+
plugins: [
18+
'meteor',
19+
'react',
20+
],
21+
rules: {
22+
'arrow-parens': 'off',
23+
camelcase: 'off',
24+
'class-methods-use-this': 'off',
25+
'func-names': 'off',
26+
'import/no-absolute-path': 'off',
27+
'import/no-unresolved': 'off',
28+
'import/extensions': 'off',
29+
'import/imports-first': 'off',
30+
'import/prefer-default-export': 'off',
31+
'import/no-extraneous-dependencies': 'off',
32+
'linebreak-style': 'off',
33+
'max-len': ['error', 120],
34+
'meteor/eventmap-params': [2, { eventParamName: 'event', templateInstanceParamName: 'instance' } ],
35+
'meteor/template-names': 'off',
36+
'no-confusing-arrow': ['error', { allowParens: true}],
37+
'no-plusplus': 'off',
38+
'no-underscore-dangle': 'off',
39+
'object-curly-newline': 'off',
40+
'object-property-newline': 'off',
41+
'object-shorthand': 'off',
42+
'operator-linebreak': 'off',
43+
'padded-blocks': 'off',
44+
indent: ['error', 2],
45+
'prefer-arrow-callback': 'off',
46+
'prefer-destructuring': 'off',
47+
'prefer-promise-reject-errors': 'off',
48+
'react/function-component-definition': 'off',
49+
},
50+
};

‎app/client/main.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@
55
<title>meteor-example-form-react</title>
66
</head>
77

8-
<body>
9-
<div id="root"></div>
8+
<body class="h-100">
9+
<div id="root" class="d-flex flex-column min-vh-100"></div>
1010
</body>

‎app/client/main.js

+4
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,6 @@
1+
// Start the app.
12
import '../imports/startup/client/Startup';
3+
// Import the Bootstrap css.
4+
import 'bootstrap/dist/css/bootstrap.min.css';
5+
// Override the default bootstrap styles.
26
import './style.css';

‎app/client/style.css

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/* Change bootstrap variable values.
2+
See https://getbootstrap.com/docs/5.2/customize/css-variables/
3+
*/
4+
body {
5+
--bs-dark: #198754;
6+
--bs-dark-rgb: 25, 135, 84;
7+
--bs-body-font-size: 20px;
8+
--bs-link-color: #93400D;
9+
}
10+
11+
/* Define custom styles */
12+
.gray-background {
13+
background-color: var(--bs-gray-200);
14+
color: var(--bs-dark);
15+
padding-top: 10px;
16+
padding-bottom: 20px;
17+
}

‎app/imports/startup/client/Startup.jsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from 'react';
2-
import { render } from 'react-dom';
2+
import ReactDOM from 'react-dom/client';
33
import { Meteor } from 'meteor/meteor';
44
import App from '../../ui/layouts/App.jsx';
55

6-
// Importing the Bootstrap CSS
7-
import './css/theme.css';
8-
9-
/** Startup the application by rendering the App layout component. */
6+
// Startup the application by rendering the App layout component.
107
Meteor.startup(() => {
11-
render(<App />, document.getElementById('root')); // eslint-disable-line
8+
const root = ReactDOM.createRoot(
9+
document.getElementById('root'),
10+
);
11+
root.render(<App />);
1212
});

‎app/imports/startup/client/css/theme.css

-7
This file was deleted.

‎app/imports/startup/client/css/theme.css.map

-1
This file was deleted.

‎app/imports/startup/server/Publications.js

+2-6
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@ import { Meteor } from 'meteor/meteor';
22
import { StudentData } from '../../api/studentdata/StudentData.js';
33
import { EnrollmentData } from '../../api/enrollmentdata/EnrollmentData.js';
44

5-
Meteor.publish('StudentData', function publishStudentData() {
6-
return StudentData.find();
7-
});
5+
Meteor.publish('StudentData', () => StudentData.find());
86

9-
Meteor.publish('EnrollmentData', function publishEnrollmentData() {
10-
return EnrollmentData.find();
11-
});
7+
Meteor.publish('EnrollmentData', () => EnrollmentData.find());

‎app/imports/ui/components/Footer.jsx

+22-19
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,27 @@ import React from 'react';
22
import { Col, Container } from 'react-bootstrap';
33

44
/** The Footer appears at the bottom of every page. Rendered by the App Layout component. */
5-
class Footer extends React.Component {
6-
render() {
7-
const divStyle = { paddingTop: '15px' };
8-
return (
9-
<footer>
10-
<Container style={divStyle}>
11-
<Col className="text-center">
12-
<hr/>
13-
Department of Information and Computer Sciences <br/>
14-
University of Hawaii<br/>
15-
Honolulu, HI 96822 <br/>
16-
<a href="http://ics-software-engineering.github.io/meteor-example-form-react-bootstrap">
17-
Template Home Page</a>
18-
</Col>
19-
</Container>
20-
</footer>
21-
);
22-
}
23-
}
5+
const Footer = () => {
6+
const divStyle = { paddingTop: '15px' };
7+
return (
8+
<footer className="mt-auto bg-dark">
9+
<Container style={divStyle}>
10+
<Col className="text-center">
11+
Department of Information and Computer Sciences
12+
{' '}
13+
<br />
14+
University of Hawaii
15+
<br />
16+
Honolulu, HI 96822
17+
{' '}
18+
<br />
19+
<a href="http://ics-software-engineering.github.io/meteor-example-form-react-bootstrap">
20+
Template Home Page
21+
</a>
22+
</Col>
23+
</Container>
24+
</footer>
25+
);
26+
};
2427

2528
export default Footer;

‎app/imports/ui/components/LoadingSpinner.jsx

+10-5
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,15 @@ import Container from 'react-bootstrap/Container';
33
import Row from 'react-bootstrap/Row';
44
import Spinner from 'react-bootstrap/Spinner';
55

6-
const LoadingSpinner = () => (
7-
<Container>
8-
<Row className="justify-content-md-center"><Spinner animation="border"/>Getting data</Row>
9-
</Container>
10-
);
6+
function LoadingSpinner() {
7+
return (
8+
<Container>
9+
<Row className="justify-content-md-center">
10+
<Spinner animation="border" />
11+
Getting data
12+
</Row>
13+
</Container>
14+
);
15+
}
1116

1217
export default LoadingSpinner;

‎app/imports/ui/components/NavBar.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { NavLink } from 'react-router-dom';
33
import { Container, Navbar } from 'react-bootstrap';
44

55
/* The NavBar appears at the top of every page. Rendered by the App Layout component. */
6-
const NavBar = () => {
6+
function NavBar() {
77
const menuStyle = { marginBottom: '10px' };
88
return (
99
<Navbar bg="dark" expand="lg" style={menuStyle}>
@@ -14,7 +14,7 @@ const NavBar = () => {
1414
</Container>
1515
</Navbar>
1616
);
17-
};
17+
}
1818

1919
/** Enable ReactRouter for this component. https://reacttraining.com/react-router/web/api/withRouter */
2020
export default NavBar;

‎app/imports/ui/forms/StudentFormInfo.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,14 @@ const gpa2Number = (string) => gpaValues.indexOf(string);
99
const StudentFormSchema = new SimpleSchema({
1010
name: { label: 'Name', type: String },
1111
email: { label: 'Email', type: String },
12-
bio: { label: 'Biographical Statement', type: String, optional: true, defaultValue: '' },
12+
bio: {
13+
label: 'Biographical Statement', type: String, optional: true, defaultValue: '',
14+
},
1315
hobbies: { label: 'Hobbies', type: Array, optional: true },
1416
'hobbies.$': { type: String, allowedValues: DataValues.hobbies },
15-
level: { label: 'Level', type: String, allowedValues: DataValues.levels, defaultValue: DataValues.levels[0] },
17+
level: {
18+
label: 'Level', type: String, allowedValues: DataValues.levels, defaultValue: DataValues.levels[0],
19+
},
1620
gpa: { label: 'GPA', type: String, allowedValues: gpaValues },
1721
major: { label: 'Major', type: String, allowedValues: DataValues.majors },
1822
enrolled: { label: 'Date Enrolled', type: Date, defaultValue: new Date() },

‎app/imports/ui/layouts/App.jsx

+12-18
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,22 @@
11
import React from 'react';
2-
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
2+
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
33
import NavBar from '../components/NavBar';
44
import Footer from '../components/Footer';
55
import CreateStudent from '../pages/CreateStudent';
66
import EditStudent from '../pages/EditStudent';
77
import NotFound from '../pages/NotFound';
88

99
/** Top-level layout component for this application. Called in imports/startup/client/startup.jsx. */
10-
class App extends React.Component {
11-
render() {
12-
return (
13-
<Router>
14-
<div>
15-
<NavBar/>
16-
<Switch>
17-
<Route exact path="/" component={CreateStudent}/>
18-
<Route path="/student/:email" component={EditStudent}/>
19-
<Route component={NotFound}/>
20-
</Switch>
21-
<Footer/>
22-
</div>
23-
</Router>
24-
);
25-
}
26-
}
10+
const App = () => (
11+
<Router>
12+
<NavBar />
13+
<Routes>
14+
<Route path="/" element={<CreateStudent />} />
15+
<Route path="/student/:email" element={<EditStudent />} />
16+
<Route element={<NotFound />} />
17+
</Routes>
18+
<Footer />
19+
</Router>
20+
);
2721

2822
export default App;

0 commit comments

Comments
 (0)