typescript error duplicated

Author: brauliodiez

examples/00-example-basic/src/common/components/spinner/spinner.js

@@ -15,16 +15,3 @@ export const Spinner = (props) => {
   );
 };
 
-/*
-export const Spinner = () => {
-  const { promiseInProgress } = usePromiseTracker();
-
-  return (
-    <>
-      promiseInProgress &&
-      <div className="spinner">
-        <Loader type="ThreeDots" color="#2BAD60" height="100" width="100" />
-      </div>
-    </>
-  );
-};*/

examples/05-typescript/package.json

@@ -35,7 +35,9 @@
     "webpack-dev-server": "^3.1.14"
   },
   "dependencies": {
-    "react": "^16.8.2",
-    "react-dom": "^16.8.2"
+    "react": "^16.8.5",
+    "react-dom": "^16.8.5",
+    "react-loader-spinner": "^2.3.0",
+    "react-promise-tracker": "file:../.."
   }
 }

examples/05-typescript/src/api/fetch.ts

@@ -0,0 +1,12 @@
+export const fetchWithDelay = (url) => {
+  const promise = new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve(fetch(url, {
+        method: 'GET',
+      })
+        .then((response) => response.json()));
+    }, 3000)
+  });
+
+  return promise;
+}

examples/05-typescript/src/api/postAPI.ts

@@ -0,0 +1,9 @@
+import { fetchWithDelay } from './fetch';
+const url = 'https://jsonplaceholder.typicode.com/posts';
+
+const fetchPosts = () => fetchWithDelay(url)
+  .then((posts : any[]) => posts.slice(0, 10));
+
+export const postAPI = {
+  fetchPosts,
+};

examples/05-typescript/src/api/userAPI.ts

@@ -0,0 +1,8 @@
+import { fetchWithDelay } from './fetch';
+const url = 'https://jsonplaceholder.typicode.com/users';
+
+const fetchUsers = () => fetchWithDelay(url);
+
+export const userAPI = {
+  fetchUsers,
+};

examples/05-typescript/src/app.css

@@ -0,0 +1,11 @@
+.tables {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+.tables > div {
+  flex-basis: 50%;
+  margin-left: 1rem;
+  margin-right: 1rem;
+}

examples/05-typescript/src/app.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { trackPromise } from 'react-promise-tracker';
+import { userAPI } from './api/userAPI';
+import { postAPI } from './api/postAPI';
+import { UserTable, PostTable, LoadButton } from './components';
+import './app.css';
+
+interface State {
+  users: any[],
+  posts: any[],
+}
+
+export class App extends React.Component<{}, State> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      users: [],
+      posts: [],
+    };
+
+    this.onLoadTables = this.onLoadTables.bind(this);
+  }
+
+  onLoadTables() {
+    this.setState({
+      users: [],
+      posts: [],
+    });
+
+    trackPromise(
+      userAPI.fetchUsers()
+        .then((users : any[]) => {
+          this.setState({
+            users,
+          })
+        })
+    );
+
+    trackPromise(
+      postAPI.fetchPosts()
+        .then((posts) => {
+          this.setState({
+            posts,
+          })
+        })
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        <LoadButton
+          onLoad={this.onLoadTables}
+          title="Load tables with delay"
+        />
+        <div className="tables">
+          <UserTable users={this.state.users} />
+          <PostTable posts={this.state.posts} />
+        </div>
+      </div>
+    );
+  }
+}

examples/05-typescript/src/common/spinner/index.ts

@@ -0,0 +1 @@
+export * from './spinner';

examples/05-typescript/src/common/spinner/spinner.css

@@ -0,0 +1,10 @@
+.spinner {
+  width: 100%;
+  height: 100%;
+}
+
+.spinner > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

examples/05-typescript/src/common/spinner/spinner.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { usePromiseTracker } from 'react-promise-tracker';
+import Loader from 'react-loader-spinner';
+import './spinner.css';
+
+export const Spinner = (props) => {
+  const { promiseInProgress } = usePromiseTracker(null);
+
+  return (
+    promiseInProgress && (
+      <div className="spinner">
+        <Loader type="ThreeDots" color="#2BAD60" height="100" width="100" />
+      </div>
+    )
+  );
+};