Skip to content

Commit 5c38010

Browse files
loq24loq24
authored
Merge pull request #3 from loq24/feature/version-1-5
Feature/version 1 5
2 parents a94dd80 + bad5f9b commit 5c38010

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+1668
-359
lines changed

‎package.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,14 @@
4343
]
4444
},
4545
"devDependencies": {
46+
"@types/enzyme": "^3.10.3",
47+
"@types/enzyme-adapter-react-16": "^1.0.5",
48+
"@types/moxios": "^0.4.8",
4649
"@types/react-redux": "^7.1.1",
4750
"@types/react-router-dom": "^4.3.4",
48-
"@types/yup": "^0.26.22"
51+
"@types/yup": "^0.26.22",
52+
"enzyme": "^3.10.0",
53+
"enzyme-adapter-react-16": "^1.14.0",
54+
"moxios": "^0.4.0"
4955
}
5056
}

‎src/Root.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
import { Provider } from 'react-redux';
3+
import { createStore, applyMiddleware, AnyAction } from 'redux';
4+
import thunk from 'redux-thunk';
5+
import { rootReducer } from './reducers';
6+
import { ThunkDispatch } from 'redux-thunk';
7+
import { AuthUserAction, ActionAuthTypes, fetchCurrentUser } from './actions';
8+
9+
type RootProps = {
10+
children: React.ReactNode;
11+
initialState?: {};
12+
};
13+
14+
const Root: React.FC<RootProps> = ({ children, initialState = {} }) => {
15+
const store = createStore(rootReducer, initialState, applyMiddleware(thunk));
16+
const token = localStorage.getItem('_wp_react_typescipt_token');
17+
if (token) {
18+
store.dispatch<AuthUserAction>({ type: ActionAuthTypes.authUser });
19+
(store.dispatch as ThunkDispatch<{}, void, AnyAction>)(fetchCurrentUser());
20+
}
21+
return <Provider store={store}>{children}</Provider>;
22+
};
23+
24+
export default Root;

‎src/actions/auth.ts‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import axios from "axios";
2-
import { Dispatch } from "redux";
3-
import Constants from "../constants";
4-
import { ActionAuthTypes, ActionMessagesTypes } from "./types";
1+
import axios from 'axios';
2+
import { Dispatch } from 'redux';
3+
import Constants from '../constants';
4+
import { ActionAuthTypes, ActionMessagesTypes } from 'actions/types';
55

66
export const tokenHeader = (): { headers: { Authorization: string } } => {
7-
const token = localStorage.getItem("_wp_react_typescipt_token");
7+
const token = localStorage.getItem('_wp_react_typescipt_token');
88
return { headers: { Authorization: `Bearer ${token}` } };
99
};
1010

@@ -37,11 +37,11 @@ export const authUser: AuthUserType = (credentials, callback) => {
3737
dispatch<ClearMessageAction>({ type: ActionMessagesTypes.clearMsg });
3838
const response = await axios.post(`${Constants.jwtAuthUri}`, credentials);
3939
dispatch<AuthUserAction>({ type: ActionAuthTypes.authUser });
40-
localStorage.setItem("_wp_react_typescipt_token", response.data.token);
40+
localStorage.setItem('_wp_react_typescipt_token', response.data.token);
4141
} catch (error) {
4242
dispatch<WarningMessageAction>({
4343
type: ActionMessagesTypes.warningMsg,
44-
payload: "Incorrect username or password"
44+
payload: 'Incorrect username or password'
4545
});
4646
}
4747
callback();
@@ -58,13 +58,17 @@ export interface SuccessMessageAction {
5858
}
5959

6060
export const unAuthUser = () => {
61-
localStorage.removeItem("_wp_react_typescipt_token");
61+
localStorage.removeItem('_wp_react_typescipt_token');
6262
return (dispatch: Dispatch) => {
6363
dispatch<UnAuthUserAction>({ type: ActionAuthTypes.unAuthUser });
6464
dispatch<ClearMessageAction>({ type: ActionMessagesTypes.clearMsg });
6565
dispatch<SuccessMessageAction>({
6666
type: ActionMessagesTypes.successMsg,
67-
payload: "Thanks for trying the app!"
67+
payload: 'Thanks for trying the app!'
6868
});
6969
};
7070
};
71+
72+
export interface TestingAuthAction {
73+
type: ActionAuthTypes.forTesting;
74+
}

‎src/actions/index.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
export * from "./auth";
2-
export * from "./types";
3-
export * from "./wp";
1+
export * from 'actions/auth';
2+
export * from 'actions/types';
3+
export * from 'actions/wp';

