xyz/www
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

react: fix incorrect use of keys

Browse Source 
Signed-off-by: Paul W. <lambdapaul@protonmail.com>
This commit is contained in:
Paul W.
2024-12-06 13:52:40 -05:00
parent 4f25a3bc3d
commit ff03bd50ff
7 changed files with 80 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
components/quick-links.tsx
View File

@@ -2,23 +2,23 @@ import Link from 'next/link';
import Pages from '../public/external.json'; import Pages from '../public/external.json';
function QuickLinks() { function QuickLinks() {
return ( return (
<div className='block'> <div className='block'>
{ {
Object.entries(Pages).map(([title, link], i) => { Object.entries(Pages).map(([title, link]) => {
const extern = link.match(/^http/) && `blue extern` || ''; const extern = link.match(/^http/) && `blue extern` || '';
return ( return (
<Link <Link
key={i} key={link}
href={link} href={link}
className={`${extern} link button`}> className={`${extern} link button`}>
{title} {title}
</Link> </Link>
); );
}) })
} }
</div> </div>
); );
} }
export default QuickLinks; export default QuickLinks;

2
components/recent-notes.tsx
View File

@@ -22,7 +22,7 @@ function RecentNotes() {
{notes?.slice(0, 5) {notes?.slice(0, 5)
.map(({slug, title, mtime}) => { .map(({slug, title, mtime}) => {
return ( return (
<li key={mtime.getTime()} > <li key={slug} >
<Link href={`/notes/${slug}`}>{title}</Link> <Link href={`/notes/${slug}`}>{title}</Link>
</li> </li>
); );

76
components/recent-posts.tsx
View File

@@ -4,47 +4,47 @@ import style from '../styles/recent-posts.module.css';
import PostsInfo from '../public/posts.json'; import PostsInfo from '../public/posts.json';
function PostBlock({ slug, otime, title }: { slug: string, otime: string, title: string }) { function PostBlock({ slug, otime, title }: { slug: string, otime: string, title: string }) {
return ( return (
<div className={style.block}> <div className={style.block}>
<span className={style.postDate}> <span className={style.postDate}>
{toRelativeDate(new Date(otime))} {toRelativeDate(new Date(otime))}
</span> </span>
<div className={style.postTitle}> <div className={style.postTitle}>
<Link href={`/posts/${slug}`}> <Link href={`/posts/${slug}`}>
{title} {title}
</Link> </Link>
</div> </div>
</div> </div>
); );
} }
function RecentPosts() { function RecentPosts() {
const posts = Object.entries(PostsInfo).reverse(); const posts = Object.entries(PostsInfo).reverse();
if (!posts.length) if (!posts.length)
return <></>; return <></>;
return ( return (
<div className='block'> <div className='block'>
<h2>Recent Posts</h2> <h2>Recent Posts</h2>
<div className={style.container}> <div className={style.container}>
{posts?.slice(0, 10) {posts?.slice(0, 10)
.map(([slug, post]: any, i: number) => { .map(([slug, post]: any, i: number) => {
return ( return (
<PostBlock <PostBlock
key={i} key={slug}
slug={slug} slug={slug}
title={post.title} title={post.title}
otime={post.otime} /> otime={post.otime} />
); );
})} })}
</div> </div>
{ {
posts.length > 10 && posts.length > 10 &&
<div className={style.more}> <div className={style.more}>
<Link href='/posts' >More...</Link> <Link href='/posts' >More...</Link>
</div> </div>
} }
</div> </div>
); );
} }
export default RecentPosts; export default RecentPosts;

2
components/title.tsx
View File

@@ -12,7 +12,7 @@ function createPathElements(ancestors: Array<{ name: string, path: string }>) {
currentPath += `/${ancestor.path}` currentPath += `/${ancestor.path}`
return ( return (
<> <>
<Link key={id + 1} href={currentPath}>{ancestor.name}</Link> <Link key={currentPath} href={currentPath}>{ancestor.name}</Link>
<> / </> <> / </>
</> </>
); );

38
pages/index.tsx
View File

@@ -7,28 +7,28 @@ import RecentPosts from '../components/recent-posts';
import RootInfo from '../public/home.json'; import RootInfo from '../public/home.json';
function Nav() { function Nav() {
const nav = Object.entries(RootInfo); const nav = Object.entries(RootInfo);
return ( return (
<div className='block'> <div className='block'>
<h2>Navigation</h2> <h2>Navigation</h2>
{ {
nav.map(([slug, info], i) => { nav.map(([slug, info]) => {
return <Link key={i} href={slug} className='button green'>{info.title}</Link> return <Link key={slug} href={slug} className='button green'>{info.title}</Link>
}) })
} }
</div> </div>
) )
} }
function HomePage() { function HomePage() {
return ( return (
<Layout> <Layout>
<QuickLinks /> <QuickLinks />
<RecentPosts /> <RecentPosts />
<RecentNotes /> <RecentNotes />
<Nav /> <Nav />
</Layout> </Layout>
) )
} }
export default HomePage; export default HomePage;

4
pages/notes/index.tsx
View File

@@ -43,8 +43,8 @@ function NotesPage() {
|| <table> || <table>
<tbody> <tbody>
{notes.map( {notes.map(
(note: any, i: number) => { (note: any) => {
return (<NoteEntry note={note} key={i} />); return (<NoteEntry note={note} key={note.slug} />);
} }
)} )}
</tbody> </tbody>

4
pages/posts/index.tsx
View File

@@ -26,8 +26,8 @@ function Posts() {
<table> <table>
<tbody> <tbody>
{ {
posts.map(([slug, post]: any, i: number) => { posts.map(([slug, post]: [string, any]) => {
return <tr key={i} style={{ alignItems: 'center' }}> return <tr key={slug} style={{ alignItems: 'center' }}>
<td style={{ display: 'inline-block', textAlign: 'right', fontSize: '0.9rem' }}> <td style={{ display: 'inline-block', textAlign: 'right', fontSize: '0.9rem' }}>
<div style={{ fontStyle: 'italics', fontSize: '.8rem' }}>{ <div style={{ fontStyle: 'italics', fontSize: '.8rem' }}>{
post.mtime && (post.mtime != post.otime) && `Updated ${date.toRelativeDate(new Date(post.mtime))}` post.mtime && (post.mtime != post.otime) && `Updated ${date.toRelativeDate(new Date(post.mtime))}`