Add playground #16
|
@ -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;
|
||||||
|
}
|
|
@ -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[];
|
||||||
|
}
|
|
@ -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(),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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[];
|
||||||
|
}
|
Loading…
Reference in New Issue