Merge pull request #100 from midudev/copilot/fix-47

Add screen to list read and unread questions

Author: midudev

app/components/Header.jsx

@@ -65,9 +65,11 @@ export function Header({ stars }) {
  <div className='absolute right-0 flex items-center gap-x-2 top-1'>
  <ThemeToggle />
  <Stars stars={stars} />
- <button className='border uppercase mix rounded-[4px] font-bold inline-block p-2 text-[10px]'>
- Leidas {read}/{counter.total}
- </button>
+ <Link href="/questions">
+ <button className='border uppercase mix rounded-[4px] font-bold inline-block p-2 text-[10px]'>
+ Leidas {read}/{counter.total}
+ </button>
+ </Link>
  </div>
  )}
 

app/components/ListOfQuestions.jsx

@@ -1,25 +1,29 @@
 import { readIndex } from '../../utils/posts.js'
-
 import Link from 'next/link'
+import { ReadStatusItem } from './ReadStatusItem.jsx'
 
 const getListOfQuestions = async () => {
  const questions = await readIndex()
  return questions
 }
 
-export async function ListOfQuestions() {
+export async function ListOfQuestions({ showReadStatus = false }) {
  const questions = await getListOfQuestions()
 
  return (
  <ul className='space-y-3'>
  {questions.map(({ id, text }) => (
  <li key={id}>
- <Link
- className='leading-snug hover:underline'
- href={`/${id}/#content`}
- >
- {text}
- </Link>
+ {showReadStatus ? (
+ <ReadStatusItem id={id} text={text} />
+ ) : (
+ <Link
+ className='leading-snug hover:underline'
+ href={`/${id}/#content`}
+ >
+ {text}
+ </Link>
+ )}
  </li>
  ))}
  </ul>

app/components/ReadStatusItem.jsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import Link from 'next/link'
+import { useEventListener } from '../../hooks/useEventListener'
+
+export function ReadStatusItem({ id, text }) {
+ const [isRead, setIsRead] = useState(false)
+
+ useEffect(() => {
+ const readStorage = JSON.parse(window.localStorage.getItem('read')) || []
+ setIsRead(readStorage.includes(text))
+ }, [text])
+
+ const handlerStorageListener = useCallback(
+ event => {
+ if (event.key === 'read') {
+ setIsRead(JSON.parse(event.newValue).includes(text))
+ }
+ },
+ [text]
+ )
+
+ useEventListener({
+ eventName: 'storage',
+ handler: handlerStorageListener,
+ })
+
+ const itemClassName = isRead
+ ? 'leading-snug hover:underline text-green-600 dark:text-green-400 flex items-center'
+ : 'leading-snug hover:underline flex items-center'
+
+ return (
+ <Link className={itemClassName} href={`/${id}/#content`}>
+ {isRead ? (
+ <span className="inline-block w-3 h-3 mr-2 bg-green-500 rounded-full" title="Pregunta leída"></span>
+ ) : (
+ <span className="inline-block w-3 h-3 mr-2 bg-gray-300 dark:bg-gray-600 rounded-full" title="Pregunta no leída"></span>
+ )}
+ {text}
+ </Link>
+ )
+}

app/questions/page.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from 'next'
+import { ListOfQuestions } from '../components/ListOfQuestions.jsx'
+
+export const metadata: Metadata = {
+ title: 'Lista de preguntas para leer - React.js Wiki',
+ description: 'Lista de todas las preguntas disponibles sobre React.js con indicación de leídas y no leídas',
+}
+
+export default function QuestionsPage() {
+ return (
+ <>
+ <h1 className='pb-6 text-3xl font-bold text-blue-900 dark:text-blue-100'>
+ Lista de preguntas
+ </h1>
+ <p className='pb-6 text-lg dark:text-blue-200'>
+ A continuación encontrarás todas las preguntas disponibles.
+ </p>
+ 
+ <div className="flex mb-8 gap-4 text-sm">
+ <div className="flex items-center">
+ <span className="inline-block w-3 h-3 mr-2 bg-green-500 rounded-full"></span>
+ <span>Preguntas leídas</span>
+ </div>
+ <div className="flex items-center">
+ <span className="inline-block w-3 h-3 mr-2 bg-gray-300 dark:bg-gray-600 rounded-full"></span>
+ <span>Preguntas por leer</span>
+ </div>
+ </div>
+ 
+ <ListOfQuestions showReadStatus={true} />
+ </>
+ )
+}