Readings

umaar · Aug 19, 2017 · 601421f · 601421f
1 parent b82acf3
commit 601421f
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 9 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 *.zip
 *.csv
-node_modules
+node_modules
+.next/
diff --git a/server/next-prototype/components/reading-item.js b/server/next-prototype/components/reading-item.js
@@ -0,0 +1,55 @@
+import TimeAgo from 'timeago-react';
+import Icon from '../components/icon'
+
+export default ({reading}) => (
+	<li>
+		<style jsx>{`
+			p {
+				margin: 0;
+			}
+
+			li {
+				margin-top: 20px;
+				padding: 10px;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+
+			.exact-timestamp {
+				padding-left: 10px;
+				padding-right: 10px;
+			}
+
+			.level {
+			    font-family: 'Luckiest Guy', cursive;
+			    font-size: 24px;
+			    padding-right: 20px;
+			    margin-top: 7px;
+			    letter-spacing: 1px;
+			}
+
+			.icon {
+				margin-right: 20px;
+			}
+
+			.timestamp {
+				font-style: italic;
+				color: #ccc;
+				font-size: 14px;
+			}
+		`}</style>
+
+		<span className="icon">
+			<Icon level={reading.level} />
+		</span>
+
+		<p className="level">{reading.level}</p>
+		<p className="exact-timestamp">{reading.friendlyTime}</p>
+
+		<span className="timestamp">
+			<TimeAgo datetime={reading.timestamp} locale='en' />
+		</span>
+
+	</li>
+);
diff --git a/server/next-prototype/components/readings-list.js b/server/next-prototype/components/readings-list.js
@@ -0,0 +1,3 @@
+export default ({readings}) => (
+	<p>readings!!! {readings}</p>
+);
diff --git a/server/next-prototype/pages/index.js b/server/next-prototype/pages/index.js
@@ -1,6 +1,7 @@
 
 import React from 'react'
 import LastReading from '../components/last-reading'
+import ReadingItem from '../components/reading-item'
 import Head from 'next/head'
 
 //////////////
@@ -17,7 +18,14 @@ const allData = [];
 
 export default class MyPage extends React.Component {
 	static async getInitialProps () {
-		if (!allData.length) {
+		if (allData.length) {
+			console.log('We already have the data!');
+			console.log(allData[0]);
+
+			return {
+				data: allData
+			};
+		} else {
 			const gunzip = zlib.createGunzip();
 
 			var csvStream = csv()
@@ -32,18 +40,16 @@ export default class MyPage extends React.Component {
 			await download(url)
 				.pipe(gunzip)
 				.pipe(csvStream);
-		} else {
-			console.log('We already have the data!');
-			console.log(allData[0]);
-		}
 
-		return {
-			data: allData
-		};
+			return {
+				data: allData
+			};
+		}
 	}
 
 	render () {
 		const {data} = this.props;
+		const test = [{x:1, y:2}];
 		return (
 			<div>
 				<Head>
@@ -52,6 +58,34 @@ export default class MyPage extends React.Component {
 				</Head>
 				<div className="container">
 					<LastReading reading={data[0]} />
+
+					<style jsx>{`
+						h4 {
+							margin: 50px 0 20px 0;
+							text-align: center;
+							letter-spacing: 1px;
+							font-size: calc(10px + 2vw);
+						}
+
+						.readings {
+							margin-top: 40px;
+							overflow: hidden;
+						}
+
+						ul {
+							list-style-type: none;
+							padding: 0;
+						}
+					`}</style>
+
+					<div className="readings">
+						<h4 className="readings__label">Past readings</h4>
+						<ul>
+							{data.map(reading => (
+								<ReadingItem reading={reading} />
+							))}
+						</ul>
+					</div>
 				</div>
 			</div>
 		)