building photograph page

Author: prateekbh

src/routes/photographs/index.js

@@ -1,37 +1,29 @@
 import { h } from 'preact';
 import { Link } from 'preact-router';
-import { useState, useEffect } from 'preact/hooks';
+import { usePrerenderData } from '../../prerender-data-provider';
 import style from './style';
 
 const photographs = (props) => {
-	const [dataResponse, setDataResponse] = useState({});
-	useEffect(async () => {
-		setDataResponse(await(await fetch('/source-fs.json')).json());
-	}, []);
-	let photographs = [];
-	if (dataResponse.nodes && dataResponse.nodes[1] && dataResponse.nodes[1].edges) {
-		photographs = dataResponse.nodes[1].edges;
+	const [data, isLoading] = usePrerenderData(props);
+
+	if (isLoading) {
+		return (<h1>Loading</h1>);
+	}
+	if (data && data.data) {
+		const { data: { edges: photographs } } = data;
+		return (
+			<div class={style.pageBlogs}>
+				<h1 class={style.pageTitle}>Photographs</h1>
+				{photographs.map(photograph =>
+					(<div>
+						<img class={style.photo} src={photograph.details.photo} />
+						<caption class={style.caption}>{photograph.details.title}</caption>
+					</div>)
+				)}
+			</div>
+		);
 	}
-	return (
-		<div class={style.pageBlogs}>
-			<h1 class={style.pageTitle}>Photographs</h1>
-			{photographs.map(blog => (
-				<Link href={`/blog/${blog.id}`}>
-					<article>
-						<h2>{blog.details.title}</h2>
-						<div>
-							{
-								(blog.details.tags.substr(1, blog.details.tags.length - 2).split(',') || []).map(tag => <span class={style.tag}>{tag}</span>)
-							}
-						</div>
-						<p class={style.preview}>
-							{blog.preview}
-						</p>
-					</article>
-				</Link>
-			))}
-		</div>
-	);
+	return (<h1>Error</h1>);
 };
 
 export default photographs;

src/routes/photographs/style.css

@@ -17,30 +17,11 @@
   border-bottom: 2px solid #FFC107;
 }
 
-h2 {
-  font-weight: 400;
-  font-size: 24px;
+.photo {
+  max-width: 100%;
 }
 
-.tag {
-  padding: 8px;
-  margin-left: 8px;
-  text-transform: lowercase;
-  background-color: #ffdd037c;
-  border-radius: 8px;
-  color: #999;
-  font-size: 12px;
-}
-
-.tag:first-child {
-  margin-left: 0px;
-}
-
-.preview {
-  width: 50%;
-  line-height: 1.3;
-  color: #666;
-  max-height: 40px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.caption {
+  font-weight: 300;
+  display: block;
 }