‎src/actions/types.ts‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
11
export enum ActionWPTypes {
2-
fetchPosts = "FETCH_POSTS",
3-
fetchPost = "FETCH_POST",
4-
deletePost = "DELETE_POST",
5-
updatePost = "UPDATE_POST",
6-
publishPost = "PUBLISH_POST",
7-
fetchCurrentUser = "FETCH_CURRENT_USER"
2+
fetchPosts = 'FETCH_POSTS',
3+
fetchPost = 'FETCH_POST',
4+
deletePost = 'DELETE_POST',
5+
updatePost = 'UPDATE_POST',
6+
publishPost = 'PUBLISH_POST',
7+
fetchCurrentUser = 'FETCH_CURRENT_USER',
8+
forTesting = 'TESTING_WP_TYPE'
89
}
910

1011
export enum ActionAuthTypes {
11-
authUser = "AUTH_USER",
12-
unAuthUser = "UNAUTH_USER",
13-
currentUser = "CURRENT_USER"
12+
authUser = 'AUTH_USER',
13+
unAuthUser = 'UNAUTH_USER',
14+
currentUser = 'CURRENT_USER',
15+
forTesting = 'TESTING_AUTH_TYPE'
1416
}
1517

1618
export enum ActionMessagesTypes {
17-
warningMsg = "WARNING_MESSAGE",
18-
successMsg = "SUCCESS_MESSAGE",
19-
clearMsg = "CLEAR_MSG"
19+
warningMsg = 'WARNING_MESSAGE',
20+
successMsg = 'SUCCESS_MESSAGE',
21+
clearMsg = 'CLEAR_MSG',
22+
forTesting = 'TESTING_MESSAGE_TYPE'
2023
}

‎src/actions/wp.ts‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import axios from "axios";
2-
import { Dispatch } from "redux";
3-
import Constants from "../constants";
1+
import axios from 'axios';
2+
import { Dispatch } from 'redux';
3+
import Constants from '../constants';
44
import {
55
ActionWPTypes,
66
ActionMessagesTypes,
77
SuccessMessageAction,
88
ClearMessageAction,
99
WarningMessageAction
10-
} from "./";
11-
import { tokenHeader } from "./auth";
10+
} from 'actions';
11+
import { tokenHeader } from 'actions/auth';
1212

1313
export interface User {
1414
id: number;
@@ -120,7 +120,7 @@ export const updatePost: UpdatePostType = (id, newPostData, callback) => {
120120
dispatch<UpdatePostAction>({ type: ActionWPTypes.updatePost });
121121
dispatch<SuccessMessageAction>({
122122
type: ActionMessagesTypes.successMsg,
123-
payload: "The post was successfully updated!"
123+
payload: 'The post was successfully updated!'
124124
});
125125
} catch (error) {
126126
console.log(error);
@@ -144,10 +144,10 @@ export const deletePost = (id: number, callback: () => void) => {
144144
});
145145
dispatch<WarningMessageAction>({
146146
type: ActionMessagesTypes.warningMsg,
147-
payload: "The post was successfully deleted."
147+
payload: 'The post was successfully deleted.'
148148
});
149149
} catch (error) {
150-
console.log("Error");
150+
console.log('Error');
151151
}
152152
callback();
153153
};
@@ -168,15 +168,23 @@ export const publishPost = (newPostData: NewPostData, callback: () => void) => {
168168
dispatch<PublishPostAction>({ type: ActionWPTypes.publishPost });
169169
dispatch<SuccessMessageAction>({
170170
type: ActionMessagesTypes.successMsg,
171-
payload: "You have successfully published a post."
171+
payload: 'You have successfully published a post.'
172172
});
173173
} catch (error) {
174174
dispatch<WarningMessageAction>({
175175
type: ActionMessagesTypes.warningMsg,
176-
payload: "Sorry, we are having problem adding the new post."
176+
payload: 'Sorry, we are having problem adding the new post.'
177177
});
178178
console.log(error);
179179
}
180180
callback();
181181
};
182182
};
183+
184+
export interface TestingMessageAction {
185+
type: ActionMessagesTypes.forTesting;
186+
}
187+
188+
export interface TestingWPAction {
189+
type: ActionWPTypes.forTesting;
190+
}

‎src/components/FormField.tsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React from "react";
2-
import { FieldProps, FormikProps } from "formik";
3-
import { Form } from "react-bootstrap";
1+
import React from 'react';
2+
import { FieldProps, FormikProps } from 'formik';
3+
import { Form } from 'react-bootstrap';
44

