Unverified Commit 9dd7ecb7 authored by Xavier Watkins's avatar Xavier Watkins Committed by GitHub
Browse files

Merge pull request #14 from ebi-uniprot/create-react-app

Create-react-app
parents 704f1213 294e394a
{
"presets": [
["@babel/preset-env", {
"modules": 'commonjs',
}],
"@babel/react"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-modules-commonjs",
"@babel/plugin-syntax-dynamic-import",
"emotion"
]
}
\ No newline at end of file
REACT_APP_BASE_URL=/gifts
REACT_APP_API_URL=/gifts/api
REACT_APP_AUTH_CALLBACK_URL=https://www.ebi.ac.uk/gifts/login
\ No newline at end of file
REACT_APP_BASE_URL = /gifts
REACT_APP_API_URL = https://wwwdev.ebi.ac.uk/gifts/api
REACT_APP_AUTH_CALLBACK_URL = http://localhost:39093/login
REACT_APP_AUTH_CALLBACK_URL=https://www-test.ebi.ac.uk/gifts/login
\ No newline at end of file
{
"parser": "babel-eslint",
"extends": ["airbnb", "plugin:jest/recommended"],
"plugins": ["jest"],
"env": {
"browser": true,
"node": true,
"jest": true
},
"rules": {
"no-console": 0,
"camelcase": 0,
"react/jsx-boolean-value": "always",
"no-else-return": [
"error",
{
"allowElseIf": true
}
],
"jsx-a11y/label-has-for": 0,
"jsx-a11y/label-has-associated-control": 0,
"jsx-a11y/anchor-is-valid": [
"error",
{
"components": ["Link"],
"specialLink": ["to", "hrefLeft", "hrefRight"],
"aspects": ["noHref", "invalidHref", "preferButton"]
}
]
// "react/sort-comp": 0,
// "react/forbid-prop-types": 1,
// "react/no-did-mount-set-state": 1,
// "react/no-array-index-key": 0,
// "jsx-a11y/anchor-is-valid": 1,
// "jsx-a11y/click-events-have-key-events": 0,
// "jsx-a11y/interactive-supports-focus": 0,
// "jsx-a11y/no-static-element-interactions": 0
},
"globals": {
"BASE_URL": false,
"AUTH_CALLBACK_URL": false,
"API_URL": false,
"READ_ONLY": false,
"FRONTEND_VERSION": false
}
}
......@@ -7,7 +7,7 @@
# misc
.DS_Store
.env.local
# .env.local
.env.development.local
.env.test.local
.env.production.local
......
https://ebi-uniprot.github.io/gifts-curation-tool/
# To install
`npm install`
# To run
`npm run dev-server`
`yarn`
# To run locally
`yarn run start`
{
"name": "gifts-curation-tool",
"version": "1.0.0",
"version": "0.1.0",
"private": true,
"homepage": "http://ebi-uniprot.github.io/gifts-curation-tool",
"license": "MIT",
"scripts": {
"local-server": "webpack --config webpack.local.js --mode development && webpack-dev-server --config webpack.local.js --mode development --open",
"dev-build": "webpack --config webpack.dev.js --mode production",
"prod-build": "webpack --config webpack.prod.js --mode production",
"staging-build": "webpack --config webpack.staging.js --mode production",
"fallback-build": "webpack --config webpack.prod.js --READ_ONLY --mode production",
"jslint": "./node_modules/.bin/eslint -c .eslintrc.json --ext .js --ext .jsx src",
"csslint": "scss-lint ./src/styles/*.scss",
"test": "jest",
"update-snapshots": "jest --updateSnapshot",
"remove-obsolete-snapshots": "yarn test -u",
"build-css": "node-sass-chokidar src/styles -o src/styles",
"watch-css": "npm run build-css && node-sass-chokidar src/styles -o src/styles --watch --recursive",
"start-local": "npm-run-all -p watch-css local-server",
"profile": "webpack --config webpack.prod.js --profile --json > stats.json"
},
"jest": {
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less|scss)$": "<rootDir>/__mocks__/styleMock.js"
},
"globals": {
"API_URL": "http://193.62.52.185:5000/gifts",
"AUTH_CALLBACK_URL": "http%3A%2F%2Flocalhost%3A39093%2Flogin"
},
"testURL": "http://localhost",
"transformIgnorePatterns": [
"node_modules/?!(lodash-es)"
],
"testEnvironment": "node"
},
"dependencies": {
"@babel/polyfill": "^7.0.0",
"ajv": "^6.5.0",
"axios": "^0.18.0",
"franklin-sites": "^0.0.71",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.21.4",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.15",
"path": "^0.12.7",
"prop-types": "15.7.2",
"query-string": "^6.1.0",
"react": "^16.9.0",
"react-cookie": "^2.1.6",
"react-dom": "^16.9.0",
"react-markdown": "^3.3.4",
"react-paginate": "^5.2.3",
"react-router-dom": "^5.1.2",
"react-select": "^3.0.8",
"react-spinners": "^0.3.3",
"node-sass": "^6.0.1",
"react": "^17.0.2",
"react-cookie": "^4.1.1",
"react-dom": "^17.0.2",
"react-markdown": "^7.0.1",
"react-modal": "^3.14.3",
"react-paginate": "^7.1.3",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"react-select": "^5.0.0",
"react-spinners": "^0.11.0",
"simplemde": "^1.11.2",
"uuid": "^3.3.2"
"uuid": "^8.3.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "PORT=39093 react-scripts start",
"build": "react-scripts build",
"build:staging": "env-cmd -f ./.env.staging npm run-script build",
"build:fallback": "REACT_APP_READ_ONLY=true react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/cli": "^7.1.2",
"@babel/core": "^7.1.2",
"@babel/plugin-proposal-class-properties": "^7.3.0",
"@babel/plugin-proposal-object-rest-spread": "^7.6.2",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-modules-commonjs": "^7.8.3",
"@babel/polyfill": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"@testing-library/react": "^9.1.4",
"babel-core": "^7.0.0-0",
"babel-eslint": "^10.0.1",
"babel-jest": "25.1.0",
"babel-loader": "^8.0.4",
"babel-plugin-dynamic-import-node": "^2.3.0",
"browser-sync": "^2.23.6",
"browser-sync-webpack-plugin": "^2.0.1",
"css-loader": "^0.28.10",
"eslint": "^5.16.0",
"eslint-config-airbnb": "17.1.0",
"eslint-plugin-import": "2.16.0",
"eslint-plugin-jest": "23.0.3",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-react": "7.12.4",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.0.3",
"jest": "25.1.0",
"node-sass": "^4.7.2",
"node-sass-chokidar": "^1.1.0",
"npm-run-all": "^4.1.2",
"react-test-renderer": "^16.3.1",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^4.8.3",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.3"
"env-cmd": "^10.1.0"
}
}
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { CookiesProvider } from 'react-cookie';
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { CookiesProvider } from "react-cookie";
import App from './App';
import App from "./ui/App";
import '../styles/index.scss';
import "./styles/index.scss";
ReactDOM.render(
<BrowserRouter>
......@@ -13,5 +13,5 @@ ReactDOM.render(
<App />
</CookiesProvider>
</BrowserRouter>,
document.getElementById('root'),
document.getElementById("root")
);
......@@ -2,52 +2,68 @@
Colour palette: GIFTs
*/
:root {
--main-color: #192B38;
--secondary-color:#22424B;
--tertiary-color: #2E5458;
--quart: #4E7367;
--quint: #7FA68C;
--main-color: #192b38;
--secondary-color: #22424b;
--tertiary-color: #2e5458;
--quart: #4e7367;
--quint: #7fa68c;
}
a {
color: #222;
}
dl dt a,
a.label,
.label,
a:hover,
a:focus,
a:active {
color: #2E5458;
}
h1 { color: #f7f7f7; }
/* h2 { color: rgb(0,124,130); }
color: #222;
}
dl dt a,
a.label,
.label,
a:hover,
a:focus,
a:active {
color: #2e5458;
}
h1 {
color: #f7f7f7;
}
/* h2 { color: rgb(0,124,130); }
h3 { color: #444444; } */
a.special { background-color: #7cd17c; }
.menu .active > a,
.tag,
.tabs-title > a:hover,
.button,
.button.primary {
background-color: #2E5458;
}
a.tag:hover { color: #fff; }
.tabs-title > a:hover,
.button.primary:hover,
.button.primary:focus { background: rgba(0,124,130,.9); }
.tabs-title > a:focus,
.tabs-title > a[aria-selected='true'] {
color: #fff;
background: #666; }
.masthead { background-color: #22424B; }
/* end */
a.special {
background-color: #7cd17c;
}
.menu .active > a,
.tag,
.tabs-title > a:hover,
.button,
.button.primary {
background-color: #2e5458;
}
a.tag:hover {
color: #fff;
}
.button.secondary {
background-color: #fff;
color: #2e5458;
}
.tabs-title > a:hover,
.button.primary:hover,
.button.primary:focus {
background: rgba(0, 124, 130, 0.9);
}
.tabs-title > a:focus,
.tabs-title > a[aria-selected="true"] {
color: #fff;
background: #666;
}
.masthead {
background-color: #22424b;
}
/* end */
.label {
padding: 0.33333rem 0.5rem;
......@@ -56,4 +72,4 @@ a {
.label.primary {
color: #fefefe;
}
\ No newline at end of file
}
.home-banner {
padding-top: 5vh;
margin-top: -3rem;
background-color: #192B38;
color: #ffffff;
min-height: 18em;
margin-bottom: 4em;
padding-top: 5vh;
margin-top: -3rem;
background-color: #192b38;
color: #ffffff;
min-height: 18em;
margin-bottom: 4em;
}
.home-banner__actions {
margin-top: 5vh;
display: flex;
gap: 1rem;
button {
font-size: 1.2rem;
}
}
.home-banner h2,
.home-banner h3,
.home-banner h5 {
color: #ffffff;
}
\ No newline at end of file
color: #ffffff;
}
......@@ -21,7 +21,7 @@ body {
position: fixed;
width: 200%;
height: 300%;
opacity: .7;
opacity: 0.7;
z-index: 999;
top: -50%;
display: none;
......@@ -41,3 +41,7 @@ body {
font-size: 0.9rem;
padding: 1rem 0;
}
.input-group {
display: flex;
}
import React, { Component } from 'react';
import {
Switch,
Route,
withRouter,
Link,
} from 'react-router-dom';
import PropTypes from 'prop-types';
import { withCookies } from 'react-cookie';
import queryString from 'query-string';
import * as jwt from 'jsonwebtoken';
import axios from 'axios';
import Layout from './Layout';
import Home from './Home';
import Mappings from './Mappings';
import Unmapped from './Unmapped';
import Login from './Login';
import Logout from './Logout';
import Mapping from './Mapping';
import Broken from './Broken';
import Message from './components/Message';
import NoResults from './NoResults';
import Feedback from './Feedback';
import authConfig from '../authConfig';
import { getSecondsSinceEpoch } from './util/util';
import '../styles/Gifts.scss';
import React, { Component } from "react";
import { Switch, Route, withRouter, Link } from "react-router-dom";
import PropTypes from "prop-types";
import { withCookies } from "react-cookie";
import queryString from "query-string";
import * as jwt from "jsonwebtoken";
import axios from "axios";
import packageJson from "../../package.json";
import Layout from "./Layout";
import Home from "./Home";
import Mappings from "./Mappings";
import Unmapped from "./Unmapped";
import Login from "./Login";
import Logout from "./Logout";
import Mapping from "./Mapping";
import Broken from "./Broken";
import Message from "./components/Message";
import NoResults from "./NoResults";
import Feedback from "./Feedback";
import authConfig from "../authConfig";
import { getSecondsSinceEpoch } from "./util/util";
import "../styles/Gifts.scss";
class App extends Component {
defaultState = {
// eslint-disable-next-line react/destructuring-assignment
searchTerm: queryString.parse(this.props.location.search).searchTerm
// eslint-disable-next-line react/destructuring-assignment
? queryString.parse(this.props.location.search).searchTerm
: '',
? // eslint-disable-next-line react/destructuring-assignment
queryString.parse(this.props.location.search).searchTerm
: "",
authenticated: false,
userToken: null,
hasExpiredToken: false,
......@@ -47,7 +43,7 @@ class App extends Component {
activeFacets: {},
initialPage: 0,
selectedFilters: {},
frontendVersion: `${FRONTEND_VERSION}`,
frontendVersion: `${packageJson.version}`,
backendVersion: null,
statusValues: {},
};
......@@ -62,8 +58,10 @@ class App extends Component {
axios
.all([
axios.get(`${API_URL}/version/?format=json`),
axios.get(`${API_URL}/mappings/statuses/?format=json`),
axios.get(`${process.env.REACT_APP_API_URL}/version/?format=json`),
axios.get(
`${process.env.REACT_APP_API_URL}/mappings/statuses/?format=json`
),
])
.then((response) => {
this.setState({
......@@ -77,23 +75,29 @@ class App extends Component {
const { cookies } = this.props;
try {
const rawUserToken = cookies.get('userToken');
const rawUserToken = cookies.get("userToken");
if (!this.verifyJWT()) {
return false;
}
this.setState({
authenticated: true,
userToken: rawUserToken,
}, successCallback);
this.setState(
{
authenticated: true,
userToken: rawUserToken,
},
successCallback
);
return true;
} catch (e) {
this.setState({
authenticated: false,
userToken: null,
}, failureCallback);
this.setState(
{
authenticated: false,
userToken: null,
},
failureCallback
);
return false;
}
......@@ -102,28 +106,29 @@ class App extends Component {
verifyJWT = () => {
const { cookies } = this.props;
const rawUserToken = cookies.get('userToken');
const userToken = jwt.verify(
rawUserToken,
authConfig.aap.public_key,
{ algorithm: authConfig.aap.algorithm },
);
const rawUserToken = cookies.get("userToken");
const userToken = jwt.verify(rawUserToken, authConfig.aap.public_key, {
algorithm: authConfig.aap.algorithm,
});
if (typeof userToken.exp !== 'undefined' && userToken.exp <= getSecondsSinceEpoch()) {
cookies.remove('userToken', { path: '/' });
if (
typeof userToken.exp !== "undefined" &&
userToken.exp <= getSecondsSinceEpoch()
) {
cookies.remove("userToken", { path: "/" });
this.tokenIsExpired();
return false;
}
return true;
}
};
onLogout = () => {
const { history } = this.props;
this.setState(this.defaultState);
history.push(`${BASE_URL}/`);
history.push(`${process.env.REACT_APP_BASE_URL}/`);
};
setMessage = (title, text, isError) => {
......@@ -138,17 +143,15 @@ class App extends Component {
exploreMappingsAction = () => {