From 9ab554a9a33e914c6a26b43b4520aa363219d17f Mon Sep 17 00:00:00 2001 From: binodpant Date: Sat, 18 Jan 2020 16:05:08 +0545 Subject: [PATCH] setup completed. --- package.json | 8 +++ src/App.css | 36 ++----------- src/App.tsx | 32 +++++------- src/actions/post.ts | 15 ++++++ src/actions/types/post.ts | 15 ++++++ src/components/container.ts | 31 +++++++++++ src/components/post.tsx | 55 ++++++++++++++++++++ src/reducers/index.ts | 8 +++ src/reducers/postReducer.ts | 21 ++++++++ src/reducers/types/Post.ts | 6 +++ src/store/index.ts | 21 ++++++++ src/store/storetypes.ts | 5 ++ yarn.lock | 101 +++++++++++++++++++++++++++++++++++- 13 files changed, 299 insertions(+), 55 deletions(-) create mode 100644 src/actions/post.ts create mode 100644 src/actions/types/post.ts create mode 100644 src/components/container.ts create mode 100644 src/components/post.tsx create mode 100644 src/reducers/index.ts create mode 100644 src/reducers/postReducer.ts create mode 100644 src/reducers/types/Post.ts create mode 100644 src/store/index.ts create mode 100644 src/store/storetypes.ts diff --git a/package.json b/package.json index 17126ee..d112f5d 100644 --- a/package.json +++ b/package.json @@ -6,13 +6,21 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", + "@types/axios": "^0.14.0", "@types/jest": "^24.0.0", "@types/node": "^12.0.0", "@types/react": "^16.9.0", "@types/react-dom": "^16.9.0", + "@types/react-redux": "^7.1.6", + "@types/redux": "^3.6.0", + "@types/redux-thunk": "^2.1.0", + "axios": "^0.19.1", "react": "^16.12.0", "react-dom": "^16.12.0", + "react-redux": "^7.1.3", "react-scripts": "3.3.0", + "redux": "^4.0.5", + "redux-thunk": "^2.3.0", "typescript": "~3.7.2" }, "scripts": { diff --git a/src/App.css b/src/App.css index 74b5e05..c7308c9 100644 --- a/src/App.css +++ b/src/App.css @@ -2,37 +2,7 @@ text-align: center; } -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.postDiv { + margin: 30; + border: 2px solid #ffabff; } diff --git a/src/App.tsx b/src/App.tsx index 226ee63..a86b8aa 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,26 +1,18 @@ -import React from 'react'; -import logo from './logo.svg'; -import './App.css'; +import React from "react"; +import logo from "./logo.svg"; +import "./App.css"; +import Post from "./components/post"; +import { Provider } from "react-redux"; +import store from "./store"; const App: React.FC = () => { return ( -
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - -
-
+ +
+ +
+ ); -} +}; export default App; diff --git a/src/actions/post.ts b/src/actions/post.ts new file mode 100644 index 0000000..7d72568 --- /dev/null +++ b/src/actions/post.ts @@ -0,0 +1,15 @@ +import { Dispatch, AnyAction } from "redux"; +import axios from "axios"; +import { setFetchPost } from "./types/post"; + +export const getAllPosts = () => { + return async (dispatch: Dispatch) => { + axios + .get("http://jsonplaceholder.typicode.com/posts?_limit=10") + .then(res => { + console.log("called."); + dispatch(setFetchPost(res.data)); + }) + .catch(err => console.log(err)); + }; +}; diff --git a/src/actions/types/post.ts b/src/actions/types/post.ts new file mode 100644 index 0000000..ea64c9b --- /dev/null +++ b/src/actions/types/post.ts @@ -0,0 +1,15 @@ +import { PostState } from "../../reducers/types/Post"; + +export const FETCH_POST = "@posts/FETCH_POST"; + +export type FetchPost = { + type: typeof FETCH_POST; + payload: PostState[]; +}; + +export const setFetchPost = (posts: PostState[]) => { + return { + type: FETCH_POST, + payload: posts + }; +}; diff --git a/src/components/container.ts b/src/components/container.ts new file mode 100644 index 0000000..fcef3f1 --- /dev/null +++ b/src/components/container.ts @@ -0,0 +1,31 @@ +import { connect } from "react-redux"; +import { StoreState } from "../store/storetypes"; +import { ThunkDispatch } from "redux-thunk"; +import { Action } from "redux"; +import { getAllPosts } from "../actions/post"; +import { PostState } from "../reducers/types/Post"; + +export interface MapDispatchToProps { + getAllPosts: () => void; +} + +const mapDispatchToState = ( + dispatch: ThunkDispatch +): MapDispatchToProps => { + return { + getAllPosts: () => dispatch(getAllPosts()) + }; +}; + +export interface MapStateToProps { + posts: PostState[]; +} + +const mapStateToProps = (state: StoreState): MapStateToProps => { + return { + posts: state.posts + }; +}; + +export const container = connect(mapStateToProps, mapDispatchToState); +export default container; diff --git a/src/components/post.tsx b/src/components/post.tsx new file mode 100644 index 0000000..316dc43 --- /dev/null +++ b/src/components/post.tsx @@ -0,0 +1,55 @@ +import React, { Component } from "react"; + +import { PostState } from "../reducers/types/Post"; + +import container, { MapStateToProps, MapDispatchToProps } from "./container"; + +export type InitialPostState = { + posts: Array; +}; + +export const initialPostValue: InitialPostState = { + posts: [] +}; + +export type PostProps = MapDispatchToProps & MapStateToProps; + +export class Post extends Component { + constructor(props: PostProps) { + super(props); + this.state = { + posts: [] + }; + } + + componentDidMount() { + this.props.getAllPosts(); + } + + render() { + const { posts } = this.props; + console.log("posts ", posts); + console.log("post length", posts.length); + + return ( +
+ {this.props.posts.length > 1 ? ( +
+ {this.props.posts.map((p: PostState) => { + return ( +
+
Title: {p.title}
+
{`Body ${p.body}`}
+
+ ); + })} +
+ ) : ( +
loading.........
+ )} +
+ ); + } +} + +export default container(Post); diff --git a/src/reducers/index.ts b/src/reducers/index.ts new file mode 100644 index 0000000..a3953d6 --- /dev/null +++ b/src/reducers/index.ts @@ -0,0 +1,8 @@ +import { combineReducers } from "redux"; +import { postReducer as posts } from "./postReducer"; + +const rootReduer = combineReducers({ + posts +}); + +export default rootReduer; diff --git a/src/reducers/postReducer.ts b/src/reducers/postReducer.ts new file mode 100644 index 0000000..2b8c571 --- /dev/null +++ b/src/reducers/postReducer.ts @@ -0,0 +1,21 @@ +import { PostState } from "./types/Post"; +import { Dispatch, AnyAction } from "redux"; +import { FETCH_POST } from "../actions/types/post"; + +export type InitialState = { + posts: Array; +}; + +const initialState: InitialState = { + posts: [] +}; + +export const postReducer = (state = initialState, action: AnyAction) => { + switch (action.type) { + case FETCH_POST: + return action.payload; + + default: + return state; + } +}; diff --git a/src/reducers/types/Post.ts b/src/reducers/types/Post.ts new file mode 100644 index 0000000..e63e448 --- /dev/null +++ b/src/reducers/types/Post.ts @@ -0,0 +1,6 @@ +export interface PostState { + userId?: number; + id?: number; + title: string; + body: string; +} diff --git a/src/store/index.ts b/src/store/index.ts new file mode 100644 index 0000000..65c5dd7 --- /dev/null +++ b/src/store/index.ts @@ -0,0 +1,21 @@ +import { createStore, applyMiddleware, compose } from "redux"; +import thunk from "redux-thunk"; +import rootReduer from "../reducers"; + +const middleWare = [thunk]; + +const initialState = {}; +declare global { + interface Window { + __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose; + } +} + +const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; +const store = createStore( + rootReduer, + initialState, + composeEnhancers(applyMiddleware(...middleWare)) +); + +export default store; diff --git a/src/store/storetypes.ts b/src/store/storetypes.ts new file mode 100644 index 0000000..e1bf705 --- /dev/null +++ b/src/store/storetypes.ts @@ -0,0 +1,5 @@ +import { PostState } from "../reducers/types/Post"; + +export type StoreState = { + posts: PostState[]; +}; diff --git a/yarn.lock b/yarn.lock index 0133214..3a595b8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -923,7 +923,7 @@ dependencies: regenerator-runtime "^0.13.2" -"@babel/runtime@^7.5.1", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6": +"@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6": version "7.8.3" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.3.tgz#0811944f73a6c926bb2ad35e918dcc1bfab279f1" integrity sha512-fVHx1rzEmwB130VTkLnxR+HmxcTjGzH12LYQcFFoBwakMd3aOMD4OsRN7tGG/UOYE2ektgFrS8uACAoRk1CY0w== @@ -1356,6 +1356,13 @@ resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-7.2.1.tgz#2ad4e844175a3738cb9e7064be5ea070b8863a1c" integrity sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA== +"@types/axios@^0.14.0": + version "0.14.0" + resolved "https://registry.yarnpkg.com/@types/axios/-/axios-0.14.0.tgz#ec2300fbe7d7dddd7eb9d3abf87999964cafce46" + integrity sha1-7CMA++fX3d1+udOr+HmZlkyvzkY= + dependencies: + axios "*" + "@types/babel__core@^7.1.0": version "7.1.3" resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.3.tgz#e441ea7df63cd080dfcd02ab199e6d16a735fc30" @@ -1408,6 +1415,14 @@ "@types/minimatch" "*" "@types/node" "*" +"@types/hoist-non-react-statics@^3.3.0": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" + integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0": version "2.0.1" resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff" @@ -1477,6 +1492,16 @@ dependencies: "@types/react" "*" +"@types/react-redux@^7.1.6": + version "7.1.6" + resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.6.tgz#9a2097d1c74cfd7b4ec3d1c4e30fe806c2058da2" + integrity sha512-OjIrYtOg+j7MwNURIZ1BHoxWEzX3lDS/5169JqXUE+1XcOHGRVZirnnsexBDl5ykjxXlNHi4AS0aOismP3DaIA== + dependencies: + "@types/hoist-non-react-statics" "^3.3.0" + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + redux "^4.0.0" + "@types/react@*", "@types/react@^16.9.0": version "16.9.17" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.17.tgz#58f0cc0e9ec2425d1441dd7b623421a867aa253e" @@ -1485,6 +1510,20 @@ "@types/prop-types" "*" csstype "^2.2.0" +"@types/redux-thunk@^2.1.0": + version "2.1.0" + resolved "https://registry.yarnpkg.com/@types/redux-thunk/-/redux-thunk-2.1.0.tgz#bc2b6e972961831afb82a9bf4f06726e351f9416" + integrity sha1-vCtulylhgxr7gqm/TwZybjUflBY= + dependencies: + redux-thunk "*" + +"@types/redux@^3.6.0": + version "3.6.0" + resolved "https://registry.yarnpkg.com/@types/redux/-/redux-3.6.0.tgz#f1ebe1e5411518072e4fdfca5c76e16e74c1399a" + integrity sha1-8evh5UEVGAcuT9/KXHbhbnTBOZo= + dependencies: + redux "*" + "@types/stack-utils@^1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e" @@ -2077,6 +2116,13 @@ aws4@^1.8.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.9.0.tgz#24390e6ad61386b0a747265754d2a17219de862c" integrity sha512-Uvq6hVe90D0B2WEnUqtdgY1bATGz3mw33nH9Y+dmA+w5DHvUmBgkr5rM/KCHpCsiFNRUfokW/szpPPgMK2hm4A== +axios@*, axios@^0.19.1: + version "0.19.1" + resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.1.tgz#8a6a04eed23dfe72747e1dd43c604b8f1677b5aa" + integrity sha512-Yl+7nfreYKaLRvAvjNPkvfjnQHJM1yLBY3zhqAwcJSwR/6ETkanUgylgtIvkvz0xJ+p/vZuNw8X7Hnb7Whsbpw== + dependencies: + follow-redirects "1.5.10" + axobject-query@^2.0.2: version "2.1.1" resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.1.1.tgz#2a3b1271ec722d48a4cd4b3fcc20c853326a49a7" @@ -3374,6 +3420,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6. dependencies: ms "2.0.0" +debug@=3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261" + integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g== + dependencies: + ms "2.0.0" + debug@^3.0.0, debug@^3.1.1, debug@^3.2.5, debug@^3.2.6: version "3.2.6" resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b" @@ -4421,6 +4474,13 @@ flush-write-stream@^1.0.0: inherits "^2.0.3" readable-stream "^2.3.6" +follow-redirects@1.5.10: + version "1.5.10" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a" + integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ== + dependencies: + debug "=3.1.0" + follow-redirects@^1.0.0: version "1.9.0" resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.9.0.tgz#8d5bcdc65b7108fe1508649c79c12d732dcedb4f" @@ -4856,6 +4916,13 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" +hoist-non-react-statics@^3.3.0: + version "3.3.1" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#101685d3aff3b23ea213163f6e8e12f4f111e19f" + integrity sha512-wbg3bpgA/ZqWrZuMOeJi8+SKMhr7X9TesL/rXMjTzh0p0JUBo3II8DHboYbuIXWRlttrUFxwcu/5kygrCw8fJw== + dependencies: + react-is "^16.7.0" + hosted-git-info@^2.1.4: version "2.8.5" resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.5.tgz#759cfcf2c4d156ade59b0b2dfabddc42a6b9c70c" @@ -8511,11 +8578,23 @@ react-error-overlay@^6.0.4: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.4.tgz#0d165d6d27488e660bc08e57bdabaad741366f7a" integrity sha512-ueZzLmHltszTshDMwyfELDq8zOA803wQ1ZuzCccXa1m57k1PxSHfflPD5W9YIiTXLs0JTLzoj6o1LuM5N6zzNA== -react-is@^16.8.1, react-is@^16.8.4: +react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0: version "16.12.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c" integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q== +react-redux@^7.1.3: + version "7.1.3" + resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.1.3.tgz#717a3d7bbe3a1b2d535c94885ce04cdc5a33fc79" + integrity sha512-uI1wca+ECG9RoVkWQFF4jDMqmaw0/qnvaSvOoL/GA4dNxf6LoV8sUAcNDvE5NWKs4hFpn0t6wswNQnY3f7HT3w== + dependencies: + "@babel/runtime" "^7.5.5" + hoist-non-react-statics "^3.3.0" + invariant "^2.2.4" + loose-envify "^1.4.0" + prop-types "^15.7.2" + react-is "^16.9.0" + react-scripts@3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.3.0.tgz#f26a21f208f20bd04770f43e50b5bbc151920c2a" @@ -8672,6 +8751,19 @@ redent@^3.0.0: indent-string "^4.0.0" strip-indent "^3.0.0" +redux-thunk@*, redux-thunk@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622" + integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw== + +redux@*, redux@^4.0.0, redux@^4.0.5: + version "4.0.5" + resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f" + integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w== + dependencies: + loose-envify "^1.4.0" + symbol-observable "^1.2.0" + regenerate-unicode-properties@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e" @@ -9749,6 +9841,11 @@ svgo@^1.0.0, svgo@^1.2.2: unquote "~1.1.1" util.promisify "~1.0.0" +symbol-observable@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" + integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ== + symbol-tree@^3.2.2: version "3.2.4" resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"