55
interface FormFieldProps {
66
type: string;
@@ -16,26 +16,26 @@ const FormField: React.FC<FieldProps & FormFieldProps> = ({
1616
placeholder
1717
}) => {
1818
switch (type) {
19-
case "textarea":
19+
case 'textarea':
2020
return (
2121
<Form.Group>
2222
<Form.Control
23-
as="textarea"
24-
size="lg"
23+
as='textarea'
24+
size='lg'
2525
className={`contentarea ${className}`}
2626
{...field}
2727
placeholder={placeholder}
2828
/>
2929
{renderError(form, field.name)}
3030
</Form.Group>
3131
);
32-
case "password":
32+
case 'password':
3333
return (
3434
<Form.Group>
3535
<Form.Control
36-
type="password"
36+
type='password'
3737
{...field}
38-
size="lg"
38+
size='lg'
3939
placeholder={placeholder}
4040
className={className}
4141
/>
@@ -48,7 +48,7 @@ const FormField: React.FC<FieldProps & FormFieldProps> = ({
4848
<Form.Control
4949
type={type}
5050
{...field}
51-
size="lg"
51+
size='lg'
5252
placeholder={placeholder}
5353
className={className}
5454
/>
@@ -61,10 +61,14 @@ const FormField: React.FC<FieldProps & FormFieldProps> = ({
6161
const renderError = (form: FormikProps<any>, name: string) => {
6262
return (
6363
form.touched[name] &&
64-
form.errors[name] && <span className="error-text">{form.errors[name]}</span>
64+
form.errors[name] && (
65+
<span className='error-text' data-test={`error-text-${name}`}>
66+
{form.errors[name]}
67+
</span>
68+
)
6569
);
6670
};
6771

68-
FormField.defaultProps = { className: "", placeholder: "" };
72+
FormField.defaultProps = { className: '', placeholder: '' };
6973

7074
export default FormField;

‎src/components/Header.tsx‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React from "react";
2-
import { Navbar, Button } from "react-bootstrap";
3-
import { Link } from "react-router-dom";
4-
import { User } from "../actions";
1+
import React from 'react';
2+
import { Navbar, Button } from 'react-bootstrap';
3+
import { Link } from 'react-router-dom';
4+
import { User } from 'actions';
55

66
type HeaderProps = {
77
currentUser?: User;
@@ -10,23 +10,30 @@ type HeaderProps = {
1010

1111
const Header: React.FC<HeaderProps> = ({ currentUser, unAuthUser }) => {
1212
return (
13-
<Navbar bg="dark" className="navbar-dark">
14-
<Link to="/">
15-
<Navbar.Brand>WP React with Typescript</Navbar.Brand>
13+
<Navbar bg='dark' className='navbar-dark'>
14+
<Link to='/'>
15+
<Navbar.Brand data-test='tagline'>
16+
WP React with Typescript
17+
</Navbar.Brand>
1618
</Link>
17-
<Navbar.Collapse className="justify-content-end">
19+
<Navbar.Collapse className='justify-content-end'>
1820
<Navbar.Text>
19-
Signed in as:{" "}
20-
<Link to="/account">{currentUser ? currentUser.name : "..."}</Link>
21+
Signed in as:{' '}
22+
<Link to='/account'>
23+
<span data-test='current-user-name'>
24+
{currentUser ? currentUser.name : '...'}
25+
</span>
26+
</Link>
2127
</Navbar.Text>
22-
<Navbar.Text className="ml-3">
28+
<Navbar.Text className='ml-3'>
2329
<Button
2430
onClick={() => unAuthUser()}
25-
title="Sign Out"
26-
variant="outline-light"
27-
className="logout-btn"
31+
title='Sign Out'
32+
variant='outline-light'
33+
className='logout-btn'
34+
data-test='logout-btn'
2835
>
29-
<i className="fa fa-fw fa-sign-out" />
36+
<i className='fa fa-fw fa-sign-out' />
3037
</Button>
3138
</Navbar.Text>
3239
</Navbar.Collapse>

‎src/components/Placeholder.tsx‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,23 @@
1-
import React from "react";
1+
import React from 'react';
22

33
const Placeholder: React.FC = () => (
44
<>
5-
<div className="shimmer-effect item-placeholder" />
6-
<div className="shimmer-effect item-placeholder" />
7-
<div className="shimmer-effect item-placeholder" />
8-
<div className="shimmer-effect item-placeholder" />
5+
<div
6+
className='shimmer-effect item-placeholder'
7+
data-test='shimmer-effect'
8+
/>
9+
<div
10+
className='shimmer-effect item-placeholder'
11+
data-test='shimmer-effect'
12+
/>
13+
<div
14+
className='shimmer-effect item-placeholder'
15+
data-test='shimmer-effect'
16+
/>
17+
<div
18+
className='shimmer-effect item-placeholder'
19+
data-test='shimmer-effect'
20+
/>
921
</>
1022
);
1123

0 commit comments

Comments
 (0)