reading redesign ish

Author: ethancedwards8

components/reading.js

@@ -0,0 +1,52 @@
+import Link from 'next/link';
+import dayjs from 'dayjs';
+
+import styles from '../styles/blog.module.scss';
+
+export default function Reading({ reading }) {
+    function createNameList(names) {
+        let name = "";
+
+        if (names.length == 1) {
+            return `${names[0].firstName} ${names[0].lastName}`
+        }
+
+        for (let i = 0; i < names.length; i++) {
+            if (i == names.length - 1) {
+                name += `and ${names[i].firstName} ${names[i].lastName}`
+
+                return name;
+            }
+            name += `${names[i].firstName} ${names[i].lastName}, `
+        }
+
+        return name;
+    }
+
+    function createTagsList(tags) {
+        let tag = "";
+
+        for (let i = 0; i < tags.length; i++) {
+            tag += `#${tags[i].tag} `
+        }
+
+        return tag;
+    }
+
+    return (
+        <>
+            <div className={styles.post}>
+                <hr />
+                <Link href={reading.link} passHref>
+                    <h2>{reading.title}</h2>
+                </Link>
+
+                <p className={styles.info}>By {createNameList(reading.author)}</p>
+                <h4 className={styles.info}>Published: {reading.date}</h4>
+                <p>Tags: {createTagsList(reading.tags)} </p>
+                <p>Date Added: {dayjs(reading.dateAdded).format('MMMM D, YYYY')}</p>
+            </div>
+        </>
+    )
+
+}

pages/ai.js

@@ -1,9 +1,12 @@
 import Link from 'next/link';
 import dayjs from 'dayjs';
 import Head from 'next/head';
+import React from 'react';
 
 import { NextSeo } from 'next-seo';
 
+import Reading from '../components/reading.js';
+
 import styles from '../styles/blog.module.scss';
 
 
@@ -25,24 +28,7 @@ export default function AI({ readings }) {
     everything listed below. I will read anything and everything, and this is
     just a list. Please send me more things to read! :)`;
 
-    function createNameList(names) {
-        let name = "";
-
-        if (names.length == 1) {
-            return `${names[0].firstName} ${names[0].lastName}`
-        }
-
-        for (let i = 0; i < names.length; i++) {
-            if (i == names.length - 1) {
-                name += `and ${names[i].firstName} ${names[i].lastName}`
-
-                return name;
-            }
-            name += `${names[i].firstName} ${names[i].lastName}, `
-        }
-
-        return name;
-    }
+    let sortedreadings = readings.sort((reading1, reading2) => (dayjs(reading1.dateAdded).isAfter(reading2.dateAdded) ? -1 : 1))
 
     return (
         <>
@@ -61,16 +47,9 @@ export default function AI({ readings }) {
             </div>
             <div className={styles.blog}>
                 {readings.map((reading, index) => (
-                    <div key={index} className={styles.post}>
-                        <hr/>
-                        
-                        <Link href={reading.link} passHref>
-                            <h2>{reading.title}</h2>
-                        </Link>
-                        
-                        <p className={styles.info}> {createNameList(reading.author)}</p>
-                        <h4 className={styles.info}>{reading.date}</h4>
-                    </div>
+                    <React.Fragment key={index}>
+                        <Reading reading={reading} />
+                    </React.Fragment>
                 ))}
             </div>
         </>