posts fetched from server

1 files changed, 44 insertions, 8 deletions

diff --git a/pages/search.tsx b/pages/search.tsx
index 11cfe2c..8053d4a 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -1,6 +1,9 @@
+import { useState, useEffect } from 'react';
+
 import Navbar from '../components/navbar';
 import { FormEvent } from 'react';
 import { ArticleMeta } from './post/[id]';
+import Tags from '../components/tag'
 
 import SearchOutlinedIcon from '@material-ui/icons/SearchOutlined';
 
@@ -16,13 +19,47 @@ function SearchBar(props: {
 	</div>
 }
 
-export default function SearchPage(props: {
-	posts: Array<{
-		props: {
-			meta: ArticleMeta
+interface Post {
+	title: string
+	subtitle: string
+	author: string
+	date: string
+	urlname: string
+	tags: Array<string>
+}
+
+interface PostsInfo {
+	valid_tags: Array<string>
+	posts: Array<Post>
+}
+
+function Post(props: { post: Post }) {
+	return <a className="post" href={"/post/" + props.post.urlname}>
+		<b className="title">{props.post.title}</b>
+		{props.post.subtitle && <p className="subtitle">{props.post.subtitle}</p>}
+		<p className="authordate">Written by {props.post.author} on {new Date(props.post.date).toLocaleString("en-us", {
+			month: "long", day: "numeric"
+		})}</p>
+		<Tags tags={props.post.tags}/>
+	</a>;
+}
+
+function Posts(props: { posts: Array<Post> }) {
+	return <div className="searchResults">
+		{
+			props.posts.map(post => <Post post={post} key={Math.random().toString()}/>)
 		}
-	}>
-}) {
+	</div>;
+}
+
+export default function SearchPage() {
+	var [posts, setPosts] = useState<PostsInfo>({ posts: [], valid_tags: [] });
+
+	useEffect(() => {(async () => {
+		var posts = await fetch("/posts.json");
+		setPosts(await posts.json());
+	})()}, []);
+
 	return <div>
 		<div className="centeredPage">
 			<div className="titleWrapper">
@@ -37,10 +74,9 @@ export default function SearchPage(props: {
 				<SearchBar searchFunction={(event?: FormEvent<HTMLFormElement>) => {
 					event?.preventDefault();
 				}}/>
+				<Posts posts={posts.posts}/>
 			</div>
 		</div>
 	</div>
 }
 
-// grep -Por "^\[meta\]:\s+<tags>\s+\(\K(.+)(?=\)$)" posts
-