import React, { useState, useEffect } from 'reac

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { NextPage } from 'next';
import { Row, Col } from 'antd';
import { useWindowSize } from '@reach/window-size';

import { IMeta } from '../lib/IMeta';
import { SITE_URL, ROUTES, SITE_NAME } from '../config';
import { useTranslation } from '../../i18n';
import { LANG } from '../lang';

import Head from '../components/forms/Head';
import MainLayout from '../layout/MainLayout';
import ArticleItem from '../components/stdio/articles/ArticleItem';
import { WIDTHS } from '../config';

import styles from './articles.less';

const Articles: NextPage = () => {
    const { t } = useTranslation();

    useEffect(() => {}, []);

    const { width } = useWindowSize();

    const [articles, setArticles] = useState([
        {
            thumbnail:
                'https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/eed63160962613.5a5f0e62e40f4.jpg',
            title: 'Lập trình hướng đối tượng với C++',
            headline: 'Mô hình hóa lập trình với C++ hướng đối tượng.',
            description: '',
            author: 'Avi Fiaron',
            createdAt: new Date().getTime()
        },
        {
            thumbnail:
                'https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/7bfc5d60962613.5a5f098da99f8.jpg',
            title: 'Design pattern',
            headline: 'Sách tham khảo các design pattern phổ biến',
            description: '',
            author: 'Avi Fiaron',
            createdAt: new Date().getTime()
        },
        {
            thumbnail:
                'https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/7bfc5d60962613.5a5f098da99f8.jpg',
            title: 'Design pattern',
            headline: 'Sách tham khảo các design pattern phổ biến',
            description: '',
            author: 'Avi Fiaron',
            createdAt: new Date().getTime()
        },
        {
            thumbnail:
                'https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/7bfc5d60962613.5a5f098da99f8.jpg',
            title: 'Design pattern',
            headline: 'Sách tham khảo các design pattern phổ biến',
            description: '',
            author: 'Avi Fiaron',
            createdAt: new Date().getTime()
        },
        {
            thumbnail:
                'https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/eed63160962613.5a5f0e62e40f4.jpg',
            title: 'Lập trình hướng đối tượng với C++',
            headline: 'Mô hình hóa lập trình với C++ hướng đối tượng.',
            description: '',
            author: 'Avi Fiaron',
            createdAt: new Date().getTime()
        },
        {
            thumbnail:
                'https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/7bfc5d60962613.5a5f098da99f8.jpg',
            title: 'Design pattern',
            headline: 'Sách tham khảo các design pattern phổ biến',
            description: '',
            author: 'Avi Fiaron',
            createdAt: new Date().getTime()
        },
        {
            thumbnail:
                'https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/7bfc5d60962613.5a5f098da99f8.jpg',
            title: 'Design pattern',
            headline: 'Sách tham khảo các design pattern phổ biến',
            description: '',
            author: 'Avi Fiaron',
            createdAt: new Date().getTime()
        },
        {
            thumbnail:
                'https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/7bfc5d60962613.5a5f098da99f8.jpg',
            title: 'Design pattern',
            headline: 'Sách tham khảo các design pattern phổ biến',
            description: '',
            author: 'Avi Fiaron',
            createdAt: new Date().getTime()
        }
    ]);

    const meta: IMeta = {
        title: t(LANG.IndexSeoTitle),
        description: t(LANG.IndexSeoDescription),
        url: SITE_URL + '/',
        image: SITE_URL + '/static/shared/fb-img.png'
    };

    return (
        <>
            <Head meta={meta} />
            <MainLayout>
                <div className={styles.articles}>
                    <div className={styles.articlesBox}>
                        <div className={styles.sidebarLeftCol}></div>
                        <div className={styles.articlesCol}>
                            <Row gutter={[24, 24]}>
                                {articles.map((article, index) => (
                                    <Col
                                        xxl={24}
                                        xl={24}
                                        lg={24}
                                        md={24}
                                        sm={24}
                                        xs={24}
                                        key={index}
                                    >
                                        <ArticleItem
                                            article={article}
                                            square={false}
                                            horizontal={true}
                                        />
                                    </Col>
                                ))}
                            </Row>
                        </div>
                        <div className={styles.sidebarRightCol}></div>
                    </div>
                </div>
            </MainLayout>
        </>
    );
};

