Create Single Article Page

Author: igorlourenco

src/components/Blog/Main.tsx

@@ -22,15 +22,17 @@ const Main = () => {
             {data.articles.map((article: Article, index) => {
                 if (index % 3 == 0) {
                     return (
-                        <Link href={`article/?article=${article._id}`}>
+                        <Link href={`article/${article._id}`}>
                             <ArticlePreview article={article} width={[`auto`, `auto`, `50%`, `50%`]}/>
                         </Link>
                     )
                 }
 
                 if (index % 3 == 1) {
                     return (
-                        <ArticlePreview article={article} width={[`auto`, `auto`, `50%`, `50%`]}/>
+                        <Link href={`article/${article._id}`}>
+                            <ArticlePreview article={article} width={[`auto`, `auto`, `50%`, `50%`]}/>
+                        </Link>
                     )
                 }
             })}

src/pages/api/article/get-all.ts

@@ -10,19 +10,10 @@ export default async (request: NowRequest, response: NowResponse) => {
     const db = await connectToDatabase(process.env.MONGODB_URI)
     const collection = db.collection('articles')
 
-    let articles = []
-
-    if (page) {
-         articles = await collection.find({})
+    const articles = await collection.find({})
             .limit(numberOfArticlesPerPage * currentPage)
             .sort({sentAt: -1})
             .toArray()
-    }
-
-    else {
-         articles = await collection.find({})
-            .toArray()
-    }
 
     const numberOfArticles = await collection.countDocuments()
 

src/pages/article/[article].tsx

@@ -0,0 +1,16 @@
+import { useRouter } from 'next/router'
+import {useFetch} from "../../services/swr";
+import Loading from "../../components/message/Loading";
+
+const Article = () => {
+    const router = useRouter()
+    const { article } = router.query
+
+    const {data} = useFetch(`api/article/find-one/?article=${article}`)
+
+    if (!data) return <Loading/>
+
+    return <p>Post: {data.articles.title}</p>
+}
+
+export default Article