Replaced useState and useEffect with useQuery

Author: Ranjith10

.eslintrc

@@ -1,38 +1,50 @@
-{ 
+{
     "parser": "babel-eslint",
-    "extends": ["prettier","eslint:recommended", "plugin:react/recommended"],
-    "plugins": ["prettier", "react"],
+    "extends": ["prettier", "eslint:recommended", "plugin:react/recommended"],
+    "plugins": ["prettier", "react", "react-hooks"],
     "rules": {
-      "semi":"off",
-      "jsx-quotes": [2, "prefer-single"],
-      "react/jsx-curly-spacing": [2, {"when": "always", "spacing": {
-        "objectLiterals": "never"
-      }}],
-      "react/jsx-equals-spacing": [2, "always"],
-      "react/jsx-boolean-value": "error",
-      "react/jsx-closing-bracket-location": "error",
-      "react/jsx-first-prop-new-line": "error",
-      "react/jsx-curly-newline": "error",
-      "react/jsx-handler-names": "error",
-      "react/jsx-indent-props": [ "error", 4 ],
-      "react/jsx-indent": [ "error", 4 ],
-      "react/jsx-key": "error",
-      "react/jsx-max-props-per-line": [ "error", { "maximum": 2 }],
-      "react/jsx-no-bind": "off",
-      "react/jsx-no-literals": "off",
-      "react/jsx-no-target-blank": "error",
-      "react/jsx-pascal-case": "error",
-      "react/jsx-sort-props": "error",
-      "react/jsx-space-before-closing": "error"
+        "semi": "off",
+        "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
+        "react-hooks/exhaustive-deps": "warn",
+        "jsx-quotes": [2, "prefer-single"],
+        "react/jsx-curly-spacing": [
+            2,
+            {
+                "when": "always",
+                "spacing": {
+                    "objectLiterals": "never"
+                }
+            }
+        ],
+        "react/jsx-equals-spacing": [2, "always"],
+        "react/jsx-boolean-value": "error",
+        "react/jsx-closing-bracket-location": "error",
+        "react/jsx-first-prop-new-line": "error",
+        "react/jsx-curly-newline": "error",
+        "react/jsx-handler-names": "error",
+        "react/jsx-indent-props": ["error", 4],
+        "react/jsx-indent": ["error", 4],
+        "react/jsx-key": "error",
+        "react/jsx-max-props-per-line": ["error", { "maximum": 2 }],
+        "react/jsx-no-bind": "off",
+        "react/jsx-no-literals": "off",
+        "react/jsx-no-target-blank": "error",
+        "react/jsx-pascal-case": "error",
+        "react/jsx-sort-props": "error",
+        "react/jsx-space-before-closing": "error",
+        "space-infix-ops": "error",
+        "no-unneeded-ternary": "error",
+        "react/prop-types": 0,
+        "allowAllPropertiesOnSameLine": 0
     },
     "env": {
-      "es6": true
+        "es6": true
     },
     "parserOptions": {
-      "ecmaVersion": 6,
-      "sourceType": "module",
-      "ecmaFeatures": {
-          "jsx": true
-      }
-  }
-}
+        "ecmaVersion": 6,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "jsx": true
+        }
+    }
+}

package-lock.json

@@ -3,8 +3,10 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
+        "axios": "^0.20.0",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
+        "react-loading-skeleton": "^2.1.1",
         "react-query": "^2.8.0",
         "react-scripts": "3.4.3",
         "react-table": "^7.5.0"

package.json

@@ -1,12 +1,13 @@
-import React from 'react';
-import './App.css';
+import React from 'react'
+import './App.css'
+import ReactTable from './components/ReactTable'
 
 function App() {
     return (
         <div className = 'App'>
-            App
+            <ReactTable />
         </div>
     )
 }
 
-export default App;
+export default App

src/App.js

@@ -0,0 +1,35 @@
+.people-table {
+    background-color: #f5f5f5;
+    margin: 30px;
+    border-radius: 10px;
+    padding: 20px;
+    width: calc(100% - 100px);
+}
+table {
+    width: 100%;
+}
+table > thead > tr > th {
+    text-align: left;
+    text-transform: uppercase;
+    padding: 0 0 10px 0;
+    border-bottom: 1px solid;
+}
+table > tbody > tr {
+    height: 60px;
+    text-align: left;
+}
+.pagination {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    height: 50px;
+}
+.pagination > button {
+    margin: 0 10px 0 0;
+    height: 30px;
+    cursor: pointer;
+    border: 1px solid;
+}
+.pagination > button:disabled {
+    cursor: not-allowed;
+}