Merge pull request #21 from tmshv/fix/article-component-update

Article component update

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'

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 => {

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'
 

src/components/Article.js

@@ -1,52 +0,0 @@
-import React from 'react'
-import { dateFormat } from '../lib/date'
-import { Share } from './Share'
-
-const Tag = ({ children }) => (
-    <li className="ArticleTags-Item">
-        {children}
-    </li>
-)
-
-const TagList = ({ tags }) => (
-    <ul className="ArticleTags">
-        {tags.map((x, i) => (
-            <Tag key={i}># {x.name}</Tag>
-        ))}
-    </ul>
-)
-
-const Head = ({ date, tags = [], children }) => (
-    <header className="Article-Head">
-        <h1>{children}</h1>
-
-        {!date ? null : (
-            <p className="date">{dateFormat(date)}</p>
-        )}
-
-        {!(tags.length) ? null : (
-            <TagList tags={tags} />
-        )}
-    </header>
-)
-
-const Article = ({ children, date, tags, title, shareable }) => (
-    <article className="Article">
-        <Head
-            date={date}
-            tags={tags}
-        >
-            {title}
-        </Head>
-
-        <div className="Article-Body">
-            {children}
-        </div>
-
-        {!shareable ? null : (
-            <Share />
-        )}
-    </article>
-)
-
-export default Article

src/components/Article/index.tsx

@@ -0,0 +1,55 @@
+import { dateFormat } from 'src/lib/date'
+import { Share } from '../Share'
+import { TagList } from '../TagList'
+import { ITag } from 'src/types'
+
+export type ArticleProps = {
+    date: string
+    title: string
+    tags: ITag[]
+    shareable: boolean
+}
+
+type HeadProps = {
+    date: string
+    tags: ITag[]
+}
+
+const Head: React.FC<HeadProps> = ({ 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>
+        )}
+
+        {!tags.length ? null : (
+            <TagList items={tags} />
+        )}
+    </header>
+)
+
+export const Article: React.FC<ArticleProps> = ({ children, date, tags, title, shareable }) => (
+    <article className="Article">
+        <Head
+            date={date}
+            tags={tags}
+        >
+            {title}
+        </Head>
+
+        <div className="Article-Body">
+            {children}
+        </div>
+
+        {!shareable ? null : (
+            <Share />
+        )}
+    </article>
+)

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>
+)

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;
+}

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;

src/style/components/ArticleTags.scss

@@ -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;
-
-    }
-  }
-}

src/style/style.scss

@@ -7,7 +7,6 @@
 @import "components/footer-links";
 @import "components/Article";
 @import "components/album";
-@import "components/ArticleTags";
 
 @import "content";
 

src/types.ts

@@ -31,8 +31,17 @@ export interface IImage {
     set: any // TODO
 }
 
+export interface ITag {
+    name: string
+    slug: string
+    href: string
+}
+
 export interface IArticle {
     id: string
+    date: string
+    tags: ITag[]
+    post:string
     featured: boolean
     url: string
     title: string