export default Articles;

import React, { useState } from 'react';

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331import React, { useState } from 'react';
import { NextPage } from 'next';
import Link from 'next/link';
import _ from 'lodash';
import { Row, Col, Input, Select, Checkbox, Button } from 'antd';
const { Option } = Select;

import Head from '../../components/forms/Head';

import CmsLayout from '../../layout/CmsLayout';
import StdioJoditEditor from '../../components/stdio/editors/StdioJoditEditor';

import { IArticle } from '../../redux/articleSlice';

import styles from './article-edit.less';

const ArticleEdit: NextPage = () => {
    const articleState: IArticle = {
        _id: 1234567890,
        title: '',
        headline: '',
        seoDescription: '',
        description: '',
        content: '',
        boardId: 1234567890,
        authorId: 1234567890,
        tags: [],
        createdAt: new Date().getTime(),
        modifiedAt: new Date().getTime(),
        likes: [],
        isInternal: false,
        shouldShowAds: false,
        isPublished: false
    };

    const authors = [
        'La Kiến Vinh',
        'Trung Nguyễn',
        'Vũ Quang Huy',
        '@TOMBSTONE',
        '@STDIO'
    ];

    const categories = ['Thông Tin Khoa Học', 'Tin Tức'];

    const [article, setBlogData] = useState(articleState);
    const [authorList, setAuthorList] = useState(authors);
    const [categoryList, setCategoryList] = useState(categories);

    const onClicSaveBlogPost = () => {};

    const onChangeArticleData = (_event: any, _type: string) => {
        let newBlogData = Object.assign({}, article);

        const inputTypes = [
            'title',
            'headline',
            'seoDescription',
            'description'
        ];

        if (_.includes(inputTypes, _type)) {
            const { value } = _event.target;
            newBlogData[_type] = value;
        }

        setBlogData(newBlogData);
    };
    return (
        <React.Fragment>
<<<<<<< Updated upstream
=======
            {/* <Head title={''} image={''} url={''} description={''} /> */}
>>>>>>> Stashed changes
            <CmsLayout>
                <div className={styles.articleEdit}>
                    {/* <div className={styles.header}>
                    <button onClick={onClicSaveBlogPost}>
                        <LeftOutlined />
                    </button>

                    <button
                        className={classNames(styles.saveButton)}
                        onClick={onClicSaveBlogPost}
                    >
                        Save
                    </button>
                </div> */}

                    <Row gutter={[10, 10]}>
                        <Col xxl={14} xl={14} lg={10} md={24} sm={24} xs={24}>
                            <div className={styles.component}>
                                <div className={styles.componentTitle}>
                                    CONTENT
                                </div>
                                <div className={styles.componentContent}>
                                    <div className={styles.content}>
                                        <Input
                                            placeholder="Title"
                                            value={article.title}
                                            onChange={event =>
                                                onChangeArticleData(
                                                    event,
                                                    'title'
                                                )
                                            }
                                        />

                                        <Input
                                            placeholder="Headline"
                                            value={article.headline}
                                            onChange={event =>
                                                onChangeArticleData(
                                                    event,
                                                    'headline'
                                                )
                                            }
                                        />

                                        <Input.TextArea
                                            placeholder="Description"
                                            value={article.description}
                                            onChange={event =>
                                                onChangeArticleData(
                                                    event,
                                                    'description'
                                                )
                                            }
                                        />

                                        <StdioJoditEditor
                                            content={article.content}
                                            onChange={() => {}}
                                        />
                                    </div>
                                </div>
                            </div>
                        </Col>

                        <Col xxl={4} xl={4} lg={7} md={12} sm={24} xs={24}>
                            <div className={styles.component}>
                                <div className={styles.componentTitle}>
                                    THUMBNAILS
                                </div>
                                <div className={styles.componentContent}>
                                    <div
                                        className={[
                                            styles.thumbnail,
                                            styles.hq
                                        ].join(' ')}
                                    >
                                        <div className={styles.box}></div>
                                    </div>
                                    <div
                                        className={[
                                            styles.thumbnail,
                                            styles.sq
                                        ].join(' ')}
                                    >
                                        <div className={styles.box}></div>
                                    </div>
                                </div>
                            </div>
                        </Col>

                        <Col xxl={6} xl={6} lg={7} md={12} sm={24} xs={24}>
                            <div className={styles.component}>
                                <div className={styles.componentTitle}>SEO</div>
                                <div className={styles.componentContent}>
                                    <div className={styles.seo}>
                                        <Input
                                            placeholder="Slug"
                                            value={article.seoDescription}
                                            onChange={event =>
                                                onChangeArticleData(
                                                    event,
                                                    'slug'
                                                )
                                            }
                                            disabled
                                        />
                                        <Input.TextArea
                                            placeholder="SEO description (160 characters)"
                                            value={article.seoDescription}
                                            onChange={event =>
                                                onChangeArticleData(
                                                    event,
                                                    'seoDescription'
                                                )
                                            }
                                        />
                                        <Input.TextArea
                                            placeholder="C++, React.js, Đọc Sách"
                                            value={''}
                                            onChange={event =>
                                                onChangeArticleData(event, '')
                                            }
                                        />
                                    </div>
                                </div>
                            </div>

                            <div className={styles.component}>
                                <div className={styles.componentTitle}>
                                    TOPICS
                                </div>
                                <div className={styles.componentContent}>
                                    <div className={styles.board}>
                                        <Select
                                            style={{
                                                width: '100%',
                                                marginBottom: '10px'
                                            }}
                                            value={2}
                                        >
                                            <Select.Option value={1}>
                                                Lập Trình
                                            </Select.Option>
                                            <Select.Option value={2}>
                                                Phong Cách Sống
                                            </Select.Option>
                                        </Select>
                                    </div>
                                </div>
                            </div>

                            <div className={styles.component}>
                                <div className={styles.componentTitle}>
                                    PROPERTIES
                                </div>
                                <div className={styles.componentContent}>
                                    <Checkbox checked={true}>
                                        Internal article
                                    </Checkbox>
                                    <br />
                                    <Checkbox checked={false}>
                                        Publish article
                                    </Checkbox>
                                </div>
                            </div>

                            <div className={styles.component}>
                                <div className={styles.componentTitle}>
                                    ADS CONFIGURATIONS
                                </div>
                                <div className={styles.componentContent}>
                                    <Checkbox checked={false}>
                                        Display ads
                                    </Checkbox>
                                    <br />
                                    <Checkbox checked={true}>
                                        Inline ads
                                    </Checkbox>
                                </div>
                            </div>

                            <div className={styles.component}>
                                <div className={styles.componentTitle}>
                                    Owner
                                </div>
                                <div className={styles.componentContent}>
                                    <div className={styles.board}>
                                        <Select
                                            style={{
                                                width: '100%',
                                                marginBottom: '10px'
                                            }}
                                            value={1}
                                        >
                                            <Select.Option value={1}>
                                                La Kiến Vinh
                                            </Select.Option>
                                            <Select.Option value={2}>
                                                Nguyễn Minh Thành
                                            </Select.Option>
                                        </Select>
                                        <Select
                                            style={{
                                                width: '100%',
                                                marginBottom: '10px'
                                            }}
                                            value={null}
                                        >
                                            <Select.Option value={null}>
                                                - Individual -
                                            </Select.Option>
                                            <Select.Option value={123}>
                                                STDIO Boards
                                            </Select.Option>
                                            <Select.Option value={456}>
                                                IT Books
                                            </Select.Option>
                                        </Select>
                                        <Select
                                            style={{ width: '100%' }}
                                            value={null}
                                        >
                                            <Select.Option value={null}>
                                                - Individual -
                                            </Select.Option>
                                            <Select.Option value={123}>
                                                Cùng Đọc Sách
                                            </Select.Option>
                                            <Select.Option value={456}>
                                                Startup Công Nghệ
                                            </Select.Option>
                                        </Select>
                                    </div>
                                </div>
                            </div>

                            <div className={styles.component}>
                                <div className={styles.componentTitle}>
                                    ACTIONS
                                </div>
                                <div className={styles.componentContent}>
                                    <Button type="primary" shape="round">
                                        Save
                                    </Button>
                                </div>
                            </div>
                        </Col>
                    </Row>
                </div>
            </CmsLayout>
        </React.Fragment>
    );
};

export default ArticleEdit;