dh_demo

DreamHanks demo project
git clone git://git.lair.cx/dh_demo
Log | Files | Refs | README

ThreadList.tsx (1331B)

      1 import { Thread } from '@/lib/models/thread'
      2 import Link from 'next/link'
      3 import { useRouter } from 'next/router'
      4 import styles from './ThreadList.module.css'
      5 import { MouseEvent } from 'react'
      6 
      7 export interface ThreadListProps {
      8   threads?: Thread[]
      9 }
     10 
     11 export default function ThreadList (props: ThreadListProps) {
     12   const router = useRouter()
     13 
     14   const stopPropagation = (e: MouseEvent) => {
     15     e.stopPropagation()
     16   }
     17 
     18   const handleThreadClicked = (threadId: number) => {
     19     return (e: MouseEvent<HTMLElement>) => {
     20       e.preventDefault()
     21       router.push(`/threads/${threadId}`,)
     22         .catch(console.error)
     23     }
     24   }
     25 
     26   return (
     27     <div className={styles['threads']}>
     28       {props.threads?.map((thread) => (
     29         <div
     30           key={thread.id}
     31           className={styles.thread}
     32           onClick={handleThreadClicked(thread.id)}
     33         >
     34           <div className={styles.meta}>
     35             Posted by&nbsp;
     36             <Link
     37               href={`/users/${thread.authorId}`}
     38               onClick={stopPropagation}
     39             >
     40               {thread.authorName}
     41             </Link>
     42           </div>
     43           <div className={styles.title}>{thread.title}</div>
     44           {thread.preview && (
     45             <div className={styles.preview}>{thread.preview}</div>
     46           )}
     47         </div>
     48       ))}
     49     </div>
     50   )
     51 }