add app to gitignore
This commit is contained in:
Dzmitry_Tamashevich@epam.com
committed by
Daniel Hutzel
Daniel Hutzel
parent
dbe4b8a7bd
commit
00474edffe
5
media-store/.gitignore
vendored
5
media-store/.gitignore
vendored
@@ -9,7 +9,10 @@ target/
|
||||
package-lock.json
|
||||
|
||||
# html5Deployer
|
||||
html5Deployer/resources/app/
|
||||
deployers/html5Deployer/resources/app/
|
||||
|
||||
# app
|
||||
app/
|
||||
|
||||
# Web IDE, App Studio
|
||||
.che/
|
||||
|
||||
23
media-store/app/.gitignore
vendored
23
media-store/app/.gitignore
vendored
@@ -1,23 +0,0 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
13
media-store/app/.vscode/launch.json
vendored
13
media-store/app/.vscode/launch.json
vendored
@@ -1,13 +0,0 @@
|
||||
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Chrome",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"url": "http://localhost:3000",
|
||||
"webRoot": "${workspaceRoot}/src"
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
@@ -1,44 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app" />
|
||||
<link rel="apple-touch-icon" href="/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<!--
|
||||
Notice the use of in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
<script src="/static/app.75bbe376e4ccdece0eed.js"></script><script src="/static/react.75bbe376e4ccdece0eed.js"></script><script src="/static/lodash.75bbe376e4ccdece0eed.js"></script><script src="/static/moment.75bbe376e4ccdece0eed.js"></script><script src="/static/events.75bbe376e4ccdece0eed.js"></script><script src="/static/axios.75bbe376e4ccdece0eed.js"></script><script src="/static/antd.75bbe376e4ccdece0eed.js"></script></body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
@@ -1,31 +0,0 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff",
|
||||
"sap.app": {
|
||||
"id": "mediastore",
|
||||
"applicationVersion": {
|
||||
"version": "1.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
{
|
||||
"name": "mediastore",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^4.2.4",
|
||||
"@testing-library/react": "^9.3.2",
|
||||
"@testing-library/user-event": "^7.1.2",
|
||||
"@umijs/hooks": "^1.9.3",
|
||||
"antd": "^4.8.2",
|
||||
"axios": "^0.20.0",
|
||||
"events": "^3.2.0",
|
||||
"lodash": "^4.17.20",
|
||||
"moment": "^2.29.1",
|
||||
"react": "^16.14.0",
|
||||
"react-dom": "^16.14.0",
|
||||
"react-inline-editing": "^1.0.10",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "^4.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start --no-cache",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test --no-cache",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "react-app"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
@@ -1,43 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
@@ -1,31 +0,0 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff",
|
||||
"sap.app": {
|
||||
"id": "mediastore",
|
||||
"applicationVersion": {
|
||||
"version": "1.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"welcomeFile": "/index.html",
|
||||
"routes": [
|
||||
{
|
||||
"source": "^(.*)",
|
||||
"target": "$1",
|
||||
"service": "html5-apps-repo-rt"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
@@ -1,57 +0,0 @@
|
||||
@import "~antd/dist/antd.css";
|
||||
|
||||
html {
|
||||
overflow: hidden;
|
||||
}
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
section.ant-layout {
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Layout
|
||||
*/
|
||||
.site-layout .site-layout-background {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
import React from "react";
|
||||
import "antd/dist/antd.css";
|
||||
import "./App.css";
|
||||
import { Layout } from "antd";
|
||||
import { MyRouter } from "./components/Router";
|
||||
import { AppStateContextProvider } from "./contexts/AppStateContext";
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<Layout style={{ height: "100%" }}>
|
||||
<AppStateContextProvider>
|
||||
<MyRouter />
|
||||
</AppStateContextProvider>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@@ -1,21 +0,0 @@
|
||||
import axios from "axios";
|
||||
import { getUserFromLS, getLocaleFromLS } from "../util/localStorageService";
|
||||
import {
|
||||
changeUserDefaults,
|
||||
changeLocaleDefaults,
|
||||
} from "./changeAxiosDefaults";
|
||||
import { API } from "../util/constants";
|
||||
import { responseErrorInterceptor } from "./responseErrorInterceptor";
|
||||
|
||||
const axiosInstance = axios.create({
|
||||
baseURL: API,
|
||||
timeout: 2000,
|
||||
});
|
||||
const user = getUserFromLS();
|
||||
const locale = getLocaleFromLS();
|
||||
changeUserDefaults(user);
|
||||
changeLocaleDefaults(locale);
|
||||
|
||||
axiosInstance.interceptors.response.use(null, responseErrorInterceptor);
|
||||
|
||||
export { axiosInstance, changeLocaleDefaults, changeUserDefaults };
|
||||
@@ -1,188 +0,0 @@
|
||||
import { isEmpty } from "lodash";
|
||||
import { axiosInstance } from "./axiosInstance";
|
||||
|
||||
const BROWSE_TRACKS_SERVICE = "browse-tracks";
|
||||
const INVOICES_SERVICE = "browse-invoices";
|
||||
const USER_SERVICE = "users";
|
||||
const MANAGE_STORE = "manage-store";
|
||||
|
||||
const constructGenresQuery = (genreIds) => {
|
||||
return !isEmpty(genreIds)
|
||||
? " and " + genreIds.map((value) => `genre_ID eq ${value}`).join(" or ")
|
||||
: "";
|
||||
};
|
||||
|
||||
const fetchTacks = ({
|
||||
$top = 20,
|
||||
$skip = 0,
|
||||
genreIds = [],
|
||||
substr = "",
|
||||
} = {}) => {
|
||||
const serializeTracksUrl = () => {
|
||||
return `$expand=genre,album($expand=artist)&$top=${$top}&$skip=${$skip}&$filter=${
|
||||
`contains(name,'${substr}')` + constructGenresQuery(genreIds)
|
||||
}`;
|
||||
};
|
||||
|
||||
return axiosInstance.get(
|
||||
`${BROWSE_TRACKS_SERVICE}/${axiosInstance.defaults.tracksEntity}`,
|
||||
{
|
||||
params: {},
|
||||
paramsSerializer: () => serializeTracksUrl(),
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const countTracks = ({ genreIds = [], substr = "" } = {}) => {
|
||||
const tracksEntity = axiosInstance.defaults.tracksEntity;
|
||||
|
||||
return axiosInstance.get(
|
||||
`${BROWSE_TRACKS_SERVICE}/${tracksEntity}/$count?$filter=${
|
||||
`contains(name,'${substr}')` + constructGenresQuery(genreIds)
|
||||
}`
|
||||
);
|
||||
};
|
||||
|
||||
const fetchGenres = () => {
|
||||
return axiosInstance.get(`${BROWSE_TRACKS_SERVICE}/Genres`);
|
||||
};
|
||||
|
||||
const invoice = (tracks) => {
|
||||
return axiosInstance.post(
|
||||
`${INVOICES_SERVICE}/invoice`,
|
||||
{
|
||||
tracks: tracks.map(({ unitPrice, ID }) => ({
|
||||
unitPrice: `${unitPrice}`,
|
||||
ID,
|
||||
})),
|
||||
},
|
||||
{
|
||||
headers: { "content-type": "application/json;IEEE754Compatible=true" },
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const fetchPerson = () => {
|
||||
return axiosInstance.get(
|
||||
`${USER_SERVICE}/${axiosInstance.defaults.userEntity}`
|
||||
);
|
||||
};
|
||||
|
||||
const confirmPerson = (person) => {
|
||||
return axiosInstance.put(
|
||||
`${USER_SERVICE}/${axiosInstance.defaults.userEntity}`,
|
||||
{
|
||||
...person,
|
||||
},
|
||||
{
|
||||
headers: { "content-type": "application/json" },
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const fetchInvoices = () => {
|
||||
return axiosInstance.get(
|
||||
`${INVOICES_SERVICE}/Invoices?$expand=invoiceItems($expand=track($expand=album($expand=artist)))`
|
||||
);
|
||||
};
|
||||
|
||||
const cancelInvoice = (ID) => {
|
||||
return axiosInstance.post(
|
||||
`${INVOICES_SERVICE}/cancelInvoice`,
|
||||
{
|
||||
ID,
|
||||
},
|
||||
{
|
||||
headers: { "content-type": "application/json" },
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const fetchAlbumsByName = (substr = "", top) => {
|
||||
return axiosInstance.get(
|
||||
`${BROWSE_TRACKS_SERVICE}/Albums?$filter=${`contains(title,'${substr}')&$top=${top}`}`
|
||||
);
|
||||
};
|
||||
|
||||
const addTrack = (data) => {
|
||||
return axiosInstance.post(`${MANAGE_STORE}/Tracks`, data, {
|
||||
headers: { "content-type": "application/json;IEEE754Compatible=true" },
|
||||
});
|
||||
};
|
||||
|
||||
const addArtist = (data) => {
|
||||
return axiosInstance.post(`${MANAGE_STORE}/Artists`, data, {
|
||||
headers: { "content-type": "application/json" },
|
||||
});
|
||||
};
|
||||
|
||||
const addAlbum = (data) => {
|
||||
return axiosInstance.post(`${MANAGE_STORE}/Albums`, data, {
|
||||
headers: { "content-type": "application/json" },
|
||||
});
|
||||
};
|
||||
|
||||
const fetchArtistsByName = (substr = "", top) => {
|
||||
return axiosInstance.get(
|
||||
`${MANAGE_STORE}/Artists?$filter=${`contains(name,'${substr}')&$top=${top}`}`
|
||||
);
|
||||
};
|
||||
|
||||
const login = (data) => {
|
||||
return axiosInstance.post(`${USER_SERVICE}/login`, data, {
|
||||
headers: { "content-type": "application/json" },
|
||||
});
|
||||
};
|
||||
|
||||
const updateTrack = (track) => {
|
||||
return axiosInstance.put(
|
||||
`${MANAGE_STORE}/Tracks/${track.ID}`,
|
||||
{
|
||||
...track,
|
||||
},
|
||||
{
|
||||
headers: { "content-type": "application/json;IEEE754Compatible=true" },
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const getTrack = (ID) => {
|
||||
return axiosInstance.get(
|
||||
`${BROWSE_TRACKS_SERVICE}/${axiosInstance.defaults.tracksEntity}/${ID}?$expand=genre,album($expand=artist)`
|
||||
);
|
||||
};
|
||||
|
||||
const deleteTrack = (ID) => {
|
||||
return axiosInstance.delete(`${MANAGE_STORE}/Tracks(${ID})`);
|
||||
};
|
||||
|
||||
const refreshTokens = (refreshToken) => {
|
||||
return axiosInstance.post(
|
||||
`${USER_SERVICE}/refreshTokens`,
|
||||
{ refreshToken },
|
||||
{
|
||||
headers: { "content-type": "application/json" },
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export {
|
||||
fetchTacks,
|
||||
countTracks,
|
||||
fetchGenres,
|
||||
invoice,
|
||||
fetchPerson,
|
||||
confirmPerson,
|
||||
fetchInvoices,
|
||||
cancelInvoice,
|
||||
fetchAlbumsByName,
|
||||
addTrack,
|
||||
addArtist,
|
||||
addAlbum,
|
||||
fetchArtistsByName,
|
||||
login,
|
||||
updateTrack,
|
||||
getTrack,
|
||||
deleteTrack,
|
||||
refreshTokens,
|
||||
};
|
||||
@@ -1,27 +0,0 @@
|
||||
import { axiosInstance } from "./axiosInstance";
|
||||
|
||||
function changeUserDefaults(currentUser) {
|
||||
if (currentUser) {
|
||||
axiosInstance.defaults.headers.common[
|
||||
"Authorization"
|
||||
] = `Basic ${currentUser.accessToken}`;
|
||||
axiosInstance.defaults.userID = currentUser.ID;
|
||||
if (currentUser.roles.includes("customer")) {
|
||||
axiosInstance.defaults.userEntity = `Customers/${currentUser.ID}`;
|
||||
axiosInstance.defaults.tracksEntity = "MarkedTracks";
|
||||
} else {
|
||||
axiosInstance.defaults.userEntity = `Employees/${currentUser.ID}`;
|
||||
axiosInstance.defaults.tracksEntity = "Tracks";
|
||||
}
|
||||
} else {
|
||||
axiosInstance.defaults.tracksEntity = "Tracks";
|
||||
}
|
||||
}
|
||||
|
||||
function changeLocaleDefaults(locale) {
|
||||
if (locale) {
|
||||
axiosInstance.defaults.headers.common["Accept-language"] = locale;
|
||||
}
|
||||
}
|
||||
|
||||
export { changeLocaleDefaults, changeUserDefaults };
|
||||
@@ -1,62 +0,0 @@
|
||||
import { emitter } from "../util/EventEmitter";
|
||||
import { axiosInstance } from "./axiosInstance";
|
||||
import { refreshTokens } from "./calls";
|
||||
import { getUserFromLS } from "../util/localStorageService";
|
||||
|
||||
let isRefreshing = false;
|
||||
let subscribers = [];
|
||||
|
||||
function responseErrorInterceptor(error) {
|
||||
const originalRequest = error.config;
|
||||
const user = getUserFromLS();
|
||||
|
||||
if (error.response && error.response.status === 401 && !!user) {
|
||||
if (originalRequest.url === "users/login") {
|
||||
return Promise.reject(error);
|
||||
}
|
||||
|
||||
// if users/refreshTokens request failed
|
||||
if (isRefreshing && originalRequest.url === "users/refreshTokens") {
|
||||
subscribers.forEach((request) => request.reject(error));
|
||||
subscribers = [];
|
||||
isRefreshing = false;
|
||||
return Promise.reject(error);
|
||||
}
|
||||
|
||||
// if got a 401 error we sending users/refreshTokens request
|
||||
if (!isRefreshing) {
|
||||
isRefreshing = true;
|
||||
|
||||
refreshTokens(user.refreshToken)
|
||||
.then((response) => {
|
||||
emitter.emit("UPDATE_USER", response.data);
|
||||
subscribers.forEach((request) =>
|
||||
request.resolve(response.data.accessToken)
|
||||
);
|
||||
subscribers = [];
|
||||
isRefreshing = false;
|
||||
})
|
||||
.catch(() => {
|
||||
emitter.emit("UPDATE_USER", undefined);
|
||||
});
|
||||
}
|
||||
|
||||
// holding requests which should be sended after users/refreshTokens complete
|
||||
// otherwise if users/refreshTokens failed an error will be thrown
|
||||
return new Promise((resolve, reject) => {
|
||||
subscribers.push({
|
||||
resolve: (newAccessToken) => {
|
||||
originalRequest.headers.Authorization = "Basic " + newAccessToken;
|
||||
resolve(axiosInstance(originalRequest));
|
||||
},
|
||||
reject: (err) => {
|
||||
reject(err);
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return Promise.reject(error);
|
||||
}
|
||||
|
||||
export { responseErrorInterceptor };
|
||||
@@ -1,3 +0,0 @@
|
||||
.ant-menu-item .anticon {
|
||||
margin: 0;
|
||||
}
|
||||
@@ -1,158 +0,0 @@
|
||||
import React from "react";
|
||||
import { Menu, Badge, Spin } from "antd";
|
||||
import { isEmpty } from "lodash";
|
||||
import {
|
||||
CreditCardOutlined,
|
||||
LogoutOutlined,
|
||||
LoginOutlined,
|
||||
LoadingOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { useHistory, useLocation } from "react-router-dom";
|
||||
import { useAppState } from "../hooks/useAppState";
|
||||
import { setLocaleToLS } from "../util/localStorageService";
|
||||
import { changeLocaleDefaults } from "../api/axiosInstance";
|
||||
import { emitter } from "../util/EventEmitter";
|
||||
import "./Header.css";
|
||||
import { requireEmployee, requireCustomer } from "../util/constants";
|
||||
|
||||
const { SubMenu } = Menu;
|
||||
|
||||
const keys = ["/", "/person", "/login", "/manage", "/invoice", "/invoices"];
|
||||
const AVAILABLE_LOCALES = ["en", "fr", "de"];
|
||||
const RELOAD_LOCATION_NUMBER = 0;
|
||||
|
||||
const Header = () => {
|
||||
const history = useHistory();
|
||||
const location = useLocation();
|
||||
const {
|
||||
user,
|
||||
invoicedItems,
|
||||
setInvoicedItems,
|
||||
locale,
|
||||
setLocale,
|
||||
loading,
|
||||
} = useAppState();
|
||||
const currentKey = [keys.find((key) => key === location.pathname)];
|
||||
const haveInvoicedItems = !isEmpty(invoicedItems);
|
||||
const invoicedItemsLength = invoicedItems.length;
|
||||
|
||||
const onChangeLocale = (value) => {
|
||||
setLocaleToLS(value);
|
||||
changeLocaleDefaults(value);
|
||||
setLocale(value);
|
||||
history.go(RELOAD_LOCATION_NUMBER);
|
||||
};
|
||||
const localeElements = AVAILABLE_LOCALES.filter(
|
||||
(localeName) => localeName !== locale
|
||||
).map((curLocale, index) => (
|
||||
<Menu.Item
|
||||
key={`${index}${curLocale}`}
|
||||
onClick={() => onChangeLocale(curLocale)}
|
||||
>
|
||||
{curLocale}
|
||||
</Menu.Item>
|
||||
));
|
||||
|
||||
const onUserLogout = () => {
|
||||
emitter.emit("UPDATE_USER", undefined);
|
||||
history.go(0);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "baseline",
|
||||
alignItems: "center",
|
||||
paddingLeft: "15vh",
|
||||
paddingRight: "15vh",
|
||||
background: "white",
|
||||
}}
|
||||
>
|
||||
<Menu
|
||||
theme="light"
|
||||
mode="horizontal"
|
||||
style={{ width: "50%" }}
|
||||
selectedKeys={currentKey}
|
||||
>
|
||||
<Menu.Item key="/" onClick={() => history.push("/")}>
|
||||
Browse
|
||||
</Menu.Item>
|
||||
|
||||
{!!user && (
|
||||
<Menu.Item key="/person" onClick={() => history.push("/person")}>
|
||||
Profile
|
||||
</Menu.Item>
|
||||
)}
|
||||
{requireCustomer(user) && (
|
||||
<Menu.Item key="/invoices" onClick={() => history.push("/invoices")}>
|
||||
Invoices
|
||||
</Menu.Item>
|
||||
)}
|
||||
{requireEmployee(user) && (
|
||||
<Menu.Item key="/manage" onClick={() => history.push("/manage")}>
|
||||
Manage
|
||||
</Menu.Item>
|
||||
)}
|
||||
<span>
|
||||
{loading && (
|
||||
<Spin
|
||||
indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
</Menu>
|
||||
|
||||
<Menu
|
||||
style={{ width: "50%", display: "flex", justifyContent: "flex-end" }}
|
||||
theme="light"
|
||||
mode="horizontal"
|
||||
selectedKeys={currentKey}
|
||||
>
|
||||
{haveInvoicedItems && (
|
||||
<Menu.Item
|
||||
style={{
|
||||
width: 40,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
onClick={() => history.push("/invoice")}
|
||||
key="/invoice"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<Badge
|
||||
size="default"
|
||||
style={{ backgroundColor: "#2db7f5" }}
|
||||
count={invoicedItemsLength}
|
||||
>
|
||||
<CreditCardOutlined style={{ fontSize: 16 }} />
|
||||
</Badge>
|
||||
</div>
|
||||
</Menu.Item>
|
||||
)}
|
||||
|
||||
<SubMenu title={locale}>{localeElements}</SubMenu>
|
||||
|
||||
{!!user ? (
|
||||
<Menu.Item
|
||||
onClick={onUserLogout}
|
||||
danger
|
||||
icon={<LogoutOutlined style={{ fontSize: 16 }} />}
|
||||
></Menu.Item>
|
||||
) : (
|
||||
<Menu.Item
|
||||
key="/login"
|
||||
onClick={() => history.push("/login")}
|
||||
icon={<LoginOutlined style={{ fontSize: 16 }} />}
|
||||
></Menu.Item>
|
||||
)}
|
||||
</Menu>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Header };
|
||||
@@ -1,58 +0,0 @@
|
||||
import React from "react";
|
||||
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
|
||||
import { isEmpty } from "lodash";
|
||||
import { TracksContainer } from "../pages/TracksPage";
|
||||
import { Header } from "../components/Header";
|
||||
import { PersonPage } from "../pages/PersonPage";
|
||||
import { ErrorPage } from "../pages/ErrorPage";
|
||||
import { Login } from "../pages/Login";
|
||||
import { withRestrictions } from "../hocs/withRestrictions";
|
||||
import { InvoicePage } from "../pages/InvoicePage";
|
||||
import { ManageStore } from "../pages/ManageStore";
|
||||
import { MyInvoicesPage } from "../pages/MyInvoicesPage";
|
||||
import { requireEmployee } from "../util/constants";
|
||||
|
||||
const RestrictedLogin = withRestrictions(Login, ({ user }) => !user);
|
||||
const RestrictedInvoicePage = withRestrictions(
|
||||
InvoicePage,
|
||||
({ user, invoicedItems }) => !requireEmployee(user) && !isEmpty(invoicedItems)
|
||||
);
|
||||
const RestrictedPersonPage = withRestrictions(PersonPage, ({ user }) => !!user);
|
||||
const RestrictedManageStore = withRestrictions(ManageStore, ({ user }) =>
|
||||
requireEmployee(user)
|
||||
);
|
||||
|
||||
const MyRouter = () => {
|
||||
return (
|
||||
<Router>
|
||||
<Header />
|
||||
<div style={{ padding: "2em 20vh" }}>
|
||||
<Switch>
|
||||
<Route exact path={["/", "/tracks"]}>
|
||||
<TracksContainer />
|
||||
</Route>
|
||||
<Route exact path="/person">
|
||||
<RestrictedPersonPage />
|
||||
</Route>
|
||||
<Route exact path="/login">
|
||||
<RestrictedLogin />
|
||||
</Route>
|
||||
<Route exact path="/invoice">
|
||||
<RestrictedInvoicePage />
|
||||
</Route>
|
||||
<Route exact path="/invoices">
|
||||
<MyInvoicesPage />
|
||||
</Route>
|
||||
<Route exact path="/manage">
|
||||
<RestrictedManageStore />
|
||||
</Route>
|
||||
<Route path="/">
|
||||
<ErrorPage />
|
||||
</Route>
|
||||
</Switch>
|
||||
</div>
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
|
||||
export { MyRouter };
|
||||
@@ -1,71 +0,0 @@
|
||||
import React, { useMemo, createContext, useState, useEffect } from "react";
|
||||
import {
|
||||
getUserFromLS,
|
||||
getLocaleFromLS,
|
||||
setUserToLS,
|
||||
} from "../util/localStorageService";
|
||||
import { changeUserDefaults } from "../api/axiosInstance";
|
||||
import { emitter } from "../util/EventEmitter";
|
||||
|
||||
let counter = 0;
|
||||
|
||||
const globalContext = {
|
||||
error: {},
|
||||
loading: true,
|
||||
user: {
|
||||
ID: undefined,
|
||||
roles: [],
|
||||
email: undefined,
|
||||
accessToken: undefined,
|
||||
refreshToken: undefined,
|
||||
},
|
||||
locale: undefined,
|
||||
invoicedItems: [],
|
||||
notifications: [],
|
||||
};
|
||||
const AppStateContext = createContext(globalContext);
|
||||
|
||||
const AppStateContextProvider = ({ children }) => {
|
||||
const [invoicedItems, setInvoicedItems] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState({});
|
||||
const [user, setUser] = useState(getUserFromLS());
|
||||
const [locale, setLocale] = useState(getLocaleFromLS());
|
||||
|
||||
useEffect(() => {
|
||||
const updateUser = (newUser) => {
|
||||
console.log("USER_UPDATE WAS TRIGGERED", counter++);
|
||||
changeUserDefaults(newUser);
|
||||
setUserToLS(newUser);
|
||||
setUser(newUser);
|
||||
};
|
||||
emitter.on("UPDATE_USER", updateUser);
|
||||
return () => {
|
||||
emitter.removeListener("UPDATE_USER", updateUser);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const value = useMemo(
|
||||
() => ({
|
||||
error: error,
|
||||
loading: loading,
|
||||
invoicedItems: invoicedItems,
|
||||
user: user,
|
||||
locale: locale,
|
||||
setLoading,
|
||||
setError,
|
||||
setInvoicedItems,
|
||||
setUser: setUser,
|
||||
setLocale: setLocale,
|
||||
}),
|
||||
[locale, user, loading, error, invoicedItems]
|
||||
);
|
||||
|
||||
return (
|
||||
<AppStateContext.Provider value={value}>
|
||||
{children}
|
||||
</AppStateContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export { AppStateContextProvider, AppStateContext };
|
||||
@@ -1,16 +0,0 @@
|
||||
import React from "react";
|
||||
import { Redirect } from "react-router-dom";
|
||||
import { useAppState } from "../hooks/useAppState";
|
||||
|
||||
const withRestrictions = (Component, isUserMeetRestrictions) => {
|
||||
return (props) => {
|
||||
const { user, invoicedItems } = useAppState();
|
||||
return isUserMeetRestrictions({ user, invoicedItems }) ? (
|
||||
<Component {...props} />
|
||||
) : (
|
||||
<Redirect exact to="/error" />
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
export { withRestrictions };
|
||||
@@ -1,22 +0,0 @@
|
||||
import { useEffect } from "react";
|
||||
|
||||
function useAbortableEffect(effect, dependencies) {
|
||||
const status = {}; // mutable status object
|
||||
useEffect(() => {
|
||||
status.aborted = false;
|
||||
// pass the mutable object to the effect callback
|
||||
// store the returned value for cleanup
|
||||
const cleanUpFn = effect(status);
|
||||
return () => {
|
||||
// mutate the object to signal the consumer
|
||||
// this effect is cleaning up
|
||||
status.aborted = true;
|
||||
if (typeof cleanUpFn === "function") {
|
||||
// run the cleanup function
|
||||
cleanUpFn();
|
||||
}
|
||||
};
|
||||
}, [...dependencies]);
|
||||
}
|
||||
|
||||
export { useAbortableEffect };
|
||||
@@ -1,6 +0,0 @@
|
||||
import { useContext } from "react";
|
||||
import { AppStateContext } from "../contexts/AppStateContext";
|
||||
|
||||
const useAppState = () => useContext(AppStateContext);
|
||||
|
||||
export { useAppState };
|
||||
@@ -1,34 +0,0 @@
|
||||
import { useHistory } from "react-router-dom";
|
||||
import { useAppState } from "./useAppState";
|
||||
|
||||
const useErrors = () => {
|
||||
const history = useHistory();
|
||||
const { setError } = useAppState();
|
||||
|
||||
const handleError = (error) => {
|
||||
console.error("Error", error);
|
||||
|
||||
if (error.response) {
|
||||
const { status, statusText, data } = error.response;
|
||||
setError({
|
||||
status,
|
||||
statusText,
|
||||
message: data.error ? data.error.message : data,
|
||||
});
|
||||
} else {
|
||||
setError({
|
||||
status: "",
|
||||
statusText: "Error",
|
||||
message: "Something went wrong. Seems like request is too long",
|
||||
});
|
||||
}
|
||||
|
||||
history.push("/error");
|
||||
};
|
||||
|
||||
return {
|
||||
handleError,
|
||||
};
|
||||
};
|
||||
|
||||
export { useErrors };
|
||||
@@ -1,11 +0,0 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import App from "./App";
|
||||
import * as serviceWorker from "./serviceWorker";
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById("root"));
|
||||
|
||||
// If you want your app to work offline and load faster, you can change
|
||||
// unregister() to register() below. Note this comes with some pitfalls.
|
||||
// Learn more about service workers: https://bit.ly/CRA-PWA
|
||||
serviceWorker.unregister();
|
||||
@@ -1,7 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
|
||||
<g fill="#61DAFB">
|
||||
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
|
||||
<circle cx="420.9" cy="296.5" r="45.7"/>
|
||||
<path d="M520.5 78.1z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.6 KiB |
@@ -1,50 +0,0 @@
|
||||
import React from "react";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import { isEmpty } from "lodash";
|
||||
import { Result, Button } from "antd";
|
||||
import { useAppState } from "../hooks/useAppState";
|
||||
|
||||
const ErrorPage = () => {
|
||||
const { error, setError } = useAppState();
|
||||
const history = useHistory();
|
||||
|
||||
const onGoHome = () => {
|
||||
setError({});
|
||||
history.push("/");
|
||||
};
|
||||
|
||||
const goLoginPage = () => {
|
||||
setError({});
|
||||
history.push("/login");
|
||||
};
|
||||
|
||||
const goHomeButton = (
|
||||
<Button onClick={onGoHome} key={1} type="primary">
|
||||
Back Home
|
||||
</Button>
|
||||
);
|
||||
const goLoginButton = (
|
||||
<Button onClick={goLoginPage} key={2} type="primary">
|
||||
Login
|
||||
</Button>
|
||||
);
|
||||
|
||||
const errorResultProps = isEmpty(error)
|
||||
? {
|
||||
status: 404,
|
||||
title: "Not found",
|
||||
subTitle: "Sorry, the page you visited does not exist.",
|
||||
extra: goHomeButton,
|
||||
}
|
||||
: {
|
||||
status: [404, 403, 500].includes(error.status) ? error.status : "error",
|
||||
title: error.statusText,
|
||||
subTitle: error.message,
|
||||
extra:
|
||||
error.status === 401 ? [goHomeButton, goLoginButton] : goHomeButton,
|
||||
};
|
||||
|
||||
return <Result {...errorResultProps} />;
|
||||
};
|
||||
|
||||
export { ErrorPage };
|
||||
@@ -1,107 +0,0 @@
|
||||
import React from "react";
|
||||
import { Table, Button, message } from "antd";
|
||||
import { useAppState } from "../hooks/useAppState";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import { invoice } from "../api/calls";
|
||||
import { useErrors } from "../hooks/useErrors";
|
||||
import { MESSAGE_TIMEOUT } from "../util/constants";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
},
|
||||
{
|
||||
title: "Artist",
|
||||
dataIndex: "artist",
|
||||
},
|
||||
{
|
||||
title: "Album",
|
||||
dataIndex: "albumTitle",
|
||||
},
|
||||
{
|
||||
title: "Price",
|
||||
dataIndex: "unitPrice",
|
||||
},
|
||||
];
|
||||
|
||||
const InvoicePage = () => {
|
||||
const history = useHistory();
|
||||
const { handleError } = useErrors();
|
||||
const { user, invoicedItems, setInvoicedItems, setLoading } = useAppState();
|
||||
|
||||
const data = invoicedItems.map(({ ID, ...otherProps }) => ({
|
||||
key: `invoiceItem${ID}`,
|
||||
...otherProps,
|
||||
}));
|
||||
|
||||
const onBuy = () => {
|
||||
setLoading(true);
|
||||
invoice(
|
||||
invoicedItems.map(({ ID, unitPrice }) => ({
|
||||
ID,
|
||||
unitPrice,
|
||||
}))
|
||||
)
|
||||
.then(() => {
|
||||
setInvoicedItems([]);
|
||||
message.success("Invoice successfully completed", MESSAGE_TIMEOUT);
|
||||
history.push("/invoices");
|
||||
})
|
||||
.catch(handleError)
|
||||
.finally(() => setLoading(false));
|
||||
};
|
||||
const onCancel = () => {
|
||||
setInvoicedItems([]);
|
||||
history.push("/");
|
||||
};
|
||||
const goLogin = () => {
|
||||
history.push("/login");
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ backgroundColor: "white", padding: 10 }}>
|
||||
<Table
|
||||
bordered={false}
|
||||
pagination={false}
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
size="middle"
|
||||
footer={() => (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
padding: 5,
|
||||
}}
|
||||
>
|
||||
{user ? (
|
||||
<>
|
||||
<Button type="primary" size="large" onClick={onBuy}>
|
||||
Buy
|
||||
</Button>
|
||||
<Button
|
||||
size="large"
|
||||
style={{ marginLeft: 5 }}
|
||||
onClick={onCancel}
|
||||
danger
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<section>
|
||||
<Button type="primary" size="large" onClick={goLogin}>
|
||||
Login
|
||||
</Button>
|
||||
<span> to buy selected</span>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { InvoicePage };
|
||||
@@ -1,107 +0,0 @@
|
||||
import React from "react";
|
||||
import { Form, Input, Button, Checkbox, message } from "antd";
|
||||
import { login } from "../api/calls";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import { useAppState } from "../hooks/useAppState";
|
||||
import { useErrors } from "../hooks/useErrors";
|
||||
import { MESSAGE_TIMEOUT } from "../util/constants";
|
||||
import { emitter } from "../util/EventEmitter";
|
||||
|
||||
const layout = {
|
||||
labelCol: {
|
||||
span: 8,
|
||||
},
|
||||
wrapperCol: {
|
||||
span: 8,
|
||||
},
|
||||
};
|
||||
const tailLayout = {
|
||||
wrapperCol: {
|
||||
offset: 8,
|
||||
span: 8,
|
||||
},
|
||||
};
|
||||
|
||||
const Login = () => {
|
||||
const [form] = Form.useForm();
|
||||
const history = useHistory();
|
||||
const { setLoading, setInvoicedItems } = useAppState();
|
||||
const { handleError } = useErrors();
|
||||
|
||||
const onFinish = (values) => {
|
||||
setLoading(true);
|
||||
login({ email: values.email, password: values.password })
|
||||
.then(({ data: user }) => {
|
||||
emitter.emit("UPDATE_USER", user);
|
||||
if (user.roles.includes("employee")) {
|
||||
setInvoicedItems([]);
|
||||
}
|
||||
history.push("/");
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
if (error.response && error.response.status === 401) {
|
||||
form.resetFields();
|
||||
message.error("Invalid credentials!", MESSAGE_TIMEOUT);
|
||||
} else {
|
||||
handleError(error);
|
||||
}
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
};
|
||||
|
||||
const onFinishFailed = (errorInfo) => {
|
||||
console.log("Validation Failed:", errorInfo);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form
|
||||
form={form}
|
||||
{...layout}
|
||||
name="basic"
|
||||
initialValues={{
|
||||
remember: true,
|
||||
}}
|
||||
onFinish={onFinish}
|
||||
onFinishFailed={onFinishFailed}
|
||||
>
|
||||
<Form.Item
|
||||
label="Email"
|
||||
name="email"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "Please input your email!",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="Password"
|
||||
name="password"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "Please input your password!",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input.Password style={{}} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item {...tailLayout} name="remember" valuePropName="checked">
|
||||
<Checkbox>Remember me</Checkbox>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item {...tailLayout}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export { Login };
|
||||
@@ -1,115 +0,0 @@
|
||||
import React, { useState, useMemo, useEffect } from "react";
|
||||
import { Form, Radio, Button, message } from "antd";
|
||||
import { TrackForm } from "./manage-store/TrackForm";
|
||||
import { AddArtistForm } from "./manage-store/AddArtistForm";
|
||||
import { AddAlbumForm } from "./manage-store/AddAlbumForm";
|
||||
import { useErrors } from "../hooks/useErrors";
|
||||
import { useAppState } from "../hooks/useAppState";
|
||||
import { addTrack, addArtist, addAlbum } from "../api/calls";
|
||||
import { MESSAGE_TIMEOUT } from "../util/constants";
|
||||
|
||||
const FORM_TYPES = {
|
||||
track: "track",
|
||||
artist: "artist",
|
||||
album: "album",
|
||||
playlist: "",
|
||||
};
|
||||
|
||||
const chooseForm = (type) => {
|
||||
return (
|
||||
(type === "track" && <TrackForm />) ||
|
||||
(type === "artist" && <AddArtistForm />) ||
|
||||
(type === "album" && <AddAlbumForm />)
|
||||
);
|
||||
};
|
||||
|
||||
const ManageStore = () => {
|
||||
const [form] = Form.useForm();
|
||||
const { handleError } = useErrors();
|
||||
const { setLoading } = useAppState();
|
||||
const [formType, setFormType] = useState("track");
|
||||
|
||||
useEffect(() => {
|
||||
form.resetFields();
|
||||
}, [formType]);
|
||||
|
||||
const formElement = useMemo(() => {
|
||||
return chooseForm(formType);
|
||||
}, [formType]);
|
||||
|
||||
const onChangeForm = (event) => {
|
||||
setFormType(event.target.value);
|
||||
};
|
||||
|
||||
const sendCreateRequest = ({ type, ...data }) => {
|
||||
setLoading(true);
|
||||
|
||||
let promise;
|
||||
switch (type) {
|
||||
case FORM_TYPES.track:
|
||||
promise = addTrack({
|
||||
name: data.name,
|
||||
composer: data.composer,
|
||||
album: { ID: data.albumID },
|
||||
genre: { ID: data.genreID },
|
||||
unitPrice: data.unitPrice.toString(),
|
||||
});
|
||||
break;
|
||||
case FORM_TYPES.artist:
|
||||
promise = addArtist(data);
|
||||
break;
|
||||
case FORM_TYPES.album:
|
||||
promise = addAlbum({ title: data.name, artist: { ID: data.artistID } });
|
||||
break;
|
||||
default:
|
||||
}
|
||||
|
||||
promise
|
||||
.then(() => {
|
||||
message.success("Entity successfully created", MESSAGE_TIMEOUT);
|
||||
form.resetFields();
|
||||
})
|
||||
.catch(handleError)
|
||||
.finally(() => setLoading(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<Form
|
||||
style={{ width: 700 }}
|
||||
form={form}
|
||||
labelCol={{
|
||||
span: 4,
|
||||
}}
|
||||
wrapperCol={{
|
||||
span: 14,
|
||||
}}
|
||||
layout="horizontal"
|
||||
initialValues={{
|
||||
type: formType,
|
||||
}}
|
||||
type={formType}
|
||||
onFinish={sendCreateRequest}
|
||||
onFinishFailed={() => console.log("Not valid params provided")}
|
||||
>
|
||||
<Form.Item label="Entity" name="type">
|
||||
<Radio.Group onChange={onChangeForm}>
|
||||
<Radio.Button value="track">Track</Radio.Button>
|
||||
<Radio.Button value="album">Album</Radio.Button>
|
||||
<Radio.Button value="artist">Artist</Radio.Button>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
{formElement}
|
||||
<Form.Item
|
||||
type="primary"
|
||||
wrapperCol={{
|
||||
span: 14,
|
||||
offset: 4,
|
||||
}}
|
||||
>
|
||||
<Button onClick={() => form.submit()}>Create</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export { ManageStore };
|
||||
@@ -1,185 +0,0 @@
|
||||
import React, { useState, useEffect, useMemo, useCallback } from "react";
|
||||
import { Button, message, Tag, Collapse, Table, Spin } from "antd";
|
||||
import moment from "moment";
|
||||
import { useErrors } from "../hooks/useErrors";
|
||||
import { useAppState } from "../hooks/useAppState";
|
||||
import { cancelInvoice, fetchInvoices } from "../api/calls";
|
||||
import { MESSAGE_TIMEOUT } from "../util/constants";
|
||||
|
||||
const { Panel } = Collapse;
|
||||
const INVOICE_STATUS = {
|
||||
2: {
|
||||
tagTitle: "Shipped",
|
||||
color: "green",
|
||||
},
|
||||
1: {
|
||||
tagTitle: "Submitted",
|
||||
color: "processing",
|
||||
canCancel: true,
|
||||
},
|
||||
["-1"]: {
|
||||
tagTitle: "Cancelled",
|
||||
color: "default",
|
||||
},
|
||||
};
|
||||
const CANCELLED_STATUS = -1;
|
||||
const DATE_TIME_FORMAT_PATTERN = "LLLL";
|
||||
const UTC_DATE_TIME_FORMAT = "YYYY-MM-DDThh:mm:ss";
|
||||
const INVOICE_ITEMS_COLUMNS = [
|
||||
{
|
||||
title: "Track name",
|
||||
dataIndex: "name",
|
||||
},
|
||||
{
|
||||
title: "Artist",
|
||||
dataIndex: "artistName",
|
||||
},
|
||||
{
|
||||
title: "Album",
|
||||
dataIndex: "albumTitle",
|
||||
},
|
||||
{
|
||||
title: "Price",
|
||||
dataIndex: "unitPrice",
|
||||
},
|
||||
];
|
||||
const LEVERAGE_DURATION = 1; // in hours
|
||||
const STATUSES = { submitted: 1, shipped: 2, canceled: -1 };
|
||||
|
||||
const isLeverageTimeExpired = (utcNowTimestamp, invoiceDate) => {
|
||||
const duration = moment.duration(
|
||||
moment(utcNowTimestamp).diff(moment(invoiceDate).valueOf())
|
||||
);
|
||||
return duration.asHours() > LEVERAGE_DURATION;
|
||||
};
|
||||
|
||||
const chooseStatus = (utcNowTimestamp, invoiceDate, statusFromDb) => {
|
||||
if (
|
||||
isLeverageTimeExpired(utcNowTimestamp, invoiceDate) &&
|
||||
statusFromDb !== STATUSES.canceled
|
||||
) {
|
||||
return INVOICE_STATUS[STATUSES.shipped];
|
||||
}
|
||||
return INVOICE_STATUS[statusFromDb];
|
||||
};
|
||||
|
||||
const ExtraHeader = ({ ID, invoiceDate, status: initialStatus }) => {
|
||||
const { loading, setLoading } = useAppState();
|
||||
const { handleError } = useErrors();
|
||||
const [loadingHeaderId, setLoadingHeaderId] = useState();
|
||||
const [status, setStatus] = useState(initialStatus);
|
||||
|
||||
const statusConfig = useMemo(() => {
|
||||
const utcNowTimestamp = moment(
|
||||
moment().utc().format(UTC_DATE_TIME_FORMAT)
|
||||
).valueOf();
|
||||
return chooseStatus(utcNowTimestamp, invoiceDate, status);
|
||||
}, [status]);
|
||||
|
||||
const onCancelInvoice = (event, ID) => {
|
||||
event.stopPropagation();
|
||||
setLoading(true);
|
||||
setLoadingHeaderId(ID);
|
||||
cancelInvoice(ID)
|
||||
.then(() => {
|
||||
message.success("Invoice successfully cancelled", MESSAGE_TIMEOUT);
|
||||
setLoadingHeaderId(undefined);
|
||||
setStatus(CANCELLED_STATUS);
|
||||
})
|
||||
.catch(handleError)
|
||||
.finally(() => setLoading(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<Spin spinning={loading && loadingHeaderId === ID}>
|
||||
<Tag color={statusConfig.color}>{statusConfig.tagTitle}</Tag>
|
||||
{statusConfig.canCancel && (
|
||||
<Button
|
||||
onClick={(event) => onCancelInvoice(event, ID)}
|
||||
size="small"
|
||||
danger
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
)}
|
||||
</Spin>
|
||||
);
|
||||
};
|
||||
|
||||
const MyInvoicesPage = () => {
|
||||
const { handleError } = useErrors();
|
||||
const { setLoading } = useAppState();
|
||||
const [invoices, setInvoices] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
fetchInvoices()
|
||||
.then(({ data: { value } }) => setInvoices(value))
|
||||
.catch(handleError)
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const genExtra = useCallback(
|
||||
(ID, status, invoiceDate) => (
|
||||
<ExtraHeader ID={ID} status={status} invoiceDate={invoiceDate} />
|
||||
),
|
||||
[]
|
||||
);
|
||||
const invoiceElements = useMemo(() => {
|
||||
return invoices.map(({ ID, status, invoiceDate, total, invoiceItems }) => {
|
||||
const invoiceItemsData = invoiceItems.map(
|
||||
({
|
||||
ID,
|
||||
track: {
|
||||
name,
|
||||
unitPrice,
|
||||
album: {
|
||||
title: albumTitle,
|
||||
artist: { name: artistName },
|
||||
},
|
||||
},
|
||||
}) => ({
|
||||
key: ID,
|
||||
ID,
|
||||
name,
|
||||
unitPrice,
|
||||
albumTitle,
|
||||
artistName,
|
||||
})
|
||||
);
|
||||
|
||||
return (
|
||||
<Panel
|
||||
header={moment(invoiceDate).format(DATE_TIME_FORMAT_PATTERN)}
|
||||
key={ID}
|
||||
extra={genExtra(ID, status, invoiceDate)}
|
||||
>
|
||||
<div>
|
||||
<Table
|
||||
bordered={false}
|
||||
pagination={false}
|
||||
columns={INVOICE_ITEMS_COLUMNS}
|
||||
dataSource={invoiceItemsData}
|
||||
size="middle"
|
||||
footer={() => (
|
||||
<span
|
||||
style={{ fontWeight: 600 }}
|
||||
>{`Total price: ${total}`}</span>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</Panel>
|
||||
);
|
||||
});
|
||||
}, [invoices]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{invoiceElements && (
|
||||
<Collapse expandIconPosition="left">{invoiceElements}</Collapse>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { MyInvoicesPage };
|
||||
@@ -1,108 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { Form, Button, message, Input } from "antd";
|
||||
import { omit, map } from "lodash";
|
||||
import { fetchPerson, confirmPerson } from "../api/calls";
|
||||
import { useErrors } from "../hooks/useErrors";
|
||||
import { useAppState } from "../hooks/useAppState";
|
||||
import { MESSAGE_TIMEOUT } from "../util/constants";
|
||||
import { useAbortableEffect } from "../hooks/useAbortableEffect";
|
||||
|
||||
const PERSON_PROP = {
|
||||
address: "Address ",
|
||||
city: "City ",
|
||||
country: "Country ",
|
||||
fax: "Fax: ",
|
||||
firstName: "First name: ",
|
||||
lastName: "Last name: ",
|
||||
phone: "Phone: ",
|
||||
postalCode: "Postal code: ",
|
||||
state: "State",
|
||||
email: "email",
|
||||
company: "Company: ",
|
||||
};
|
||||
|
||||
const PersonPage = () => {
|
||||
const { setLoading } = useAppState();
|
||||
const { handleError } = useErrors();
|
||||
const [form] = Form.useForm();
|
||||
const [person, setPerson] = useState({
|
||||
lastName: "",
|
||||
firstName: "",
|
||||
city: "",
|
||||
state: "",
|
||||
address: "",
|
||||
country: "",
|
||||
phone: "",
|
||||
postalCode: "",
|
||||
fax: "",
|
||||
email: "",
|
||||
company: "",
|
||||
});
|
||||
|
||||
useAbortableEffect((status) => {
|
||||
setLoading(true);
|
||||
|
||||
fetchPerson()
|
||||
.then(({ data: personData }) => {
|
||||
personData = omit(personData, "@odata.context", "ID");
|
||||
if (!status.aborted) {
|
||||
setPerson(personData);
|
||||
}
|
||||
})
|
||||
.catch(handleError)
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const onConfirmChanges = (newPerson) => {
|
||||
setLoading(true);
|
||||
confirmPerson(newPerson)
|
||||
.then(() => {
|
||||
message.success("Person successfully updated", MESSAGE_TIMEOUT);
|
||||
})
|
||||
.catch(handleError)
|
||||
.finally(() => setLoading(false));
|
||||
};
|
||||
|
||||
const personProperties = map(Object.keys(person), (currentKey) => (
|
||||
<div key={currentKey}>
|
||||
<Form.Item label={PERSON_PROP[currentKey]} name={currentKey}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</div>
|
||||
));
|
||||
|
||||
return (
|
||||
<>
|
||||
{person.lastName !== "" && (
|
||||
<Form
|
||||
form={form}
|
||||
labelCol={{
|
||||
span: 4,
|
||||
}}
|
||||
wrapperCol={{
|
||||
span: 14,
|
||||
}}
|
||||
layout="horizontal"
|
||||
onFinish={onConfirmChanges}
|
||||
onFinishFailed={() => console.log("Not valid params provided")}
|
||||
initialValues={{
|
||||
...person,
|
||||
}}
|
||||
>
|
||||
{personProperties}
|
||||
<Form.Item
|
||||
type="primary"
|
||||
wrapperCol={{
|
||||
span: 14,
|
||||
offset: 4,
|
||||
}}
|
||||
>
|
||||
<Button onClick={() => form.submit()}>Confirm changes</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export { PersonPage };
|
||||
@@ -1,4 +0,0 @@
|
||||
.ant-select > div.ant-select-selector {
|
||||
padding: 5px;
|
||||
min-width: 300px;
|
||||
}
|
||||
@@ -1,219 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { debounce } from "lodash";
|
||||
import { Input, Col, Row, Select, Pagination } from "antd";
|
||||
import { Track } from "./tracks/Track";
|
||||
import { ManagedTrack } from "./tracks/ManagedTrack";
|
||||
import { useAppState } from "../hooks/useAppState";
|
||||
import { useErrors } from "../hooks/useErrors";
|
||||
import { fetchTacks, countTracks, fetchGenres } from "../api/calls";
|
||||
import { useAbortableEffect } from "../hooks/useAbortableEffect";
|
||||
import { requireEmployee } from "../util/constants";
|
||||
import "./TracksPage.css";
|
||||
|
||||
const { Search } = Input;
|
||||
const { Option } = Select;
|
||||
|
||||
const DEBOUNCE_TIMER = 500;
|
||||
const DEBOUNCE_OPTIONS = {
|
||||
leading: true,
|
||||
trailing: false,
|
||||
};
|
||||
|
||||
const renderGenres = (genres) =>
|
||||
genres.map(({ ID, name }) => (
|
||||
<Option key={ID} value={ID.toString()}>
|
||||
{name}
|
||||
</Option>
|
||||
));
|
||||
|
||||
const TracksContainer = () => {
|
||||
const { setLoading, user } = useAppState();
|
||||
const { handleError } = useErrors();
|
||||
const [state, setState] = useState({
|
||||
tracks: [],
|
||||
genres: [],
|
||||
pagination: {
|
||||
currentPage: 1,
|
||||
totalItems: 0,
|
||||
pageSize: 20,
|
||||
},
|
||||
searchOptions: {
|
||||
substr: "",
|
||||
genreIds: [],
|
||||
},
|
||||
});
|
||||
|
||||
useAbortableEffect((status) => {
|
||||
setLoading(true);
|
||||
|
||||
const countTracksReq = countTracks();
|
||||
const getTracksRequest = fetchTacks();
|
||||
const getGenresReq = fetchGenres();
|
||||
|
||||
Promise.all([countTracksReq, getTracksRequest, getGenresReq])
|
||||
.then(
|
||||
([
|
||||
{ data: totalItems },
|
||||
{
|
||||
data: { value: tracks },
|
||||
},
|
||||
{
|
||||
data: { value: genres },
|
||||
},
|
||||
]) => {
|
||||
if (!status.aborted) {
|
||||
setState({
|
||||
...state,
|
||||
tracks,
|
||||
genres,
|
||||
pagination: { ...state.pagination, totalItems },
|
||||
});
|
||||
}
|
||||
}
|
||||
)
|
||||
.catch(handleError)
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const onSearch = debounce(
|
||||
() => {
|
||||
setLoading(true);
|
||||
const options = {
|
||||
$top: state.pagination.pageSize,
|
||||
substr: state.searchOptions.substr,
|
||||
genreIds: state.searchOptions.genreIds,
|
||||
};
|
||||
|
||||
Promise.all([
|
||||
fetchTacks(options),
|
||||
countTracks({
|
||||
substr: options.substr,
|
||||
genreIds: options.genreIds,
|
||||
}),
|
||||
])
|
||||
.then(([{ data: { value: tracks } }, { data: totalItems }]) =>
|
||||
setState({
|
||||
...state,
|
||||
tracks,
|
||||
pagination: { ...state.pagination, totalItems },
|
||||
})
|
||||
)
|
||||
.catch(handleError)
|
||||
.finally(() => setLoading(false));
|
||||
},
|
||||
DEBOUNCE_TIMER,
|
||||
DEBOUNCE_OPTIONS
|
||||
);
|
||||
const onSelectChange = (genres) => {
|
||||
setState({
|
||||
...state,
|
||||
searchOptions: {
|
||||
...state.searchOptions,
|
||||
genreIds: genres.map((value) => parseInt(value, 10)),
|
||||
},
|
||||
});
|
||||
};
|
||||
const onSearchChange = (event) => {
|
||||
setState({
|
||||
...state,
|
||||
searchOptions: { ...state.searchOptions, substr: event.target.value },
|
||||
});
|
||||
};
|
||||
const onChangePage = (pageNumber) => {
|
||||
document
|
||||
.querySelector("section.ant-layout")
|
||||
.scrollTo({ top: 0, left: 0, behavior: "smooth" });
|
||||
setLoading(true);
|
||||
|
||||
const options = {
|
||||
$top: state.pagination.pageSize,
|
||||
substr: state.searchOptions.substr,
|
||||
genreIds: state.searchOptions.genreIds,
|
||||
$skip: (pageNumber - 1) * state.pagination.pageSize,
|
||||
};
|
||||
fetchTacks(options)
|
||||
.then((response) =>
|
||||
setState({
|
||||
...state,
|
||||
tracks: response.data.value,
|
||||
pagination: { ...state.pagination, currentPage: pageNumber },
|
||||
})
|
||||
)
|
||||
.catch(handleError)
|
||||
.finally(() => setLoading(false));
|
||||
};
|
||||
const deleteTrack = (ID) => {
|
||||
setState({
|
||||
...state,
|
||||
tracks: state.tracks.filter(({ ID: curID }) => curID !== ID),
|
||||
});
|
||||
};
|
||||
const renderTracks = (tracks) => {
|
||||
const isEmployee = requireEmployee(user);
|
||||
const TrackComponent = isEmployee ? ManagedTrack : Track;
|
||||
return tracks.map((track) => {
|
||||
const isAlreadyOrdered = !isEmployee && track.alreadyOrdered;
|
||||
const onDeleteTrack = isEmployee && ((ID) => deleteTrack(ID));
|
||||
return (
|
||||
<Col key={track.ID} className="gutter-row" span={8}>
|
||||
<TrackComponent
|
||||
initialTrack={track}
|
||||
onDeleteTrack={onDeleteTrack}
|
||||
isAlreadyOrdered={isAlreadyOrdered}
|
||||
/>
|
||||
</Col>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const trackElements = renderTracks(state.tracks);
|
||||
const genreElements = renderGenres(state.genres);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "start",
|
||||
maxWidth: 600,
|
||||
paddingBottom: 10,
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
mode="multiple"
|
||||
allowClear
|
||||
style={{ marginRight: 10, borderRadius: 6 }}
|
||||
placeholder="Genres"
|
||||
onChange={(value) => onSelectChange(value)}
|
||||
>
|
||||
{genreElements}
|
||||
</Select>
|
||||
<Search
|
||||
style={{
|
||||
borderRadius: 6,
|
||||
}}
|
||||
placeholder="Search tracks"
|
||||
size="large"
|
||||
onSearch={onSearch}
|
||||
onChange={onSearchChange}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Row gutter={[{ xs: 8, sm: 16, md: 24, lg: 32 }, 24]}>
|
||||
{trackElements}
|
||||
</Row>
|
||||
</div>
|
||||
<div style={{ display: "flex", justifyContent: "center" }}>
|
||||
<Pagination
|
||||
showSizeChanger={false}
|
||||
defaultCurrent={1}
|
||||
total={state.pagination.totalItems}
|
||||
pageSize={state.pagination.pageSize}
|
||||
onChange={onChangePage}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export { TracksContainer };
|
||||
@@ -1,62 +0,0 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { Form, Input, Select } from "antd";
|
||||
import { useSearch } from "@umijs/hooks";
|
||||
import { useErrors } from "../../hooks/useErrors";
|
||||
import { fetchArtistsByName } from "../../api/calls";
|
||||
|
||||
const REQUIRED = [
|
||||
{
|
||||
required: true,
|
||||
message: "This filed is required!",
|
||||
},
|
||||
];
|
||||
const ARTISTS_LIMIT = 10;
|
||||
|
||||
const getArtists = function (value) {
|
||||
return fetchArtistsByName(value, ARTISTS_LIMIT)
|
||||
.then((response) => response.data.value)
|
||||
.catch(this.handleError);
|
||||
};
|
||||
|
||||
const AddAlbumForm = () => {
|
||||
const { handleError } = useErrors();
|
||||
const {
|
||||
data: artists,
|
||||
loading: isArtistsLoading,
|
||||
onChange: onChangeArtistInput,
|
||||
cancel: onArtistCancel,
|
||||
} = useSearch(getArtists.bind({ handleError }));
|
||||
|
||||
useEffect(() => {
|
||||
onChangeArtistInput();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<h3>Add album</h3>
|
||||
<Form.Item label="Name" name="name" rules={REQUIRED}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label="Artist" name="artistID" rules={REQUIRED}>
|
||||
<Select
|
||||
showSearch
|
||||
placeholder="Select artist"
|
||||
filterOption={false}
|
||||
onSearch={onChangeArtistInput}
|
||||
loading={isArtistsLoading}
|
||||
onBlur={onArtistCancel}
|
||||
style={{ width: 300 }}
|
||||
>
|
||||
{artists &&
|
||||
artists.map((artist) => (
|
||||
<Select.Option key={artist.name} value={artist.ID}>
|
||||
{artist.name}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export { AddAlbumForm };
|
||||
@@ -1,22 +0,0 @@
|
||||
import React from "react";
|
||||
import { Form, Input } from "antd";
|
||||
|
||||
const REQUIRED = [
|
||||
{
|
||||
required: true,
|
||||
message: "This filed is required!",
|
||||
},
|
||||
];
|
||||
|
||||
const AddArtistForm = () => {
|
||||
return (
|
||||
<>
|
||||
<h3>Add artist</h3>
|
||||
<Form.Item label="Name" name="name" rules={REQUIRED}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export { AddArtistForm };
|
||||
@@ -1,93 +0,0 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Form, Input, Select, InputNumber } from "antd";
|
||||
import { head } from "lodash";
|
||||
import { useSearch } from "@umijs/hooks";
|
||||
import { useAppState } from "../../hooks/useAppState";
|
||||
import { fetchAlbumsByName, fetchGenres } from "../../api/calls";
|
||||
import { useErrors } from "../../hooks/useErrors";
|
||||
|
||||
const ALBUMS_LIMIT = 10;
|
||||
const REQUIRED = [
|
||||
{
|
||||
required: true,
|
||||
message: "This filed is required!",
|
||||
},
|
||||
];
|
||||
|
||||
const getAlbums = function (value) {
|
||||
return fetchAlbumsByName(value, ALBUMS_LIMIT)
|
||||
.then((response) => response.data.value)
|
||||
.catch(this.handleError);
|
||||
};
|
||||
|
||||
const TrackForm = ({ initialAlbumTitle }) => {
|
||||
const { handleError } = useErrors();
|
||||
const {
|
||||
data: albums,
|
||||
loading: isAlbumsLoading,
|
||||
onChange: onChangeAlbumInput,
|
||||
cancel: onAlbumCancel,
|
||||
} = useSearch(getAlbums.bind({ handleError }));
|
||||
const { setLoading } = useAppState();
|
||||
const [genres, setGenres] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
Promise.all([fetchGenres(), onChangeAlbumInput(initialAlbumTitle)])
|
||||
.then((responses) => setGenres(head(responses).data.value))
|
||||
.catch(handleError)
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Form.Item label="Name" name="name" rules={REQUIRED}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label="Composer" name="composer" rules={REQUIRED}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label="Album" name="albumID" rules={REQUIRED}>
|
||||
<Select
|
||||
showSearch
|
||||
placeholder="Select album"
|
||||
filterOption={false}
|
||||
onSearch={onChangeAlbumInput}
|
||||
loading={isAlbumsLoading}
|
||||
onBlur={onAlbumCancel}
|
||||
>
|
||||
{albums &&
|
||||
albums.map((album) => (
|
||||
<Select.Option key={album.title} value={album.ID}>
|
||||
{album.title}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item label="Genre" name="genreID" rules={REQUIRED}>
|
||||
<Select showSearch placeholder="Select genre" filterOption={false}>
|
||||
{genres &&
|
||||
genres.map((genre) => (
|
||||
<Select.Option key={genre.name} value={genre.ID}>
|
||||
{genre.name}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="Unit price"
|
||||
name="unitPrice"
|
||||
precision={2}
|
||||
rules={REQUIRED}
|
||||
>
|
||||
<InputNumber
|
||||
precision={2}
|
||||
decimalSeparator="."
|
||||
parser={(value) => value.replace(/\$\s?|(,*)/g, "")}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { TrackForm };
|
||||
@@ -1,43 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { Modal, message } from "antd";
|
||||
import { DeleteOutlined } from "@ant-design/icons";
|
||||
import { deleteTrack } from "../../api/calls";
|
||||
import { useErrors } from "../../hooks/useErrors";
|
||||
import { MESSAGE_TIMEOUT } from "../../util/constants";
|
||||
|
||||
const DeleteAction = ({ ID, onDeleteTrack }) => {
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const { handleError } = useErrors();
|
||||
|
||||
const onOk = () => {
|
||||
setModalVisible(false);
|
||||
deleteTrack(ID)
|
||||
.then(() => {
|
||||
onDeleteTrack();
|
||||
setModalVisible(false);
|
||||
message.success("Track successfully deleted!", MESSAGE_TIMEOUT);
|
||||
})
|
||||
.catch(handleError);
|
||||
};
|
||||
|
||||
const onCancel = () => setModalVisible(false);
|
||||
const onOpenModal = () => {
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DeleteOutlined onClick={onOpenModal}>Delete</DeleteOutlined>
|
||||
<Modal
|
||||
title="Confirm"
|
||||
visible={modalVisible}
|
||||
onOk={onOk}
|
||||
onCancel={onCancel}
|
||||
>
|
||||
<p>Are You really want to delete this track?</p>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export { DeleteAction };
|
||||
@@ -1,119 +0,0 @@
|
||||
import React from "react";
|
||||
import { Button, Modal, Form, message } from "antd";
|
||||
import { EditOutlined, LoadingOutlined } from "@ant-design/icons";
|
||||
import { useErrors } from "../../hooks/useErrors";
|
||||
import { TrackForm } from "../manage-store/TrackForm";
|
||||
import { updateTrack, getTrack } from "../../api/calls";
|
||||
import { MESSAGE_TIMEOUT } from "../../util/constants";
|
||||
|
||||
const EditAction = ({
|
||||
ID,
|
||||
name,
|
||||
composer,
|
||||
genre,
|
||||
unitPrice,
|
||||
album,
|
||||
afterTrackUpdate,
|
||||
}) => {
|
||||
const [visible, setVisible] = React.useState(false);
|
||||
const [confirmLoading, setConfirmLoading] = React.useState(false);
|
||||
const [updateLoading, setUpdateLoading] = React.useState(false);
|
||||
const [form] = Form.useForm();
|
||||
const { handleError } = useErrors();
|
||||
|
||||
const onShowModal = () => {
|
||||
setVisible(true);
|
||||
};
|
||||
|
||||
const onFinish = (value) => {
|
||||
setConfirmLoading(true);
|
||||
updateTrack({
|
||||
ID,
|
||||
name: value.name,
|
||||
composer: value.composer,
|
||||
album: { ID: value.albumID },
|
||||
genre: { ID: value.genreID },
|
||||
unitPrice: value.unitPrice.toString(),
|
||||
})
|
||||
.then(() => {
|
||||
message.success("Track successfully updated!", MESSAGE_TIMEOUT);
|
||||
setConfirmLoading(false);
|
||||
setVisible(false);
|
||||
afterCloseModal();
|
||||
})
|
||||
.catch(handleError);
|
||||
};
|
||||
|
||||
const handleOk = () => {
|
||||
form.submit();
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
const afterCloseModal = () => {
|
||||
setUpdateLoading(true);
|
||||
getTrack(ID)
|
||||
.then((response) => {
|
||||
afterTrackUpdate(response.data);
|
||||
setUpdateLoading(false);
|
||||
})
|
||||
.catch(handleError);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{updateLoading ? (
|
||||
<LoadingOutlined />
|
||||
) : (
|
||||
<EditOutlined onClick={onShowModal} />
|
||||
)}
|
||||
<Modal
|
||||
title="Edit track"
|
||||
visible={visible}
|
||||
confirmLoading={confirmLoading}
|
||||
onOk={handleOk}
|
||||
onCancel={handleCancel}
|
||||
width={600}
|
||||
footer={[
|
||||
<Button key="back" onClick={handleCancel}>
|
||||
Cancel
|
||||
</Button>,
|
||||
<Button
|
||||
key="submit"
|
||||
type="primary"
|
||||
loading={confirmLoading}
|
||||
onClick={handleOk}
|
||||
>
|
||||
Submit
|
||||
</Button>,
|
||||
]}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
labelCol={{
|
||||
span: 4,
|
||||
}}
|
||||
wrapperCol={{
|
||||
span: 14,
|
||||
}}
|
||||
layout="horizontal"
|
||||
onFinish={onFinish}
|
||||
onFinishFailed={() => console.log("Not valid params provided")}
|
||||
initialValues={{
|
||||
name: name,
|
||||
composer: composer,
|
||||
genreID: genre.ID,
|
||||
albumID: album.ID,
|
||||
unitPrice: unitPrice,
|
||||
}}
|
||||
>
|
||||
<TrackForm initialAlbumTitle={album.title} />
|
||||
</Form>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export { EditAction };
|
||||
@@ -1,7 +0,0 @@
|
||||
span > span.anticon.anticon-delete:hover {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.card-element {
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
import React, { useState, useRef } from "react";
|
||||
import { Card } from "antd";
|
||||
import { EditAction } from "./EditAction";
|
||||
import { DeleteAction } from "./DeleteAction";
|
||||
import { TrackCardBody } from "./TrackCardBody";
|
||||
import "./ManagedTrack.css";
|
||||
|
||||
const ManagedTrack = ({ initialTrack, onDeleteTrack }) => {
|
||||
const trackElement = useRef();
|
||||
const [track, setTrack] = useState(initialTrack);
|
||||
|
||||
return (
|
||||
<div className="card-element" ref={trackElement}>
|
||||
<Card
|
||||
actions={[
|
||||
<DeleteAction
|
||||
ID={track.ID}
|
||||
onDeleteTrack={() => {
|
||||
trackElement.current.style.opacity = 0;
|
||||
setTimeout(() => onDeleteTrack(track.ID), 500);
|
||||
}}
|
||||
/>,
|
||||
<EditAction
|
||||
ID={track.ID}
|
||||
name={track.name}
|
||||
composer={track.composer}
|
||||
album={track.album}
|
||||
genre={track.genre}
|
||||
unitPrice={track.unitPrice}
|
||||
afterTrackUpdate={(value) => setTrack(value)}
|
||||
/>,
|
||||
]}
|
||||
title={track.name}
|
||||
bordered={false}
|
||||
>
|
||||
<TrackCardBody track={track} />
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { ManagedTrack };
|
||||
@@ -1,56 +0,0 @@
|
||||
import React, { useState, useRef } from "react";
|
||||
import { Card, Button } from "antd";
|
||||
import { PlusOutlined, MinusOutlined } from "@ant-design/icons";
|
||||
import { useAppState } from "../../hooks/useAppState";
|
||||
import { TrackCardBody } from "./TrackCardBody";
|
||||
|
||||
const Track = ({ initialTrack, isAlreadyOrdered }) => {
|
||||
const trackElement = useRef();
|
||||
const { setInvoicedItems, invoicedItems } = useAppState();
|
||||
const [isJustInvoiced, setIsJustInvoiced] = useState(
|
||||
invoicedItems.find((curTrack) => curTrack.ID === initialTrack.ID)
|
||||
);
|
||||
|
||||
const onChangedStatus = () => {
|
||||
const newIsJustInvoiced = !isJustInvoiced;
|
||||
if (newIsJustInvoiced) {
|
||||
setInvoicedItems([
|
||||
...invoicedItems,
|
||||
{
|
||||
ID: initialTrack.ID,
|
||||
name: initialTrack.name,
|
||||
artist: initialTrack.album.artist.name,
|
||||
albumTitle: initialTrack.album.title,
|
||||
unitPrice: initialTrack.unitPrice,
|
||||
},
|
||||
]);
|
||||
} else {
|
||||
setInvoicedItems(
|
||||
invoicedItems.filter(({ ID: curID }) => curID !== initialTrack.ID)
|
||||
);
|
||||
}
|
||||
setIsJustInvoiced(newIsJustInvoiced);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card-element" ref={trackElement}>
|
||||
<Card
|
||||
actions={[
|
||||
<>
|
||||
{!isAlreadyOrdered && (
|
||||
<Button onClick={onChangedStatus} danger={isJustInvoiced}>
|
||||
{isJustInvoiced ? <MinusOutlined /> : <PlusOutlined />}
|
||||
</Button>
|
||||
)}
|
||||
</>,
|
||||
]}
|
||||
title={initialTrack.name}
|
||||
bordered={false}
|
||||
>
|
||||
<TrackCardBody track={initialTrack} />
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Track };
|
||||
@@ -1,33 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const TrackCardBody = ({ track }) => {
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
Artist:{" "}
|
||||
<span style={{ fontWeight: 600 }}>{track.album.artist.name}</span>
|
||||
</div>
|
||||
<div>
|
||||
Album: <span style={{ fontWeight: 600 }}>{track.album.title}</span>
|
||||
</div>
|
||||
<div>
|
||||
Genre: <span style={{ fontWeight: 600 }}>{track.genre.name}</span>
|
||||
</div>
|
||||
<div>
|
||||
{track.composer && (
|
||||
<span>
|
||||
Compositor:{" "}
|
||||
<span style={{ fontWeight: 600 }}>{track.composer}</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<span>
|
||||
Price: <span style={{ fontWeight: 600 }}>{track.unitPrice}</span>
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export { TrackCardBody };
|
||||
@@ -1,141 +0,0 @@
|
||||
// This optional code is used to register a service worker.
|
||||
// register() is not called by default.
|
||||
|
||||
// This lets the app load faster on subsequent visits in production, and gives
|
||||
// it offline capabilities. However, it also means that developers (and users)
|
||||
// will only see deployed updates on subsequent visits to a page, after all the
|
||||
// existing tabs open on the page have been closed, since previously cached
|
||||
// resources are updated in the background.
|
||||
|
||||
// To learn more about the benefits of this model and instructions on how to
|
||||
// opt-in, read https://bit.ly/CRA-PWA
|
||||
|
||||
const isLocalhost = Boolean(
|
||||
window.location.hostname === 'localhost' ||
|
||||
// [::1] is the IPv6 localhost address.
|
||||
window.location.hostname === '[::1]' ||
|
||||
// 127.0.0.0/8 are considered localhost for IPv4.
|
||||
window.location.hostname.match(
|
||||
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
||||
)
|
||||
);
|
||||
|
||||
export function register(config) {
|
||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||
// The URL constructor is available in all browsers that support SW.
|
||||
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
|
||||
if (publicUrl.origin !== window.location.origin) {
|
||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||
// from what our page is served on. This might happen if a CDN is used to
|
||||
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||
|
||||
if (isLocalhost) {
|
||||
// This is running on localhost. Let's check if a service worker still exists or not.
|
||||
checkValidServiceWorker(swUrl, config);
|
||||
|
||||
// Add some additional logging to localhost, pointing developers to the
|
||||
// service worker/PWA documentation.
|
||||
navigator.serviceWorker.ready.then(() => {
|
||||
console.log(
|
||||
'This web app is being served cache-first by a service ' +
|
||||
'worker. To learn more, visit https://bit.ly/CRA-PWA'
|
||||
);
|
||||
});
|
||||
} else {
|
||||
// Is not localhost. Just register service worker
|
||||
registerValidSW(swUrl, config);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function registerValidSW(swUrl, config) {
|
||||
navigator.serviceWorker
|
||||
.register(swUrl)
|
||||
.then(registration => {
|
||||
registration.onupdatefound = () => {
|
||||
const installingWorker = registration.installing;
|
||||
if (installingWorker == null) {
|
||||
return;
|
||||
}
|
||||
installingWorker.onstatechange = () => {
|
||||
if (installingWorker.state === 'installed') {
|
||||
if (navigator.serviceWorker.controller) {
|
||||
// At this point, the updated precached content has been fetched,
|
||||
// but the previous service worker will still serve the older
|
||||
// content until all client tabs are closed.
|
||||
console.log(
|
||||
'New content is available and will be used when all ' +
|
||||
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
|
||||
);
|
||||
|
||||
// Execute callback
|
||||
if (config && config.onUpdate) {
|
||||
config.onUpdate(registration);
|
||||
}
|
||||
} else {
|
||||
// At this point, everything has been precached.
|
||||
// It's the perfect time to display a
|
||||
// "Content is cached for offline use." message.
|
||||
console.log('Content is cached for offline use.');
|
||||
|
||||
// Execute callback
|
||||
if (config && config.onSuccess) {
|
||||
config.onSuccess(registration);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during service worker registration:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function checkValidServiceWorker(swUrl, config) {
|
||||
// Check if the service worker can be found. If it can't reload the page.
|
||||
fetch(swUrl, {
|
||||
headers: { 'Service-Worker': 'script' },
|
||||
})
|
||||
.then(response => {
|
||||
// Ensure service worker exists, and that we really are getting a JS file.
|
||||
const contentType = response.headers.get('content-type');
|
||||
if (
|
||||
response.status === 404 ||
|
||||
(contentType != null && contentType.indexOf('javascript') === -1)
|
||||
) {
|
||||
// No service worker found. Probably a different app. Reload the page.
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister().then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// Service worker found. Proceed as normal.
|
||||
registerValidSW(swUrl, config);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log(
|
||||
'No internet connection found. App is running in offline mode.'
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export function unregister() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.ready
|
||||
.then(registration => {
|
||||
registration.unregister();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error.message);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom/extend-expect';
|
||||
@@ -1,5 +0,0 @@
|
||||
import EventEmitter from "events";
|
||||
|
||||
const emitter = new EventEmitter();
|
||||
|
||||
export { emitter };
|
||||
@@ -1,14 +0,0 @@
|
||||
export const AVAILABLE_LOCALES = ["en", "fr", "de"];
|
||||
|
||||
export const MESSAGE_TIMEOUT = 2;
|
||||
|
||||
// in dev mode using provided api
|
||||
// in prod mode using proxy
|
||||
export const API =
|
||||
process.env.NODE_ENV === "development" ? "http://localhost:4004/" : "api/";
|
||||
|
||||
export const requireEmployee = (user) =>
|
||||
!!user && user.roles.includes("employee");
|
||||
|
||||
export const requireCustomer = (user) =>
|
||||
!!user && user.roles.includes("customer");
|
||||
@@ -1,35 +0,0 @@
|
||||
import { isValidUser } from "./validateUser";
|
||||
import { AVAILABLE_LOCALES } from "./constants";
|
||||
|
||||
const setUserToLS = (user) => {
|
||||
if (user) {
|
||||
localStorage.setItem("user", JSON.stringify(user));
|
||||
} else {
|
||||
localStorage.removeItem("user");
|
||||
}
|
||||
};
|
||||
|
||||
const getUserFromLS = () => {
|
||||
let userFromLS;
|
||||
try {
|
||||
userFromLS = JSON.parse(localStorage.getItem("user"));
|
||||
if (isValidUser(userFromLS)) {
|
||||
return userFromLS;
|
||||
}
|
||||
} catch (e) {}
|
||||
};
|
||||
|
||||
const getLocaleFromLS = () => {
|
||||
const localeFromLS = localStorage.getItem("locale");
|
||||
return localeFromLS &&
|
||||
localeFromLS !== "undefined" &&
|
||||
AVAILABLE_LOCALES.includes(localeFromLS)
|
||||
? localeFromLS
|
||||
: "en";
|
||||
};
|
||||
|
||||
const setLocaleToLS = (locale) => {
|
||||
localStorage.setItem("locale", locale);
|
||||
};
|
||||
|
||||
export { setLocaleToLS, getLocaleFromLS, getUserFromLS, setUserToLS };
|
||||
@@ -1,20 +0,0 @@
|
||||
import { isArray, isEmpty, isString, isNumber } from "lodash";
|
||||
|
||||
const CUSTOMER_ROLE = "customer";
|
||||
const EMPLOYEE_ROLE = "employee";
|
||||
|
||||
const isValidUser = (user) => {
|
||||
return (
|
||||
!isEmpty(user) &&
|
||||
isNumber(user.ID) &&
|
||||
isArray(user.roles) &&
|
||||
!!user.roles.some(
|
||||
(role) => role === CUSTOMER_ROLE || role === EMPLOYEE_ROLE
|
||||
) &&
|
||||
isString(user.email) &&
|
||||
isString(user.accessToken) &&
|
||||
isString(user.refreshToken)
|
||||
);
|
||||
};
|
||||
|
||||
export { isValidUser };
|
||||
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"welcomeFile": "/index.html",
|
||||
"routes": [
|
||||
{
|
||||
"source": "^(.*)",
|
||||
"target": "$1",
|
||||
"service": "html5-apps-repo-rt"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
{
|
||||
"name": "media-store-approuter",
|
||||
"description": "Approuter",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"@sap/approuter": "^6.8.2"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "node node_modules/@sap/approuter/approuter.js"
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
{
|
||||
"welcomeFile": "/index.html",
|
||||
"authenticationMethod": "none",
|
||||
"routes": [
|
||||
{
|
||||
"source": "/api/(.*)",
|
||||
"target": "$1",
|
||||
"destination": "srv-binding",
|
||||
"authenticationType": "none"
|
||||
},
|
||||
{
|
||||
"source": "^(.*)",
|
||||
"target": "mediastore/$1",
|
||||
"service": "html5-apps-repo-rt"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
{
|
||||
"name": "media-store-html5deployer",
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@sap/html5-app-deployer": "^2.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "node node_modules/@sap/html5-app-deployer/index.js"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user