From 44e372ab37c182954754fd3e49ccf8e6c77deeae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Felipe=20Cardozo=20Ca=C3=B1as?= Date: Sat, 24 Jul 2021 16:25:18 -0500 Subject: [PATCH 1/3] Installed redux-devtools-extension --- package-lock.json | 5 +++++ package.json | 1 + 2 files changed, 6 insertions(+) diff --git a/package-lock.json b/package-lock.json index fe9c1c1..85d0692 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12528,6 +12528,11 @@ "symbol-observable": "^1.2.0" } }, + "redux-devtools-extension": { + "version": "2.13.9", + "resolved": "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz", + "integrity": "sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A==" + }, "redux-thunk": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz", diff --git a/package.json b/package.json index cb169b9..db34837 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "react-redux": "^7.2.2", "react-scripts": "4.0.1", "redux": "^4.0.5", + "redux-devtools-extension": "^2.13.9", "redux-thunk": "^2.3.0", "typescript": "^4.1.3", "web-vitals": "^0.2.4" From 12a2fc74a08e511bc01cc1139d2dca6821305b0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Felipe=20Cardozo=20Ca=C3=B1as?= Date: Sat, 24 Jul 2021 16:26:03 -0500 Subject: [PATCH 2/3] Change store for redux devtools --- src/store/index.ts | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/store/index.ts b/src/store/index.ts index a71a0a7..20408da 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,6 +1,13 @@ -import {applyMiddleware, createStore} from "redux"; +import { createStore, compose, applyMiddleware } from "redux"; import thunk from "redux-thunk"; -import {rootReducer} from "./reducers"; +import { rootReducer } from "./reducers"; +declare global { + interface Window { + __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose; + } +} -export const store = createStore(rootReducer, applyMiddleware(thunk)) +const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; + +export const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk))); From 5f6451e2c410b0b8b1f277faf813fbec1e3689ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Felipe=20Cardozo=20Ca=C3=B1as?= Date: Sat, 24 Jul 2021 16:39:37 -0500 Subject: [PATCH 3/3] Add models to iterables elements user and todo --- src/components/TodoList.tsx | 19 ++++++++++--------- src/components/UserList.tsx | 18 +++++++++--------- src/types/todo.ts | 12 +++++++++--- src/types/user.ts | 31 +++++++++++++++++++++++++++++++ 4 files changed, 59 insertions(+), 21 deletions(-) diff --git a/src/components/TodoList.tsx b/src/components/TodoList.tsx index e95e088..9cf4db3 100644 --- a/src/components/TodoList.tsx +++ b/src/components/TodoList.tsx @@ -1,10 +1,11 @@ -import React, {useEffect} from 'react'; -import {useTypedSelector} from "../hooks/useTypedSelector"; -import {useActions} from "../hooks/useActions"; +import { useEffect, FC } from 'react'; +import { useTypedSelector } from "../hooks/useTypedSelector"; +import { useActions } from "../hooks/useActions"; +import { TodoModel } from '../types/todo'; -const TodoList: React.FC = () => { - const {page, error, loading, todos, limit} = useTypedSelector(state => state.todo) - const {fetchTodos, setTodoPage} = useActions() +const TodoList: FC = () => { + const { page, error, loading, todos, limit } = useTypedSelector(state => state.todo) + const { fetchTodos, setTodoPage } = useActions() const pages = [1, 2, 3, 4, 5] useEffect(() => { @@ -20,14 +21,14 @@ const TodoList: React.FC = () => { return (
- {todos.map(todo => + {todos.map((todo: TodoModel) =>
{todo.id} - {todo.title}
)} -
+
{pages.map(p =>
setTodoPage(p)} - style={{border:p === page ? '2px solid green' : '1px solid gray', padding: 10}} + style={{ border: p === page ? '2px solid green' : '1px solid gray', padding: 10 }} > {p}
diff --git a/src/components/UserList.tsx b/src/components/UserList.tsx index 7e8cdd6..6c0bd3a 100644 --- a/src/components/UserList.tsx +++ b/src/components/UserList.tsx @@ -1,11 +1,11 @@ -import React, {useEffect} from 'react'; -import {useTypedSelector} from "../hooks/useTypedSelector"; -import {fetchUsers} from "../store/action-creators/user"; -import {useActions} from "../hooks/useActions"; +import { useEffect, FC } from 'react'; +import { useTypedSelector } from "../hooks/useTypedSelector"; +import { useActions } from "../hooks/useActions"; +import { UserModel } from '../types/user'; -const UserList: React.FC = () => { - const {users, error, loading} = useTypedSelector(state => state.user) - const {fetchUsers} = useActions() +const UserList: FC = () => { + const { users, error, loading } = useTypedSelector(state => state.user) + const { fetchUsers } = useActions() useEffect(() => { fetchUsers() @@ -20,8 +20,8 @@ const UserList: React.FC = () => { return (
- {users.map(user => -
{user.name}
+ {users.map((user: UserModel) => +
Name: {user.name} - company: {user.company.name}
)}
); diff --git a/src/types/todo.ts b/src/types/todo.ts index 0b37573..88beb5f 100644 --- a/src/types/todo.ts +++ b/src/types/todo.ts @@ -7,9 +7,9 @@ export interface TodoState { } export enum TodoActionTypes { - FETCH_TODOS= 'FETCH_TODOS', - FETCH_TODOS_SUCCESS= 'FETCH_TODOS_SUCCESS', - FETCH_TODOS_ERROR= 'FETCH_TODOS_ERROR', + FETCH_TODOS = 'FETCH_TODOS', + FETCH_TODOS_SUCCESS = 'FETCH_TODOS_SUCCESS', + FETCH_TODOS_ERROR = 'FETCH_TODOS_ERROR', SET_TODO_PAGE = 'SET_TODO_PAGE' } interface FetchTodoAction { @@ -27,6 +27,12 @@ interface SetTodoPage { type: TodoActionTypes.SET_TODO_PAGE; payload: number; } +export interface TodoModel { + id: number; + userId: number; + title: string; + completed: boolean; +} export type TodoAction = FetchTodoAction diff --git a/src/types/user.ts b/src/types/user.ts index 8fe4aeb..ad52ce9 100644 --- a/src/types/user.ts +++ b/src/types/user.ts @@ -19,4 +19,35 @@ interface FetchUsersErrorAction { type: UserActionTypes.FETCH_USERS_ERROR; payload: string; } + +export interface UserModel { + id: number; + name: string; + username: string; + email: string; + address: Address; + phone: string; + website: string; + company: Company; +} + +interface Address { + street: string; + suite: string; + city: string; + zipcode: string; + geo: Geo; +} + +interface Geo { + lat: string; + lng: string; +} + +interface Company { + name: string; + catchPhrase: string; + bs: string; +} + export type UserAction = FetchUsersAction | FetchUsersErrorAction | FetchUsersSuccessAction