Issue 7

.eslintrc.js

@@ -1,7 +1,10 @@
 module.exports = {
   extends: ['airbnb-typescript-prettier'],
+  ignorePatterns: ['.eslintrc.js'],
   // Rules can be here to override the preset of eslint from airbnb, if they are too strict.
   rules: {
+    camelcase: 'warn',
+    '@typescript-eslint/no-empty-function': 'warn',
     '@typescript-eslint/ban-ts-comment': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',
@@ -22,6 +25,8 @@ module.exports = {
     'no-console': 'off',
 
     'react/destructuring-assignment': 0,
+    'react/jsx-props-no-spreading': 'off',
+    'import/prefer-default-export': 0,
     // 'react/prop-types': 0, -> this is an example
   },
   overrides: [

package.json

@@ -3,22 +3,26 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@hookform/resolvers": "^1.3.4",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "axios": "^0.21.1",
     "brace": "^0.11.1",
     "jsoneditor": "^9.1.9",
     "jsoneditor-react": "^3.1.0",
     "node-sass": "^4.14.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-hook-form": "^6.15.1",
     "react-icons": "^4.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^2.0.3",
-    "typescript": "^4.1.3",
-    "web-vitals": "^0.2.4"
+    "typescript": "^4.2.2",
+    "web-vitals": "^0.2.4",
+    "yup": "^0.32.8"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -71,7 +75,7 @@
     ]
   },
   "lint-staged": {
-    "*.{js,tsx}": "eslint --fix"
+    "*.{js,ts,tsx}": "eslint --fix"
   },
   "husky": {
     "hooks": {

src/App.tsx

@@ -1,21 +1,32 @@
-import React from 'react';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import React, { useState } from 'react';
+import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
 import BaseLayout from './components/layouts/BaseLayout';
-import IpfsList from './pages/ipfs/IpfsList';
-import Ipfs from './pages/ipfs/Ipfs';
-
+import Login from './components/pages/auth/Login';
+import Page from './components/Page';
+import { ERROR_404_PAGE, LOGIN_PAGE, USER_PAGES } from './components/urls';
+import Error404 from './components/pages/errors/Error404';
+import UserContext, { emptyUser } from './state/user';
 import './App.scss';
 
 function App(): JSX.Element {
+  const [user, setUser] = useState({ ...emptyUser });
+
+  const login = (email: string): void => setUser({ email, isLoggedIn: true });
+  const logout = (): void => setUser({ ...emptyUser });
+
   return (
-    <Router>
-      <BaseLayout>
-        <Switch>
-          <Route path="/ipfs/:hash" component={Ipfs} />
-          <Route path={['/', '/ipfs']} component={IpfsList} />
-        </Switch>
-      </BaseLayout>
-    </Router>
+    <UserContext.Provider value={{ user, login, logout }}>
+      <Router>
+        <BaseLayout>
+          <Switch>
+            <Route path={LOGIN_PAGE} component={Login} />
+            <Route path={ERROR_404_PAGE} component={Error404} />
+            <Route path={USER_PAGES} component={Page} />
+            <Route path="/" render={() => <Redirect to={ERROR_404_PAGE} />} />
+          </Switch>
+        </BaseLayout>
+      </Router>
+    </UserContext.Provider>
   );
 }
 

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/auth/auth.ts

@@ -0,0 +1,24 @@
+// import { axiosInstance, obtainTokenApi, saveTokens } from "../api"
+
+// const LOGIN_URL = '';
+
+export interface UserAuthenticationData {
+  email: string;
+  password: string;
+}
+
+const loginUser = (data: UserAuthenticationData): Promise<void> => {
+  const { email, password } = data;
+
+  if (email !== '[email protected]') throw new Error('Email does not exist!');
+  if (password !== 'geslo123') throw new Error('Password is incorrect!');
+  // axiosInstance.post<{}>(LOGIN_URL, data)
+  //   .then((res) => res.data);
+  return Promise.resolve();
+};
+
+export const authenticateUser = async (data: UserAuthenticationData): Promise<void> => {
+  await loginUser(data);
+  // const jwtTokens = await obtainTokenApi(data.email, data.password);
+  // saveTokens(jwtTokens);
+};