Added some changes

.gitignore

@@ -9,7 +9,7 @@
 /coverage
 
 # production
-/build
+# /build
 
 # misc
 .DS_Store

package.json

@@ -1,17 +1,23 @@
 {
   "name": "react-data-table",
+  "homepage": "https://olegobiukh.github.io/react-data-table/",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^16.8.3",
-    "react-dom": "^16.8.3",
-    "react-scripts": "2.1.5"
+    "bootstrap": "4.3.1",
+    "lodash": "4.17.11",
+    "react": "16.8.3",
+    "react-dom": "16.8.3",
+    "react-router-dom": "5.0.0",
+    "react-scripts": "2.1.8"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -21,5 +27,8 @@
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "devDependencies": {
+    "gh-pages": "^2.0.1"
+  }
 }

src/Api/index.js

@@ -0,0 +1,16 @@
+const BASE_URL =
+  "https://mate-academy.github.io/phone-catalogue-static/api/phones";
+//https://mate-academy.github.io/phone-catalogue-static/api/phones/motorola-xoom-with-wi-fi.json
+export const getAll = async () => {
+  const response = await fetch(`${BASE_URL}.json`);
+  const phones = await response.json();
+
+  return phones;
+};
+
+export const getCurrentPhone = async phone => {
+  const response = await fetch(`${BASE_URL}/${phone}.json`);
+  const data = await response.json();
+
+  return data;
+};

src/App/DataTable.js

@@ -0,0 +1,83 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+import Select from "./components/Select";
+import config from "../config";
+
+const DataTable = ({
+  visibleItems,
+  onHeaderClick,
+  onHandleCheck,
+  checkedItems,
+  onMainCheck,
+  filteredItems,
+  showChecked,
+  onShowAllChecked,
+  perPage,
+  onPerPageChange
+}) => {
+  return (
+    <div className="Table-wrapper">
+      <table className="table">
+        <thead>
+          <tr className="thead-dark Table__headers">
+            <th>
+              <input
+                type="checkbox"
+                checked={checkedItems.length === filteredItems.length}
+                onChange={onMainCheck.bind(this)}
+                name="main"
+                value="main"
+              />
+            </th>
+            {Object.keys(config).map(key => (
+              <th
+                key={key}
+                className={config[key].isSortable && "Table__sorting"}
+                onClick={
+                  config[key].isSortable ? () => onHeaderClick(key) : null
+                }
+              >
+                {key}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {visibleItems.map(item => {
+            return (
+              <tr key={item.id}>
+                <td>
+                  <input
+                    type="checkbox"
+                    checked={checkedItems.includes(item.id)}
+                    onChange={onHandleCheck.bind(this)}
+                    name={item.id}
+                    value={item.id}
+                  />
+                </td>
+                {Object.keys(config).map(key => {
+                  if (key === "name") {
+                    return (
+                      <td key={key}>
+                        <NavLink to={`/${item.id}`}>{item[key]}</NavLink>
+                      </td>
+                    );
+                  }
+
+                  return <td key={key}>{item[key]}</td>;
+                })}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+      <button className="CheckAll__btn" onClick={onShowAllChecked.bind(this)}>
+        {showChecked ? "Show all" : "Show checked"}
+      </button>
+      <Select perPage={perPage} onPerPageChange={onPerPageChange.bind(this)} />
+    </div>
+  );
+};
+
+export default DataTable;

src/App/components/Pagination.js

@@ -0,0 +1,76 @@
+import React from "react";
+
+const Pagination = ({
+  isTop,
+  page = 1,
+  count = 20,
+  perPage = 3,
+  onPageChange
+}) => {
+  const pagesCount = Math.ceil(count / perPage) + 1;
+
+  const pages = [];
+
+  for (let i = 1; i < pagesCount; i++) {
+    pages.push(i);
+  }
+  if (!isTop) {
+    return (
+      <div className="Pagination">
+        {pages.map(item => (
+          <button
+            key={item}
+            className={
+              item === page
+                ? "Pagination__active Pagination__btn"
+                : "Pagination__btn"
+            }
+            onClick={() => onPageChange(item)}
+          >
+            {item}
+          </button>
+        ))}
+      </div>
+    );
+  } else {
+    return (
+      <div className="Pagination">
+        {page !== 1 && (
+          <button
+            className="Pagination__back"
+            onClick={() => onPageChange(page - 1)}
+          >
+            &#8592;
+          </button>
+        )}
+        {pages.map(item => {
+          if (item === page || item === page + 1 || item === page - 1) {
+            return (
+              <button
+                key={item}
+                className={
+                  item === page
+                    ? "Pagination__active Pagination__btn"
+                    : "Pagination__btn"
+                }
+                onClick={() => onPageChange(item)}
+              >
+                {item}
+              </button>
+            );
+          }
+        })}
+        {page !== pages.length && (
+          <button
+            className="Pagination__next"
+            onClick={() => onPageChange(page + 1)}
+          >
+            &#8594;
+          </button>
+        )}
+      </div>
+    );
+  }
+};
+
+export default Pagination;

src/App/components/Search.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+const Search = ({ onChangeQuery, visibleQuery }) => {
+  return (
+    <div className="md-form active-purple active-purple-2 mb-3">
+      <input
+        className="Search"
+        type="text"
+        placeholder="Search"
+        aria-label="Search"
+        onChange={onChangeQuery}
+        value={visibleQuery}
+      />
+    </div>
+  );
+};
+
+export default Search;

src/App/components/Select.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+const Select = ({ perPage = 3, onPerPageChange }) => {
+  return (
+    <select
+      className="Select browser-default custom-select"
+      onChange={onPerPageChange}
+      value={perPage}
+    >
+      <option value="3">3</option>
+      <option value="5">5</option>
+      <option value="10">10</option>
+      <option value="20">20</option>
+    </select>
+  );
+};
+
+export default Select;