Update page.tsx

Add year to publication page

Author: MikeDMorgan

app/publication/page.tsx

@@ -7,17 +7,38 @@ interface Publication {
     id: number;
     title: string;
     doi: string;
+    year: number; // Add year field
 }
 
 export default function Publications() {
     const [publications, setPublications] = useState<Publication[]>([]);
+    const [groupedPublications, setGroupedPublications] = useState<{ [year: number]: Publication[] }>({});
 
     useEffect(() => {
         fetch("/data/publication.json")
             .then((response) => response.json())
-            .then((data) => setPublications(data));
+            .then((data) => {
+                setPublications(data);
+                
+                // Group publications by year
+                const grouped = data.reduce((acc: { [year: number]: Publication[] }, pub: Publication) => {
+                    const year = pub.year;
+                    if (!acc[year]) {
+                        acc[year] = [];
+                    }
+                    acc[year].push(pub);
+                    return acc;
+                }, {});
+                
+                setGroupedPublications(grouped);
+            });
     }, []);
 
+    // Get sorted years in descending order (newest first)
+    const sortedYears = Object.keys(groupedPublications)
+        .map(Number)
+        .sort((a, b) => b - a);
+
     return (
         <>
             <div className="flex flex-col w-full">
@@ -30,16 +51,31 @@ export default function Publications() {
             <hr className="border-t border-gray-600 w-11/12 md:w-3/4 mx-auto mb-8" />
             <div className="flex flex-col w-full">
                 <div className="flex flex-col w-11/12 md:w-3/4 mx-auto">
-                    <ul className="list-disc pl-5 space-y-4">
-                        {publications.map((publication) => (
-                            <li key={publication.id}>
-                                {publication.title}{" "}
-                                <Link href={publication.doi} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">
-                                    (DOI)
-                                </Link>
-                            </li>
-                        ))}
-                    </ul>
+                    {sortedYears.map((year) => (
+                        <div key={year} className="mb-8">
+                            {/* Year sub-header */}
+                            <h2 className="text-xl md:text-2xl font-semibold mb-4 text-gray-800">
+                                {year}
+                            </h2>
+                            
+                            {/* Publications for this year */}
+                            <ul className="list-disc pl-5 space-y-4">
+                                {groupedPublications[year].map((publication) => (
+                                    <li key={publication.id}>
+                                        {publication.title}{" "}
+                                        <Link 
+                                            href={publication.doi} 
+                                            target="_blank" 
+                                            rel="noopener noreferrer" 
+                                            className="text-blue-500 hover:underline"
+                                        >
+                                            (DOI)
+                                        </Link>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    ))}
                 </div>
             </div>
         </>