Loading article...
,
55 | some: (article) => (
56 |
57 |
74 | ),
75 | });
76 | }
77 |
78 | async function onLoad(slug: string) {
79 | store.dispatch(initializeArticlePage());
80 |
81 | try {
82 | const article = await getArticle(slug);
83 | store.dispatch(loadArticle(article));
84 |
85 | const comments = await getArticleComments(slug);
86 | store.dispatch(loadComments(comments));
87 | } catch {
88 | redirect('');
89 | }
90 | }
91 |
92 | function ArticlePageBanner(props: { article: Article; metaSection: MetaSectionState; user: Option
60 |
66 | 67 |
73 |
61 |
64 |
65 | {article.body}
62 | 66 | 67 |
68 |
70 |
71 |
95 |
101 | );
102 | }
103 |
104 | function ArticleMeta({
105 | article,
106 | metaSection: { submittingFavorite, submittingFollow, deletingArticle },
107 | user,
108 | }: {
109 | article: Article;
110 | metaSection: MetaSectionState;
111 | user: Option
96 |
100 | {props.article.title}
97 | 98 |
115 |
127 | );
128 | }
129 |
130 | function ArticleAuthorInfo({
131 | article: {
132 | author: { username, image },
133 | createdAt,
134 | },
135 | }: {
136 | article: Article;
137 | }) {
138 | return (
139 |
144 |
145 | {username}
146 |
147 | {format(createdAt, 'PP')}
148 |
149 |
268 |
297 | );
298 | }
299 |
300 | function CommentForm({
301 | user: { image },
302 | commentBody,
303 | slug,
304 | submittingComment,
305 | }: {
306 | user: User;
307 | commentBody: string;
308 | slug: string;
309 | submittingComment: boolean;
310 | }) {
311 | return (
312 |
329 | );
330 | }
331 |
332 | function onCommentChange(ev: React.ChangeEvent
269 | {user.match({
270 | none: () => (
271 |
289 | {comments.map((comment, index) => (
290 |
293 | ),
294 | })}
295 |
296 | 272 | Sign in or sign up to add comments on this article. 273 |
274 | ), 275 | some: (user) => ( 276 |Loading comments...
,
287 | some: (comments) => (
288 |
365 |
388 | );
389 | }
390 |
391 | async function onDeleteComment(slug: string, id: number) {
392 | await deleteComment(slug, id);
393 | store.dispatch(loadComments(await getArticleComments(slug)));
394 | }
395 |
--------------------------------------------------------------------------------
/src/components/Pages/EditArticle/EditArticle.test.tsx:
--------------------------------------------------------------------------------
1 | import { Err, Ok } from '@hqoss/monads';
2 | import { act, fireEvent, render, screen } from '@testing-library/react';
3 | import React from 'react';
4 | import { MemoryRouter, Route } from 'react-router-dom';
5 | import { getArticle, updateArticle } from '../../../services/conduit';
6 | import { store } from '../../../state/store';
7 | import { loadUser } from '../../App/App.slice';
8 | import { initializeEditor } from '../../ArticleEditor/ArticleEditor.slice';
9 | import { EditArticle } from './EditArticle';
10 |
11 | jest.mock('../../../services/conduit.ts');
12 |
13 | const mockedGetArticle = getArticle as jest.Mock
366 |
368 | {body}
367 |
369 |
370 | 
371 |
372 |
373 |
374 | {username}
375 |
376 | {format(createdAt, 'PP')}
377 | {user.isSome() && user.unwrap().username === username && (
378 |
379 | onDeleteComment(slug, id)}
383 | >
384 |
385 | )}
386 |
387 |
16 | {renderBanner()}
17 |
18 |
32 |
33 | );
34 | }
35 |
36 | async function load() {
37 | store.dispatch(startLoadingArticles());
38 | store.dispatch(startLoadingTags());
39 |
40 | if (store.getState().app.user.isSome()) {
41 | store.dispatch(changeTab('Your Feed'));
42 | }
43 |
44 | const multipleArticles = await getFeedOrGlobalArticles();
45 | store.dispatch(loadArticles(multipleArticles));
46 |
47 | const tagsResult = await getTags();
48 | store.dispatch(loadTags(tagsResult.tags));
49 | }
50 |
51 | function renderBanner() {
52 | return (
53 |
19 |
27 |
28 |
29 |
31 |
54 |
59 | );
60 | }
61 |
62 | function buildTabsNames(selectedTab: string) {
63 | const { user } = store.getState().app;
64 |
65 | return Array.from(new Set([...(user.isSome() ? ['Your Feed'] : []), 'Global Feed', selectedTab]));
66 | }
67 |
68 | async function onPageChange(index: number) {
69 | store.dispatch(changePage(index));
70 |
71 | const multipleArticles = await getFeedOrGlobalArticles({ offset: (index - 1) * 10 });
72 | store.dispatch(loadArticles(multipleArticles));
73 | }
74 |
75 | async function onTabChange(tab: string) {
76 | store.dispatch(changeTab(tab));
77 | store.dispatch(startLoadingArticles());
78 |
79 | const multipleArticles = await getFeedOrGlobalArticles();
80 | store.dispatch(loadArticles(multipleArticles));
81 | }
82 |
83 | async function getFeedOrGlobalArticles(filters: FeedFilters = {}) {
84 | const { selectedTab } = store.getState().home;
85 | const finalFilters = {
86 | ...filters,
87 | tag: selectedTab.slice(2),
88 | };
89 |
90 | return await (selectedTab === 'Your Feed' ? getFeed : getArticles)(
91 | !selectedTab.startsWith('#') ? filters : finalFilters
92 | );
93 | }
94 |
95 | function HomeSidebar({ tags }: { tags: Option
55 |
58 | conduit
56 |A place to share your knowledge.
57 |
98 |
114 | );
115 | }
116 |
--------------------------------------------------------------------------------
/src/components/Pages/Login/Login.slice.ts:
--------------------------------------------------------------------------------
1 | import { createSlice, PayloadAction } from '@reduxjs/toolkit';
2 | import { GenericErrors } from '../../../types/error';
3 |
4 | export interface LoginState {
5 | user: {
6 | email: string;
7 | password: string;
8 | };
9 | errors: GenericErrors;
10 | loginIn: boolean;
11 | }
12 |
13 | const initialState: LoginState = {
14 | user: {
15 | email: '',
16 | password: '',
17 | },
18 | errors: {},
19 | loginIn: false,
20 | };
21 |
22 | const slice = createSlice({
23 | name: 'login',
24 | initialState,
25 | reducers: {
26 | initializeLogin: () => initialState,
27 | updateField: (
28 | state,
29 | { payload: { name, value } }: PayloadAction<{ name: keyof LoginState['user']; value: string }>
30 | ) => {
31 | state.user[name] = value;
32 | },
33 | updateErrors: (state, { payload: errors }: PayloadActionPopular Tags
99 | 100 | {tags.match({ 101 | none: () => Loading tags..., 102 | some: (tags) => ( 103 |
104 | {' '}
105 | {tags.map((tag) => (
106 | onTabChange(`# ${tag}`)}>
107 | {tag}
108 |
109 | ))}{' '}
110 |
111 | ),
112 | })}
113 |
16 |
17 |
36 |
37 |
38 | );
39 | }
40 |
41 | function onUpdateField(name: string, value: string) {
42 | store.dispatch(updateField({ name: name as keyof LoginState['user'], value }));
43 | }
44 |
45 | async function signIn(ev: React.FormEvent) {
46 | ev.preventDefault();
47 |
48 | if (store.getState().login.loginIn) return;
49 | store.dispatch(startLoginIn());
50 |
51 | const { email, password } = store.getState().login.user;
52 | const result = await login(email, password);
53 |
54 | result.match({
55 | ok: (user) => {
56 | location.hash = '#/';
57 | loadUserIntoApp(user);
58 | },
59 | err: (e) => {
60 | store.dispatch(updateErrors(e));
61 | },
62 | });
63 | }
64 |
--------------------------------------------------------------------------------
/src/components/Pages/NewArticle/NewArticle.test.tsx:
--------------------------------------------------------------------------------
1 | import { Err, Ok } from '@hqoss/monads';
2 | import { act, fireEvent, render, screen } from '@testing-library/react';
3 | import { createArticle } from '../../../services/conduit';
4 | import { store } from '../../../state/store';
5 | import { initializeEditor } from '../../ArticleEditor/ArticleEditor.slice';
6 | import { NewArticle } from './NewArticle';
7 |
8 | jest.mock('../../../services/conduit.ts');
9 |
10 | const mockedCreateArticle = createArticle as jest.Mock
25 | {profile.match({
26 | none: () => (
27 | redirect('settings')}
37 | />
38 | ),
39 | })}
40 |
41 |
55 | );
56 | }
57 |
58 | async function onLoad(username: string, favorites: boolean) {
59 | store.dispatch(initializeProfile());
60 | store.dispatch(startLoadingArticles());
61 |
62 | try {
63 | const profile = await getProfile(username);
64 | store.dispatch(loadProfile(profile));
65 |
66 | const articles = await getArticlesByType(username, favorites);
67 | store.dispatch(loadArticles(articles));
68 | } catch {
69 | location.href = '#/';
70 | }
71 | }
72 |
73 | async function getArticlesByType(username: string, favorites: boolean) {
74 | const { currentPage } = store.getState().articleViewer;
75 | return await getArticles({ [favorites ? 'favorited' : 'author']: username, offset: (currentPage - 1) * 10 });
76 | }
77 |
78 | function onFollowToggle(profile: Profile): () => void {
79 | return async () => {
80 | const { user } = store.getState().app;
81 | if (user.isNone()) {
82 | redirect('register');
83 | return;
84 | }
85 |
86 | store.dispatch(startSubmitting());
87 |
88 | const newProfile = await (profile.following ? unfollowUser : followUser)(profile.username);
89 | store.dispatch(loadProfile(newProfile));
90 | };
91 | }
92 |
93 | function onTabChange(username: string): (page: string) => void {
94 | return async (page) => {
95 | const favorited = page === 'Favorited Articles';
96 | location.hash = `#/profile/${username}${!favorited ? '' : '/favorites'}`;
97 | store.dispatch(startLoadingArticles());
98 | store.dispatch(loadArticles(await getArticlesByType(username, favorited)));
99 | };
100 | }
101 |
102 | function onPageChange(username: string, favorited: boolean): (index: number) => void {
103 | return async (index) => {
104 | store.dispatch(changePage(index));
105 | store.dispatch(loadArticles(await getArticlesByType(username, favorited)));
106 | };
107 | }
108 |
--------------------------------------------------------------------------------
/src/components/Pages/Register/Register.slice.ts:
--------------------------------------------------------------------------------
1 | import { createSlice, PayloadAction } from '@reduxjs/toolkit';
2 | import { GenericErrors } from '../../../types/error';
3 | import { UserForRegistration } from '../../../types/user';
4 |
5 | export interface RegisterState {
6 | user: UserForRegistration;
7 | errors: GenericErrors;
8 | signingUp: boolean;
9 | }
10 |
11 | const initialState: RegisterState = {
12 | user: {
13 | username: '',
14 | email: '',
15 | password: '',
16 | },
17 | errors: {},
18 | signingUp: false,
19 | };
20 |
21 | const slice = createSlice({
22 | name: 'register',
23 | initialState,
24 | reducers: {
25 | initializeRegister: () => initialState,
26 | updateField: (
27 | state,
28 | { payload: { name, value } }: PayloadAction<{ name: keyof RegisterState['user']; value: string }>
29 | ) => {
30 | state.user[name] = value;
31 | },
32 | updateErrors: (state, { payload: errors }: PayloadAction
28 | Loading profile...
29 |
30 | ),
31 | some: (profile) => (
32 |
42 |
54 |
43 |
53 |
44 |
52 |
18 |
19 |
40 |
41 | );
42 | }
43 |
44 | function onUpdateField(name: string, value: string) {
45 | store.dispatch(updateField({ name: name as keyof RegisterState['user'], value }));
46 | }
47 |
48 | function onSignUp(user: UserForRegistration) {
49 | return async (ev: React.FormEvent) => {
50 | ev.preventDefault();
51 | store.dispatch(startSigningUp());
52 | const result = await signUp(user);
53 |
54 | result.match({
55 | err: (e) => store.dispatch(updateErrors(e)),
56 | ok: (user) => {
57 | location.hash = '#/';
58 | loadUserIntoApp(user);
59 | },
60 | });
61 | };
62 | }
63 |
--------------------------------------------------------------------------------
/src/components/Pages/Settings/Settings.slice.ts:
--------------------------------------------------------------------------------
1 | import { createSlice, PayloadAction } from '@reduxjs/toolkit';
2 | import { User, UserSettings } from '../../../types/user';
3 | import { loadUser, logout } from '../../App/App.slice';
4 | import * as R from 'ramda';
5 | import { GenericErrors } from '../../../types/error';
6 |
7 | export interface SettingsState {
8 | user: UserSettings;
9 | errors: GenericErrors;
10 | updating: boolean;
11 | }
12 |
13 | const initialState: SettingsState = {
14 | user: { username: '', email: '', password: null, bio: null, image: null },
15 | errors: {},
16 | updating: false,
17 | };
18 |
19 | const slice = createSlice({
20 | name: 'settings',
21 | initialState,
22 | reducers: {
23 | initializeSettings: () => initialState,
24 | updateField: (state, { payload: { name, value } }: PayloadAction<{ name: keyof UserSettings; value: string }>) => {
25 | state.user[name] = value;
26 | },
27 | updateErrors: (state, { payload: errors }: PayloadAction
20 | }
28 | submitButtonText='Sign up'
29 | errors={errors}
30 | onChange={onUpdateField}
31 | onSubmit={onSignUp(user)}
32 | fields={[
33 | buildGenericFormField({ name: 'username', placeholder: 'Username' }),
34 | buildGenericFormField({ name: 'email', placeholder: 'Email' }),
35 | buildGenericFormField({ name: 'password', placeholder: 'Password', type: 'password' }),
36 | ]}
37 | />
38 |
39 | Sign up
21 |22 | Have an account? 23 |
24 | 25 |
25 |
26 |
56 |
57 | );
58 | }
59 |
60 | function onUpdateField(name: string, value: string) {
61 | store.dispatch(updateField({ name: name as keyof SettingsState['user'], value }));
62 | }
63 |
64 | function onUpdateSettings(user: UserSettings) {
65 | return async (ev: React.FormEvent) => {
66 | ev.preventDefault();
67 | store.dispatch(startUpdate());
68 | const result = await updateSettings(user);
69 |
70 | result.match({
71 | err: (e) => store.dispatch(updateErrors(e)),
72 | ok: (user) => {
73 | store.dispatch(loadUser(user));
74 | location.hash = '/';
75 | },
76 | });
77 | };
78 | }
79 |
80 | function _logout() {
81 | delete axios.defaults.headers.Authorization;
82 | localStorage.removeItem('token');
83 | store.dispatch(logout());
84 | location.hash = '/';
85 | }
86 |
--------------------------------------------------------------------------------
/src/components/Pagination/Pagination.test.tsx:
--------------------------------------------------------------------------------
1 | import { fireEvent, render, screen } from '@testing-library/react';
2 | import { Pagination } from './Pagination';
3 | import R from 'ramda';
4 |
5 | it('Should render correct amount of page buttons', () => {
6 | const { rerender } = render(
27 |
51 | 54 |
55 | Your Settings
28 | 29 |51 | 54 |
20 |
41 | );
42 | }
43 |
44 | function ToggleFollowButton({
45 | following,
46 | username,
47 | disabled,
48 | onClick,
49 | }: {
50 | following: boolean;
51 | username: string;
52 | disabled: boolean;
53 | onClick?: () => void;
54 | }) {
55 | return (
56 |
61 | );
62 | }
63 |
64 | function EditProfileButton({ disabled, onClick }: { disabled: boolean; onClick?: () => void }) {
65 | return (
66 |
69 | );
70 | }
71 |
--------------------------------------------------------------------------------
/src/config/settings.ts:
--------------------------------------------------------------------------------
1 | export default {
2 | baseApiUrl: 'https://api.realworld.io/api/',
3 | };
4 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/angelguzmaning/ts-redux-react-realworld-example-app/cb397562724ea7f53758d5511c220690b99fe2f5/src/index.css
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import ReactDOM from 'react-dom';
2 | import './index.css';
3 | import { App } from './components/App/App';
4 |
5 | ReactDOM.render(
21 |
40 |
22 |
39 |
23 |
24 |
38 | {username}
25 |{bio}
26 | 27 | {sessionUsername === username ? ( 28 |