feat: add basic Home & Article

refs: #6, #10

backend/src/main/kotlin/org/kotlin/everywhere/realworld/api.kt

@@ -20,6 +20,7 @@ class Api : Kenet() {
     val articleCreate by c<ArticleCreateReq, ArticleCreateRes>()
     val articleEditShow by c<ArticleEditShowReq, ArticleEditShowRes>()
     val articleEdit by c<ArticleEditReq, ArticleEditRes>()
+    val articleShow by c<ArticleShowReq, ArticleShowRes>()
 
     // index
     val feedList by c<FeedListReq, FeedListRes>()
@@ -135,6 +136,24 @@ class ArticleEditReq(
 @Serializable
 class ArticleEditRes(override val errors: List<String> = listOf(), val slug: String? = null) : ErrorsRes
 
+@Serializable
+class ArticleShowReq(val slug: String)
+
+@Serializable
+class ArticleShowRes(val data: Data? = null) {
+    @Serializable
+    class Data(
+        val userPk: Int?,
+        val userName: String?,
+        val userProfilePictureUrl: String?,
+        val pk: Int,
+        val title: String,
+        val description: String,
+        val article: String,
+        val tags: List<String>,
+        val lastUpdatedAt: String,
+    )
+}
 
 @Serializable
 class FeedListReq(val accessToken: String?)
@@ -274,6 +293,22 @@ fun Api.init() {
         ArticleEditRes(slug = article.slug)
     }
 
+    articleShow { req ->
+        val article = articles.firstOrNull { it.slug == req.slug } ?: return@articleShow ArticleShowRes()
+        val articleUser = users.firstOrNull { it.pk == article.userPk }
+        ArticleShowRes(data = ArticleShowRes.Data(
+            userPk = articleUser?.pk,
+            userName = articleUser?.name,
+            userProfilePictureUrl = articleUser?.profilePictureUrl,
+            pk = article.pk,
+            title = article.title,
+            description = article.description,
+            article = article.article,
+            tags = article.tags,
+            lastUpdatedAt = (article.updatedAt ?: article.createdAt).toString()
+        ))
+    }
+
     feedList { req ->
         val user = users.firstOrNull { it.accessTokens.contains(req.accessToken) }
         val feeds = articles

frontend/src/page/artcle.tsx

@@ -1,29 +1,65 @@
-import { ReactElement } from "react";
+import { useHistory, useParams } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { api } from "../api";
+
+export const ArticlePage = () => {
+  const history = useHistory();
+  const { slug } = useParams<{ slug?: string }>();
+  const [article, setArticle] = useState<{
+    article: string;
+    description: string;
+    lastUpdatedAt: string;
+    pk: number;
+    tags: string[];
+    title: string;
+    userName: string | null;
+    userPk: number | null;
+    userProfilePictureUrl: string | null;
+  } | null>(null);
+
+  useEffect(() => {
+    const fallback = () => history.replace({ pathname: "/" });
+    if (!slug?.length) {
+      fallback();
+      return;
+    }
+    api.articleShow({ slug: slug }).then((res) => {
+      if (!res.data) {
+        alert("Cannot find an article");
+        fallback();
+        return;
+      }
+      setArticle(res.data);
+    });
+  }, [history, slug]);
+
+  if (article == null) {
+    return <></>;
+  }
 
-export function ArticlePage(): ReactElement {
   return (
     <div className="article-page">
       <div className="banner">
         <div className="container">
-          <h1>How to build webapps that scale</h1>
+          <h1>{article.title}</h1>
 
           <div className="article-meta">
             <a href="">
               <img src="http://i.imgur.com/Qr71crq.jpg" />
             </a>
             <div className="info">
               <a href="" className="author">
-                Eric Simons
+                {article.userName}
               </a>
-              <span className="date">January 20th</span>
+              <span className="date">{article.lastUpdatedAt}</span>
             </div>
             <button className="btn btn-sm btn-outline-secondary">
-              <i className="ion-plus-round"></i>
+              <i className="ion-plus-round" />
               &nbsp; Follow Eric Simons <span className="counter">(10)</span>
             </button>
             &nbsp;&nbsp;
             <button className="btn btn-sm btn-outline-primary">
-              <i className="ion-heart"></i>
+              <i className="ion-heart" />
               &nbsp; Favorite Post <span className="counter">(29)</span>
             </button>
           </div>
@@ -33,12 +69,8 @@ export function ArticlePage(): ReactElement {
       <div className="container page">
         <div className="row article-content">
           <div className="col-md-12">
-            <p>
-              Web development technologies have evolved at an incredible clip
-              over the past few years.
-            </p>
-            <h2 id="introducing-ionic">Introducing RealWorld.</h2>
-            <p>It's a great solution for learning how other frameworks work.</p>
+            <p>{article.description}</p>
+            {article.article}
           </div>
         </div>
 
@@ -138,4 +170,4 @@ export function ArticlePage(): ReactElement {
       </div>
     </div>
   );
-}
+};