Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
14 changed files
with
278 additions
and
288 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import ItemPage from '../../components/item.server' | ||
|
|
||
| export default function Item({ searchParams }) { | ||
| return <ItemPage id={searchParams.id} /> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| export default function RootLayout({ children }) { | ||
| return ( | ||
| <html> | ||
| <head /> | ||
| <body>{children}</body> | ||
| </html> | ||
| ); | ||
| } | ||
|
|
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { experimental_use as use } from 'react' | ||
|
|
||
| import Page from '../../components/page.client' | ||
| import Story from '../../components/story.client' | ||
| import Footer from '../../components/footer.client' | ||
|
|
||
| // Utils | ||
| import fetchData from '../../lib/fetch-data' | ||
| import { transform } from '../../lib/get-item' | ||
|
|
||
| async function getData() { | ||
| const storyIds = await fetchData('topstories', 2000) | ||
| const data = await Promise.all( | ||
| storyIds | ||
| .slice(0, 30) | ||
| .map((id) => fetchData(`item/${id}`).then(transform)) | ||
| ) | ||
|
|
||
| return data; | ||
| } | ||
|
|
||
| export default function News(props) { | ||
| const data = use(getData()) | ||
|
|
||
| return ( | ||
| <Page> | ||
| {data.map((item, i) => { | ||
| return <Story key={i} {...item} /> | ||
| })} | ||
| <Footer /> | ||
| </Page> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,82 +1,75 @@ | ||
| import React from 'react' | ||
| 'use client' | ||
|
|
||
| import timeAgo from '../lib/time-ago' | ||
| import React, { useState } from "react"; | ||
|
|
||
| export default class Comment extends React.Component { | ||
| constructor(props) { | ||
| super(props) | ||
| this.state = { toggled: false } | ||
| this.toggle = this.toggle.bind(this) | ||
| } | ||
| import timeAgo from "../lib/time-ago"; | ||
|
|
||
| render() { | ||
| const { user, text, date, comments } = this.props | ||
| return ( | ||
| <div className="comment"> | ||
| <div className="meta"> | ||
| {/* TODO: time hydration mismatch */} | ||
| {user} {timeAgo(new Date(date))} ago{' '} | ||
| <span onClick={this.toggle} className="toggle"> | ||
| {this.state.toggled | ||
| ? `[+${(this.props.commentsCount || 0) + 1}]` | ||
| : '[-]'} | ||
| </span> | ||
| </div> | ||
| export default function Comment({ user, text, date, comments, commentsCount }) { | ||
| const [toggled, setToggled] = useState(false) | ||
|
|
||
| {this.state.toggled | ||
| ? null | ||
| : [ | ||
| <div | ||
| key="text" | ||
| className="text" | ||
| dangerouslySetInnerHTML={{ __html: text }} | ||
| />, | ||
| <div key="children" className="children"> | ||
| {comments.map((comment) => ( | ||
| <Comment key={comment.id} {...comment} /> | ||
| ))} | ||
| </div>, | ||
| ]} | ||
| const toggle = () => setToggled(!toggled) | ||
|
|
||
| <style jsx>{` | ||
| .comment { | ||
| padding-top: 15px; | ||
| } | ||
| .children { | ||
| padding-left: 20px; | ||
| } | ||
| .meta { | ||
| font-size: 12px; | ||
| margin-bottom: 5px; | ||
| } | ||
| .toggle { | ||
| cursor: pointer; | ||
| } | ||
| .text { | ||
| color: #000; | ||
| font-size: 13px; | ||
| line-height: 18px; | ||
| } | ||
| /* hn styles */ | ||
| .text :global(p) { | ||
| margin-top: 10px; | ||
| } | ||
| .text :global(pre) { | ||
| margin-bottom: 10px; | ||
| max-width: 900px; | ||
| overflow: auto; | ||
| padding: 2px; | ||
| white-space: pre-wrap; | ||
| } | ||
| .text :global(a) { | ||
| color: #000; | ||
| } | ||
| `}</style> | ||
| return ( | ||
| <div className="comment"> | ||
| <div className="meta"> | ||
| {/* TODO: time hydration mismatch */} | ||
| {user} {timeAgo(new Date(date))} ago{' '} | ||
| <span onClick={toggle} className="toggle"> | ||
| {toggled | ||
| ? `[+${(commentsCount || 0) + 1}]` | ||
| : "[-]"} | ||
| </span> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| toggle() { | ||
| this.setState({ toggled: !this.state.toggled }) | ||
| } | ||
| {toggled | ||
| ? null | ||
| : [ | ||
| <div | ||
| key="text" | ||
| className="text" | ||
| dangerouslySetInnerHTML={{ __html: text }} | ||
| />, | ||
| <div key="children" className="children"> | ||
| {comments.map((comment) => ( | ||
| <Comment key={comment.id} {...comment} /> | ||
| ))} | ||
| </div>, | ||
| ]} | ||
|
|
||
| <style jsx>{` | ||
| .comment { | ||
| padding-top: 15px; | ||
| } | ||
| .children { | ||
| padding-left: 20px; | ||
| } | ||
| .meta { | ||
| font-size: 12px; | ||
| margin-bottom: 5px; | ||
| } | ||
| .toggle { | ||
| cursor: pointer; | ||
| } | ||
| .text { | ||
| color: #000; | ||
| font-size: 13px; | ||
| line-height: 18px; | ||
| } | ||
| /* hn styles */ | ||
| .text :global(p) { | ||
| margin-top: 10px; | ||
| } | ||
| .text :global(pre) { | ||
| margin-bottom: 10px; | ||
| max-width: 900px; | ||
| overflow: auto; | ||
| padding: 2px; | ||
| white-space: pre-wrap; | ||
| } | ||
| .text :global(a) { | ||
| color: #000; | ||
| } | ||
| `}</style> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,5 @@ | ||
| 'use client' | ||
|
|
||
| import { useState } from 'react' | ||
|
|
||
| import timeAgo from '../lib/time-ago' | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| module.exports = { | ||
| experimental: { | ||
| appDir: true, | ||
| runtime: 'experimental-edge', | ||
| serverComponents: true, | ||
| }, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.