From e7f3b0d7cea82e62ba3002bfa205beec1766fd75 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Fri, 21 Feb 2020 04:10:14 +0300
Subject: [PATCH 1/4] move to ts

---
 .../{Article.js => Article/index.tsx}           | 17 ++++++++++-------
 src/style/components/Article.scss               |  8 +-------
 2 files changed, 11 insertions(+), 14 deletions(-)
 rename src/components/{Article.js => Article/index.tsx} (71%)

diff --git a/src/components/Article.js b/src/components/Article/index.tsx
similarity index 71%
rename from src/components/Article.js
rename to src/components/Article/index.tsx
index 7e71c0bb..0be499cc 100644
--- a/src/components/Article.js
+++ b/src/components/Article/index.tsx
@@ -1,6 +1,5 @@
-import React from 'react'
-import { dateFormat } from '../lib/date'
-import { Share } from './Share'
+import { dateFormat } from 'src/lib/date'
+import { Share } from '../Share'
 
 const Tag = ({ children }) => (
     <li className="ArticleTags-Item">
@@ -18,10 +17,16 @@ const TagList = ({ tags }) => (
 
 const Head = ({ date, tags = [], children }) => (
     <header className="Article-Head">
+        <style jsx>{`
+            .date {
+                color: var(--color-text-second);
+            }
+        `}</style>
+
         <h1>{children}</h1>
 
         {!date ? null : (
-            <p className="date">{dateFormat(date)}</p>
+            <p className={'date'}>{dateFormat(date)}</p>
         )}
 
         {!(tags.length) ? null : (
@@ -30,7 +35,7 @@ const Head = ({ date, tags = [], children }) => (
     </header>
 )
 
-const Article = ({ children, date, tags, title, shareable }) => (
+export const Article = ({ children, date, tags, title, shareable }) => (
     <article className="Article">
         <Head
             date={date}
@@ -48,5 +53,3 @@ const Article = ({ children, date, tags, title, shareable }) => (
         )}
     </article>
 )
-
-export default Article
diff --git a/src/style/components/Article.scss b/src/style/components/Article.scss
index 12fa83c1..f172e585 100644
--- a/src/style/components/Article.scss
+++ b/src/style/components/Article.scss
@@ -15,13 +15,7 @@
             margin-bottom: var(--article-head-margin-bottom);
         }
 
-        .date {
-            text-align: center;
-            color: #aaa;
-
-            margin-bottom: 1.25em;
-        }
-    }
+   }
 
     &-Body {
         --text-margin: 10px;

From 65507c5d800cf402d301fc8a0349a6f1a044435f Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Fri, 21 Feb 2020 04:26:48 +0300
Subject: [PATCH 2/4] article tags refactoring

---
 pages/article/[slug].tsx              |  5 +++--
 src/components/Article/index.tsx      | 32 +++++++++++++--------------
 src/components/TagList/index.tsx      | 27 ++++++++++++++++++++++
 src/components/TagList/styles.css     | 17 ++++++++++++++
 src/style/components/ArticleTags.scss | 29 ------------------------
 src/style/style.scss                  |  1 -
 src/types.ts                          |  7 ++++++
 7 files changed, 70 insertions(+), 48 deletions(-)
 create mode 100644 src/components/TagList/index.tsx
 create mode 100644 src/components/TagList/styles.css
 delete mode 100644 src/style/components/ArticleTags.scss

diff --git a/pages/article/[slug].tsx b/pages/article/[slug].tsx
index b713f1c6..81bc1e11 100644
--- a/pages/article/[slug].tsx
+++ b/pages/article/[slug].tsx
@@ -1,7 +1,7 @@
 import Head from 'next/head'
 import { get } from 'lodash'
 import { App } from 'src/components/App'
-import Article from 'src/components/Article'
+import { Article } from 'src/components/Article'
 import { Html } from 'src/components/Html'
 import menuModel from 'src/models/menu'
 import { buildMenu } from 'src/lib/menu'
@@ -9,11 +9,12 @@ import { Meta } from 'src/components/Meta'
 import { meta } from 'src/lib/meta'
 import { createApiUrl, requestGet, IResponseItems } from 'src/next-lib'
 import { NextPage } from 'next'
+import { IArticle } from 'src/types'
 
 type Props = {
     pageUrl: string
     meta: any
-    data: any //(article)
+    data: IArticle
 }
 
 const Page: NextPage<Props> = props => {
diff --git a/src/components/Article/index.tsx b/src/components/Article/index.tsx
index 0be499cc..92259602 100644
--- a/src/components/Article/index.tsx
+++ b/src/components/Article/index.tsx
@@ -1,21 +1,21 @@
 import { dateFormat } from 'src/lib/date'
 import { Share } from '../Share'
+import { TagList } from '../TagList'
+import { ITag } from 'src/types'
 
-const Tag = ({ children }) => (
-    <li className="ArticleTags-Item">
-        {children}
-    </li>
-)
+export type ArticleProps = {
+    date: string
+    title: string
+    tags: ITag[]
+    shareable: boolean
+}
 
-const TagList = ({ tags }) => (
-    <ul className="ArticleTags">
-        {tags.map((x, i) => (
-            <Tag key={i}># {x.name}</Tag>
-        ))}
-    </ul>
-)
+type HeadProps = {
+    date: string
+    tags: ITag[]
+}
 
-const Head = ({ date, tags = [], children }) => (
+const Head: React.FC<HeadProps> = ({ date, tags = [], children }) => (
     <header className="Article-Head">
         <style jsx>{`
             .date {
@@ -29,13 +29,13 @@ const Head = ({ date, tags = [], children }) => (
             <p className={'date'}>{dateFormat(date)}</p>
         )}
 
-        {!(tags.length) ? null : (
-            <TagList tags={tags} />
+        {!tags.length ? null : (
+            <TagList items={tags} />
         )}
     </header>
 )
 
-export const Article = ({ children, date, tags, title, shareable }) => (
+export const Article: React.FC<ArticleProps> = ({ children, date, tags, title, shareable }) => (
     <article className="Article">
         <Head
             date={date}
diff --git a/src/components/TagList/index.tsx b/src/components/TagList/index.tsx
new file mode 100644
index 00000000..644ed604
--- /dev/null
+++ b/src/components/TagList/index.tsx
@@ -0,0 +1,27 @@
+import './styles.css'
+
+import { ITag } from 'src/types'
+import { Button } from '../Button'
+
+export const Tag: React.FC<{ href: string }> = props => (
+    <li className={'tagsItem'}>
+        <Button href={props.href}>{props.children}</Button>
+    </li>
+)
+
+export type TagListProps = {
+    items: ITag[]
+}
+
+export const TagList: React.FC<TagListProps> = props => (
+    <ul className={'tags'}>
+        {props.items.map(x => (
+            <Tag
+                key={x.slug}
+                href={x.href}
+            >
+                # {x.name}
+            </Tag>
+        ))}
+    </ul>
+)
diff --git a/src/components/TagList/styles.css b/src/components/TagList/styles.css
new file mode 100644
index 00000000..ba7c65ab
--- /dev/null
+++ b/src/components/TagList/styles.css
@@ -0,0 +1,17 @@
+/* ELEMENTS */
+
+.tags {
+    display: flex;
+    flex-direction: row;
+    /* justify-content: center; */
+
+    list-style: none;
+}
+
+.tagsItem {
+    margin-right: var(--size-s);
+}
+
+.tagsItem:last-child {
+    margin-right: 0;
+}
diff --git a/src/style/components/ArticleTags.scss b/src/style/components/ArticleTags.scss
deleted file mode 100644
index 9bdd2b65..00000000
--- a/src/style/components/ArticleTags.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.ArticleTags {
-  --article-card-width: 30%;
-  --article-card-margin: var(--single-margin) var(--half-margin);
-
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-
-  list-style: none;
-
-  &-Item {
-    background: #99bde1;
-    padding: 3px 9px;
-
-    font-size: 14px;
-    color: #393939;
-
-    border-radius: 3px;
-  }
-
-  &-Item {
-    margin-right: 0.5em;
-
-    &:last-child {
-      margin-right: 0;
-
-    }
-  }
-}
diff --git a/src/style/style.scss b/src/style/style.scss
index 2e430ed0..b07dbb79 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -7,7 +7,6 @@
 @import "components/footer-links";
 @import "components/Article";
 @import "components/album";
-@import "components/ArticleTags";
 
 @import "content";
 
diff --git a/src/types.ts b/src/types.ts
index b781be23..2843ee8c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -31,8 +31,15 @@ export interface IImage {
     set: any // TODO
 }
 
+export interface ITag {
+    name: string
+    slug: string
+    href: string
+}
+
 export interface IArticle {
     id: string
+    tags: ITag[]
     featured: boolean
     url: string
     title: string

From 0e482ad73c984a099af08901b134f10ae72ea87e Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Fri, 21 Feb 2020 04:30:38 +0300
Subject: [PATCH 3/4] fix Article import

---
 pages/album/[slug].tsx     | 2 +-
 pages/teacher/[person].tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/pages/album/[slug].tsx b/pages/album/[slug].tsx
index 66abe008..216cd1b9 100644
--- a/pages/album/[slug].tsx
+++ b/pages/album/[slug].tsx
@@ -1,6 +1,6 @@
 import Head from 'next/head'
 import { App } from 'src/components/App'
-import Article from 'src/components/Article'
+import { Article } from 'src/components/Article'
 import { Html } from 'src/components/Html'
 import menuModel from 'src/models/menu'
 import { buildMenu } from 'src/lib/menu'
diff --git a/pages/teacher/[person].tsx b/pages/teacher/[person].tsx
index 8393ae9f..5ae2e39c 100644
--- a/pages/teacher/[person].tsx
+++ b/pages/teacher/[person].tsx
@@ -1,12 +1,12 @@
 import Head from 'next/head'
 import { App } from 'src/components/App'
-import Article from 'src/components/Article'
+import { Article } from 'src/components/Article'
 import { Meta } from 'src/components/Meta'
 import menuModel from 'src/models/menu'
 import { buildMenu } from 'src/lib/menu'
 import { meta } from 'src/lib/meta'
 import { createApiUrl, requestGet, IResponseItems } from 'src/next-lib'
-import { NextPage, NextPageContext } from 'next'
+import { NextPage } from 'next'
 import { IMeta } from 'src/types'
 import { Html } from 'src/components/Html'
 

From 28483190e22c4a0629d3aa58f31f8fc7196cb624 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Fri, 21 Feb 2020 04:34:11 +0300
Subject: [PATCH 4/4] IArticle type fix

---
 src/types.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/types.ts b/src/types.ts
index 2843ee8c..18df95f9 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -39,7 +39,9 @@ export interface ITag {
 
 export interface IArticle {
     id: string
+    date: string
     tags: ITag[]
+    post:string
     featured: boolean
     url: string
     title: string