41 |
51 | {`_html:${marked(article.body)}`}
42 | 50 |
6 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "apprun-realworld-example-app",
3 | "version": "1.0.0",
4 | "description": "> ### AppRun codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the [RealWorld](https://github.com/gothinkster/realworld) spec and API.",
5 | "main": "index.js",
6 | "scripts": {
7 | "jest": "jest",
8 | "test": "jest --watch",
9 | "start": "webpack serve --mode development",
10 | "build": "webpack --mode production",
11 | "lint": "eslint src"
12 | },
13 | "repository": {
14 | "type": "git",
15 | "url": "git+https://github.com/yysun/realworld-starter-kit.git"
16 | },
17 | "keywords": [],
18 | "author": "",
19 | "license": "ISC",
20 | "bugs": {
21 | "url": "https://github.com/yysun/realworld-starter-kit/issues"
22 | },
23 | "homepage": "https://github.com/yysun/realworld-starter-kit#readme",
24 | "devDependencies": {
25 | "@types/jest": "^27.0.2",
26 | "@types/marked": "^4.0.0",
27 | "@typescript-eslint/eslint-plugin": "^5.3.1",
28 | "@typescript-eslint/parser": "^5.3.1",
29 | "apprun": "^3.28.7",
30 | "eslint": "^8.2.0",
31 | "jest": "^27.3.1",
32 | "marked": "^4.0.10",
33 | "source-map-loader": "^3.0.0",
34 | "ts-jest": "^27.0.7",
35 | "ts-loader": "^9.2.6",
36 | "tslib": "^2.3.1",
37 | "typescript": "^4.4.4",
38 | "webpack": "^5.64.0",
39 | "webpack-cli": "^4.9.1",
40 | "webpack-dev-server": "^4.4.0"
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef */
2 | module.exports = {
3 | env: {
4 | browser: true,
5 | es2021: true,
6 | },
7 | extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
8 | parser: '@typescript-eslint/parser',
9 | parserOptions: {
10 | ecmaVersion: 12,
11 | sourceType: 'module',
12 | },
13 |
14 | plugins: ['@typescript-eslint'],
15 | rules: {
16 | indent: ['error', 2],
17 | quotes: ['error', 'single'],
18 | semi: ['error', 'always'],
19 | 'no-trailing-spaces': 'error',
20 | 'no-multiple-empty-lines': ['error', { 'max': 1, 'maxEOF': 0 }],
21 | '@typescript-eslint/explicit-module-boundary-types': 'off',
22 | 'no-case-declarations': 'off',
23 | 'eqeqeq': 'error',
24 | 'curly': 'error',
25 | 'brace-style': ['error', '1tbs', { 'allowSingleLine': true }],
26 | 'no-extra-parens': ['error', 'functions'],
27 | 'no-useless-catch': 'error',
28 | 'no-console': 'error',
29 | 'space-before-function-paren': ['error', { 'anonymous': 'always', 'named': 'never', 'asyncArrow': 'always' }],
30 | 'object-curly-spacing': ['error', 'always'],
31 | 'array-bracket-spacing': ['error', 'never'],
32 | 'no-unused-expressions': ['error', { allowShortCircuit: true }],
33 | 'arrow-parens': ['error', 'as-needed', { 'requireForBlockBody': true }],
34 | '@typescript-eslint/no-unused-vars': ['error', { varsIgnorePattern: 'app' }],
35 | 'no-invalid-this': 'off',
36 | '@typescript-eslint/no-invalid-this': ['error']
37 | },
38 | };
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
40 |
41 |
42 |
9 |
38 | );
39 | }
40 |
41 | export default function ({ articles, component }: { articles: Array
10 |
11 | 
12 |
13 |
25 |
26 |
14 |
15 | {article.author.username}
16 |
17 | {new Date(article.updatedAt).toLocaleString()}
18 |
19 |
24 | {article.title}
27 |{article.description}
28 | Read more... 29 | 36 | 37 |No articles are here... yet.
46 | );
47 | }
48 |
--------------------------------------------------------------------------------
/tests/mocks.ts:
--------------------------------------------------------------------------------
1 | import app from 'apprun';
2 | import { auth, tags, articles, comments, profile } from '../src/api';
3 |
4 | app.on('#', async (route, ...p) => {
5 | app.run(`#/${route || ''}`, ...p);
6 | })
7 |
8 | auth.current = jest.fn(() => null);
9 | auth.signIn = jest.fn(() => new Promise(r => r(
10 | {
11 | user: {
12 | username: '',
13 | bio: '',
14 | image: '',
15 | following: true
16 | }
17 | }
18 | )));
19 |
20 | auth.register = jest.fn(() => null);
21 | auth.save = jest.fn(() => null);
22 |
23 | tags.all = jest.fn(() => new Promise(r => r({ tags: ['1', '2', '3'] })));
24 |
25 | articles.search = jest.fn(() => new Promise(r => r(({ articles: [], articlesCount: 101 }))));
26 | articles.feed = jest.fn(() => new Promise(r => r({ articles: [], articlesCount: 5 })));
27 | articles.get = jest.fn(() => new Promise(r => r(
28 | {
29 | article: {
30 | slug: '',
31 | author: {
32 | username: '',
33 | bio: '',
34 | image: '',
35 | following: true
36 | },
37 | title: '',
38 | body: '',
39 | description: '',
40 | createdAt: new Date(),
41 | updatedAt: new Date(),
42 | favorited: true,
43 | favoritesCount: 0,
44 | tagList: []
45 | }
46 | }
47 | )));
48 |
49 | articles.delete = jest.fn(() => null);
50 | articles.favorite = jest.fn(() => null);
51 | articles.unfavorite = jest.fn(() => null);
52 | articles.update = jest.fn(() => null);
53 | articles.create = jest.fn(() => null);
54 |
55 | comments.create = jest.fn(() => null);
56 | comments.delete = jest.fn(() => null);
57 | comments.forArticle = jest.fn(() => new Promise(r => r(({ comments: [] }))));
58 |
59 | profile.get = jest.fn(() => null);
60 | profile.follow = jest.fn(() => null);
61 | profile.unfollow = jest.fn(() => null);
62 |
--------------------------------------------------------------------------------
/src/components/header.tsx:
--------------------------------------------------------------------------------
1 | import app, { Component, on } from 'apprun';
2 |
3 | class HeaderComponent extends Component {
4 | state = {};
5 | view = (state) => {
6 | const user = state.user;
7 | return (
8 |
57 | );
58 | };
59 |
60 | @on('/set-user') setUser = (state, user) => ({ ...state, user });
61 | }
62 |
63 | export default new HeaderComponent().start('header');
64 |
--------------------------------------------------------------------------------
/src/components/article-meta.tsx:
--------------------------------------------------------------------------------
1 | import app from 'apprun';
2 | import { IArticle } from '../models';
3 |
4 | export default function ArticleMeta({ article, component }: { article: IArticle; component }) {
5 | const favClass = article.favorited ? 'btn-primary' : 'btn-outline-primary';
6 | const followClass = article.author.following ? 'btn-secondary' : 'btn-outline-secondary';
7 | return (
8 |
9 |
10 |
11 |
12 |
58 | );
59 | }
60 |
--------------------------------------------------------------------------------
/src/components/comment-list.tsx:
--------------------------------------------------------------------------------
1 | import app from 'apprun';
2 | import { IComment, IProfile } from '../models';
3 | import { marked } from 'marked';
4 |
5 | function Comment({ comment }: { comment: IComment }) {
6 | return (
7 |
13 |
14 | {article.author.username}
15 |
16 | {new Date(article.updatedAt).toLocaleString()}
17 |
18 |
19 | {app['user'] && app['user'].username === article.author.username ? (
20 |
21 |
26 |
27 |
32 |
33 | ) : (
34 |
35 | {' '}
48 |
49 |
55 |
56 | )}
57 |
8 |
29 | );
30 | }
31 |
32 | export default function ({ comments }: { comments: Array
9 |
13 | 10 |
{`_html:${marked(comment.body)}`}
11 | 12 |
14 |
15 | 
16 |
17 |
18 |
19 | {comment.author.username}
20 |
21 | {new Date(comment.createdAt).toLocaleString()}
22 | {app['user'] && app['user'].username === comment.author.username && (
23 |
26 | )}
27 |
28 |
36 |
67 |
68 | );
69 | }
70 |
--------------------------------------------------------------------------------
/src/components/register.tsx:
--------------------------------------------------------------------------------
1 | import app, { Component, on } from 'apprun';
2 | import { auth, serializeObject } from '../api';
3 | import Errors from './error-list';
4 |
5 | class RegisterComponent extends Component {
6 | state = {};
7 |
8 | view = (state) => {
9 | if (!state || state instanceof Promise) {return;}
10 | return (
11 |
12 |
53 | );
54 | };
55 |
56 | @on('#/register') register = (state, messages) => !auth.current() ? { ...state, messages } : location.href = '#/';
57 |
58 | @on('register') submitRegistration = async (state, e) => {
59 | try {
60 | e.preventDefault();
61 | const session = await auth.register(serializeObject(e.target));
62 | app.run('/set-user', session.user);
63 | app.run('route', '#/');
64 | } catch ({ errors }) {
65 | return { ...state, errors };
66 | }
67 | };
68 | }
69 |
70 | export default new RegisterComponent().mount('my-app');
71 |
--------------------------------------------------------------------------------
/src/components/signin.tsx:
--------------------------------------------------------------------------------
1 | import app, { Component, on } from 'apprun';
2 | import { auth, serializeObject } from '../api';
3 |
4 | import Errors from './error-list';
5 |
6 | class SigninComponent extends Component {
7 | state = {};
8 |
9 | view = (state) => {
10 | if (!state || state instanceof Promise) {return;}
11 | return (
12 |
13 |
52 |
14 |
50 |
51 |
13 |
46 | );
47 | };
48 |
49 | @on('#/login') login = state => !auth.current() ? { ...state, messages: [], returnTo: document.location.hash } : location.href = '#/';
50 | @on('#/logout') logout = () => {
51 | app.run('/set-user', null);
52 | document.location.hash = '#/';
53 | };
54 |
55 | @on('sign-in') signIn = async (state, e) => {
56 | try {
57 | e.preventDefault();
58 | const session = await auth.signIn(serializeObject(e.target));
59 | app.run('/set-user', session.user);
60 | const returnTo: string = (state.returnTo || '').replace(/#\/login\/?/, '');
61 | if (!returnTo) {document.location.hash = '#/feed';} else {
62 | app.run('route', returnTo);
63 | history.pushState(null, null, returnTo);
64 | }
65 | } catch ({ errors }) {
66 | return { ...state, errors };
67 | }
68 | };
69 | }
70 |
71 | export default new SigninComponent().mount('my-app');
72 |
--------------------------------------------------------------------------------
/src/fetch.ts:
--------------------------------------------------------------------------------
1 | declare let defaultBasePath;
2 |
3 | let access_token: string =
4 | (window && window.localStorage && window.localStorage.getItem('jwt')) || '';
5 | export function getToken() {
6 | return access_token;
7 | }
8 |
9 | export function setToken(token: string) {
10 | access_token = token;
11 | if (!window.localStorage) {return;}
12 | if (token) {window.localStorage.setItem('jwt', token);} else {window.localStorage.removeItem('jwt');}
13 | }
14 |
15 | export async function fetchAsync(
16 | method: 'GET' | 'POST' | 'DELETE' | 'PUT',
17 | url: string,
18 | body?
19 | ) {
20 | const headers = { 'Content-Type': 'application/json; charset=utf-8' };
21 | if (access_token) {headers['Authorization'] = `Token ${access_token}`;}
22 | const response = await window['fetch'](`${defaultBasePath}${url}`, {
23 | method,
24 | headers,
25 | body: body && JSON.stringify(body)
26 | });
27 | if (response.status === 401) {
28 | setToken(null);
29 | throw new Error('401');
30 | }
31 | const result = await response.json();
32 | if (!response.ok) {throw result;}
33 | return result;
34 | }
35 |
36 | export function get
14 |
45 |
15 |
43 |
44 |
13 |
66 | );
67 | };
68 |
69 | @on('#/editor') root = async (state, slug) => {
70 | if (!auth.authorized()) {return;}
71 | let article;
72 | if (slug) {
73 | const result = await articles.get(slug);
74 | article = result.article;
75 | }
76 | article = article || { title: '', description: '', body: '', tagList: [] };
77 | return { article };
78 | };
79 |
80 | @on('submit-article') submitArticle = async (state, e) => {
81 | try {
82 | e.preventDefault();
83 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
84 | const article = serializeObject
14 |
65 |
15 |
64 |
16 | {state.errors &&
63 |
14 | {state.showModal ? (
15 |
85 | );
86 | };
87 |
88 | @on('#/settings') settings = () => {
89 | if (!auth.authorized()) {return;}
90 | return { user: app['user'] };
91 | };
92 |
93 | @on('submit-settings') submitSettings = async (state, e) => {
94 | try {
95 | e.preventDefault();
96 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
97 | const user = serializeObject
27 |
84 |
28 |
83 |
29 | {state.errors &&
82 | Your Settings
31 | 81 |
20 | {state.deleting && (
21 |
59 | );
60 | };
61 |
62 | @on('#/article') root = async (state, slug) => {
63 | let article = state.article as IArticle;
64 | let _comments = state.comments;
65 | if (!article || article.slug !== slug) {
66 | const result = await articles.get(slug);
67 | article = result.article;
68 | const commentsResponse = await comments.forArticle(article.slug);
69 | _comments = commentsResponse.comments;
70 | }
71 | return { ...state, article, comments: _comments };
72 | };
73 |
74 | @on('/new-comment') newComment = async (state, e) => {
75 | try {
76 | e.preventDefault();
77 | const comment = e.target['comment'].value;
78 | if (!comment) {return;}
79 | await comments.create(state.article.slug, { body: comment });
80 | const commentsResponse = await comments.forArticle(state.article.slug);
81 | return { ...state, comments: commentsResponse.comments };
82 | } catch ({ errors }) {
83 | return { ...state, errors };
84 | }
85 | };
86 |
87 | @on('/delete-comment') deleteComment = async (state, comment) => {
88 | await comments.delete(this.state.article.slug, comment.id);
89 | const commentsResponse = await comments.forArticle(state.article.slug);
90 | return { ...state, comments: commentsResponse.comments };
91 | };
92 |
93 | @on('update-article') updateArticle = (state, article) => ({
94 | ...state,
95 | article
96 | });
97 |
98 | @on('update-follow') updateFollow = (state, author) => {
99 | state.article.author = author;
100 | return state;
101 | };
102 |
103 | @on('edit-article') editArticle = (state, article) => {
104 | document.location.hash = `#/editor/${article.slug}`;
105 | };
106 |
107 | @on('delete-article') deleteArticle = state => ({
108 | ...state,
109 | deleting: true
110 | });
111 |
112 | @on('ok-delete-article') okDelete = (state) => {
113 | articles.delete(state.article.slug);
114 | document.location.hash = '#/';
115 | return { ...state, deleting: false };
116 | };
117 |
118 | @on('cancel-delete-article') cancelDelete = state => ({
119 | ...state,
120 | deleting: false
121 | });
122 | }
123 |
124 | export default new ArticleComponent().mount('my-app');
125 |
--------------------------------------------------------------------------------
/src/components/profile.tsx:
--------------------------------------------------------------------------------
1 | import app, { Component, on } from 'apprun';
2 | import { IProfile } from '../models';
3 | import { articles, profile , auth } from '../api';
4 | import Articles from './article-list';
5 | import Pages from './page-list';
6 |
7 | const PAGE_SIZE = 10;
8 |
9 | class ProfileComponent extends Component {
10 | state = {
11 | name: '',
12 | type: 'articles',
13 | articles: [],
14 | page: 1
15 | };
16 |
17 | view = (state) => {
18 | const profile = state.profile as IProfile;
19 | if (!profile) {return;}
20 | return (
21 |
39 |
53 |
58 |
40 |
52 | 53 |
54 |
56 |
22 |
78 | );
79 | };
80 |
81 | updateState = async (state, name, type, page) => {
82 | name = decodeURIComponent(name || state.name);
83 | type = type || state.type;
84 | page = parseInt(page) || state.page;
85 | let newState = state;
86 | if (name !== state.name) {
87 | const profileResult = await profile.get(name);
88 | newState = { ...newState, profile: profileResult.profile };
89 | }
90 | if (name !== state.name || type !== state.type || page !== state.page) {
91 | const limit = PAGE_SIZE;
92 | const offset = (page - 1) * limit;
93 | const articleResult =
94 | type === 'favorites'
95 | ? await articles.search({ favorited: name, offset, limit })
96 | : await articles.search({ author: name, offset, limit });
97 | newState = {
98 | ...newState,
99 | name,
100 | type,
101 | page,
102 | articles: articleResult.articles,
103 | max: articleResult.articlesCount
104 | };
105 | }
106 | return newState;
107 | };
108 |
109 | @on('#/profile') root = (state, name, type, page) => auth.authorized() ? this.updateState(state, name, type, page) : null;
110 |
111 | @on('update-article') updateArticle = (state, article) => {
112 | state.articles = state.articles.map((a) => {
113 | return a.slug === article.slug ? article : a;
114 | });
115 | return state;
116 | };
117 |
118 | @on('update-follow') updateFollow = (state, profile) => ({ ...state, profile });
119 | }
120 |
121 | export default new ProfileComponent().mount('my-app');
122 |
--------------------------------------------------------------------------------
/tests/auto-events.spec.ts:
--------------------------------------------------------------------------------
1 | import home from '../src/components/home';
2 | import signin from '../src/components/signin';
3 | import register from '../src/components/register';
4 | import editor from '../src/components/editor';
5 | import settings from '../src/components/settings';
6 | import profile from '../src/components/profile';
7 | import article from '../src/components/article';
8 | import header from '../src/components/header';
9 |
10 | // import { tags, articles, comments } from '../src/api';
11 | import './mocks';
12 |
13 | describe('HeaderComponent', ()=>{
14 | it ('should handle event: /set-user', ()=>{
15 | header.run('/set-user');
16 | expect(header.state).toBeTruthy();
17 | })
18 | });
19 |
20 | describe('HomeComponent', () => {
21 | it('should handle event: #/', () => {
22 | home.run('#/');
23 | expect(home.state).toBeTruthy();
24 | })
25 | it('should handle event: #/feed', () => {
26 | home.run('#/feed');
27 | expect(home.state).toBeTruthy();
28 | })
29 | it('should handle event: #/tag', () => {
30 | home.run('#/tag');
31 | expect(home.state).toBeTruthy();
32 | })
33 | it('should handle event: update-article', () => {
34 | home.run('update-article');
35 | expect(home.state).toBeTruthy();
36 | })
37 | });
38 |
39 | describe('SigninComponent', () => {
40 | it('should handle event: #/login', () => {
41 | signin.run('#/login');
42 | expect(signin.state).toBeTruthy();
43 | })
44 | it('should handle event: #/logout', () => {
45 | signin.run('#/logout');
46 | expect(signin.state).toBeTruthy();
47 | })
48 | it('should handle event: sign-in', () => {
49 | signin.run('sign-in');
50 | expect(signin.state).toBeTruthy();
51 | })
52 | });
53 |
54 | describe('RegisterComponent', () => {
55 | it('should handle event: #/register', () => {
56 | register.run('#/register');
57 | expect(register.state).toBeTruthy();
58 | })
59 | it('should handle event: register', () => {
60 | register.run('register');
61 | expect(register.state).toBeTruthy();
62 | })
63 | });
64 |
65 | describe('ProfileComponent', () => {
66 | it('should handle event: #/profile', () => {
67 | profile.run('#/profile');
68 | expect(profile.state).toBeTruthy();
69 | })
70 | it('should handle event: update-article', () => {
71 | profile.run('update-article');
72 | expect(profile.state).toBeTruthy();
73 | })
74 | it('should handle event: update-follow', () => {
75 | profile.run('update-follow');
76 | expect(profile.state).toBeTruthy();
77 | })
78 | });
79 |
80 | describe('SettingsComponent', () => {
81 | it('should handle event: #/settings', () => {
82 | settings.run('#/settings');
83 | expect(settings.state).toBeTruthy();
84 | })
85 | it('should handle event: submit-settings', () => {
86 | settings.run('submit-settings');
87 | expect(settings.state).toBeTruthy();
88 | })
89 | xit('should handle event: ok', () => {
90 | settings.run('ok');
91 | expect(settings.state).toBeTruthy();
92 | })
93 | xit('should handle event: cancel', () => {
94 | settings.run('cancel');
95 | expect(settings.state).toBeTruthy();
96 | })
97 | });
98 |
99 | describe('EditorComponent', () => {
100 | it('should handle event: #/editor', () => {
101 | editor.run('#/editor');
102 | expect(editor.state).toBeTruthy();
103 | })
104 | it('should handle event: submit-article', () => {
105 | editor.run('submit-article');
106 | expect(editor.state).toBeTruthy();
107 | })
108 | });
109 |
110 | describe('ArticleComponent', () => {
111 | it('should handle event: #/article', () => {
112 | article.run('#/article', 'slug');
113 | expect(article.state).toBeTruthy();
114 | })
115 | it('should handle event: /new-comment', () => {
116 | article.run('/new-comment');
117 | expect(article.state).toBeTruthy();
118 | })
119 | xit('should handle event: /delete-comment', () => {
120 | article.run('/delete-comment');
121 | expect(article.state).toBeTruthy();
122 | })
123 | it('should handle event: update-article', () => {
124 | article.run('update-article');
125 | expect(article.state).toBeTruthy();
126 | })
127 | xit('should handle event: update-follow', () => {
128 | article.run('update-follow');
129 | expect(article.state).toBeTruthy();
130 | })
131 | xit('should handle event: edit-article', () => {
132 | article.run('edit-article');
133 | expect(article.state).toBeTruthy();
134 | })
135 | it('should handle event: delete-article', () => {
136 | article.run('delete-article');
137 | expect(article.state).toBeTruthy();
138 | })
139 | xit('should handle event: ok-delete-article', () => {
140 | article.run('ok-delete-article');
141 | expect(article.state).toBeTruthy();
142 | })
143 | xit('should handle event: cancel-delete-article', () => {
144 | article.run('cancel-delete-article');
145 | expect(article.state).toBeTruthy();
146 | })
147 | });
148 |
--------------------------------------------------------------------------------
/src/components/home.tsx:
--------------------------------------------------------------------------------
1 | import app, { Component, on } from 'apprun';
2 | import { auth, tags, articles } from '../api';
3 | import { IArticle } from '../models';
4 | import Articles from './article-list';
5 | import Pages from './page-list';
6 |
7 | const PAGE_SIZE = 10;
8 | const Tag = ({ tag }) => (
9 |
10 | {tag}
11 |
12 | );
13 |
14 | declare interface IState {
15 | type: '' | 'feed' | 'tag';
16 | articles: Array
23 |
46 |
47 |
24 |
45 |
25 |
44 |
26 | 
27 |
43 | {profile.username}
28 |{profile.bio}
29 | 42 |
48 |
77 |
49 |
76 |
50 |
75 |
51 |
67 |
68 |
35 |
41 |
93 | );
94 | };
95 |
96 | updateState = async (state, type: '' | 'feed' | 'tag', page, tag?: string) => {
97 | try {
98 | const tagList = state.tags.length ? { tags: state.tags } : await tags.all();
99 | page = parseInt(page) || 1;
100 | tag = tag || state.tag;
101 | const limit = PAGE_SIZE;
102 | const offset = (page - 1) * PAGE_SIZE;
103 | let feed;
104 | switch (type) {
105 | case 'feed':
106 | if (!auth.authorized()) {return { ...state, articles: [], max: 0 };}
107 | feed = await articles.feed({ limit, offset });
108 | break;
109 | case 'tag':
110 | feed = await articles.search({ tag, limit, offset });
111 | break;
112 | default:
113 | feed = await articles.search({ limit, offset });
114 | break;
115 | }
116 | page = Math.min(page, Math.floor(feed.articlesCount / PAGE_SIZE) + 1);
117 | return {
118 | ...state,
119 | tags: tagList.tags,
120 | type,
121 | page,
122 | tag,
123 | articles: feed.articles,
124 | max: feed.articlesCount
125 | };
126 | } catch ({ errors }) {
127 | return { ...state, errors, articles: [], max: 0 };
128 | }
129 | };
130 |
131 | @on('#/') root = async (state, page) => await this.updateState(state, '', page);
132 |
133 | @on('#/feed') feed = async (state, page) => await this.updateState(state, 'feed', page);
134 |
135 | @on('#/tag') tag = async (state, tag, page) => await this.updateState(state, 'tag', page, tag);
136 |
137 | @on('update-article') updateArticle = (state, article) => {
138 | state.articles = state.articles.map((a) => {
139 | return a.slug === article.slug ? article : a;
140 | });
141 | return state;
142 | };
143 | }
144 |
145 | export default new HomeComponent().mount('my-app');
146 |
--------------------------------------------------------------------------------
/tests/snapshot.spec.ts:
--------------------------------------------------------------------------------
1 | import home from '../src/components/home';
2 | import signin from '../src/components/signin';
3 | import register from '../src/components/register';
4 | import editor from '../src/components/editor';
5 | import settings from '../src/components/settings';
6 | import profile from '../src/components/profile';
7 | import article from '../src/components/article';
8 |
9 | describe('home component view', () => {
10 | it('view test', () => {
11 | const state = {
12 | type: 'feed',
13 | articles: [],
14 | tags: ['1', '2', '3'],
15 | max: 10,
16 | page: 1
17 | };
18 | const vdom = home['view'](state);
19 | expect(JSON.stringify(vdom, undefined, 2)).toMatchSnapshot();
20 | });
21 | });
22 |
23 | describe('signin component', () => {
24 | it('view snapshot: #1', () => {
25 | const component = signin;
26 | const state = {
27 | 'messages': [],
28 | 'returnTo': '#/login'
29 | };
30 | const vdom = component['view'](state);
31 | expect(JSON.stringify(vdom, undefined, 2)).toMatchSnapshot();
32 | });
33 | });
34 |
35 | describe('register component', () => {
36 | it('view snapshot: #1', () => {
37 | const component = register;
38 | const state = {};
39 | const vdom = component['view'](state);
40 | expect(JSON.stringify(vdom, undefined, 2)).toMatchSnapshot();
41 | });
42 | });
43 |
44 | describe('editor component - new article', () => {
45 | it('view snapshot: #1', () => {
46 | const component = editor;
47 | const state = {
48 | 'article': {
49 | 'title': '',
50 | 'description': '',
51 | 'body': '',
52 | 'tagList': []
53 | }
54 | };
55 | const vdom = component['view'](state);
56 | expect(JSON.stringify(vdom, undefined, 2)).toMatchSnapshot();
57 | });
58 | });
59 |
60 | describe('settings component', () => {
61 | it('view snapshot: #1', () => {
62 | const component = settings;
63 | const state = {
64 | 'user': {
65 | 'id': 11159,
66 | 'email': '1@1test.com',
67 | 'createdAt': '2017-09-03T21:33:35.494Z',
68 | 'updatedAt': '2017-09-15T20:43:17.712Z',
69 | 'username': 'user 1',
70 | 'bio': 'test user 1',
71 | 'image': 'https://static.productionready.io/images/smiley-cyrus.jpg',
72 | 'token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MTExNTksInVzZXJuYW1lIjoidXNlciAxIiwiZXhwIjoxNTM3NTg0ODY3fQ.oKbqH7fNkLQE7IuwsIlBHXcPJ9rP7VTeBBiIAXgS0Gw'
73 | }
74 | };
75 | const vdom = component['view'](state);
76 | expect(JSON.stringify(vdom, undefined, 2)).toMatchSnapshot();
77 | });
78 | });
79 |
80 | describe('profile component', () => {
81 | it('view snapshot: #1', () => {
82 | const component = profile;
83 | const state = {
84 | 'name': 'user 1',
85 | 'type': 'articles',
86 | 'articles': [
87 | {
88 | 'title': 'Hello world',
89 | 'slug': 'hello-world-6n0suv',
90 | 'body': 'Hello world',
91 | 'createdAt': '2018-07-21T13:55:08.520Z',
92 | 'updatedAt': '2018-07-21T13:55:08.520Z',
93 | 'tagList': [],
94 | 'description': 'Hello world',
95 | 'author': {
96 | 'username': 'user 1',
97 | 'bio': 'test user 1',
98 | 'image': 'https://static.productionready.io/images/smiley-cyrus.jpg',
99 | 'following': false
100 | },
101 | 'favorited': false,
102 | 'favoritesCount': 0
103 | },
104 | {
105 | 'title': 'OK',
106 | 'slug': 'ok-fakc89',
107 | 'body': '1,2',
108 | 'createdAt': '2018-01-03T16:54:12.060Z',
109 | 'updatedAt': '2018-01-03T16:54:12.060Z',
110 | 'tagList': [
111 | '2',
112 | '1'
113 | ],
114 | 'description': 'OK',
115 | 'author': {
116 | 'username': 'user 1',
117 | 'bio': 'test user 1',
118 | 'image': 'https://static.productionready.io/images/smiley-cyrus.jpg',
119 | 'following': false
120 | },
121 | 'favorited': false,
122 | 'favoritesCount': 1
123 | },
124 | {
125 | 'title': 'new post - edit',
126 | 'slug': 'new-post-qmr2hl',
127 | 'body': 'new - edit asasasasasa dsdsds',
128 | 'createdAt': '2017-09-11T03:10:42.711Z',
129 | 'updatedAt': '2017-09-11T03:24:07.751Z',
130 | 'tagList': [],
131 | 'description': '',
132 | 'author': {
133 | 'username': 'user 1',
134 | 'bio': 'test user 1',
135 | 'image': 'https://static.productionready.io/images/smiley-cyrus.jpg',
136 | 'following': false
137 | },
138 | 'favorited': true,
139 | 'favoritesCount': 3
140 | },
141 | {
142 | 'title': 'An article - edited',
143 | 'slug': 'an-article-edited-n993c6',
144 | 'body': 'We\'ve gone to great lengths to adhere to the [RealWorld](https://github.com/gothinkster/realworld) community style guides & best practices.',
145 | 'createdAt': '2017-09-08T01:27:01.178Z',
146 | 'updatedAt': '2017-09-08T01:27:01.178Z',
147 | 'tagList': [],
148 | 'description': '',
149 | 'author': {
150 | 'username': 'user 1',
151 | 'bio': 'test user 1',
152 | 'image': 'https://static.productionready.io/images/smiley-cyrus.jpg',
153 | 'following': false
154 | },
155 | 'favorited': true,
156 | 'favoritesCount': 2
157 | },
158 | {
159 | 'title': 'An article',
160 | 'slug': 'an-article-kchbx7',
161 | 'body': 'We\'ve gone to great lengths to adhere to the [RealWorld](https://github.com/gothinkster/realworld) community style guides & best practices.',
162 | 'createdAt': '2017-09-08T01:14:49.190Z',
163 | 'updatedAt': '2017-09-08T01:14:49.190Z',
164 | 'tagList': [],
165 | 'description': '',
166 | 'author': {
167 | 'username': 'user 1',
168 | 'bio': 'test user 1',
169 | 'image': 'https://static.productionready.io/images/smiley-cyrus.jpg',
170 | 'following': false
171 | },
172 | 'favorited': false,
173 | 'favoritesCount': 0
174 | },
175 | {
176 | 'title': 't2',
177 | 'slug': 't2-b5bp4w',
178 | 'body': 't2',
179 | 'createdAt': '2017-09-05T03:14:26.450Z',
180 | 'updatedAt': '2017-09-05T03:14:26.450Z',
181 | 'tagList': [
182 | '3',
183 | '2',
184 | '1'
185 | ],
186 | 'description': '',
187 | 'author': {
188 | 'username': 'user 1',
189 | 'bio': 'test user 1',
190 | 'image': 'https://static.productionready.io/images/smiley-cyrus.jpg',
191 | 'following': false
192 | },
193 | 'favorited': true,
194 | 'favoritesCount': 3
195 | },
196 | {
197 | 'title': 'Test New Post',
198 | 'slug': 't1-vd5veq',
199 | 'body': '[AppRun](https://github.com/yysun/apprun) is a 3K library for developing applications using the elm style model-view-update architecture and event pub and sub pattern.\n\nThe RealWorld example application is built using [AppRun](https://github.com/yysun/apprun) component that implements the model-view-update architecture.',
200 | 'createdAt': '2017-09-05T03:03:14.420Z',
201 | 'updatedAt': '2017-09-12T00:06:14.036Z',
202 | 'tagList': [
203 | 'test',
204 | 'AppRun',
205 | 'typescript'
206 | ],
207 | 'description': '',
208 | 'author': {
209 | 'username': 'user 1',
210 | 'bio': 'test user 1',
211 | 'image': 'https://static.productionready.io/images/smiley-cyrus.jpg',
212 | 'following': false
213 | },
214 | 'favorited': false,
215 | 'favoritesCount': 1
216 | }
217 | ],
218 | 'page': 1,
219 | 'profile': {
220 | 'username': 'user 1',
221 | 'bio': 'test user 1',
222 | 'image': 'https://static.productionready.io/images/smiley-cyrus.jpg',
223 | 'following': false
224 | },
225 | 'max': 7
226 | };
227 | const vdom = component['view'](state);
228 | expect(JSON.stringify(vdom, undefined, 2)).toMatchSnapshot();
229 | });
230 | });
231 |
232 | describe('article component', () => {
233 | it('view snapshot: #1', () => {
234 | const component = article;
235 | const state = {
236 | 'article': {
237 | 'title': 'Hello world',
238 | 'slug': 'hello-world-6n0suv',
239 | 'body': 'Hello world',
240 | 'createdAt': '2018-07-21T13:55:08.520Z',
241 | 'updatedAt': '2018-07-21T13:55:08.520Z',
242 | 'tagList': [],
243 | 'description': 'Hello world',
244 | 'author': {
245 | 'username': 'user 1',
246 | 'bio': 'test user 1',
247 | 'image': 'https://static.productionready.io/images/smiley-cyrus.jpg',
248 | 'following': false
249 | },
250 | 'favorited': false,
251 | 'favoritesCount': 0
252 | },
253 | 'comments': []
254 | };
255 |
256 | const vdom = component['view'](state);
257 | expect(JSON.stringify(vdom, undefined, 2)).toMatchSnapshot();
258 | });
259 | });
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | (()=>{"use strict";var t={n:e=>{var s=e&&e.__esModule?()=>e.default:()=>e;return t.d(s,{a:s}),s},d:(e,s)=>{for(var o in s)t.o(s,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:s[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)};const e=apprun;var s=t.n(e);function o(t,e,s,o){var a,n=arguments.length,i=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,s):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(t,e,s,o);else for(var r=t.length-1;r>=0;r--)(a=t[r])&&(i=(n<3?a(i):n>3?a(e,s,i):a(e,s))||i);return n>3&&i&&Object.defineProperty(e,s,i),i}function a(t,e,s,o){return new(s||(s=Promise))((function(a,n){function i(t){try{l(o.next(t))}catch(t){n(t)}}function r(t){try{l(o.throw(t))}catch(t){n(t)}}function l(t){var e;t.done?a(t.value):(e=t.value,e instanceof s?e:new s((function(t){t(e)}))).then(i,r)}l((o=o.apply(t,e||[])).next())}))}Object.create,Object.create;class n extends e.Component{constructor(){super(...arguments),this.state={},this.view=t=>{const e=t.user;return s().h("ul",{class:"nav navbar-nav pull-xs-right"},s().h("li",{class:"nav-item"},s().h("a",{class:"nav-link active",href:"#/"},"Home")),e&&s().h("li",{class:"nav-item"},s().h("a",{class:"nav-link",href:"#/editor"},s().h("i",{class:"ion-compose"})," New Post")),e&&s().h("li",{class:"nav-item"},s().h("a",{class:"nav-link",href:"#/settings"},s().h("i",{class:"ion-gear-a"})," Settings")),!e&&s().h("li",{class:"nav-item"},s().h("a",{class:"nav-link",href:"#/login"},"Sign In")),!e&&s().h("li",{class:"nav-item"},s().h("a",{class:"nav-link",href:"#/register"},"Sign Up")),e&&s().h("li",{class:"nav-item"},s().h("a",{class:"nav-link",href:`#/profile/${e.username}`},e.username)),e&&s().h("li",{class:"nav-item"},s().h("a",{class:"nav-link",href:"#/logout"},"Sign Out")))},this.setUser=(t,e)=>Object.assign(Object.assign({},t),{user:e})}}o([(0,e.on)("/set-user")],n.prototype,"setUser",void 0),(new n).start("header");let i=window&&window.localStorage&&window.localStorage.getItem("jwt")||"";function r(t){i=t,window.localStorage&&(t?window.localStorage.setItem("jwt",t):window.localStorage.removeItem("jwt"))}function l(t,e,s){return a(this,void 0,void 0,(function*(){const o={"Content-Type":"application/json; charset=utf-8"};i&&(o.Authorization=`Token ${i}`);const a=yield window.fetch(`${defaultBasePath}${e}`,{method:t,headers:o,body:s&&JSON.stringify(s)});if(401===a.status)throw r(null),new Error("401");const n=yield a.json();if(!a.ok)throw n;return n}))}function c(t){return l("GET",t)}function u(t,e){return l("POST",t,e)}function h(t){return l("DELETE",t)}function d(t,e){return l("PUT",t,e)}function m(t){const e=[];for(const s in t)Object.prototype.hasOwnProperty.call(t,s)&&e.push(encodeURIComponent(s)+"="+encodeURIComponent(t[s]));return e.join("&")}function p(t){const e={};if("object"==typeof t&&"FORM"===t.nodeName)for(let s=0;s
42 |
92 |
43 |
91 |
44 |
80 |
45 |
72 |
73 |
81 |
89 |
90 | - \n
- \n \n Home\n \n \n {user && (\n
- \n \n New Post\n \n \n )}\n {user && (\n
- \n \n Settings\n \n \n )}\n {!user && (\n
- \n \n Sign In\n \n \n )}\n {!user && (\n
- \n \n Sign Up\n \n \n )}\n {user && (\n
- \n \n {user.username}\n \n \n )}\n {user && (\n
- \n \n Sign Out\n \n \n )}\n
\n
\n );\n}\n\nexport default function ({ articles, component }: { articles: Array\n \n \n \n \n {article.favoritesCount}\n \n
\n \n \n \n {article.author.username}\n \n {new Date(article.updatedAt).toLocaleString()}\n
\n {article.title}
\n{article.description}
\n Read more...\n \n \nNo articles are here... yet.
\n );\n}\n","import app from 'apprun';\n\nexport default function ({ max, selected, link }) {\n const pages = new Array(max).fill(0);\n return (\n \n );\n}\n","import app, { Component, on } from 'apprun';\nimport { auth, tags, articles } from '../api';\nimport { IArticle } from '../models';\nimport Articles from './article-list';\nimport Pages from './page-list';\n\nconst PAGE_SIZE = 10;\nconst Tag = ({ tag }) => (\n \n {tag}\n \n);\n\ndeclare interface IState {\n type: '' | 'feed' | 'tag';\n articles: Array\n \n
\n );\n };\n\n updateState = async (state, type: '' | 'feed' | 'tag', page, tag?: string) => {\n try {\n const tagList = state.tags.length ? { tags: state.tags } : await tags.all();\n page = parseInt(page) || 1;\n tag = tag || state.tag;\n const limit = PAGE_SIZE;\n const offset = (page - 1) * PAGE_SIZE;\n let feed;\n switch (type) {\n case 'feed':\n if (!auth.authorized()) {return { ...state, articles: [], max: 0 };}\n feed = await articles.feed({ limit, offset });\n break;\n case 'tag':\n feed = await articles.search({ tag, limit, offset });\n break;\n default:\n feed = await articles.search({ limit, offset });\n break;\n }\n page = Math.min(page, Math.floor(feed.articlesCount / PAGE_SIZE) + 1);\n return {\n ...state,\n tags: tagList.tags,\n type,\n page,\n tag,\n articles: feed.articles,\n max: feed.articlesCount\n };\n } catch ({ errors }) {\n return { ...state, errors, articles: [], max: 0 };\n }\n };\n\n @on('#/') root = async (state, page) => await this.updateState(state, '', page);\n\n @on('#/feed') feed = async (state, page) => await this.updateState(state, 'feed', page);\n\n @on('#/tag') tag = async (state, tag, page) => await this.updateState(state, 'tag', page, tag);\n\n @on('update-article') updateArticle = (state, article) => {\n state.articles = state.articles.map((a) => {\n return a.slug === article.slug ? article : a;\n });\n return state;\n };\n}\n\nexport default new HomeComponent().mount('my-app');\n","import app from 'apprun';\n\nexport default function ({ errors }) {\n return (\n \n );\n}\n","import app, { Component, on } from 'apprun';\nimport { auth, serializeObject } from '../api';\n\nimport Errors from './error-list';\n\nclass SigninComponent extends Component {\n state = {};\n\n view = (state) => {\n if (!state || state instanceof Promise) {return;}\n return (\n \n
\n \n
\n \n
\n \n
\n - \n
- \n
- \n \n Global Feed\n \n \n {state.tag ? (\n
- \n
\n \n
\n \n
\n );\n };\n\n @on('#/login') login = state => !auth.current() ? { ...state, messages: [], returnTo: document.location.hash } : location.href = '#/';\n @on('#/logout') logout = () => {\n app.run('/set-user', null);\n document.location.hash = '#/';\n };\n\n @on('sign-in') signIn = async (state, e) => {\n try {\n e.preventDefault();\n const session = await auth.signIn(serializeObject(e.target));\n app.run('/set-user', session.user);\n const returnTo: string = (state.returnTo || '').replace(/#\\/login\\/?/, '');\n if (!returnTo) {document.location.hash = '#/feed';} else {\n app.run('route', returnTo);\n history.pushState(null, null, returnTo);\n }\n } catch ({ errors }) {\n return { ...state, errors };\n }\n };\n}\n\nexport default new SigninComponent().mount('my-app');\n","import app, { Component, on } from 'apprun';\nimport { auth, serializeObject } from '../api';\nimport Errors from './error-list';\n\nclass RegisterComponent extends Component {\n state = {};\n\n view = (state) => {\n if (!state || state instanceof Promise) {return;}\n return (\n \n
\n \n \n
\n \n
\n );\n };\n\n @on('#/register') register = (state, messages) => !auth.current() ? { ...state, messages } : location.href = '#/';\n\n @on('register') submitRegistration = async (state, e) => {\n try {\n e.preventDefault();\n const session = await auth.register(serializeObject(e.target));\n app.run('/set-user', session.user);\n app.run('route', '#/');\n } catch ({ errors }) {\n return { ...state, errors };\n }\n };\n}\n\nexport default new RegisterComponent().mount('my-app');\n","import app, { Component, on } from 'apprun';\nimport { IProfile } from '../models';\nimport { articles, profile , auth } from '../api';\nimport Articles from './article-list';\nimport Pages from './page-list';\n\nconst PAGE_SIZE = 10;\n\nclass ProfileComponent extends Component {\n state = {\n name: '',\n type: 'articles',\n articles: [],\n page: 1\n };\n\n view = (state) => {\n const profile = state.profile as IProfile;\n if (!profile) {return;}\n return (\n \n
\n \n \n
\n \n
\n );\n };\n\n updateState = async (state, name, type, page) => {\n name = decodeURIComponent(name || state.name);\n type = type || state.type;\n page = parseInt(page) || state.page;\n let newState = state;\n if (name !== state.name) {\n const profileResult = await profile.get(name);\n newState = { ...newState, profile: profileResult.profile };\n }\n if (name !== state.name || type !== state.type || page !== state.page) {\n const limit = PAGE_SIZE;\n const offset = (page - 1) * limit;\n const articleResult =\n type === 'favorites'\n ? await articles.search({ favorited: name, offset, limit })\n : await articles.search({ author: name, offset, limit });\n newState = {\n ...newState,\n name,\n type,\n page,\n articles: articleResult.articles,\n max: articleResult.articlesCount\n };\n }\n return newState;\n };\n\n @on('#/profile') root = (state, name, type, page) => auth.authorized() ? this.updateState(state, name, type, page) : null;\n\n @on('update-article') updateArticle = (state, article) => {\n state.articles = state.articles.map((a) => {\n return a.slug === article.slug ? article : a;\n });\n return state;\n };\n\n @on('update-follow') updateFollow = (state, profile) => ({ ...state, profile });\n}\n\nexport default new ProfileComponent().mount('my-app');\n","import app from 'apprun';\n\nexport default function ({ title, body, ok, cancel, onOK, onCancel }) {\n return (\n \n
\n\n \n
\n \n
\n \n \n \n {profile.following ? (\n \n Unfollow {profile.username}\n \n ) : (\n \n Follow {profile.username}\n \n )}\n \n
\n {profile.username}
\n{profile.bio}
\n\n
\n \n
\n \n
\n \n
\n - \n
- \n
- \n
\n
\n );\n}\n","import app, { Component, on } from 'apprun';\nimport { serializeObject, auth } from '../api';\nimport Errors from './error-list';\nimport Modal from './modal';\n\nclass SettingsComponent extends Component {\n state = {};\n\n view = (state) => {\n const user = state.user;\n if (!user) {return;}\n return (\n \n \n
\n \n \n {state.showModal ? (\n
\n );\n };\n\n @on('#/settings') settings = () => {\n if (!auth.authorized()) {return;}\n return { user: app['user'] };\n };\n\n @on('submit-settings') submitSettings = async (state, e) => {\n try {\n e.preventDefault();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const user = serializeObject\n
\n \n
\n \n {state.errors &&
\n Your Settings
\n \n\n
\n );\n };\n\n @on('#/editor') root = async (state, slug) => {\n if (!auth.authorized()) {return;}\n let article;\n if (slug) {\n const result = await articles.get(slug);\n article = result.article;\n }\n article = article || { title: '', description: '', body: '', tagList: [] };\n return { article };\n };\n\n @on('submit-article') submitArticle = async (state, e) => {\n try {\n e.preventDefault();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const article = serializeObject\n
\n \n
\n \n {state.errors &&
\n \n
\n );\n}\n\nexport default function ({ comments }: { comments: Array\n
\n \n
{`_html:${marked(comment.body)}`}
\n \n\n \n \n \n \n \n {comment.author.username}\n \n {new Date(comment.createdAt).toLocaleString()}\n {app['user'] && app['user'].username === comment.author.username && (\n \n )}\n
\n \n \n
\n );\n}\n","import app from 'apprun';\nimport { IArticle } from '../models';\n\nexport default function ArticleMeta({ article, component }: { article: IArticle; component }) {\n const favClass = article.favorited ? 'btn-primary' : 'btn-outline-primary';\n const followClass = article.author.following ? 'btn-secondary' : 'btn-outline-secondary';\n return (\n \n \n \n \n \n Edit Article\n \n \n \n Delete Article\n \n \n ) : (\n \n \n {article.author.following ? (\n \n Unfollow {article.author.username}\n \n ) : (\n \n Follow {article.author.username}\n \n )}\n {' '}\n \n \n \n Favorite Post ({article.favoritesCount})\n \n \n )}\n
\n );\n}\n","import app, { Component, on } from 'apprun';\nimport { articles, comments } from '../api';\nimport { IArticle } from '../models';\nimport Comments from './comment-list';\nimport ArticleMeta from './article-meta';\nimport Modal from './modal';\nimport { marked } from 'marked';\n\nclass ArticleComponent extends Component {\n state = {\n article: null,\n comments: []\n };\n\n view = (state) => {\n const article = state.article as IArticle;\n if (!article) {return;}\n return (\n \n \n {article.author.username}\n \n {new Date(article.updatedAt).toLocaleString()}\n
\n\n {app['user'] && app['user'].username === article.author.username ? (\n \n \n {state.deleting && (\n
\n );\n };\n\n @on('#/article') root = async (state, slug) => {\n let article = state.article as IArticle;\n let _comments = state.comments;\n if (!article || article.slug !== slug) {\n const result = await articles.get(slug);\n article = result.article;\n const commentsResponse = await comments.forArticle(article.slug);\n _comments = commentsResponse.comments;\n }\n return { ...state, article, comments: _comments };\n };\n\n @on('/new-comment') newComment = async (state, e) => {\n try {\n e.preventDefault();\n const comment = e.target['comment'].value;\n if (!comment) {return;}\n await comments.create(state.article.slug, { body: comment });\n const commentsResponse = await comments.forArticle(state.article.slug);\n return { ...state, comments: commentsResponse.comments };\n } catch ({ errors }) {\n return { ...state, errors };\n }\n };\n\n @on('/delete-comment') deleteComment = async (state, comment) => {\n await comments.delete(this.state.article.slug, comment.id);\n const commentsResponse = await comments.forArticle(state.article.slug);\n return { ...state, comments: commentsResponse.comments };\n };\n\n @on('update-article') updateArticle = (state, article) => ({\n ...state,\n article\n });\n\n @on('update-follow') updateFollow = (state, author) => {\n state.article.author = author;\n return state;\n };\n\n @on('edit-article') editArticle = (state, article) => {\n document.location.hash = `#/editor/${article.slug}`;\n };\n\n @on('delete-article') deleteArticle = state => ({\n ...state,\n deleting: true\n });\n\n @on('ok-delete-article') okDelete = (state) => {\n articles.delete(state.article.slug);\n document.location.hash = '#/';\n return { ...state, deleting: false };\n };\n\n @on('cancel-delete-article') cancelDelete = state => ({\n ...state,\n deleting: false\n });\n}\n\nexport default new ArticleComponent().mount('my-app');\n","import app from 'apprun';\n\nimport './components/header';\nimport './components/home';\nimport './components/signin';\nimport './components/register';\nimport './components/profile';\nimport './components/settings';\nimport './components/editor';\nimport './components/article';\n\napp.on('#', (route, ...p) => {\n app.run(`#/${route || ''}`, ...p);\n});\n\napp.once('/set-user', () => {\n app.route(location.hash);\n});\n\napp.run('/get-user');"],"names":["__webpack_require__","module","getter","__esModule","d","a","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","apprun","__decorate","decorators","target","desc","c","arguments","length","r","getOwnPropertyDescriptor","Reflect","decorate","i","__awaiter","thisArg","_arguments","P","generator","Promise","resolve","reject","fulfilled","value","step","next","e","rejected","result","done","then","apply","create","HeaderComponent","Component","state","view","user","class","href","username","setUser","on","start","access_token","window","localStorage","getItem","setToken","token","setItem","removeItem","fetchAsync","method","url","body","headers","response","defaultBasePath","JSON","stringify","status","Error","json","ok","post","del","put","toQueryString","parts","push","encodeURIComponent","join","serializeObject","form","nodeName","elements","field","name","type","tempvalue","j","options","selected","charAt","substring","checked","auth","articles","request","slug","comments","Article","props","article","favClass","favorited","author","image","src","Date","updatedAt","toLocaleString","component","favoritesCount","title","description","tagList","map","tag","max","link","pages","Array","fill","page","idx","current","document","location","reload","following","profile","run","Tag","HomeComponent","tags","this","Math","floor","updateState","parseInt","limit","offset","feed","min","articlesCount","errors","root","updateArticle","keys","mount","SigninComponent","placeholder","login","messages","returnTo","hash","logout","signIn","preventDefault","session","replace","history","pushState","RegisterComponent","register","submitRegistration","ProfileComponent","bio","decodeURIComponent","newState","profileResult","articleResult","updateFollow","cancel","onOK","onCancel","role","SettingsComponent","showModal","rows","email","password","settings","submitSettings","EditorComponent","submitArticle","split","marked","Comment","comment","createdAt","ArticleMeta","followClass","ArticleComponent","deleting","_comments","newComment","commentsResponse","deleteComment","commentId","id","editArticle","deleteArticle","okDelete","cancelDelete","route","p"],"sourceRoot":""}
--------------------------------------------------------------------------------
\n
\n
\n \n
\n \n
\n {`_html:${marked(article.body)}`}
\n \n\n
\n
\n