Skip to content

Commit a346271

Browse files
bogas04bogas04
committed
Reorganize server API, use _document.js for global styles, NavBar
1 parent 4e7f028 commit a346271

File tree

11 files changed

+182
-65
lines changed

11 files changed

+182
-65
lines changed

‎components/NavBar/NavBar.js

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import Link from 'next/link';
4+
5+
/**
6+
*
7+
*
8+
* @export
9+
* @class NavBar
10+
* @augments {React.PureComponent<NavBarProps>}
11+
*/
12+
export default class NavBar extends React.PureComponent {
13+
/**
14+
* @typedef {object} NavBarProps
15+
* @property {array} links
16+
*
17+
* @static
18+
* @memberof NavBar
19+
*/
20+
static propTypes = {
21+
links: PropTypes.arrayOf(
22+
PropTypes.shape({
23+
url: PropTypes.string,
24+
title: PropTypes.string,
25+
})
26+
).isRequired,
27+
};
28+
29+
render() {
30+
return (
31+
<React.Fragment>
32+
<style jsx>{`
33+
nav {
34+
background: linear-gradient(90deg, violet, limegreen);
35+
}
36+
nav ul {
37+
margin: 0;
38+
padding: 20px;
39+
list-style: none;
40+
}
41+
nav ul li {
42+
display: inline-block;
43+
margin: 5px;
44+
}
45+
nav ul li a {
46+
color: white;
47+
text-decoration: none;
48+
}
49+
`}</style>
50+
<nav>
51+
<ul>
52+
{this.props.links.map(({ url, title }, i) => (
53+
<li key={i}>
54+
<Link href={url}>
55+
<a>{title}</a>
56+
</Link>
57+
</li>
58+
))}
59+
</ul>
60+
</nav>
61+
</React.Fragment>
62+
);
63+
}
64+
}

‎components/NavBar/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './NavBar';

‎constants/links.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export default [{ title: 'Upay', url: '/' }, { title: 'About', url: '/about' }];

‎package-lock.json

Lines changed: 13 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"babel-jest": "22.4.3",
77
"express": "^4.16.3",
88
"next": "^6.0.3",
9+
"prop-types": "^15.6.2",
910
"react": "^16.4.1",
1011
"react-dom": "^16.4.1"
1112
},

‎pages/_document.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import Document, { Head, Main, NextScript } from 'next/document';
2+
import links from '../constants/links';
3+
import NavBar from '../components/NavBar';
4+
5+
export default class MyDocument extends Document {
6+
static async getInitialProps(ctx) {
7+
const initialProps = await Document.getInitialProps(ctx);
8+
return { ...initialProps };
9+
}
10+
11+
render() {
12+
return (
13+
<html>
14+
<Head>
15+
<style>{`
16+
body {
17+
margin: 0;
18+
padding: 0;
19+
font-family: Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
20+
}
21+
22+
main {
23+
padding: 20px;
24+
}
25+
`}</style>
26+
</Head>
27+
<body>
28+
<NavBar links={links} />
29+
<Main />
30+
<NextScript />
31+
</body>
32+
</html>
33+
);
34+
}
35+
}

‎pages/about.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
1+
import NavBar from '../components/NavBar';
2+
import links from '../constants/links';
3+
14
/**
25
* About page
36
* @returns {React.ReactElement}
47
*/
5-
export default () => `About Page`;
8+
export default () => (
9+
<main>
10+
<h3>About Page</h3>
11+
</main>
12+
);

‎pages/index.js

Lines changed: 27 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
2-
import Link from 'next/link';
32
import Item from '../components/Item';
3+
import NavBar from '../components/NavBar';
4+
import links from '../constants/links';
45

56
/**
67
* Home page
@@ -17,50 +18,32 @@ export default class IndexPage extends React.PureComponent {
1718
render() {
1819
return (
1920
<React.Fragment>
20-
<style jsx global>{`
21-
body {
22-
margin: 0;
23-
padding: 0;
24-
font-family: Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
25-
}
26-
`}</style>
27-
<style jsx>{`
28-
nav {
29-
background: linear-gradient(90deg, violet, limegreen);
30-
}
31-
nav ul {
32-
margin: 0;
33-
padding: 20px;
34-
list-style: none;
35-
}
36-
nav ul li {
37-
display: inline-block;
38-
margin: 5px;
39-
}
40-
nav ul li a {
41-
color: white;
42-
text-decoration: none;
43-
}
44-
main {
45-
padding: 20px;
46-
}
47-
`}</style>
48-
49-
<nav>
50-
<ul>
51-
<li>
52-
<Link href="/">
53-
<a>Upay</a>
54-
</Link>
55-
</li>
56-
<li>
57-
<Link href="/about">
58-
<a>About</a>
59-
</Link>
60-
</li>
61-
</ul>
62-
</nav>
6321
<main>
22+
<img src="/images/logo.png" alt="Logo of Upay NGO" />
23+
24+
<section>
25+
The foundation of development for every society is the education of
26+
its youth. Keeping this in mind, an{' '}
27+
<a
28+
href="https://www.upay.org.in/"
29+
rel="noreferrer noopener"
30+
target="_blank"
31+
>
32+
NGO UPAY
33+
</a>{' '}
34+
(Underprivileged Advancement by Youth), was established in May 2010
35+
by a group of young engineers from IITs and NITs. It mainly aims to
36+
provide opportunities to underprivileged children and bring some
37+
sunshine in those deprived lives. Ever since it's dawn, UPAY Team
38+
has been working wholeheartedly in achieving this aim. Its success
39+
story can be culminated by the mere fact that where children were
40+
unable to do basic arithmetic calculations are now, not just
41+
producing excellent academic results but also bringing laurels to
42+
these underprivileged areas. The main vision of UPAY is overcome
43+
disparities in education so that every child gets an opportunity to
44+
Learn, Grow and Succeed.
45+
</section>
46+
6447
<h2>Items</h2>
6548
<ul>
6649
{this.state.items.map(({ id, name }) => (

‎public/images/logo.png

39.4 KB
Loading

‎server/api/index.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
const { Router } = require('express');
2+
3+
const items = [
4+
{ id: 1, name: 'item 1' },
5+
{ id: 2, name: 'item 2' },
6+
{ id: 3, name: 'item 3' },
7+
{ id: 4, name: 'item 4' },
8+
{ id: 5, name: 'item 5' },
9+
{ id: 6, name: 'item 6' },
10+
];
11+
12+
const api = Router();
13+
14+
/* Our demo API */
15+
16+
api
17+
.get('/items', (req, res) => res.json({ data: items }))
18+
.get('/api/items/:id', (req, res) =>
19+
res.json({ data: items[req.params.id + 1] || null })
20+
);
21+
22+
module.exports = api;

0 commit comments

Comments
 (0)