Trello 19

package.json

@@ -6,7 +6,10 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "@types/classnames": "^2.2.11",
+    "axios": "^0.21.1",
     "brace": "^0.11.1",
+    "classnames": "^2.2.6",
     "jsoneditor": "^9.1.9",
     "jsoneditor-react": "^3.1.0",
     "node-sass": "^4.14.1",

src/App.tsx

@@ -4,13 +4,15 @@ import './App.scss';
 import BaseLayout from './components/layouts/BaseLayout';
 import Ipfs from './pages/ipfs/Ipfs';
 import IpfsList from './pages/ipfs/IpfsList';
+import TrackedContractsList from './pages/tracked-contracts/TrackedContractsList';
 
 const App = (): JSX.Element => {
   return (
     <Router>
       <BaseLayout>
         <Switch>
           <Route path="/ipfs/:hash" component={Ipfs} />
+          <Route path="/tracked-contracts" component={TrackedContractsList} />
           <Route path={['/', '/ipfs']} component={IpfsList} />
         </Switch>
       </BaseLayout>

src/api/api.ts

@@ -0,0 +1,70 @@
+import axios from 'axios';
+
+// const OBTAIN_TOKEN = '/token/obtain/';
+// const REFRESH_TOKEN_URL = '/token/refresh/';
+
+export const ACCESS_TOKEN = 'access_token';
+export const REFRESH_TOKEN = 'refresh_token';
+
+// interface JWTTokenResponse {
+//   refresh: string;
+//   access: string;
+// }
+
+export const axiosInstance = axios.create({
+  baseURL: 'http://127.0.0.1:7424/api/',
+  timeout: 5000,
+  headers: {
+    // 'Authorization': localStorage.getItem('access_token') ? 'JWT ' + localStorage.getItem('access_token') : null,
+    'Content-Type': 'application/json',
+    accept: 'application/json',
+  },
+});
+
+// export const saveTokens = (jwtToken: JWTTokenResponse): JWTTokenResponse => {
+//   localStorage.setItem(ACCESS_TOKEN, jwtToken.access);
+//   localStorage.setItem(REFRESH_TOKEN, jwtToken.refresh);
+//   return jwtToken;
+// };
+
+const localGet = (key: string, defaultValue = ''): string => {
+  const value = localStorage.getItem(key);
+  if (value === null) return defaultValue;
+  return value;
+};
+
+export const getAccessToken = (): string => localGet(ACCESS_TOKEN);
+export const getRefreshToken = (): string => localGet(REFRESH_TOKEN);
+
+axiosInstance.interceptors.response.use(
+  (res) => res,
+  (err) => {
+    // const originalRequest = err.config;
+    // If refresh tokens is expired redirect to login page
+    // if (err.response.status === 401 && originalRequest.url === REFRESH_TOKEN_URL) {
+    //   window.location.href = '/login/';
+    //   return Promise.reject(err);
+    // }
+
+    // // If access token is expired update it
+    // if (err.response.status === 401 && err.response.statusText === 'Unauthorized') {
+    //   return axiosInstance
+    //     .post<JWTTokenResponse>(REFRESH_TOKEN_URL, {refresh: localStorage.getItem(REFRESH_TOKEN)})
+    //     .then(res => res.data)
+    //     .then(saveTokens)
+    //     .then(res => {
+    //       axiosInstance.defaults.headers['Authorization'] = 'JWT ' + res.access;
+    //       originalRequest.headers['Authorization'] = 'JWT ' + res.access;
+
+    //       return axiosInstance(originalRequest);
+    //     })
+    // }
+
+    return Promise.reject(err);
+  },
+);
+
+// export const obtainTokenApi = async (email: string, password: string): Promise<JWTTokenResponse> =>
+//   axiosInstance
+//     .post<JWTTokenResponse>(OBTAIN_TOKEN, { email, password })
+//     .then((res) => res.data);

src/api/chains.ts

@@ -0,0 +1,14 @@
+import { Chain } from '../interfaces';
+import { axiosInstance } from './api';
+
+// Let it be implicit here to avoid importing AxiosResponse etc.
+
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+const chainsApi = '/chains';
+
+const getAllChains = () => axiosInstance.get<Chain[]>(`${chainsApi}`);
+const getChain = (chain: string) => axiosInstance.get<Chain>(`${chainsApi}/${chain}`);
+const setChainStatus = (chain: string) => axiosInstance.put<any>(`${chainsApi}/${chain}`);
+
+export default { getAllChains, getChain, setChainStatus };

src/api/contracts.ts

@@ -0,0 +1,17 @@
+import { Contract } from '../interfaces';
+import { axiosInstance } from './api';
+
+const contractsApi = '/contracts';
+
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+
+// Implementation : https://github.com/paralink-network/paralink-node/blob/master/src/api/contracts.py
+const getAllContracts = () => axiosInstance.get<Contract[]>(`${contractsApi}`);
+const getChainContracts = (chain: string) => axiosInstance.get<Contract>(`${contractsApi}/${chain}`);
+const createContract = (contract: Omit<Contract, 'id'>) => axiosInstance.post<any>(`${contractsApi}`, contract);
+const setContractStatus = (id: number, contract: Pick<Contract, 'active'>) =>
+  axiosInstance.put<any>(`${contractsApi}/${id}`, contract);
+const deleteContract = (id: number) => axiosInstance.delete<any>(`${contractsApi}/${id}`);
+
+export default { getAllContracts, getChainContracts, createContract, setContractStatus, deleteContract };

src/components/common/Buttons/Buttons.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const BLUE_COLOR = 'blue';
+const GREEN_COLOR = 'green';
+const GRAY_COLOR = 'gray';
+const RED_COLOR = 'red';
+
+type Color = typeof BLUE_COLOR | typeof GREEN_COLOR | typeof GRAY_COLOR | typeof RED_COLOR;
+
+interface Button {
+  onClick?: () => void;
+  color?: Color;
+  className?: string;
+  disabled?: boolean;
+}
+
+const Button: React.FC<Button> = ({ children, onClick, color = GRAY_COLOR, className = '', disabled = false }) => (
+  <button
+    type="button"
+    disabled={disabled}
+    className={`focus:outline-none text-${color}-600 text-sm py-1.5 px-3 rounded-md border border-${color}-600 hover:bg-${color}-50 ${className} disabled:opacity-50`}
+    onClick={onClick}
+  >
+    {children}
+  </button>
+);
+
+export default Button;

src/components/common/Buttons/index.ts

@@ -0,0 +1,3 @@
+import Button from './Buttons';
+
+export default Button;

src/components/common/Card/Card.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Card: React.FC<{ className?: string }> = ({ className = '', children }) => {
+  return <div className={`inline-block bg-light shadow-lg overflow-hidden sm:rounded-lg ${className}`}>{children}</div>;
+};
+
+export default Card;

src/components/common/Card/CardBody.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const CardBody: React.FC<{}> = ({ children }) => {
+  return <div className="px-4 py-5 sm:px-6">{children}</div>;
+};
+
+export default CardBody;

src/components/common/Card/CardFooter.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const CardFooter: React.FC<{}> = ({ children }) => {
+  return <div className="px-4 py-3 bg-gray-50 text-right sm:px-6">{children}</div>;
+};
+
+export default CardFooter;

src/components/common/Card/CardHeader.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const CardHeader: React.FC<{}> = ({ children }) => {
+  return <div className="mx-4 px-4 py-3 text-left text-2xl border-b border-gray-200">{children}</div>;
+};
+
+export default CardHeader;

src/components/common/Card/index.ts

@@ -0,0 +1,4 @@
+export { default as Card } from './Card';
+export { default as CardBody } from './CardBody';
+export { default as CardFooter } from './CardFooter';
+export { default as CardHeader } from './CardHeader';

src/components/common/Input/SearchInput.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { FaSearch, FaTimes } from 'react-icons/fa';
+
+interface SearchInput {
+  value: any;
+  onChange: (value: string) => void;
+  name?: string;
+  id?: string;
+  className?: string;
+  placeholder?: string;
+}
+
+const SearchInput: React.FC<SearchInput> = ({
+  value,
+  onChange,
+  name = 'search',
+  id = 'search',
+  className = '',
+  placeholder = '',
+}): JSX.Element => {
+  return (
+    <div className="mt-1 relative">
+      <div className="absolute inset-y-0 right-0 p-3 text-gray-600 flex items-center">
+        {/** TODO: Remove this and actually use the other icons library once we get the query manager merged in */}
+        {value ? (
+          <button type="button" onClick={() => onChange('')}>
+            <FaTimes size={12} />
+          </button>
+        ) : (
+          <FaSearch size={12} />
+        )}
+      </div>
+      <input
+        type="text"
+        name={name}
+        id={id}
+        value={value}
+        placeholder={placeholder}
+        className={`focus:outline-none focus:ring-2 focus:ring-opacity-20 focus:ring-primary block w-full pl-7 pr-12 sm:text-sm border-gray-200 bg-gray-200 text-gray-600 rounded-full ${className}`}
+        onChange={(event) => onChange(event.target.value)}
+      />
+    </div>
+  );
+};
+
+export default SearchInput;

src/components/common/Input/index.ts

@@ -0,0 +1,3 @@
+import SearchInput from './SearchInput';
+
+export default SearchInput;

src/components/common/Table/Table.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Table: React.FC<{ className?: string }> = ({ className = '', children }): JSX.Element => {
+  return <table className={`min-w-full divide-y divide-gray-200 ${className}`}>{children}</table>;
+};
+
+export default Table;

src/components/common/Table/TableBody.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const TableBody: React.FC<{ className?: string }> = ({ className = '', children }): JSX.Element => {
+  return <tbody className={`bg-white divide-y divide-gray-200 ${className}`}>{children}</tbody>;
+};
+
+export default TableBody;

src/components/common/Table/TableCell.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const TableCell: React.FC<{ className?: string }> = ({ className = '', children }): JSX.Element => {
+  return <td className={`px-6 py-4 whitespace-nowrap ${className}`}>{children}</td>;
+};
+
+export default TableCell;

src/components/common/Table/TableHeader.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const TableHeader: React.FC<{ className?: string }> = ({ className = '', children }): JSX.Element => {
+  return <thead className={`bg-gray-50 ${className}`}>{children}</thead>;
+};
+
+export default TableHeader;