Add playground (#16)
continuous-integration/drone/push Build is passing Details

Fixes #15

(for concerns about `lib/books.ts` please review !14)

Co-authored-by: Jared He <66887902+jaredjhe@users.noreply.github.com>
Reviewed-on: #16
Reviewed-by: Amy <a258wang@csclub.uwaterloo.ca>
This commit is contained in:
Jared He 2022-03-22 20:39:57 -04:00
parent 2040c63311
commit c642a08a08
4 changed files with 66 additions and 31 deletions

11
components/Detail.tsx Normal file
View File

@ -0,0 +1,11 @@
import React from "react";
import { DetailedBook } from "../lib/books";
export default function Detail(props: Props) {
return <p>{props.book.title}</p>;
}
interface Props {
book: DetailedBook;
}

21
components/List.tsx Normal file
View File

@ -0,0 +1,21 @@
import React from "react";
import { SimpleBook } from "../lib/books";
export default function List(props: Props) {
return (
<ul>
{props.books.map((book, idx) => {
return (
<li key={`${idx}_${book.id}`}>
{book.id}; {book.title}; {book.authors}; {book.isbn}
</li>
);
})}
</ul>
);
}
interface Props {
books: SimpleBook[];
}

View File

@ -1,34 +1,5 @@
import React from "react"; import React from "react";
import { getBook, getAllBooks, DetailedBook, SimpleBook } from "../lib/books"; export default function Home() {
return <div></div>;
export default function Home(props: Props) {
return (
<div>
<ul>
{props.books.map((book, idx) => {
return (
<li key={`${idx}_${book.id}`}>
{book.id}; {book.title}; {book.authors}; {book.isbn}
</li>
);
})}
</ul>
<p>{props.book.title}</p>
</div>
);
}
interface Props {
book: DetailedBook;
books: SimpleBook[];
}
export async function getServerSideProps() {
return {
props: {
book: await getBook(44),
books: await getAllBooks(),
},
};
} }

32
pages/playground.tsx Normal file
View File

@ -0,0 +1,32 @@
import React from "react";
import Detail from "../components/Detail";
import List from "../components/List";
import { DetailedBook, SimpleBook, getBook, getAllBooks } from "../lib/books";
export default function Playground(props: Props) {
return (
<div>
<h1>Detail</h1>
<hr />
<Detail book={props.book} />
<h1>List</h1>
<hr />
<List books={props.books} />
</div>
);
}
export async function getServerSideProps() {
return {
props: {
book: await getBook(44),
books: await getAllBooks(),
},
};
}
interface Props {
book: DetailedBook;
books: SimpleBook[];
}