apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #46 from apuc/webpack-5

Browse Source 
Webpack 5
This commit is contained in:
Z1chi 2023-01-25 17:20:55 +03:00 committed by GitHub
commit fc7211f154
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
65 changed files with 34881 additions and 9917 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.browserslistrc Normal file
View File

@ -0,0 +1,3 @@
> 0.5%
not dead
IE 10

106
config/env.js
View File

@ -1,106 +0,0 @@
'use strict';
const fs = require('fs');
const path = require('path');
const paths = require('./paths');
// Make sure that including paths.js after env.js will read .env variables.
delete require.cache[require.resolve('./paths')];
const NODE_ENV = process.env.NODE_ENV;
if (!NODE_ENV) {
throw new Error(
'The NODE_ENV environment variable is required but was not specified.'
);
}
// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
const dotenvFiles = [
`${paths.dotenv}.${NODE_ENV}.local`,
// Don't include `.env.local` for `test` environment
// since normally you expect tests to produce the same
// results for everyone
NODE_ENV !== 'test' && `${paths.dotenv}.local`,
`${paths.dotenv}.${NODE_ENV}`,
paths.dotenv,
].filter(Boolean);
// Load environment variables from .env* files. Suppress warnings using silent
// if this file is missing. dotenv will never modify any environment variables
// that have already been set. Variable expansion is supported in .env files.
// https://github.com/motdotla/dotenv
// https://github.com/motdotla/dotenv-expand
dotenvFiles.forEach(dotenvFile => {
if (fs.existsSync(dotenvFile)) {
require('dotenv-expand')(
require('dotenv').config({
path: dotenvFile,
})
);
}
});
// We support resolving modules according to `NODE_PATH`.
// This lets you use absolute paths in imports inside large monorepos:
// https://github.com/facebook/create-react-app/issues/253.
// It works similar to `NODE_PATH` in Node itself:
// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
// Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
// We also resolve them to make sure all tools using them work consistently.
const appDirectory = fs.realpathSync(process.cwd());
process.env.NODE_PATH = (process.env.NODE_PATH || '')
.split(path.delimiter)
.filter(folder => folder && !path.isAbsolute(folder))
.map(folder => path.resolve(appDirectory, folder))
.join(path.delimiter);
// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
// injected into the application via DefinePlugin in webpack configuration.
const REACT_APP = /^REACT_APP_/i;
function getClientEnvironment(publicUrl) {
const raw = Object.keys(process.env)
.filter(key => REACT_APP.test(key))
.reduce(
(env, key) => {
env[key] = process.env[key];
return env;
},
{
// Useful for determining whether we’re running in production mode.
// Most importantly, it switches React into the correct mode.
NODE_ENV: process.env.NODE_ENV || 'development',
// Useful for resolving the correct path to static assets in `public`.
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
// This should only be used as an escape hatch. Normally you would put
// images into the `src` and `import` them in code to get their paths.
PUBLIC_URL: publicUrl,
// We support configuring the sockjs pathname during development.
// These settings let a developer run multiple simultaneous projects.
// They are used as the connection `hostname`, `pathname` and `port`
// in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
// and `sockPort` options in webpack-dev-server.
WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
// Whether or not react-refresh is enabled.
// react-refresh is not 100% stable at this time,
// which is why it's disabled by default.
// It is defined here so it is available in the webpackHotDevClient.
FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
}
);
// Stringify all values so we can feed into webpack DefinePlugin
const stringified = {
'process.env': Object.keys(raw).reduce((env, key) => {
env[key] = JSON.stringify(raw[key]);
return env;
}, {}),
};
return { raw, stringified };
}
module.exports = getClientEnvironment;

66
config/getHttpsConfig.js
View File

@ -1,66 +0,0 @@
'use strict';
const fs = require('fs');
const path = require('path');
const crypto = require('crypto');
const chalk = require('react-dev-utils/chalk');
const paths = require('./paths');
// Ensure the certificate and key provided are valid and if not
// throw an easy to debug error
function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
let encrypted;
try {
// publicEncrypt will throw an error with an invalid cert
encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
} catch (err) {
throw new Error(
`The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
);
}
try {
// privateDecrypt will throw an error with an invalid key
crypto.privateDecrypt(key, encrypted);
} catch (err) {
throw new Error(
`The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
err.message
}`
);
}
}
// Read file and throw an error if it doesn't exist
function readEnvFile(file, type) {
if (!fs.existsSync(file)) {
throw new Error(
`You specified ${chalk.cyan(
type
)} in your env, but the file "${chalk.yellow(file)}" can't be found.`
);
}
return fs.readFileSync(file);
}
// Get the https config
// Return cert files if provided in env, otherwise just true or false
function getHttpsConfig() {
const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
const isHttps = HTTPS === 'true';
if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
const config = {
cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
};
validateKeyAndCerts({ ...config, keyFile, crtFile });
return config;
}
return isHttps;
}
module.exports = getHttpsConfig;

29
config/jest/babelTransform.js
View File

@ -1,29 +0,0 @@
'use strict';
const babelJest = require('babel-jest');
const hasJsxRuntime = (() => {
if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
return false;
}
try {
require.resolve('react/jsx-runtime');
return true;
} catch (e) {
return false;
}
})();
module.exports = babelJest.createTransformer({
presets: [
[
require.resolve('babel-preset-react-app'),
{
runtime: hasJsxRuntime ? 'automatic' : 'classic',
},
],
],
babelrc: false,
configFile: false,
});

14
config/jest/cssTransform.js
View File

@ -1,14 +0,0 @@
'use strict';
// This is a custom Jest transformer turning style imports into empty objects.
// http://facebook.github.io/jest/docs/en/webpack.html
module.exports = {
process() {
return 'module.exports = {};';
},
getCacheKey() {
// The output is always the same.
return 'cssTransform';
},
};

40
config/jest/fileTransform.js
View File

@ -1,40 +0,0 @@
'use strict';
const path = require('path');
const camelcase = require('camelcase');
// This is a custom Jest transformer turning file imports into filenames.
// http://facebook.github.io/jest/docs/en/webpack.html
module.exports = {
process(src, filename) {
const assetFilename = JSON.stringify(path.basename(filename));
if (filename.match(/\.svg$/)) {
// Based on how SVGR generates a component name:
// https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
const pascalCaseFilename = camelcase(path.parse(filename).name, {
pascalCase: true,
});
const componentName = `Svg${pascalCaseFilename}`;
return `const React = require('react');
module.exports = {
__esModule: true,
default: ${assetFilename},
ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
return {
$$typeof: Symbol.for('react.element'),
type: 'svg',
ref: ref,
key: null,
props: Object.assign({}, props, {
children: ${assetFilename}
})
};
}),
};`;
}
return `module.exports = ${assetFilename};`;
},
};

134
config/modules.js
View File

@ -1,134 +0,0 @@
'use strict';
const fs = require('fs');
const path = require('path');
const paths = require('./paths');
const chalk = require('react-dev-utils/chalk');
const resolve = require('resolve');
/**
* Get additional module paths based on the baseUrl of a compilerOptions object.
*
* @param {Object} options
*/
function getAdditionalModulePaths(options = {}) {
const baseUrl = options.baseUrl;
if (!baseUrl) {
return '';
}
const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
// We don't need to do anything if `baseUrl` is set to `node_modules`. This is
// the default behavior.
if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
return null;
}
// Allow the user set the `baseUrl` to `appSrc`.
if (path.relative(paths.appSrc, baseUrlResolved) === '') {
return [paths.appSrc];
}
// If the path is equal to the root directory we ignore it here.
// We don't want to allow importing from the root directly as source files are
// not transpiled outside of `src`. We do allow importing them with the
// absolute path (e.g. `src/Components/Button.js`) but we set that up with
// an alias.
if (path.relative(paths.appPath, baseUrlResolved) === '') {
return null;
}
// Otherwise, throw an error.
throw new Error(
chalk.red.bold(
"Your project's `baseUrl` can only be set to `src` or `node_modules`." +
' Create React App does not support other values at this time.'
)
);
}
/**
* Get webpack aliases based on the baseUrl of a compilerOptions object.
*
* @param {*} options
*/
function getWebpackAliases(options = {}) {
const baseUrl = options.baseUrl;
if (!baseUrl) {
return {};
}
const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
if (path.relative(paths.appPath, baseUrlResolved) === '') {
return {
src: paths.appSrc,
};
}
}
/**
* Get jest aliases based on the baseUrl of a compilerOptions object.
*
* @param {*} options
*/
function getJestAliases(options = {}) {
const baseUrl = options.baseUrl;
if (!baseUrl) {
return {};
}
const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
if (path.relative(paths.appPath, baseUrlResolved) === '') {
return {
'^src/(.*)$': '<rootDir>/src/$1',
};
}
}
function getModules() {
// Check if TypeScript is setup
const hasTsConfig = fs.existsSync(paths.appTsConfig);
const hasJsConfig = fs.existsSync(paths.appJsConfig);
if (hasTsConfig && hasJsConfig) {
throw new Error(
'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
);
}
let config;
// If there's a tsconfig.json we assume it's a
// TypeScript project and set up the config
// based on tsconfig.json
if (hasTsConfig) {
const ts = require(resolve.sync('typescript', {
basedir: paths.appNodeModules,
}));
config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
// Otherwise we'll check if there is jsconfig.json
// for non TS projects.
} else if (hasJsConfig) {
config = require(paths.appJsConfig);
}
config = config || {};
const options = config.compilerOptions || {};
const additionalModulePaths = getAdditionalModulePaths(options);
return {
additionalModulePaths: additionalModulePaths,
webpackAliases: getWebpackAliases(options),
jestAliases: getJestAliases(options),
hasTsConfig,
};
}
module.exports = getModules();

76
config/paths.js
View File

@ -1,75 +1,7 @@
'use strict';
const path = require('path'); const path = require('path');
const fs = require('fs');
const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
// Make sure any symlinks in the project folder are resolved:
// https://github.com/facebook/create-react-app/issues/637
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
// We use `PUBLIC_URL` environment variable or "homepage" field to infer
// "public path" at which the app is served.
// webpack needs to know it to put the right <script> hrefs into HTML even in
// single-page apps that may serve index.html for nested URLs like /todos/42.
// We can't use a relative path in HTML because we don't want to load something
// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
const publicUrlOrPath = getPublicUrlOrPath(
process.env.NODE_ENV === 'development',
require(resolveApp('package.json')).homepage,
process.env.PUBLIC_URL
);
const buildPath = process.env.BUILD_PATH || 'build';
const moduleFileExtensions = [
'web.mjs',
'mjs',
'web.js',
'js',
'web.ts',
'ts',
'web.tsx',
'tsx',
'json',
'web.jsx',
'jsx',
];
// Resolve file paths in the same order as webpack
const resolveModule = (resolveFn, filePath) => {
const extension = moduleFileExtensions.find(extension =>
fs.existsSync(resolveFn(`${filePath}.${extension}`))
);
if (extension) {
return resolveFn(`${filePath}.${extension}`);
}
return resolveFn(`${filePath}.js`);
};
// config after eject: we're in ./config/
module.exports = { module.exports = {
dotenv: resolveApp('.env'), public: path.resolve(__dirname, '../public'),
appPath: resolveApp('.'), src: path.resolve(__dirname, '../src'),
appBuild: resolveApp(buildPath), build: path.resolve(__dirname, '../build'),
appPublic: resolveApp('public'), '@node_modules': path.resolve(__dirname, '../node_modules'),
appHtml: resolveApp('public/index.html'),
appIndexJs: resolveModule(resolveApp, 'src/index'),
appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'),
appTsConfig: resolveApp('tsconfig.json'),
appJsConfig: resolveApp('jsconfig.json'),
yarnLockFile: resolveApp('yarn.lock'),
testsSetup: resolveModule(resolveApp, 'src/setupTests'),
proxySetup: resolveApp('src/setupProxy.js'),
appNodeModules: resolveApp('node_modules'),
swSrc: resolveModule(resolveApp, 'src/service-worker'),
publicUrlOrPath,
}; };
module.exports.moduleFileExtensions = moduleFileExtensions;

35
config/pnpTs.js
View File

@ -1,35 +0,0 @@
'use strict';
const { resolveModuleName } = require('ts-pnp');
exports.resolveModuleName = (
typescript,
moduleName,
containingFile,
compilerOptions,
resolutionHost
) => {
return resolveModuleName(
moduleName,
containingFile,
compilerOptions,
resolutionHost,
typescript.resolveModuleName
);
};
exports.resolveTypeReferenceDirective = (
typescript,
moduleName,
containingFile,
compilerOptions,
resolutionHost
) => {
return resolveModuleName(
moduleName,
containingFile,
compilerOptions,
resolutionHost,
typescript.resolveTypeReferenceDirective
);
};

757
config/webpack.config.js
View File

@ -1,757 +0,0 @@
'use strict';
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const resolve = require('resolve');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const safePostCssParser = require('postcss-safe-parser');
const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const ESLintPlugin = require('eslint-webpack-plugin');
const paths = require('./paths');
const modules = require('./modules');
const getClientEnvironment = require('./env');
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const postcssNormalize = require('postcss-normalize');
const appPackageJson = require(paths.appPackageJson);
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
const webpackDevClientEntry = require.resolve(
'react-dev-utils/webpackHotDevClient'
);
const reactRefreshOverlayEntry = require.resolve(
'react-dev-utils/refreshOverlayInterop'
);
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === 'true';
const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === 'true';
const imageInlineSizeLimit = parseInt(
process.env.IMAGE_INLINE_SIZE_LIMIT || '100000'
);
// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig);
// Get the path to the uncompiled service worker (if it exists).
const swSrc = paths.swSrc;
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const hasJsxRuntime = (() => {
if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
return false;
}
try {
require.resolve('react/jsx-runtime');
return true;
} catch (e) {
return false;
}
})();
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function (webpackEnv) {
const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production';
// Variable used for enabling profiling in Production
// passed into alias object. Uses a flag if passed into the build command
const isEnvProductionProfile =
isEnvProduction && process.argv.includes('--profile');
// We will provide `paths.publicUrlOrPath` to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
// Get environment variables to inject into our app.
const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
const shouldUseReactRefresh = env.raw.FAST_REFRESH;
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
// css is located in `static/css`, use '../../' to locate index.html folder
// in production `paths.publicUrlOrPath` can be a relative path
options: paths.publicUrlOrPath.startsWith('.')
? { publicPath: '../../' }
: {},
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
postcssNormalize(),
],
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
},
].filter(Boolean);
if (preProcessor) {
loaders.push(
{
loader: require.resolve('resolve-url-loader'),
options: {
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
root: paths.appSrc,
},
},
{
loader: require.resolve(preProcessor),
options: {
sourceMap: true,
},
}
);
}
return loaders;
};
return {
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
// Stop compilation early in production
bail: isEnvProduction,
devtool: isEnvProduction
? shouldUseSourceMap
? 'source-map'
: false
: isEnvDevelopment && 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
entry:
isEnvDevelopment && !shouldUseReactRefresh
? [
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
//
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
//
// When using the experimental react-refresh integration,
// the webpack plugin takes care of injecting the dev client for us.
webpackDevClientEntry,
// Finally, this is your app's code:
paths.appIndexJs,
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
]
: paths.appIndexJs,
output: {
// The build folder.
path: isEnvProduction ? paths.appBuild : undefined,
// Add /* filename */ comments to generated require()s in the output.
pathinfo: isEnvDevelopment,
// There will be one main bundle, and one file per asynchronous chunk.
// In development, it does not produce real files.
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/bundle.js',
// TODO: remove this when upgrading to webpack 5
futureEmitAssets: true,
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
? 'static/js/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'static/js/[name].chunk.js',
// webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path.
// We inferred the "public path" (such as / or /my-project) from homepage.
publicPath: paths.publicUrlOrPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: isEnvProduction
? info =>
path
.relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/')
: isEnvDevelopment &&
(info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
// Prevents conflicts when multiple webpack runtimes (from different apps)
// are used on the same page.
jsonpFunction: `webpackJsonp${appPackageJson.name}`,
// this defaults to 'window', but by setting it to 'this' then
// module chunks which are built will work in web workers as well.
globalObject: 'this',
},
optimization: {
minimize: isEnvProduction,
minimizer: [
// This is only used in production mode
new TerserPlugin({
terserOptions: {
parse: {
// We want terser to parse ecma 8 code. However, we don't want it
// to apply any minification steps that turns valid ecma 5 code
// into invalid ecma 5 code. This is why the 'compress' and 'output'
// sections only apply transformations that are ecma 5 safe
// https://github.com/facebook/create-react-app/pull/4234
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebook/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
// Disabled because of an issue with Terser breaking valid code:
// https://github.com/facebook/create-react-app/issues/5250
// Pending further investigation:
// https://github.com/terser-js/terser/issues/120
inline: 2,
},
mangle: {
safari10: true,
},
// Added for profiling in devtools
keep_classnames: isEnvProductionProfile,
keep_fnames: isEnvProductionProfile,
output: {
ecma: 5,
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebook/create-react-app/issues/2488
ascii_only: true,
},
},
sourceMap: shouldUseSourceMap,
}),
// This is only used in production mode
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
parser: safePostCssParser,
map: shouldUseSourceMap
? {
// `inline: false` forces the sourcemap to be output into a
// separate file
inline: false,
// `annotation: true` appends the sourceMappingURL to the end of
// the css file, helping the browser find the sourcemap
annotation: true,
}
: false,
},
cssProcessorPluginOptions: {
preset: ['default', { minifyFontValues: { removeQuotes: false } }],
},
}),
],
// Automatically split vendor and commons
// https://twitter.com/wSokra/status/969633336732905474
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
splitChunks: {
chunks: 'all',
name: isEnvDevelopment,
},
// Keep the runtime chunk separated to enable long term caching
// https://twitter.com/wSokra/status/969679223278505985
// https://github.com/facebook/create-react-app/issues/5358
runtimeChunk: {
name: entrypoint => `runtime-${entrypoint.name}`,
},
},
resolve: {
// This allows you to set a fallback for where webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
modules: ['node_modules', paths.appNodeModules].concat(
modules.additionalModulePaths || []
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebook/create-react-app/issues/290
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: paths.moduleFileExtensions
.map(ext => `.${ext}`)
.filter(ext => useTypeScript || !ext.includes('ts')),
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
// Allows for better profiling with ReactDevTools
...(isEnvProductionProfile && {
'react-dom$': 'react-dom/profiling',
'scheduler/tracing': 'scheduler/tracing-profiling',
}),
...(modules.webpackAliases || {}),
},
plugins: [
// Adds support for installing with Plug'n'Play, leading to faster installs and adding
// guards against forgotten dependencies and such.
PnpWebpackPlugin,
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [
paths.appPackageJson,
reactRefreshOverlayEntry,
]),
],
},
resolveLoader: {
plugins: [
// Also related to Plug'n'Play, but this time it tells webpack to load its loaders
// from the current package.
PnpWebpackPlugin.moduleLoader(module),
],
},
module: {
strictExportPresence: true,
rules: [
// Disable require.ensure as it's not a standard language feature.
{ parser: { requireEnsure: false } },
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
// TODO: Merge this config once `image/avif` is in the mime-db
// https://github.com/jshttp/mime-db
{
test: [/\.avif$/],
loader: require.resolve('url-loader'),
options: {
limit: imageInlineSizeLimit,
mimetype: 'image/avif',
name: 'static/media/[name].[hash:8].[ext]',
},
},
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: imageInlineSizeLimit,
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
presets: [
[
require.resolve('babel-preset-react-app'),
{
runtime: hasJsxRuntime ? 'automatic' : 'classic',
},
],
],
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent:
'@svgr/webpack?-svgo,+titleProp,+ref![path]',
},
},
},
],
isEnvDevelopment &&
shouldUseReactRefresh &&
require.resolve('react-refresh/babel'),
].filter(Boolean),
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,
compact: isEnvProduction,
},
},
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
cacheDirectory: true,
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,
// Babel sourcemaps are needed for debugging into node_modules
// code. Without the options below, debuggers like VSCode
// show incorrect code and set breakpoints on the wrong lines.
sourceMaps: shouldUseSourceMap,
inputSourceMap: shouldUseSourceMap,
},
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use MiniCSSExtractPlugin to extract that CSS
// to a file, but in development "style" loader enables hot editing
// of CSS.
// By default we support CSS Modules with the extension .module.css
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
}),
},
// Opt-in support for SASS (using .scss or .sass extensions).
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'sass-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'sass-loader'
),
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
loader: require.resolve('file-loader'),
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
],
},
],
},
plugins: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml,
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
// Inlines the webpack runtime script. This script is too small to warrant
// a network request.
// https://github.com/facebook/create-react-app/issues/5358
isEnvProduction &&
shouldInlineRuntimeChunk &&
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
// It will be an empty string unless you specify "homepage"
// in `package.json`, in which case it will be the pathname of that URL.
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// This gives some necessary context to module not found errors, such as
// the requesting resource.
new ModuleNotFoundPlugin(paths.appPath),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
// It is absolutely essential that NODE_ENV is set to production
// during a production build.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env.stringified),
// This is necessary to emit hot updates (CSS and Fast Refresh):
isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
// Experimental hot reloading for React .
// https://github.com/facebook/react/tree/master/packages/react-refresh
isEnvDevelopment &&
shouldUseReactRefresh &&
new ReactRefreshWebpackPlugin({
overlay: {
entry: webpackDevClientEntry,
// The expected exports are slightly different from what the overlay exports,
// so an interop is included here to enable feedback on module-level errors.
module: reactRefreshOverlayEntry,
// Since we ship a custom dev client and overlay integration,
// the bundled socket handling logic can be eliminated.
sockIntegration: false,
},
}),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebook/create-react-app/issues/240
isEnvDevelopment && new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebook/create-react-app/issues/186
isEnvDevelopment &&
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
isEnvProduction &&
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'static/css/[name].[contenthash:8].css',
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
}),
// Generate an asset manifest file with the following content:
// - "files" key: Mapping of all asset filenames to their corresponding
// output file so that tools can pick it up without having to parse
// `index.html`
// - "entrypoints" key: Array of files which are included in `index.html`,
// can be used to reconstruct the HTML if necessary
new ManifestPlugin({
fileName: 'asset-manifest.json',
publicPath: paths.publicUrlOrPath,
generate: (seed, files, entrypoints) => {
const manifestFiles = files.reduce((manifest, file) => {
manifest[file.name] = file.path;
return manifest;
}, seed);
const entrypointFiles = entrypoints.main.filter(
fileName => !fileName.endsWith('.map')
);
return {
files: manifestFiles,
entrypoints: entrypointFiles,
};
},
}),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the webpack build.
isEnvProduction &&
fs.existsSync(swSrc) &&
new WorkboxWebpackPlugin.InjectManifest({
swSrc,
dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
exclude: [/\.map$/, /asset-manifest\.json$/, /LICENSE/],
// Bump up the default maximum size (2mb) that's precached,
// to make lazy-loading failure scenarios less likely.
// See https://github.com/cra-template/pwa/issues/13#issuecomment-722667270
maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
}),
// TypeScript type checking
useTypeScript &&
new ForkTsCheckerWebpackPlugin({
typescript: resolve.sync('typescript', {
basedir: paths.appNodeModules,
}),
async: isEnvDevelopment,
checkSyntacticErrors: true,
resolveModuleNameModule: process.versions.pnp
? `${__dirname}/pnpTs.js`
: undefined,
resolveTypeReferenceDirectiveModule: process.versions.pnp
? `${__dirname}/pnpTs.js`
: undefined,
tsconfig: paths.appTsConfig,
reportFiles: [
// This one is specifically to match during CI tests,
// as micromatch doesn't match
// '../cra-template-typescript/template/src/App.tsx'
// otherwise.
'../**/src/**/*.{ts,tsx}',
'**/src/**/*.{ts,tsx}',
'!**/src/**/__tests__/**',
'!**/src/**/?(*.)(spec|test).*',
'!**/src/setupProxy.*',
'!**/src/setupTests.*',
],
silent: true,
// The formatter is invoked directly in WebpackDevServerUtils during development
formatter: isEnvProduction ? typescriptFormatter : undefined,
}),
!disableESLintPlugin &&
new ESLintPlugin({
// Plugin options
extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
failOnError: !(isEnvDevelopment && emitErrorsAsWarnings),
context: paths.appSrc,
cache: true,
cacheLocation: path.resolve(
paths.appNodeModules,
'.cache/.eslintcache'
),
// ESLint class options
cwd: paths.appPath,
resolvePluginsRelativeTo: __dirname,
baseConfig: {
extends: [require.resolve('eslint-config-react-app/base')],
rules: {
...(!hasJsxRuntime && {
'react/react-in-jsx-scope': 'error',
}),
},
},
}),
].filter(Boolean),
// Some libraries import Node modules but don't use them in the browser.
// Tell webpack to provide empty mocks for them so importing them works.
node: {
module: 'empty',
dgram: 'empty',
dns: 'mock',
fs: 'empty',
http2: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
// Turn off performance processing because we utilize
// our own hints via the FileSizeReporter
performance: false,
};
};

10
config/webpack/analyze.js Normal file
View File

@ -0,0 +1,10 @@
const { merge } = require('webpack-merge');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
.BundleAnalyzerPlugin;
const prod = require('./prod');
module.exports = merge(prod, {
plugins: [new BundleAnalyzerPlugin()]
});

129
config/webpack/common.js Normal file
View File

@ -0,0 +1,129 @@
const paths = require('../paths');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const plugins = [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-transform-runtime'
];
if (process.env.NODE_ENV === 'development') {
plugins.push('react-refresh/babel');
}
const babelLoader = {
loader: 'babel-loader',
options: {
presets: [
// "react-app",
'@babel/preset-env',
'@babel/preset-react',
],
plugins: plugins
}
};
module.exports = {
entry: `${paths.src}/index.js`,
output: {
path: paths.build,
filename: '[name].bundle.js',
publicPath: '/',
// publicPath: 'https://itguild.info',
asyncChunks: true,
clean: true,
crossOriginLoading: 'anonymous',
module: true,
environment: {
arrowFunction: true,
bigIntLiteral: false,
const: true,
destructuring: true,
dynamicImport: false,
forOf: true
}
},
resolve: {
alias: {
'@': `${paths.src}/modules`
},
extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json']
},
experiments: {
topLevelAwait: true,
outputModule: true
},
module: {
rules: [
// JavaScript, React
{
test: /\.m?jsx?$/i,
exclude: /node_modules/,
use: babelLoader
},
// TypeScript
{
test: /.tsx?$/i,
exclude: /node_modules/,
use: [babelLoader, 'ts-loader']
},
// CSS, SASS
{
test: /\.(c|sa|sc)ss$/i,
use: [
'style-loader',
{
loader: 'css-loader',
options: {importLoaders: 1}
},
'sass-loader'
]
},
// MD
{
test: /\.md$/i,
use: ['html-loader', 'markdown-loader']
},
// static files
{
test: /\.(jpe?g|png|gif|svg|eot|ttf|woff2|woff?)$/i,
type: 'asset/resource'
}
]
},
plugins: [
new webpack.ProgressPlugin(),
new CopyWebpackPlugin({
patterns: [
{
from: `${paths.public}`,
globOptions: {
ignore: ["**/index.html"]
}
}
]
}),
new HtmlWebpackPlugin({
template: `${paths.public}/index.html`,
// filename: 'index.html',
}),
new webpack.ProvidePlugin({
React: 'react'
}),
new Dotenv({
path: '.env'
})
]
};

23
config/webpack/dev.js Normal file
View File

@ -0,0 +1,23 @@
const paths = require('../paths');
const webpack = require('webpack');
const {merge} = require('webpack-merge');
const common = require('./common');
module.exports = merge(common, {
target : 'web',
mode: 'development',
devtool: 'eval-cheap-source-map',
devServer: {
compress: true,
static: paths.build,
hot: true,
historyApiFallback: true,
// open: true,
port: 3000,
},
plugins: [new webpack.HotModuleReplacementPlugin()]
});

62
config/webpack/prod.js Normal file
View File

@ -0,0 +1,62 @@
const paths = require('../paths');
const {merge} = require('webpack-merge');
const common = require('./common');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = merge(common, {
mode: 'production',
target :'browserslist',
entry: {
index: {
import: `${paths.src}/index.js`,
dependOn: ['react', 'helpers']
},
react: ['react', 'react-dom', 'prop-types'],
helpers: ['immer', 'nanoid']
},
devtool: false,
output: {
filename: 'js/[name].[hash:8].bundle.js',
publicPath: '/',
assetModuleFilename: '[hash][ext][query]'
},
module: {
rules: [
{
test: /\.(c|sa|sc)ss$/i,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {importLoaders: 1}
},
'postcss-loader',
'sass-loader'
]
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
type: 'asset/resource'
// type: 'asset'
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
chunkFilename: '[id].css'
}),
],
optimization: {
runtimeChunk: 'single'
},
performance: {
hints: 'warning',
maxEntrypointSize: 512000,
maxAssetSize: 512000
}
});

130
config/webpackDevServer.config.js
View File

@ -1,130 +0,0 @@
'use strict';
const fs = require('fs');
const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
const ignoredFiles = require('react-dev-utils/ignoredFiles');
const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
const paths = require('./paths');
const getHttpsConfig = require('./getHttpsConfig');
const host = process.env.HOST || '0.0.0.0';
const sockHost = process.env.WDS_SOCKET_HOST;
const sockPath = process.env.WDS_SOCKET_PATH; // default: '/sockjs-node'
const sockPort = process.env.WDS_SOCKET_PORT;
module.exports = function (proxy, allowedHost) {
return {
// WebpackDevServer 2.4.3 introduced a security fix that prevents remote
// websites from potentially accessing local content through DNS rebinding:
// https://github.com/webpack/webpack-dev-server/issues/887
// https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
// However, it made several existing use cases such as development in cloud
// environment or subdomains in development significantly more complicated:
// https://github.com/facebook/create-react-app/issues/2271
// https://github.com/facebook/create-react-app/issues/2233
// While we're investigating better solutions, for now we will take a
// compromise. Since our WDS configuration only serves files in the `public`
// folder we won't consider accessing them a vulnerability. However, if you
// use the `proxy` feature, it gets more dangerous because it can expose
// remote code execution vulnerabilities in backends like Django and Rails.
// So we will disable the host check normally, but enable it if you have
// specified the `proxy` setting. Finally, we let you override it if you
// really know what you're doing with a special environment variable.
disableHostCheck:
!proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
// Enable gzip compression of generated files.
compress: true,
// Silence WebpackDevServer's own logs since they're generally not useful.
// It will still show compile warnings and errors with this setting.
clientLogLevel: 'none',
// By default WebpackDevServer serves physical files from current directory
// in addition to all the virtual build products that it serves from memory.
// This is confusing because those files won’t automatically be available in
// production build folder unless we copy them. However, copying the whole
// project directory is dangerous because we may expose sensitive files.
// Instead, we establish a convention that only files in `public` directory
// get served. Our build script will copy `public` into the `build` folder.
// In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
// <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
// In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
// Note that we only recommend to use `public` folder as an escape hatch
// for files like `favicon.ico`, `manifest.json`, and libraries that are
// for some reason broken when imported through webpack. If you just want to
// use an image, put it in `src` and `import` it from JavaScript instead.
contentBase: paths.appPublic,
contentBasePublicPath: paths.publicUrlOrPath,
// By default files from `contentBase` will not trigger a page reload.
watchContentBase: true,
// Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint
// for the WebpackDevServer client so it can learn when the files were
// updated. The WebpackDevServer client is included as an entry point
// in the webpack development configuration. Note that only changes
// to CSS are currently hot reloaded. JS changes will refresh the browser.
hot: true,
// Use 'ws' instead of 'sockjs-node' on server since we're using native
// websockets in `webpackHotDevClient`.
transportMode: 'ws',
// Prevent a WS client from getting injected as we're already including
// `webpackHotDevClient`.
injectClient: false,
// Enable custom sockjs pathname for websocket connection to hot reloading server.
// Enable custom sockjs hostname, pathname and port for websocket connection
// to hot reloading server.
sockHost,
sockPath,
sockPort,
// It is important to tell WebpackDevServer to use the same "publicPath" path as
// we specified in the webpack config. When homepage is '.', default to serving
// from the root.
// remove last slash so user can land on `/test` instead of `/test/`
publicPath: paths.publicUrlOrPath.slice(0, -1),
// WebpackDevServer is noisy by default so we emit custom message instead
// by listening to the compiler events with `compiler.hooks[...].tap` calls above.
quiet: true,
// Reportedly, this avoids CPU overload on some systems.
// https://github.com/facebook/create-react-app/issues/293
// src/node_modules is not ignored to support absolute imports
// https://github.com/facebook/create-react-app/issues/1065
watchOptions: {
ignored: ignoredFiles(paths.appSrc),
},
https: getHttpsConfig(),
host,
overlay: false,
historyApiFallback: {
// Paths with dots should still use the history fallback.
// See https://github.com/facebook/create-react-app/issues/387.
disableDotRule: true,
index: paths.publicUrlOrPath,
},
public: allowedHost,
// `proxy` is run between `before` and `after` `webpack-dev-server` hooks
proxy,
before(app, server) {
// Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`
// middlewares before `redirectServedPath` otherwise will not have any effect
// This lets us fetch source contents from webpack for the error overlay
app.use(evalSourceMapMiddleware(server));
// This lets us open files from the runtime error overlay.
app.use(errorOverlayMiddleware());
if (fs.existsSync(paths.proxySetup)) {
// This registers user provided middleware for proxy reasons
require(paths.proxySetup)(app);
}
},
after(app) {
// Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
app.use(redirectServedPath(paths.publicUrlOrPath));
// This service worker file is effectively a 'no-op' that will reset any
// previous service worker registered for the same host:port combination.
// We do this in development to avoid hitting the production cache if
// it used the same host and port.
// https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
},
};
};

41121
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

142
package.json
View File

@ -3,28 +3,17 @@
"private": true, "private": true,
"homepage": "https://html.craft-group.xyz/", "homepage": "https://html.craft-group.xyz/",
"dependencies": { "dependencies": {
"@babel/core": "7.12.3",
"@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
"@reduxjs/toolkit": "^1.6.0", "@reduxjs/toolkit": "^1.6.0",
"@svgr/webpack": "5.5.0",
"@testing-library/jest-dom": "^5.12.0", "@testing-library/jest-dom": "^5.12.0",
"@testing-library/react": "^11.2.7", "@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3", "@testing-library/user-event": "^12.8.3",
"@typescript-eslint/eslint-plugin": "^4.5.0", "@typescript-eslint/eslint-plugin": "^4.5.0",
"@typescript-eslint/parser": "^4.5.0", "@typescript-eslint/parser": "^4.5.0",
"axios": "^0.24.0", "axios": "^0.24.0",
"babel-eslint": "^10.1.0", "babel": "^6.23.0",
"babel-jest": "^26.6.0",
"babel-loader": "8.1.0",
"babel-plugin-named-asset-import": "^0.3.7",
"babel-preset-react-app": "^10.0.0",
"bfj": "^7.0.2", "bfj": "^7.0.2",
"bootstrap": "^4.6.0", "bootstrap": "^4.6.0",
"camelcase": "^6.1.0", "camelcase": "^6.1.0",
"case-sensitive-paths-webpack-plugin": "2.3.0",
"css-loader": "4.3.0",
"dotenv": "8.2.0",
"dotenv-expand": "5.1.0",
"eslint": "^7.11.0", "eslint": "^7.11.0",
"eslint-config-react-app": "^6.0.0", "eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.2.0", "eslint-plugin-flowtype": "^5.2.0",
@ -34,25 +23,10 @@
"eslint-plugin-react": "^7.21.5", "eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0", "eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-testing-library": "^3.9.2", "eslint-plugin-testing-library": "^3.9.2",
"eslint-webpack-plugin": "^2.5.2",
"file-loader": "6.1.1",
"form-data": "^4.0.0", "form-data": "^4.0.0",
"fs-extra": "^9.0.1", "fs-extra": "^9.0.1",
"html-webpack-plugin": "4.5.0",
"identity-obj-proxy": "3.0.0", "identity-obj-proxy": "3.0.0",
"jest": "26.6.0",
"jest-circus": "26.6.0",
"jest-resolve": "26.6.0",
"jest-watch-typeahead": "0.6.1",
"mini-css-extract-plugin": "0.11.3",
"moment": "^2.29.1", "moment": "^2.29.1",
"optimize-css-assets-webpack-plugin": "5.0.4",
"pnp-webpack-plugin": "1.6.4",
"postcss-flexbugs-fixes": "4.2.1",
"postcss-loader": "3.0.0",
"postcss-normalize": "8.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "5.0.2",
"prompts": "2.4.0", "prompts": "2.4.0",
"react": "^17.0.2", "react": "^17.0.2",
"react-app-polyfill": "^2.0.0", "react-app-polyfill": "^2.0.0",
@ -65,6 +39,7 @@
"react-phone-input-2": "^2.14.0", "react-phone-input-2": "^2.14.0",
"react-redux": "^7.2.4", "react-redux": "^7.2.4",
"react-refresh": "^0.8.3", "react-refresh": "^0.8.3",
"react-router": "latest",
"react-router-dom": "^6.2.1", "react-router-dom": "^6.2.1",
"react-select": "^4.3.1", "react-select": "^4.3.1",
"react-syntax-highlighter": "^15.4.5", "react-syntax-highlighter": "^15.4.5",
@ -72,97 +47,44 @@
"redux-devtools-extension": "^2.13.9", "redux-devtools-extension": "^2.13.9",
"resolve": "1.18.1", "resolve": "1.18.1",
"resolve-url-loader": "^3.1.2", "resolve-url-loader": "^3.1.2",
"sass": "^1.34.0",
"sass-loader": "^10.0.5",
"semver": "7.3.2", "semver": "7.3.2",
"style-loader": "1.3.0", "sweetalert2-react": "^0.8.3"
"sweetalert2-react": "^0.8.3", },
"terser-webpack-plugin": "4.2.3", "devDependencies": {
"ts-pnp": "1.2.0", "@babel/core": "^7.20.12",
"url-loader": "4.1.1", "@babel/preset-env": "^7.20.2",
"web-vitals": "^1.1.2", "babel-loader": "^9.1.2",
"webpack": "4.44.2", "copy-webpack-plugin": "^10.2.0",
"webpack-dev-server": "3.11.1", "cross-env": "^7.0.3",
"webpack-manifest-plugin": "2.2.0", "css-loader": "^6.7.3",
"workbox-webpack-plugin": "5.1.4", "dotenv-webpack": "^7.0.3",
"react-router": "latest" "html-webpack-plugin": "latest",
"mini-css-extract-plugin": "^2.7.2",
"node-sass": "^6.0.1",
"postcss": "^8.4.21",
"postcss-loader": "^6.2.1",
"postcss-preset-env": "^7.8.3",
"react-hot-loader": "^4.13.0",
"react-scripts": "5.0.1",
"sass": "^1.57.1",
"sass-loader": "^12.6.0",
"universal-cookie": "^4.0.4",
"web-vitals": "^3.1.1",
"webpack": "latest",
"webpack-bundle-analyzer": "latest",
"webpack-cli": "latest",
"webpack-dev-server": "latest",
"webpack-merge": "latest"
}, },
"scripts": { "scripts": {
"start": "node scripts/start.js", "build": "cross-env SERVE=true webpack -c config/webpack/prod.js",
"build": "node scripts/build.js", "start": "webpack serve -c config/webpack/dev.js",
"test": "node scripts/test.js" "analyze": "webpack --analyze -c config/webpack/analyze.js"
}, },
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [
"react-app", "react-app",
"react-app/jest" "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"
]
},
"jest": {
"roots": [
"<rootDir>/src"
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jsdom",
"testRunner": "C:\\Users\\User\\Desktop\\outstaffing\\outstaffing-react\\node_modules\\jest-circus\\runner.js",
"transform": {
"^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"modulePaths": [],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
],
"resetMocks": true
},
"babel": {
"presets": [
"react-app"
]
} }
} }

6
postcss.config.js Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
'postcss-preset-env': {
browsers: 'last 2 versions',
},
};

212
scripts/build.js
View File

@ -1,212 +0,0 @@
'use strict';
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'production';
process.env.NODE_ENV = 'production';
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
throw err;
});
// Ensure environment variables are read.
require('../config/env');
const path = require('path');
const chalk = require('react-dev-utils/chalk');
const fs = require('fs-extra');
const bfj = require('bfj');
const webpack = require('webpack');
const configFactory = require('../config/webpack.config');
const paths = require('../config/paths');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
const printBuildError = require('react-dev-utils/printBuildError');
const measureFileSizesBeforeBuild =
FileSizeReporter.measureFileSizesBeforeBuild;
const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
const useYarn = fs.existsSync(paths.yarnLockFile);
// These sizes are pretty large. We'll warn for bundles exceeding them.
const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
const isInteractive = process.stdout.isTTY;
// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
process.exit(1);
}
const argv = process.argv.slice(2);
const writeStatsJson = argv.indexOf('--stats') !== -1;
// Generate configuration
const config = configFactory('production');
// We require that you explicitly set browsers and do not fall back to
// browserslist defaults.
const { checkBrowsers } = require('react-dev-utils/browsersHelper');
checkBrowsers(paths.appPath, isInteractive)
.then(() => {
// First, read the current file sizes in build directory.
// This lets us display how much they changed later.
return measureFileSizesBeforeBuild(paths.appBuild);
})
.then(previousFileSizes => {
// Remove all content but keep the directory so that
// if you're in it, you don't end up in Trash
fs.emptyDirSync(paths.appBuild);
// Merge with the public folder
copyPublicFolder();
// Start the webpack build
return build(previousFileSizes);
})
.then(
({ stats, previousFileSizes, warnings }) => {
if (warnings.length) {
console.log(chalk.yellow('Compiled with warnings.\n'));
console.log(warnings.join('\n\n'));
console.log(
'\nSearch for the ' +
chalk.underline(chalk.yellow('keywords')) +
' to learn more about each warning.'
);
console.log(
'To ignore, add ' +
chalk.cyan('// eslint-disable-next-line') +
' to the line before.\n'
);
} else {
console.log(chalk.green('Compiled successfully.\n'));
}
console.log('File sizes after gzip:\n');
printFileSizesAfterBuild(
stats,
previousFileSizes,
paths.appBuild,
WARN_AFTER_BUNDLE_GZIP_SIZE,
WARN_AFTER_CHUNK_GZIP_SIZE
);
console.log();
const appPackage = require(paths.appPackageJson);
const publicUrl = paths.publicUrlOrPath;
const publicPath = config.output.publicPath;
const buildFolder = path.relative(process.cwd(), paths.appBuild);
printHostingInstructions(
appPackage,
publicUrl,
publicPath,
buildFolder,
useYarn
);
},
err => {
const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
if (tscCompileOnError) {
console.log(
chalk.yellow(
'Compiled with the following type errors (you may want to check these before deploying your app):\n'
)
);
printBuildError(err);
} else {
console.log(chalk.red('Failed to compile.\n'));
printBuildError(err);
process.exit(1);
}
}
)
.catch(err => {
if (err && err.message) {
console.log(err.message);
}
process.exit(1);
});
// Create the production build and print the deployment instructions.
function build(previousFileSizes) {
console.log('Creating an optimized production build...');
const compiler = webpack(config);
return new Promise((resolve, reject) => {
compiler.run((err, stats) => {
let messages;
if (err) {
if (!err.message) {
return reject(err);
}
let errMessage = err.message;
// Add additional information for postcss errors
if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
errMessage +=
'\nCompileError: Begins at CSS selector ' +
err['postcssNode'].selector;
}
messages = formatWebpackMessages({
errors: [errMessage],
warnings: [],
});
} else {
messages = formatWebpackMessages(
stats.toJson({ all: false, warnings: true, errors: true })
);
}
if (messages.errors.length) {
// Only keep the first error. Others are often indicative
// of the same problem, but confuse the reader with noise.
if (messages.errors.length > 1) {
messages.errors.length = 1;
}
return reject(new Error(messages.errors.join('\n\n')));
}
if (
process.env.CI &&
(typeof process.env.CI !== 'string' ||
process.env.CI.toLowerCase() !== 'false') &&
messages.warnings.length
) {
console.log(
chalk.yellow(
'\nTreating warnings as errors because process.env.CI = true.\n' +
'Most CI servers set it automatically.\n'
)
);
return reject(new Error(messages.warnings.join('\n\n')));
}
const resolveArgs = {
stats,
previousFileSizes,
warnings: messages.warnings,
};
if (writeStatsJson) {
return bfj
.write(paths.appBuild + '/bundle-stats.json', stats.toJson())
.then(() => resolve(resolveArgs))
.catch(error => reject(new Error(error)));
}
return resolve(resolveArgs);
});
});
}
function copyPublicFolder() {
fs.copySync(paths.appPublic, paths.appBuild, {
dereference: true,
filter: file => file !== paths.appHtml,
});
}

166
scripts/start.js
View File

@ -1,166 +0,0 @@
'use strict';
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
throw err;
});
// Ensure environment variables are read.
require('../config/env');
const fs = require('fs');
const chalk = require('react-dev-utils/chalk');
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const clearConsole = require('react-dev-utils/clearConsole');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const {
choosePort,
createCompiler,
prepareProxy,
prepareUrls,
} = require('react-dev-utils/WebpackDevServerUtils');
const openBrowser = require('react-dev-utils/openBrowser');
const semver = require('semver');
const paths = require('../config/paths');
const configFactory = require('../config/webpack.config');
const createDevServerConfig = require('../config/webpackDevServer.config');
const getClientEnvironment = require('../config/env');
const react = require(require.resolve('react', { paths: [paths.appPath] }));
const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
const useYarn = fs.existsSync(paths.yarnLockFile);
const isInteractive = process.stdout.isTTY;
// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
process.exit(1);
}
// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';
if (process.env.HOST) {
console.log(
chalk.cyan(
`Attempting to bind to HOST environment variable: ${chalk.yellow(
chalk.bold(process.env.HOST)
)}`
)
);
console.log(
`If this was unintentional, check that you haven't mistakenly set it in your shell.`
);
console.log(
`Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}`
);
console.log();
}
// We require that you explicitly set browsers and do not fall back to
// browserslist defaults.
const { checkBrowsers } = require('react-dev-utils/browsersHelper');
checkBrowsers(paths.appPath, isInteractive)
.then(() => {
// We attempt to use the default port but if it is busy, we offer the user to
// run on a different port. `choosePort()` Promise resolves to the next free port.
return choosePort(HOST, DEFAULT_PORT);
})
.then(port => {
if (port == null) {
// We have not found a port.
return;
}
const config = configFactory('development');
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const appName = require(paths.appPackageJson).name;
const useTypeScript = fs.existsSync(paths.appTsConfig);
const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
const urls = prepareUrls(
protocol,
HOST,
port,
paths.publicUrlOrPath.slice(0, -1)
);
const devSocket = {
warnings: warnings =>
devServer.sockWrite(devServer.sockets, 'warnings', warnings),
errors: errors =>
devServer.sockWrite(devServer.sockets, 'errors', errors),
};
// Create a webpack compiler that is configured with custom messages.
const compiler = createCompiler({
appName,
config,
devSocket,
urls,
useYarn,
useTypeScript,
tscCompileOnError,
webpack,
});
// Load proxy config
const proxySetting = require(paths.appPackageJson).proxy;
const proxyConfig = prepareProxy(
proxySetting,
paths.appPublic,
paths.publicUrlOrPath
);
// Serve webpack assets generated by the compiler over a web server.
const serverConfig = createDevServerConfig(
proxyConfig,
urls.lanUrlForConfig
);
const devServer = new WebpackDevServer(compiler, serverConfig);
// Launch WebpackDevServer.
devServer.listen(port, HOST, err => {
if (err) {
return console.log(err);
}
if (isInteractive) {
clearConsole();
}
if (env.raw.FAST_REFRESH && semver.lt(react.version, '16.10.0')) {
console.log(
chalk.yellow(
`Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`
)
);
}
console.log(chalk.cyan('Starting the development server...\n'));
openBrowser(urls.localUrlForBrowser);
});
['SIGINT', 'SIGTERM'].forEach(function (sig) {
process.on(sig, function () {
devServer.close();
process.exit();
});
});
if (process.env.CI !== 'true') {
// Gracefully exit when stdin ends
process.stdin.on('end', function () {
devServer.close();
process.exit();
});
}
})
.catch(err => {
if (err && err.message) {
console.log(err.message);
}
process.exit(1);
});

53
scripts/test.js
View File

@ -1,53 +0,0 @@
'use strict';
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'test';
process.env.NODE_ENV = 'test';
process.env.PUBLIC_URL = '';
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
throw err;
});
// Ensure environment variables are read.
require('../config/env');
const jest = require('jest');
const execSync = require('child_process').execSync;
let argv = process.argv.slice(2);
function isInGitRepository() {
try {
execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
return true;
} catch (e) {
return false;
}
}
function isInMercurialRepository() {
try {
execSync('hg --cwd . root', { stdio: 'ignore' });
return true;
} catch (e) {
return false;
}
}
// Watch unless on CI or explicitly running all tests
if (
!process.env.CI &&
argv.indexOf('--watchAll') === -1 &&
argv.indexOf('--watchAll=false') === -1
) {
// https://github.com/facebook/create-react-app/issues/5210
const hasSourceControl = isInGitRepository() || isInMercurialRepository();
argv.push(hasSourceControl ? '--watch' : '--watchAll');
}
jest.run(argv);

7
src/App.js
View File

@ -4,8 +4,8 @@ import {BrowserRouter as Router, Route, Routes, Navigate} from 'react-router-dom
import AuthForPartners from "./pages/AuthForPartners/AuthForPartners"; import AuthForPartners from "./pages/AuthForPartners/AuthForPartners";
import AuthForDevelopers from "./pages/AuthForDevelopers/AuthForDevelopers"; import AuthForDevelopers from "./pages/AuthForDevelopers/AuthForDevelopers";
import Home from "./components/Home/Home"; import Home from "./pages/Home/Home";
import CandidatePage from './pages/CandidatePage' import Candidate from "./components/Candidate/Candidate";
import Calendar from "./components/Calendar/Calendar"; import Calendar from "./components/Calendar/Calendar";
import ReportForm from "./components/ReportForm/ReportForm"; import ReportForm from "./components/ReportForm/ReportForm";
import {ProfileCalendar} from "./components/ProfileCalendar/ProfileCalendar"; import {ProfileCalendar} from "./components/ProfileCalendar/ProfileCalendar";
@ -25,6 +25,7 @@ import 'bootstrap/dist/css/bootstrap.min.css'
const App = () => { const App = () => {
return ( return (
<> <>
@ -37,7 +38,7 @@ const App = () => {
<Route exact path='/authdev' element={<AuthForDevelopers/>}/> <Route exact path='/authdev' element={<AuthForDevelopers/>}/>
<Route exact path='/auth' element={<AuthForPartners/>}/> <Route exact path='/auth' element={<AuthForPartners/>}/>
<Route exact path='/candidate/:id' element={<CandidatePage/>}/> <Route exact path='/candidate/:id' element={<Candidate/>}/>
<Route exact path='/candidate/:id/form' element={<FormPage/>}/> <Route exact path='/candidate/:id/form' element={<FormPage/>}/>
<Route path='/:userId/calendar' element={<Calendar/>}/> <Route path='/:userId/calendar' element={<Calendar/>}/>

102
src/api/request.js
View File

@ -1,48 +1,54 @@
// import axios from 'axios'; import axios from 'axios';
// import {getToken, urlHasParams} from "../helper"; import {getToken, urlHasParams} from "../helper";
//
//
//
// const instance = axios.create({ const instance = axios.create({
// baseURL: process.env.REACT_APP_API_URL, baseURL: process.env.REACT_APP_API_URL,
// validateStatus(status) { validateStatus(status) {
// return status; return status;
// }, },
// }); });
//
// export default function request(url, {method = 'get', params, data, headers} = {}) { export const apiRequest = (url, {
// const fullHeaders = {...headers, ...getToken()}; method = 'get', params, data,
// let urWithParams = urlHasParams(url); headers = {
// 'Access-Control-Allow-Origin': '*',
// 'Content-Type': 'application/json'
// return instance },
// .request({ } = {}) => {
// url: urWithParams, const fullHeaders = {...headers, ...getToken()};
// method, let urWithParams = urlHasParams(url);
// params,
// data,
// headers: {...fullHeaders}, return instance
// }) .request({
// .then(response => new Promise(resolve => { url: urWithParams,
// console.log(response, 1) method,
// if(response.data.redirect || response.status === 401) { params,
// data,
// // window.location.href = "/auth" headers: {...fullHeaders},
// } })
// return resolve(response) .then(response => new Promise(resolve => {
// })) if (response.data.redirect || response.status === 401) {
// .then(response => new Promise(resolve => resolve(response.data))) window.location.replace('/auth');
// } localStorage.clear();
// // dispatch(auth(false));
// function RequestError(code, msg, data) { }
// const description = msg ? `- ${msg}` : ''; return resolve(response)
// }))
// this.name = 'RequestError'; .then(response => new Promise(resolve => resolve(response.data)))
// this.message = `API returned: ${code}${description}.`; };
// this.code = code;
// this.description = msg; const RequestError = (code, msg, data) => {
// this.data = data; const description = msg ? `- ${msg}` : '';
// }
// this.name = 'RequestError';
// RequestError.prototype = Object.create(Error.prototype); this.message = `API returned: ${code}${description}.`;
// RequestError.prototype.constructor = RequestError; this.code = code;
this.description = msg;
this.data = data;
};
RequestError.prototype = Object.create(Error.prototype);
RequestError.prototype.constructor = RequestError;

58
src/components/AuthBox/AuthBox.js
View File

@ -1,47 +1,58 @@
import React, {useState} from 'react' import React, {useEffect, useState} from 'react'
import {Link} from 'react-router-dom' import {Link, useNavigate} from 'react-router-dom'
import {useDispatch, useSelector} from 'react-redux' import {useDispatch, useSelector} from 'react-redux'
import {withSwalInstance} from 'sweetalert2-react' import {withSwalInstance} from 'sweetalert2-react'
import swal from 'sweetalert2' import swal from 'sweetalert2'
import {Loader} from '../Loader/Loader' import {Loader} from '../Loader/Loader'
import ErrorBoundary from "../../hoc/ErrorBoundary";
import {auth, setUserInfo} from '../../redux/outstaffingSlice' import {auth, selectAuth, setUserInfo} from '../../redux/outstaffingSlice'
import {loading} from '../../redux/loaderSlice' import {loading} from '../../redux/loaderSlice'
import {setRole} from '../../redux/roleSlice' import {setRole} from '../../redux/roleSlice'
import {selectIsLoading} from '../../redux/loaderSlice' import {selectIsLoading} from '../../redux/loaderSlice'
import {apiRequest} from "../../api/request";
import ellipse from '../../images/ellipse.png' import ellipse from '../../images/ellipse.png'
import './authBox.scss' import './authBox.scss'
import {useRequest} from "../../hooks/useRequest";
const {useRef} = require("react");
const SweetAlert = withSwalInstance(swal); const SweetAlert = withSwalInstance(swal);
export const AuthBox = ({title, altTitle, roleChangeLink}) => { export const AuthBox = ({title, altTitle, roleChangeLink}) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const ref = useRef();
const navigate = useNavigate();
const {apiRequest} = useRequest(); const isAuth = useSelector(selectAuth);
const isLoading = useSelector(selectIsLoading); const isLoading = useSelector(selectIsLoading);
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState(null); const [error, setError] = useState(null);
if (isAuth) {
navigate('/')
}
useEffect(()=> {
if (!localStorage.getItem('auth_token')) {
dispatch(auth(false))
}
}, []);
const submitHandler = () => { const submitHandler = () => {
let formData = new FormData(ref.current)
if (!isLoading) { if (!isLoading) {
dispatch(loading(true)); dispatch(loading(true));
apiRequest('/user/login', apiRequest('/user/login',
{ {
method: 'POST', method: 'POST',
data: JSON.stringify({ data: formData
username,
password
})
}).then((res) => { }).then((res) => {
if (!res.access_token) { if (!res.access_token) {
@ -76,33 +87,33 @@ export const AuthBox = ({title, altTitle, roleChangeLink}) => {
<img src={ellipse} alt=''/> <img src={ellipse} alt=''/>
<span>{title}</span> <span>{title}</span>
</div> </div>
<form className='auth-box__form'> <form ref={ref} className='auth-box__form'>
<label htmlFor='login'>Ваш логин:</label> <label htmlFor='login'>Ваш логин:</label>
<input <input
id='login' id='login'
type='text' type='text'
name='username'
placeholder='Логин' placeholder='Логин'
value={username}
onChange={(e) => setUsername(e.target.value)}
/> />
<label htmlFor='password'>Пароль:</label> <label htmlFor='password'>Пароль:</label>
<input <input
id='password' id='password'
type='password' type='password'
name='password'
placeholder='Пароль' placeholder='Пароль'
value={password}
onChange={(e) => setPassword(e.target.value)}
/> />
{error && ( {error && (
<div className='auth-box__form-error'> <div className='auth-box__form-error'>
<SweetAlert <ErrorBoundary>
show={!!error} <SweetAlert
title='Ошибка' show={!!error}
text={error} title='Ошибка'
onConfirm={() => setError(null)} text={error}
/> onConfirm={() => setError(null)}
/>
</ErrorBoundary>
</div> </div>
)} )}
@ -124,6 +135,7 @@ export const AuthBox = ({title, altTitle, roleChangeLink}) => {
</Link> </Link>
</div> </div>
</form> </form>
</div> </div>
) )
}; };

3
src/components/Calendar/Calendar.js
View File

@ -12,6 +12,7 @@ import {selectCurrentCandidate} from '../../redux/outstaffingSlice'
import rectangle from '../../images/rectangle_secondPage.png' import rectangle from '../../images/rectangle_secondPage.png'
import './calendar.scss' import './calendar.scss'
import {urlForLocal} from "../../helper";
const Calendar = () => { const Calendar = () => {
@ -42,7 +43,7 @@ const Calendar = () => {
</div> </div>
<div className='col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row'> <div className='col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row'>
<div className='calendar__info'> <div className='calendar__info'>
<img className='calendar__info-img' src={photo} alt='img'/> {photo && <img className='calendar__info-img' src={urlForLocal(photo)} alt='img'/>}
<h3 className='calendar__info-name'>{abbreviatedName}</h3> <h3 className='calendar__info-name'>{abbreviatedName}</h3>
</div> </div>
<div className='calendar__title'> <div className='calendar__title'>

183
src/components/Candidate/Candidate.js
View File

@ -8,26 +8,32 @@ import {Footer} from '../Footer/Footer'
import {currentCandidate, selectCurrentCandidate,} from '../../redux/outstaffingSlice' import {currentCandidate, selectCurrentCandidate,} from '../../redux/outstaffingSlice'
import {useRequest} from "../../hooks/useRequest"; import {apiRequest} from "../../api/request";
import {createMarkup} from "../../helper"; import {createMarkup} from "../../helper";
import arrow from '../../images/right-arrow.png' import arrow from '../../images/right-arrow.png'
import rectangle from '../../images/rectangle_secondPage.png' import rectangle from '../../images/rectangle_secondPage.png'
import front from '../../images/front_end.png' import front from '../Outstaffing/images/front_end.png'
import back from '../../images/back_end.png' import back from '../Outstaffing/images/back_end.png'
import design from '../../images/design.png' import design from '../Outstaffing/images/design.png'
import './candidate.scss' import './candidate.scss'
import {LogoutButton} from "../LogoutButton/LogoutButton";
import {Header} from "../Header/Header";
const Candidate = () => { const Candidate = () => {
const {id: candidateId} = useParams(); const {id: candidateId} = useParams();
const navigate = useNavigate(); const navigate = useNavigate();
const dispatch = useDispatch(); const dispatch = useDispatch();
const currentCandidateObj = useSelector(selectCurrentCandidate);
const [activeSnippet, setActiveSnippet] = useState(true); const [activeSnippet, setActiveSnippet] = useState(true);
const {apiRequest} = useRequest();
useEffect(() => { useEffect(() => {
window.scrollTo(0, 0) window.scrollTo(0, 0)
@ -39,8 +45,6 @@ const Candidate = () => {
}).then((el) => dispatch(currentCandidate(el))) }).then((el) => dispatch(currentCandidate(el)))
}, [dispatch, candidateId]); }, [dispatch, candidateId]);
const currentCandidateObj = useSelector(selectCurrentCandidate);
const {position_id, skillValues, vc_text: text} = currentCandidateObj; const {position_id, skillValues, vc_text: text} = currentCandidateObj;
const setStyles = () => { const setStyles = () => {
@ -80,108 +84,105 @@ const Candidate = () => {
const {header, img, classes} = setStyles(); const {header, img, classes} = setStyles();
return ( return (
<div className='candidate'> <>
<div className='row'> <Header/>
<div className='col-12'> <div className='container candidate'>
<div className='candidate__title'>
<h2>
<span>Аутстаффинг</span> it-персонала
</h2>
</div>
</div>
</div>
<div className='row'>
<div className='col-12 candidate__header'>
<div className='candidate__arrow' onClick={() => navigate('/')}>
<div className='candidate__arrow-img'>
<img src={arrow} alt=''/>
</div>
<div className='candidate__arrow-sp'>
<span>Вернуться к списку</span>
</div>
</div>
<div className='candidate__icon'>
<h3>{header}</h3>
<img className={classes} src={img} alt=''/>
</div>
</div>
</div>
<div className='candidate__main'>
<div className='row'> <div className='row'>
<div className='col-12 col-xl-4'> <div className='col-12 candidate__header'>
<Sidebar candidate={currentCandidateObj} position activeSnippet={activeSnippet}
setActiveSnippet={setActiveSnippet}/> <div className='candidate__arrow' onClick={() => navigate('/')}>
<div className='candidate__arrow-img'>
<img src={arrow} alt=''/>
</div>
<div className='candidate__arrow-sp'>
<span>Вернуться к списку</span>
</div>
</div>
<div className='candidate__icon'>
<h3>{header}</h3>
<img className={classes} src={img} alt=''/>
</div>
</div> </div>
{ </div>
activeSnippet ? <div className='candidate__main'>
( <div className='row'>
<div className='col-12 col-xl-8'> <div className='col-12 col-xl-4'>
<div className='candidate__main-description'> <Sidebar candidate={currentCandidateObj} position activeSnippet={activeSnippet}
<img src={rectangle} alt=''/> setActiveSnippet={setActiveSnippet}/>
<p className='candidate__hashtag'># Описание опыта</p> </div>
{text ? ( {
<div activeSnippet ?
className='candidate__text' (
dangerouslySetInnerHTML={createMarkup(text)} <div className='col-12 col-xl-8'>
></div> <div className='candidate__main-description'>
) : ( <img src={rectangle} alt=''/>
<p className='candidate__text-secondary'> <p className='candidate__hashtag'># Описание опыта</p>
{currentCandidateObj.vc_text {text ? (
? currentCandidateObj.vc_text <div
: 'Описание отсутствует...'} className='candidate__text'
</p> dangerouslySetInnerHTML={createMarkup(text)}
)} ></div>
) : (
<p className='candidate__text-secondary'>
{currentCandidateObj.vc_text
? currentCandidateObj.vc_text
: 'Описание отсутствует...'}
</p>
)}
<SkillSection skillsArr={skillValues}/> <SkillSection skillsArr={skillValues}/>
</div>
</div> </div>
</div> ) :
) : (
( <div className="col-12 col-xl-8">
<div className="col-12 col-xl-8"> <div className="candidate__works works">
<div className="candidate__works works"> <div className="works__body">
<div className="works__body"> <div className="works__item item-works">
<div className="works__item item-works"> <div className="item-works__body">
<div className="item-works__body"> <Link to="/" className="item-works__link">Vuetifyis.com</Link>
<Link to="/" className="item-works__link">Vuetifyis.com</Link> <div className="item-works__text">Forked from
<div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br/> Vuetifyjs.com peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
documentation documentation
</div>
<div className="item-works__mark">Angular</div>
</div> </div>
<div className="item-works__mark">Angular</div>
</div> </div>
</div> <div className="works__item item-works">
<div className="works__item item-works"> <div className="item-works__body">
<div className="item-works__body"> <Link to="/" className="item-works__link">Vuetifyis.com</Link>
<Link to="/" className="item-works__link">Vuetifyis.com</Link> <div className="item-works__text">Forked from
<div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br/> Vuetifyjs.com peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
documentation documentation
</div>
<div className="item-works__mark">Angular</div>
</div> </div>
<div className="item-works__mark">Angular</div>
</div> </div>
</div> <div className="works__item item-works">
<div className="works__item item-works"> <div className="item-works__body">
<div className="item-works__body"> <Link to="/" className="item-works__link">Vuetifyis.com</Link>
<Link to="/" className="item-works__link">Vuetifyis.com</Link> <div className="item-works__text">Forked from
<div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br/> Vuetifyjs.com peluprvi/vuetifyjs.com <br/> Vuetifyjs.com
documentation documentation
</div>
<div className="item-works__mark item-works__mark_yellow">Laravel</div>
</div> </div>
<div className="item-works__mark item-works__mark_yellow">Laravel</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> )
) }
}
</div>
</div> </div>
<Footer/>
</div> </div>
<Footer/> </>
</div>
) )
}; };

20
src/components/Candidate/candidate.scss
View File

@ -1,26 +1,6 @@
@use 'sass:math'; @use 'sass:math';
.candidate { .candidate {
&__title {
margin-top: 60px;
h2 {
text-align: center;
color: #52b709;
font-family: 'GT Eesti Pro Display', sans-serif;
font-size: 5em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 77.81px;
span {
color: #282828;
font-style: normal;
letter-spacing: 0.56px;
line-height: normal;
}
}
}
&__header { &__header {
display: flex; display: flex;

101
src/components/CandidateSidebar/CandidateSidebar.js
View File

@ -1,10 +1,11 @@
import React from 'react' import React from 'react'
import { Link } from 'react-router-dom' import {Link} from 'react-router-dom'
import { Achievement } from '../Achievement/Achievement' import {Achievement} from '../Achievement/Achievement'
import { LEVELS, SKILLS } from '../../constants/constants' import {LEVELS, SKILLS} from '../../constants/constants'
import './candidateSidebar.scss' import './candidateSidebar.scss'
import {urlForLocal} from "../../helper";
const getYearsString = (years) => { const getYearsString = (years) => {
let yearsString; let yearsString;
@ -20,60 +21,58 @@ const getYearsString = (years) => {
return `${years} ${yearsString}` return `${years} ${yearsString}`
}; };
const CandidateSidebar = ({ candidate, setActiveSnippet, activeSnippet }) => { const CandidateSidebar = ({candidate, setActiveSnippet, activeSnippet}) => {
const userId = localStorage.getItem('id') ; const userId = localStorage.getItem('id');
const showSnippet = () => { const showSnippet = () => {
setActiveSnippet((prev)=>!prev) setActiveSnippet((prev) => !prev)
}; };
return ( return (
<div className='candidate-sidebar'> <div className='candidate-sidebar'>
<div className='candidate-sidebar__info'> <div className='candidate-sidebar__info'>
<div className='candidate-sidebar__position'> <div className='candidate-sidebar__position'>
<h2> <h2>
{candidate.specification} {SKILLS[candidate.position_id]},{' '} {candidate.specification} {SKILLS[candidate.position_id]},{' '}
{LEVELS[candidate.level]}{' '} {LEVELS[candidate.level]}{' '}
</h2> </h2>
</div>
{candidate.photo && <img src={urlForLocal(candidate.photo)} alt=''/>}
{candidate && candidate.years_of_exp && (
<>
<p className='candidate-sidebar__experience-title'>Опыт работы</p>
<p className='candidate-sidebar__experience'>
{getYearsString(candidate.years_of_exp)}
</p>
</>
)}
<Link to={`/candidate/${candidate.id}/form`}>
<button className='candidate-sidebar__select'>
Выбрать к собеседованию
</button>
</Link>
{userId && (
<>
<Link to={`/${candidate.id}/calendar`}>
<button className='candidate-sidebar__select'>
Отчёты
</button>
</Link>
<button
className='candidate-sidebar__select'
onClick={showSnippet}
>
{activeSnippet ? "Показать" : "Скрыть"}
</button>
<div className='candidate-sidebar__achievements'>
{candidate &&
candidate.achievements &&
candidate.achievements.map((item) => {
return <Achievement key={item.id} achievement={item.achievement}/>
})}
</div>
</>)}
</div> </div>
<img src={candidate.photo} alt='' />
{candidate && candidate.years_of_exp && (
<>
<p className='candidate-sidebar__experience-title'>Опыт работы</p>
<p className='candidate-sidebar__experience'>
{getYearsString(candidate.years_of_exp)}
</p>
</>
)}
<Link to={`/candidate/${candidate.id}/form`}>
<button className='candidate-sidebar__select'>
Выбрать к собеседованию
</button>
</Link>
{userId && (
<>
<Link to={`/${candidate.id}/calendar`}>
<button className='candidate-sidebar__select'>
Отчёты
</button>
</Link>
{/* <Link to={`/candidate/${candidate.id}/code`}> */}
<button
className='candidate-sidebar__select'
onClick={showSnippet}
>
{activeSnippet ? "Показать": "Скрыть"}
</button>
{/* </Link> */}
<div className='candidate-sidebar__achievements'>
{candidate &&
candidate.achievements &&
candidate.achievements.map((item) => {
return <Achievement key={item.id} achievement={item.achievement} />
})}
</div>
</>)}
</div> </div>
</div>
) )
}; };

294
src/components/Description/Description.js
View File

@ -2,221 +2,141 @@ import React from 'react'
import {useSelector} from 'react-redux' import {useSelector} from 'react-redux'
import {Link} from 'react-router-dom' import {Link} from 'react-router-dom'
import {Loader} from '../Loader/Loader' import ErrorBoundary from "../../hoc/ErrorBoundary";
import {LEVELS, SKILLS} from '../../constants/constants' import {LEVELS, SKILLS} from '../../constants/constants'
import {selectProfiles, selectFilteredCandidates,} from '../../redux/outstaffingSlice' import {selectProfiles} from '../../redux/outstaffingSlice'
import {urlForLocal} from '../../helper'
import male from '../../images/medium_male.png' import male from '../../images/medium_male.png'
import rectangle from '../../images/rectangle_secondPage.png' import rectangle from '../../images/rectangle_secondPage.png'
import './description.scss' import './description.scss'
const Description = ({ onLoadMore, isLoadingMore }) => {
const Description = ({onLoadMore, isLoadingMore}) => {
const candidatesListArr = useSelector(selectProfiles); const candidatesListArr = useSelector(selectProfiles);
const filteredListArr = useSelector(selectFilteredCandidates);
if (!filteredListArr) { return (
return (
<section className='description'> <section className='description'>
<div className='container'> <div className='container'>
<div className='description__wrapper'> <div className='description__wrapper'>
{candidatesListArr && Array.isArray(candidatesListArr) && candidatesListArr.length > 0 ? ( <ErrorBoundary>
candidatesListArr.map((el) => ( {candidatesListArr && Array.isArray(candidatesListArr) && candidatesListArr.length > 0
<div className='row' key={el.id}> ? candidatesListArr.map((el) => (
<div className='col-2 col-xs-12'> <div className='row' key={el.id}>
<img className='description__img' src={el.photo} alt='' /> <div className='col-2'>
</div> {el.photo && <img className='description__img' src={urlForLocal(el.photo)} alt=''/>}
<div className='col-12 col-xl-6'> </div>
<h3 className='description__title'> <div className='col-12 col-xl-6'>
<Link to={`/candidate/${el.id}`}> <h3 className='description__title'>
{el.specification} {SKILLS[el.position_id]},{' '} <Link to={`/candidate/${el.id}`}>
{LEVELS[el.level]}{' '} {' '}
</Link> {el.specification} {SKILLS[el.position_id]},{' '}
</h3> {LEVELS[el.level]}{' '}
</Link>
</h3>
{el.vc_text_short ? ( {el.vc_text_short ? (
<div className='description__text'> <div className='description__text'>
{el.vc_text_short} {el.vc_text_short}
</div>
) : (
<p className='description__text-secondary'>
Описание отсутствует...
</p>
)}
</div>
<div className='col-12 col-xl-4'>
<Link to={`/candidate/${el.id}`}>
<button className='description__button'>
Подробное резюме
</button>
</Link>
</div>
<div className='col-xl-2'></div>
<div className='col-12 col-xl-6'>
<ul className='description__list'>
{Array.isArray(el?.skillValues) && el.skillValues?.map((e) => (
<li key={e.id} className='description__list-item'>
{e.skill.name}
</li>
))}
</ul>
<img
className='description__rectangle'
src={rectangle}
alt=''
/>
</div>
<div className='col-xl-4'></div>
</div> </div>
) : ( ))
<p className='description__text-secondary'> : /* : <div className={style.description__empty}>В данный момент в категории нет свободных специалистов</div> } */
Описание отсутствует... candidatesListArr && Array.isArray(candidatesListArr) &&
</p> candidatesListArr.map((el) => (
)} <div className='row' key={el.id}>
</div> <div className='col-2'>
<div className='col-12 col-xl-4'> <img className='description__img' src={male} alt=''/>
<Link to={`/candidate/${el.id}`}> </div>
<button className='description__button'> <div className='col-12 col-xl-6'>
Подробное резюме <h3 className='description__title'>
</button> {SKILLS[el.position_id]}, {LEVELS[el.level]}
</Link> </h3>
</div>
<div className='col-xl-2'></div> {el.vc_text_short ? (
<div className='col-12 col-xl-6'> <div className='description__text'>
<ul className='description__list'> {el.vc_text_short}
{Array.isArray(el?.skillValues) && el.skillValues.map((e) => ( </div>
<li key={e.id} className='description__list-item'> ) : (
{e.skill.name} <p className='description__text-secondary'>
</li> Описание отсутствует...
))} </p>
</ul> )}
<img </div>
className='description__rectangle' <div className='col-12 col-xl-4'>
src={rectangle} <Link to={`/candidate/${el.id}`}>
alt='' <button className='description__button'>
/> Подробное резюме
</div> </button>
<div className='col-xl-4'></div> </Link>
</div> </div>
)) <div className='col-xl-2'></div>
) : ( <div className='col-12 col-xl-6'>
<div className='description__empty'> <ul className='description__list'>
{isLoadingMore {Array.isArray(el?.skillValues) && el.skillValues?.map((e) => (
? 'В данный момент в категории нет свободных специалистов' <li key={e.id} className='description__list-item'>
: 'Загрузка...'} {e.skill.name}
</div> </li>
)} ))}
</ul>
<img
className='description__rectangle'
src={rectangle}
alt=''
/>
</div>
<div className='col-xl-4'></div>
</div>
))}
</ErrorBoundary>
</div> </div>
<div className='row'> <div className='row'>
<div className='col-12'> <div className='col-12'>
<div className='description__footer'> <div className='description__footer'>
<div className='description__footer-btn'> <div className='description__footer-btn'>
<button onClick={() => onLoadMore(2)}> {candidatesListArr && (
{isLoadingMore ? ( <button onClick={() => onLoadMore(2)}>Загрузить еще</button>
<Loader width={40} height={40} /> )}
) : (
'Загрузить еще'
)}{' '}
</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
)
}
return (
<section className='description'>
<div className='container'>
<div className='description__wrapper'>
{filteredListArr && Array.isArray(filteredListArr) && filteredListArr.length > 0
? filteredListArr.map((el) => (
<div className='row' key={el.id}>
<div className='col-2'>
<img className='description__img' src={el.photo} alt='' />
</div>
<div className='col-12 col-xl-6'>
<h3 className='description__title'>
<Link to={`/candidate/${el.id}`}>
{' '}
{el.specification} {SKILLS[el.position_id]},{' '}
{LEVELS[el.level]}{' '}
</Link>
</h3>
{el.vc_text_short ? (
<div className='description__text'>
{el.vc_text_short}
</div>
) : (
<p className='description__text-secondary'>
Описание отсутствует...
</p>
)}
</div>
<div className='col-12 col-xl-4'>
<Link to={`/candidate/${el.id}`}>
<button className='description__button'>
Подробное резюме
</button>
</Link>
</div>
<div className='col-xl-2'></div>
<div className='col-12 col-xl-6'>
<ul className='description__list'>
{Array.isArray(el?.skillValues) && el.skillValues?.map((e) => (
<li key={e.id} className='description__list-item'>
{e.skill.name}
</li>
))}
</ul>
<img
className='description__rectangle'
src={rectangle}
alt=''
/>
</div>
<div className='col-xl-4'></div>
</div>
))
: /* : <div className={style.description__empty}>В данный момент в категории нет свободных специалистов</div> } */
candidatesListArr && Array.isArray(candidatesListArr) &&
candidatesListArr.map((el) => (
<div className='row' key={el.id}>
<div className='col-2'>
<img className='description__img' src={male} alt='' />
</div>
<div className='col-12 col-xl-6'>
<h3 className='description__title'>
{SKILLS[el.position_id]}, {LEVELS[el.level]}
</h3>
{el.vc_text_short ? (
<div className='description__text'>
{el.vc_text_short}
</div>
) : (
<p className='description__text-secondary'>
Описание отсутствует...
</p>
)}
</div>
<div className='col-12 col-xl-4'>
<Link to={`/candidate/${el.id}`}>
<button className='description__button'>
Подробное резюме
</button>
</Link>
</div>
<div className='col-xl-2'></div>
<div className='col-12 col-xl-6'>
<ul className='description__list'>
{Array.isArray(el?.skillValues) && el.skillValues?.map((e) => (
<li key={e.id} className='description__list-item'>
{e.skill.name}
</li>
))}
</ul>
<img
className='description__rectangle'
src={rectangle}
alt=''
/>
</div>
<div className='col-xl-4'></div>
</div>
))}
</div>
<div className='row'>
<div className='col-12'>
<div className='description__footer'>
<div className='description__footer-btn'>
{candidatesListArr &&
filteredListArr.length === 0 ? (
<button onClick={() => onLoadMore(2)}>Загрузить еще</button>
) : null}
</div>
</div>
</div>
</div>
</div>
</section>
) )
}; };

3
src/components/Form/Form.js
View File

@ -7,7 +7,7 @@ import './form.scss'
import { withSwalInstance } from 'sweetalert2-react' import { withSwalInstance } from 'sweetalert2-react'
import swal from 'sweetalert2' import swal from 'sweetalert2'
import {useRequest} from "../../hooks/useRequest"; import {apiRequest} from "../../api/request";
const SweetAlert = withSwalInstance(swal); const SweetAlert = withSwalInstance(swal);
@ -25,7 +25,6 @@ const Form = () => {
}); });
const [isFetching, setIsFetching] = useState(false); const [isFetching, setIsFetching] = useState(false);
const {apiRequest} = useRequest();
const handleChange = (e) => { const handleChange = (e) => {
const { id, value } = e.target; const { id, value } = e.target;

15
src/components/Header/Header.js Normal file
View File

@ -0,0 +1,15 @@
import React from "react";
import {LogoutButton} from "../LogoutButton/LogoutButton";
import './header.scss'
export const Header = () => {
return (
<div className='container header'>
<h2>
<span>Аутстаффинг</span> it-персонала
</h2>
<LogoutButton/>
</div>
)
};

26
src/components/Header/header.scss Normal file
View File

@ -0,0 +1,26 @@
.header {
margin-top: 60px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
h2 {
flex: 1;
text-align: center;
color: #52b709;
font-family: 'GT Eesti Pro Display', sans-serif;
font-size: 5em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 77.81px;
span {
color: #282828;
font-style: normal;
letter-spacing: 0.56px;
line-height: normal;
}
}
}

9
src/components/Loader/Loader.js
View File

@ -2,10 +2,11 @@ import SVGLoader from 'react-loader-spinner'
import './loader.scss' import './loader.scss'
import React from "react"; import React from "react";
export const Loader = ({ width = 50, height = 50 }) => {
export const Loader = ({width = 50, height = 50}) => {
return ( return (
<div className='loader'> <div className='loader'>
<SVGLoader type='Circles' color='#fff' height={height} width={width} /> <SVGLoader type='Circles' color='#fff' height={height} width={width}/>
</div> </div>
) )
}; };

13
src/components/LogoutButton/LogoutButton.js
View File

@ -1,25 +1,28 @@
import React, {useState} from 'react' import React, {useState} from 'react'
import {useNavigate} from 'react-router-dom' import {useNavigate} from 'react-router-dom'
import {useDispatch, useSelector} from 'react-redux' import {useSelector} from 'react-redux'
import {useLogout} from "../../hooks/useLogout";
import {Loader} from '../Loader/Loader' import {Loader} from '../Loader/Loader'
import {auth} from '../../redux/outstaffingSlice'
import {getRole} from '../../redux/roleSlice' import {getRole} from '../../redux/roleSlice'
import './logoutButton.scss' import './logoutButton.scss'
export const LogoutButton = () => { export const LogoutButton = () => {
const [isLoggingOut, setIsLoggingOut] = useState(false); const [isLoggingOut, setIsLoggingOut] = useState(false);
const dispatch = useDispatch();
const userRole = useSelector(getRole); const userRole = useSelector(getRole);
const navigate = useNavigate(); const navigate = useNavigate();
const {logout} = useLogout();
return ( return (
<button <button
className='logout-button' className='logout-button'
onClick={() => { onClick={() => {
setIsLoggingOut(true); setIsLoggingOut(true);
localStorage.clear(); logout();
dispatch(auth(false));
setIsLoggingOut(false); setIsLoggingOut(false);
navigate(userRole === 'ROLE_DEV' ? '/authdev' : '/auth') navigate(userRole === 'ROLE_DEV' ? '/authdev' : '/auth')
}} }}

15
src/components/Outstaffing/Outstaffing.js
View File

@ -6,12 +6,13 @@ import TagSelect from '../Select/TagSelect'
import {selectTags, getPositionId, setPositionId} from '../../redux/outstaffingSlice' import {selectTags, getPositionId, setPositionId} from '../../redux/outstaffingSlice'
import front from '../../images/front_end.png' import front from './images/front_end.png'
import back from '../../images/back_end.png' import back from './images/back_end.png'
import design from '../../images/design.png' import design from './images/design.png'
import './outstaffing.scss' import './outstaffing.scss'
import {LogoutButton} from "../LogoutButton/LogoutButton";
const createSelectPositionHandler = const createSelectPositionHandler =
({positionId, setPositionId, dispatch}) => ({positionId, setPositionId, dispatch}) =>
@ -36,12 +37,6 @@ const Outstaffing = () => {
return ( return (
<> <>
<section className='outstaffing'> <section className='outstaffing'>
<div className='outstaffing__title'>
<h2>
<span>Аутстаффинг</span> it-персонала
</h2>
<LogoutButton/>
</div>
<div className='row'> <div className='row'>
<div className='col-12 col-xl-4'> <div className='col-12 col-xl-4'>
<OutstaffingBlock <OutstaffingBlock

0
src/images/back_end.png → src/components/Outstaffing/images/back_end.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

0
src/images/design.png → src/components/Outstaffing/images/design.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

0
src/images/front_end.png → src/components/Outstaffing/images/front_end.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

27
src/components/Outstaffing/outstaffing.scss
View File

@ -1,30 +1,3 @@
.outstaffing {
&__title {
margin-top: 60px;
display: flex;
justify-content: center;
align-items: center;
h2 {
flex: 1;
text-align: center;
color: #52b709;
font-family: 'GT Eesti Pro Display', sans-serif;
font-size: 5em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 77.81px;
span {
color: #282828;
font-style: normal;
letter-spacing: 0.56px;
line-height: normal;
}
}
}
}
@media (max-width: 375.98px) { @media (max-width: 375.98px) {
.outstaffing__title > h2 { .outstaffing__title > h2 {

18
src/components/OutstaffingBlock/OutstaffingBlock.js
View File

@ -4,10 +4,10 @@ import {useDispatch, useSelector} from 'react-redux'
import { import {
selectItems, selectItems,
selectedItems, selectedItems,
filteredCandidates, profiles,
} from '../../redux/outstaffingSlice' } from '../../redux/outstaffingSlice'
import {useRequest} from "../../hooks/useRequest"; import {apiRequest} from "../../api/request";
import './outstaffingBlock.scss' import './outstaffingBlock.scss'
@ -22,9 +22,11 @@ const handlePositionClick = (
}) => { }) => {
if (isSelected) { if (isSelected) {
apiRequest('/profile', { apiRequest('/profile', {
params: {limit: 1000}, params: {
limit: 1000
},
}).then((profileArr) => { }).then((profileArr) => {
dispatch(filteredCandidates(profileArr)); dispatch(profiles(profileArr));
dispatch(selectedItems([])); dispatch(selectedItems([]));
onSelect(positionId) onSelect(positionId)
}) })
@ -32,9 +34,10 @@ const handlePositionClick = (
apiRequest('/profile', { apiRequest('/profile', {
params: { params: {
limit: '1000', limit: '1000',
position_id: positionId}, position_id: positionId
}).then((el) => { },
dispatch(filteredCandidates(el)); }).then((res) => {
dispatch(profiles(res));
dispatch(selectedItems([])); dispatch(selectedItems([]));
onSelect(positionId) onSelect(positionId)
}) })
@ -57,7 +60,6 @@ const OutstaffingBlock = (
const itemsArr = useSelector(selectItems); const itemsArr = useSelector(selectItems);
const {apiRequest} = useRequest();
const handleBlockClick = (item, id) => { const handleBlockClick = (item, id) => {
if (!itemsArr.find((el) => item === el.value)) { if (!itemsArr.find((el) => item === el.value)) {

12
src/components/ProfileCalendar/ProfileCalendar.js
View File

@ -10,12 +10,15 @@ import {Loader} from "../Loader/Loader";
import {ProfileHeader} from "../ProfileHeader/ProfileHeader"; import {ProfileHeader} from "../ProfileHeader/ProfileHeader";
import { Footer } from '../Footer/Footer' import { Footer } from '../Footer/Footer'
import {useRequest} from "../../hooks/useRequest"; import {urlForLocal} from "../../helper";
import {apiRequest} from "../../api/request";
import { getProfileInfo } from '../../redux/outstaffingSlice' import { getProfileInfo } from '../../redux/outstaffingSlice'
import {setReportDate} from "../../redux/reportSlice"; import {setReportDate} from "../../redux/reportSlice";
import './profileCalendar.scss' import './profileCalendar.scss'
export const ProfileCalendar = () => { export const ProfileCalendar = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const profileInfo = useSelector(getProfileInfo); const profileInfo = useSelector(getProfileInfo);
@ -25,13 +28,12 @@ export const ProfileCalendar = () => {
const [requestDates, setRequestDates] = useState(''); const [requestDates, setRequestDates] = useState('');
const [loader, setLoader] = useState(false) const [loader, setLoader] = useState(false)
const {apiRequest} = useRequest();
useEffect(() => { useEffect(() => {
setRequestDates(getReports(moment())) setRequestDates(getReports(moment()))
}); },[]);
useEffect(async () => { useEffect( () => {
setLoader(true) setLoader(true)
if (!requestDates) { if (!requestDates) {
return return
@ -63,7 +65,7 @@ export const ProfileCalendar = () => {
<h2 className='summary__title'>Ваши отчеты</h2> <h2 className='summary__title'>Ваши отчеты</h2>
<div className='summary__info'> <div className='summary__info'>
<div className='summary__person'> <div className='summary__person'>
<img src={profileInfo.photo} className='summary__avatar' alt='avatar'/> <img src={urlForLocal(profileInfo.photo)} className='summary__avatar' alt='avatar'/>
<p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p> <p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
</div> </div>
<Link to='/report'> <Link to='/report'>

12
src/components/ProfileHeader/ProfileHeader.js
View File

@ -3,21 +3,21 @@ import {useNavigate, NavLink} from "react-router-dom";
import {useDispatch, useSelector} from "react-redux"; import {useDispatch, useSelector} from "react-redux";
import {Loader} from '../Loader/Loader' import {Loader} from '../Loader/Loader'
import {apiRequest} from "../../api/request";
import {auth, getProfileInfo, setProfileInfo} from "../../redux/outstaffingSlice"; import {auth, getProfileInfo, setProfileInfo} from "../../redux/outstaffingSlice";
import {getRole} from "../../redux/roleSlice"; import {getRole} from "../../redux/roleSlice";
import {urlForLocal} from "../../helper";
import './profileHeader.scss' import './profileHeader.scss'
import {useRequest} from "../../hooks/useRequest";
export const ProfileHeader = () => { export const ProfileHeader = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const dispatch = useDispatch(); const dispatch = useDispatch();
const {apiRequest} = useRequest();
const userRole = useSelector(getRole); const userRole = useSelector(getRole);
const profileInfo = useSelector(getProfileInfo); const profileInfo = useSelector(getProfileInfo);
@ -61,8 +61,8 @@ export const ProfileHeader = () => {
</nav> </nav>
<div className='profileHeader__personalInfo'> <div className='profileHeader__personalInfo'>
<h3 className='profileHeader__personalInfoName'>{profileInfo.fio}</h3> <h3 className='profileHeader__personalInfoName'>{profileInfo?.fio}</h3>
<img src={profileInfo.photo} className='profileHeader__personalInfoAvatar' alt='avatar'/> <img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : ""} className='profileHeader__personalInfoAvatar' alt='avatar'/>
</div> </div>
</div> </div>
</div> </div>

3
src/components/ReportForm/ReportForm.js
View File

@ -7,7 +7,7 @@ import {currentMonthAndDay} from '../Calendar/calendarHelper'
import {Footer} from "../Footer/Footer"; import {Footer} from "../Footer/Footer";
import {ProfileHeader} from "../ProfileHeader/ProfileHeader"; import {ProfileHeader} from "../ProfileHeader/ProfileHeader";
import {useRequest} from "../../hooks/useRequest"; import {apiRequest} from "../../api/request";
import {getReportDate} from '../../redux/reportSlice' import {getReportDate} from '../../redux/reportSlice'
@ -36,7 +36,6 @@ const ReportForm = () => {
const navigate= useNavigate(); const navigate= useNavigate();
const reportDate = useSelector(getReportDate); const reportDate = useSelector(getReportDate);
const {apiRequest} = useRequest();
const [isFetching, setIsFetching] = useState(false); const [isFetching, setIsFetching] = useState(false);
const [reportSuccess, setReportSuccess] = useState(''); const [reportSuccess, setReportSuccess] = useState('');

4
src/components/Select/TagSelect.module.css → src/components/Select/TagSelect.css
View File

@ -2,7 +2,7 @@
margin-top: 73px; margin-top: 73px;
} }
.search__title { .search__title {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display', sans-serif;
font-size: 2.4em; font-size: 2.4em;
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
@ -30,7 +30,7 @@
height: 40px; height: 40px;
border-radius: 10px; border-radius: 10px;
border: none; border: none;
font-family: 'Muller'; font-family: 'Muller', sans-serif;
font-size: 1.6em; font-size: 1.6em;
letter-spacing: 0.8px; letter-spacing: 0.8px;
text-align: center; text-align: center;

25
src/components/Select/TagSelect.js
View File

@ -2,16 +2,16 @@ import React, {useState} from 'react'
import {useSelector, useDispatch} from 'react-redux' import {useSelector, useDispatch} from 'react-redux'
import Select from 'react-select' import Select from 'react-select'
import {Loader} from '../Loader/Loader' import {Loader} from '../Loader/Loader'
import {useRequest} from "../../hooks/useRequest"; import {apiRequest} from "../../api/request";
import { import {
selectedItems, selectedItems,
selectItems, selectItems,
selectTags, selectTags,
filteredCandidates, profiles,
setPositionId setPositionId
} from '../../redux/outstaffingSlice' } from '../../redux/outstaffingSlice'
import style from './TagSelect.module.css' import './TagSelect.css'
const TagSelect = () => { const TagSelect = () => {
@ -19,7 +19,6 @@ const TagSelect = () => {
const [searchLoading, setSearchLoading] = useState(false); const [searchLoading, setSearchLoading] = useState(false);
const dispatch = useDispatch(); const dispatch = useDispatch();
const {apiRequest} = useRequest();
const itemsArr = useSelector(selectItems); const itemsArr = useSelector(selectItems);
const tagsArr = useSelector(selectTags); const tagsArr = useSelector(selectTags);
@ -34,8 +33,8 @@ const TagSelect = () => {
apiRequest('/profile', { apiRequest('/profile', {
params: {...params, limit: 1000}, params: {...params, limit: 1000},
}).then((el) => { }).then((res) => {
dispatch(filteredCandidates(el)); dispatch(profiles(res));
setSearchLoading(false) setSearchLoading(false)
}) })
@ -44,20 +43,20 @@ const TagSelect = () => {
return ( return (
<> <>
<section className={style.search}> <section className='search'>
<div className='row'> <div className='row'>
<div className='col-12'> <div className='col-12'>
<h2 className={style.search__title}> <h2 className='search__title'>
Найти специалиста по навыкам Найти специалиста по навыкам
</h2> </h2>
<div className={style.search__box}> <div className='search__box'>
<Select <Select
value={itemsArr} value={itemsArr}
onChange={(value) => {console.log(value) ;return dispatch(selectedItems(value))}} onChange={(value) => dispatch(selectedItems(value))}
isMulti isMulti
name='tags' name='tags'
className={style.select} className='select'
classNamePrefix={style.select} classNamePrefix='select'
options={ options={
tagsArr && tagsArr &&
tagsArr.flat().map((item) => { tagsArr.flat().map((item) => {
@ -72,7 +71,7 @@ const TagSelect = () => {
<button <button
onClick={() => handleSubmit({dispatch, setSearchLoading})} onClick={() => handleSubmit({dispatch, setSearchLoading})}
type='submit' type='submit'
className={style.search__submit} className='search__submit'
> >
{searchLoading ? <Loader width={30} height={30}/> : 'Поиск'} {searchLoading ? <Loader width={30} height={30}/> : 'Поиск'}
</button> </button>

3
src/components/features/bookkeeping/ActContent/ActContent.js
View File

@ -6,9 +6,9 @@ import {BookkeepingFormField} from "../BookkeepingFormField/BookkeepingFormField
import {BookkepingSelect} from '../BookkepingSelect/BookkepingSelect'; import {BookkepingSelect} from '../BookkepingSelect/BookkepingSelect';
import {BookkepingInput} from '../BookkepingInput/BookkepingInput'; import {BookkepingInput} from '../BookkepingInput/BookkepingInput';
import {useRequest} from "../../../../hooks/useRequest";
import "./actContent.css" import "./actContent.css"
import {apiRequest} from "../../../../api/request";
export const ActContent = () => { export const ActContent = () => {
@ -16,7 +16,6 @@ export const ActContent = () => {
const [selectedTemplate, setSelectedTemplate] = useState(); const [selectedTemplate, setSelectedTemplate] = useState();
const [templatedFields, setTemplatedFields] = useState([]); const [templatedFields, setTemplatedFields] = useState([]);
const {apiRequest} = useRequest();
useEffect(() => { useEffect(() => {
apiRequest('/template/get-template-list') apiRequest('/template/get-template-list')

2
src/components/features/bookkeeping/ContractContent/ContractContent.js
View File

@ -5,7 +5,6 @@ import {BookkeepingFormField} from "../BookkeepingFormField/BookkeepingFormField
import {BookkepingSelect} from '../BookkepingSelect/BookkepingSelect'; import {BookkepingSelect} from '../BookkepingSelect/BookkepingSelect';
import {BookkepingInput} from '../BookkepingInput/BookkepingInput'; import {BookkepingInput} from '../BookkepingInput/BookkepingInput';
import {Link} from "react-router-dom" import {Link} from "react-router-dom"
import {useRequest} from "../../../../hooks/useRequest";
export const ContractContent = () => { export const ContractContent = () => {
@ -13,7 +12,6 @@ export const ContractContent = () => {
const [selectedTemplate, setSelectedTemplate] = useState(); const [selectedTemplate, setSelectedTemplate] = useState();
const [templatedFields, setTemplatedFields] = useState([]); const [templatedFields, setTemplatedFields] = useState([]);
const {apiRequest} = useRequest();
useEffect(() => { useEffect(() => {
apiRequest(`/document/get-document-list`) apiRequest(`/document/get-document-list`)

3
src/components/features/quiz/HeaderQuiz.js
View File

@ -1,8 +1,8 @@
import React, {useEffect} from 'react' import React, {useEffect} from 'react'
import {useDispatch, useSelector} from 'react-redux' import {useDispatch, useSelector} from 'react-redux'
import {selectUserInfo, setQuestionnairesList, setUserInfo} from "../../../redux/quizSlice"; import {selectUserInfo, setQuestionnairesList, setUserInfo} from "../../../redux/quizSlice";
import {useRequest} from "../../../hooks/useRequest";
import './quiz.scss' import './quiz.scss'
import {apiRequest} from "../../../api/request";
export const HeaderQuiz = ({header}) => { export const HeaderQuiz = ({header}) => {
@ -10,7 +10,6 @@ export const HeaderQuiz = ({header}) => {
const userId = localStorage.getItem('id'); const userId = localStorage.getItem('id');
const userInfo = useSelector(selectUserInfo); const userInfo = useSelector(selectUserInfo);
const {apiRequest} = useRequest();
useEffect(() => { useEffect(() => {
dispatch(setUserInfo(userId)) dispatch(setUserInfo(userId))

3
src/components/features/quiz/Instructions.js
View File

@ -5,14 +5,13 @@ import {useEffect, useState} from "react";
import {useSelector} from "react-redux"; import {useSelector} from "react-redux";
import {selectedTest} from "../../../redux/quizSlice"; import {selectedTest} from "../../../redux/quizSlice";
import {useRequest} from "../../../hooks/useRequest"; import {apiRequest} from "../../../api/request";
export const Instruction = () => { export const Instruction = () => {
const [countQuestions, setCountQuestions] = useState(null); const [countQuestions, setCountQuestions] = useState(null);
const test = useSelector(selectedTest); const test = useSelector(selectedTest);
const {apiRequest} = useRequest();
useEffect( () => { useEffect( () => {

3
src/components/features/quiz/Results.js
View File

@ -1,7 +1,7 @@
import React, {useEffect, useState} from 'react'; import React, {useEffect, useState} from 'react';
import {useDispatch, useSelector} from "react-redux"; import {useDispatch, useSelector} from "react-redux";
import {fetchResultTest, selectedTest, selectResult} from "../../../redux/quizSlice"; import {fetchResultTest, selectedTest, selectResult} from "../../../redux/quizSlice";
import {useRequest} from "../../../hooks/useRequest"; import {apiRequest} from "../../../api/request";
export const Results = () => { export const Results = () => {
@ -9,7 +9,6 @@ export const Results = () => {
const test = useSelector(selectedTest); const test = useSelector(selectedTest);
const [maxScore, setMaxScore] = useState(''); const [maxScore, setMaxScore] = useState('');
const dispatch = useDispatch(); const dispatch = useDispatch();
const {apiRequest} = useRequest();
useEffect(() => { useEffect(() => {
dispatch(fetchResultTest(test.uuid)); dispatch(fetchResultTest(test.uuid));

3
src/components/features/quiz/Task.js
View File

@ -2,7 +2,6 @@ import React, {useEffect, useState} from 'react'
import {useNavigate} from "react-router-dom" import {useNavigate} from "react-router-dom"
import {useSelector, useDispatch} from 'react-redux' import {useSelector, useDispatch} from 'react-redux'
import {useRequest} from "../../../hooks/useRequest";
import {Progressbar} from './ProgressbarQuiz' import {Progressbar} from './ProgressbarQuiz'
import {GetOptionTask} from './GetOptionTask' import {GetOptionTask} from './GetOptionTask'
@ -11,6 +10,7 @@ import {
} from './../../../redux/quizSlice' } from './../../../redux/quizSlice'
import './quiz.scss' import './quiz.scss'
import {apiRequest} from "../../../api/request";
export const TaskQuiz = () => { export const TaskQuiz = () => {
@ -26,7 +26,6 @@ export const TaskQuiz = () => {
const [inputValue, setInputValue] = useState(''); const [inputValue, setInputValue] = useState('');
const [questions, setQuestions] = useState([]); const [questions, setQuestions] = useState([]);
const {apiRequest} = useRequest();
const id = localStorage.getItem('id'); const id = localStorage.getItem('id');

3
src/helper.js
View File

@ -35,3 +35,6 @@ export const getToken = () => {
}; };
export const urlHasParams = (url) => url.indexOf('?') > 0 ? `${url}&${window.location.search.substr(1)}` : `${url}${window.location.search}`; export const urlHasParams = (url) => url.indexOf('?') > 0 ? `${url}&${window.location.search.substr(1)}` : `${url}${window.location.search}`;
export const urlForLocal = (url) => process.env.NODE_ENV === 'development' ? `https://itguild.info${url}` : url;

22
src/hoc/ErrorBoundary.js Normal file
View File

@ -0,0 +1,22 @@
import React, {Component} from "react";
class ErrorBoundary extends Component {
state = {
error: null,
};
static getDerivedStateFromError(error) {
return {error};
}
render() {
const { error } = this.state;
if (error) {
return <div>Что-то пошло не так =( {error}</div>;
}
return this.props.children;
}
}
export default ErrorBoundary

61
src/hooks/useRequest.js
View File

@ -1,61 +0,0 @@
import axios from 'axios';
import {getToken, urlHasParams} from "../helper";
import {useLogout} from "./useLogout";
const instance = axios.create({
baseURL: process.env.REACT_APP_API_URL,
validateStatus(status) {
return status;
},
});
export const useRequest = () => {
const {logout} = useLogout();
const apiRequest = (url, {
method = 'get', params, data,
headers = {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/json'
},
} = {}) => {
const fullHeaders = {...headers, ...getToken()};
let urWithParams = urlHasParams(url);
return instance
.request({
url: urWithParams,
method,
params,
data,
headers: {...fullHeaders},
})
.then(response => new Promise(resolve => {
if (response.data.redirect || response.status === 401) {
logout()
}
return resolve(response)
}))
.then(response => new Promise(resolve => resolve(response.data)))
};
const RequestError = (code, msg, data) => {
const description = msg ? `- ${msg}` : '';
this.name = 'RequestError';
this.message = `API returned: ${code}${description}.`;
this.code = code;
this.description = msg;
this.data = data;
};
RequestError.prototype = Object.create(Error.prototype);
RequestError.prototype.constructor = RequestError;
return {apiRequest}
};

15
src/pages/AuthForDevelopers/AuthForDevelopers.js
View File

@ -1,4 +1,4 @@
import React from 'react' import React, {useEffect} from 'react'
import { AuthBox } from '../../components/AuthBox/AuthBox' import { AuthBox } from '../../components/AuthBox/AuthBox'
@ -8,6 +8,7 @@ import authImg from '../../images/auth_img.png'
import cross from '../../images/cross.png' import cross from '../../images/cross.png'
import text from '../../images/Body_Text.png' import text from '../../images/Body_Text.png'
import vector from '../../images/Vector_Smart_Object.png' import vector from '../../images/Vector_Smart_Object.png'
import vectorBlack from '../../images/Vector_Smart_Object_black.png'
import { selectAuth } from '../../redux/outstaffingSlice' import { selectAuth } from '../../redux/outstaffingSlice'
import { useNavigate} from 'react-router-dom' import { useNavigate} from 'react-router-dom'
@ -19,10 +20,14 @@ const AuthForDevelopers = () => {
const isAuth = useSelector(selectAuth); const isAuth = useSelector(selectAuth);
let navigate = useNavigate(); let navigate = useNavigate();
const getToken = localStorage.getItem('auth_token')
useEffect(()=> {
if (isAuth || getToken) {
navigate('/profile')
}
}, [getToken]);
if (isAuth) {
navigate('/profile')
}
return ( return (
<section className='auth-developers'> <section className='auth-developers'>
@ -30,7 +35,7 @@ const AuthForDevelopers = () => {
<img className='auth-developers__vector' src={vector} alt='' /> <img className='auth-developers__vector' src={vector} alt='' />
<img <img
className='auth-developers__vector-black' className='auth-developers__vector-black'
src={'./images/Vector_Smart_Object_black.png'} src={vectorBlack}
alt='' alt=''
/> />
<div className='container'> <div className='container'>

13
src/pages/AuthForPartners/AuthForPartners.js
View File

@ -1,4 +1,4 @@
import React from 'react' import React, {useEffect} from 'react'
import arrow from '../../images/arrow__login_page.png' import arrow from '../../images/arrow__login_page.png'
import medium from '../../images/medium_male_big.png' import medium from '../../images/medium_male_big.png'
import cross from '../../images/cross.png' import cross from '../../images/cross.png'
@ -18,9 +18,14 @@ const AuthForPartners = () => {
const isAuth = useSelector(selectAuth); const isAuth = useSelector(selectAuth);
let navigate = useNavigate(); let navigate = useNavigate();
if (isAuth) { const getToken = localStorage.getItem('auth_token')
navigate('/')
} useEffect(()=> {
if (isAuth || getToken) {
navigate('/')
}
}, [getToken]);
return ( return (
<section className='auth-partners'> <section className='auth-partners'>

11
src/pages/CalendarPage.js
View File

@ -1,11 +0,0 @@
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { WithLogout } from '../hoc/withLogout';
import Calendar from '../components/Calendar/Calendar';
const CalendarPage = () => {
return <WithLogout><Calendar onSelect={} /></WithLogout>;
};
export default CalendarPage;

7
src/pages/CandidatePage.js
View File

@ -1,7 +0,0 @@
import React from 'react';
import { WithLogout } from '../hoc/withLogout';
import Candidate from '../components/Candidate/Candidate';
const CandidatePage = () => <WithLogout><Candidate /></WithLogout>;
export default CandidatePage;

11
src/pages/FormPage/FormPage.js
View File

@ -3,7 +3,6 @@ import {useDispatch, useSelector} from 'react-redux'
import {useParams, useNavigate} from 'react-router-dom' import {useParams, useNavigate} from 'react-router-dom'
import SVG from 'react-inlinesvg' import SVG from 'react-inlinesvg'
import {useRequest} from "../../hooks/useRequest";
import {WithLogout} from '../../hoc/withLogout' import {WithLogout} from '../../hoc/withLogout'
import Form from '../../components/Form/Form' import Form from '../../components/Form/Form'
@ -18,6 +17,8 @@ import {LEVELS, SKILLS} from '../../constants/constants'
import {currentCandidate, selectCurrentCandidate} from '../../redux/outstaffingSlice' import {currentCandidate, selectCurrentCandidate} from '../../redux/outstaffingSlice'
import './formPage.scss' import './formPage.scss'
import {apiRequest} from "../../api/request";
import {LogoutButton} from "../../components/LogoutButton/LogoutButton";
@ -29,7 +30,6 @@ const FormPage = () => {
const candidate = useSelector(selectCurrentCandidate); const candidate = useSelector(selectCurrentCandidate);
const {apiRequest} = useRequest();
const goBack = () => { const goBack = () => {
navigate(-1) navigate(-1)
@ -43,7 +43,9 @@ const FormPage = () => {
} }
return ( return (
<WithLogout> <div className='container'>
<div className='form-page'> <div className='form-page'>
<div className='form-page__back'> <div className='form-page__back'>
<div className='form-page__arrow' onClick={goBack}> <div className='form-page__arrow' onClick={goBack}>
@ -54,6 +56,7 @@ const FormPage = () => {
<span>Вернуться к кандидату</span> <span>Вернуться к кандидату</span>
</div> </div>
</div> </div>
<LogoutButton />
</div> </div>
<div className='form-page__candidate'> <div className='form-page__candidate'>
<div className='form-page__avatar'> <div className='form-page__avatar'>
@ -93,7 +96,7 @@ const FormPage = () => {
</div> </div>
<Footer/> <Footer/>
</div> </div>
</WithLogout> </div>
) )
}; };

302
src/pages/FormPage/formPage.scss
View File

@ -1,176 +1,174 @@
.form-page { .form-page {
&__arrow { font-family: "GT Eesti Pro Display", sans-serif;
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 80px;
margin-left: -32px;
cursor: pointer;
&-img { &__arrow {
cursor: pointer; display: flex;
} justify-content: flex-start;
align-items: center;
cursor: pointer;
&-img {
cursor: pointer;
}
}
&__candidate {
margin-top: 60px;
margin-left: 48px;
display: flex;
}
&__back {
margin-top: 80px;
padding: 0 20px;
display: flex;
justify-content: space-between;
&-to-candidate {
margin-left: 40px;
margin-right: 120px;
font-size: 1.8em;
font-weight: 100;
line-height: 36px;
}
}
&__avatar {
img {
width: 61px;
height: 61px;
} }
&__candidate { margin-right: 16px;
margin-top: 60px; }
margin-left: 48px;
display: flex; &__position {
color: #000000;
font-size: 22px;
font-weight: 700;
line-height: 36px;
}
&__selected {
span {
color: #000000;
font-size: 10px;
font-weight: 300;
line-height: 22.38px;
} }
&__back-to-candidate { img {
margin-left: 40px; width: 152px;
margin-right: 120px; margin-right: 18px;
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 100;
line-height: 36px;
} }
}
&__avatar { &__interview {
img { display: flex;
width: 61px; justify-content: center;
height: 61px; align-items: center;
} }
margin-right: 16px;
} &__form {
width: 45%;
&__position { }
color: #000000;
font-family: "GT Eesti Pro Display"; &__separator {
font-size: 22px; width: 10%;
font-weight: 700; display: flex;
line-height: 36px; flex-direction: column;
} justify-content: center;
align-items: center;
&__selected { }
span {
color: #000000; &__line {
font-family: "GT Eesti Pro Display"; width: 3px;
font-size: 10px; height: 135px;
font-weight: 300; background-color: #e4f1f6;
line-height: 22.38px; margin-bottom: 26px;
} }
img { &__option {
width: 152px; color: #000000;
margin-right: 18px; font-size: 18px;
} font-weight: 400;
} font-style: normal;
letter-spacing: normal;
&__interview { text-align: center;
display: flex; line-height: normal;
justify-content: center; }
align-items: center;
} &__telegram {
width: 35%;
&__form { display: flex;
width: 45%; flex-direction: column;
} justify-content: center;
align-items: center;
&__separator {
width: 10%; &-text {
display: flex; width: 225px;
flex-direction: column; color: #000000;
justify-content: center; font-size: 18px;
align-items: center; font-weight: 400;
} font-style: normal;
letter-spacing: normal;
&__line { line-height: 33px;
width: 3px; text-align: center;
height: 135px; margin-bottom: 29px;
background-color: #e4f1f6;
margin-bottom: 26px;
}
&__option {
color: #000000;
font-family: "GT Eesti Pro Display";
font-size: 18px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: center;
font-style: normal;
letter-spacing: normal;
line-height: normal;
}
&__telegram {
width: 35%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&-text {
width: 225px;
color: #000000;
font-family: "GT Eesti Pro Display";
font-size: 18px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 33px;
text-align: center;
font-style: normal;
letter-spacing: normal;
margin-bottom: 29px;
}
} }
}
} }
.form-page + .logout-button{ .form-page + .logout-button {
top: 0px !important; top: 0 !important;
right: 2.5rem; right: 2.5rem;
} }
.form-page footer { .form-page footer {
margin-top: 6rem !important; margin-top: 6rem !important;
} }
@media (max-width: 991px) { @media (max-width: 991px) {
.form-page { .form-page {
&__separator { &__separator {
width: 20% width: 20%
}
&__telegram {
width: 25%;
}
} }
&__telegram {
width: 25%;
}
}
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.form-page { .form-page {
&__interview { &__interview {
flex-direction: column; flex-direction: column;
form { form {
margin-top: 48px; margin-top: 48px;
} }
}
&__separator {
display: none;
}
&__telegram {
margin-top: 5rem;
margin-bottom: 2rem;
}
&__arrow-img {
display: none;
}
form label {
line-height: initial;
}
&__selected img {
width: 100px;
}
} }
&__separator {
display: none;
}
&__telegram {
margin-top: 5rem;
margin-bottom: 2rem;
}
&__arrow-img {
display: none;
}
form label {
line-height: initial;
}
&__selected img {
width: 100px;
}
}
} }

29
src/components/Home/Home.js → src/pages/Home/Home.js
View File

@ -1,14 +1,14 @@
import React, {useState, useEffect} from 'react' import React, {useState, useEffect} from 'react'
import {useDispatch} from 'react-redux' import {useDispatch} from 'react-redux'
import Outstaffing from '../Outstaffing/Outstaffing' import Outstaffing from '../../components/Outstaffing/Outstaffing'
import Description from '../Description/Description' import Description from '../../components/Description/Description'
import {Footer} from '../Footer/Footer' import {Footer} from '../../components/Footer/Footer'
import {profiles, tags} from '../../redux/outstaffingSlice' import {profiles, tags} from '../../redux/outstaffingSlice'
import {useRequest} from "../../hooks/useRequest"; import {Header} from "../../components/Header/Header";
import {LogoutButton} from "../LogoutButton/LogoutButton"; import {apiRequest} from "../../api/request";
const Home = () => { const Home = () => {
@ -18,8 +18,6 @@ const Home = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const {apiRequest} = useRequest();
useEffect(() => { useEffect(() => {
setIsLoadingMore(true); setIsLoadingMore(true);
apiRequest('/profile', { apiRequest('/profile', {
@ -30,8 +28,7 @@ const Home = () => {
setIsLoadingMore(false) setIsLoadingMore(false)
}); });
apiRequest('/skills/skills-on-main-page', { apiRequest('/skills/skills-on-main-page', {}).then((skills) => {
}).then((skills) => {
if (!skills) { if (!skills) {
return [] return []
} }
@ -54,12 +51,14 @@ const Home = () => {
}; };
return ( return (
<div className='container'> <>
<Header/>
<Outstaffing/> <div className='container'>
<Description onLoadMore={loadMore} isLoadingMore={isLoadingMore}/> <Outstaffing/>
<Footer/> <Description onLoadMore={loadMore} isLoadingMore={isLoadingMore}/>
</div> <Footer/>
</div>
</>
) )
}; };

5
src/pages/Profile/Profile.js
View File

@ -7,11 +7,14 @@ import {Footer} from "../../components/Footer/Footer";
import {getProfileInfo} from "../../redux/outstaffingSlice"; import {getProfileInfo} from "../../redux/outstaffingSlice";
import {urlForLocal} from "../../helper";
import reportsIcon from "../../images/reports.png" import reportsIcon from "../../images/reports.png"
import summaryIcon from "../../images/summaryIcon.png" import summaryIcon from "../../images/summaryIcon.png"
import timerIcon from "../../images/timerIcon.png" import timerIcon from "../../images/timerIcon.png"
import paymentIcon from "../../images/paymentIcon.png" import paymentIcon from "../../images/paymentIcon.png"
import settingIcon from "../../images/settingIcon.png" import settingIcon from "../../images/settingIcon.png"
import rightArrow from "../../images/arrowRight.png" import rightArrow from "../../images/arrowRight.png"
import './profile.scss' import './profile.scss'
@ -27,7 +30,7 @@ export const Profile = () => {
<h2 className='profile__title'>Добрый день, <span>{profileInfo.fio}</span></h2> <h2 className='profile__title'>Добрый день, <span>{profileInfo.fio}</span></h2>
<div className='summary__info'> <div className='summary__info'>
<div className='summary__person'> <div className='summary__person'>
<img src={profileInfo.photo} className='summary__avatar' alt='avatar'/> <img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : ''} className='summary__avatar' alt='avatar'/>
<p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p> <p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
</div> </div>
</div> </div>

1
src/pages/SingleReportPage/SingleReportPage.js
View File

@ -1,5 +1,4 @@
import React from 'react' import React from 'react'
import { WithLogout } from '../../hoc/withLogout'
import arrowLeft from '../../images/right-arrow.png' import arrowLeft from '../../images/right-arrow.png'
import SVG from 'react-inlinesvg' import SVG from 'react-inlinesvg'

8
src/pages/Summary/Summary.js
View File

@ -3,22 +3,20 @@ import {useSelector} from "react-redux";
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
import {getProfileInfo} from "../../redux/outstaffingSlice"; import {getProfileInfo} from "../../redux/outstaffingSlice";
import {Footer} from '../../components/Footer/Footer' import {Footer} from '../../components/Footer/Footer'
import {transformHtml} from "../../helper"; import {transformHtml, urlForLocal} from "../../helper";
import {useRequest} from "../../hooks/useRequest";
import arrow from "../../images/right-arrow.png"; import arrow from "../../images/right-arrow.png";
import rightArrow from "../../images/arrowRight.png" import rightArrow from "../../images/arrowRight.png"
import gitImgItem from "../../images/gitItemImg.png" import gitImgItem from "../../images/gitItemImg.png"
import './summary.scss' import './summary.scss'
import {apiRequest} from "../../api/request";
export const Summary = () => { export const Summary = () => {
const profileInfo = useSelector(getProfileInfo); const profileInfo = useSelector(getProfileInfo);
const [openGit, setOpenGit] = useState(false); const [openGit, setOpenGit] = useState(false);
const [gitInfo, setGitInfo] = useState([]); const [gitInfo, setGitInfo] = useState([]);
const {apiRequest} = useRequest();
useEffect(() => { useEffect(() => {
apiRequest(`/profile/portfolio-projects?card_id=${localStorage.getItem('cardId')}`) apiRequest(`/profile/portfolio-projects?card_id=${localStorage.getItem('cardId')}`)
.then(responseGit => setGitInfo(responseGit)) .then(responseGit => setGitInfo(responseGit))
@ -35,7 +33,7 @@ export const Summary = () => {
</div>} </div>}
<div className='summary__info'> <div className='summary__info'>
<div className='summary__person'> <div className='summary__person'>
<img src={profileInfo.photo} className='summary__avatar' alt='avatar'/> <img src={urlForLocal(profileInfo.photo)} className='summary__avatar' alt='avatar'/>
<p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p> <p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
</div> </div>
{!openGit && {!openGit &&

29
src/pages/ViewReport/ViewReport.js
View File

@ -1,9 +1,8 @@
import React, {useEffect, useState} from 'react' import React, {useEffect, useState} from 'react'
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import {useRequest} from "../../hooks/useRequest";
import {useSelector} from "react-redux"; import {useSelector} from "react-redux";
import {getReportDate} from "../../redux/reportSlice"; import {getReportDate} from "../../redux/reportSlice";
import SVG from 'react-inlinesvg'
import {Loader} from "../../components/Loader/Loader" import {Loader} from "../../components/Loader/Loader"
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
@ -13,6 +12,7 @@ import arrow from "../../images/right-arrow.png";
import arrowSwitchDate from "../../images/arrowViewReport.png"; import arrowSwitchDate from "../../images/arrowViewReport.png";
import './viewReport.scss' import './viewReport.scss'
import {apiRequest} from "../../api/request";
export const ViewReport = () => { export const ViewReport = () => {
const getCreatedDate = (day) => { const getCreatedDate = (day) => {
@ -26,25 +26,24 @@ export const ViewReport = () => {
return `${yyyy}-${mm}-${dd}` return `${yyyy}-${mm}-${dd}`
} }
}; };
const {apiRequest} = useRequest();
const reportDate = useSelector(getReportDate); const reportDate = useSelector(getReportDate);
const [taskText, setTaskText] = useState([]); const [taskText, setTaskText] = useState([]);
const [difficulties, setDifficulties] = useState([]) const [difficulties, setDifficulties] = useState([]);
const [tomorrowTask, setTomorrowTask] = useState([]) const [tomorrowTask, setTomorrowTask] = useState([]);
const [totalHours, setTotalHours] = useState(0); const [totalHours, setTotalHours] = useState(0);
const [reportDay] = useState(new Date (getCreatedDate(reportDate))) const [reportDay] = useState(new Date (getCreatedDate(reportDate)));
const [currentDay] = useState(new Date ()) const [currentDay] = useState(new Date ());
const [loader, setLoader] = useState(false) const [loader, setLoader] = useState(false);
function getReportFromDate(day) { function getReportFromDate(day) {
setLoader(true) setLoader(true);
setTaskText([]) setTaskText([]);
setDifficulties([]) setDifficulties([]);
setTomorrowTask([]) setTomorrowTask([]);
apiRequest(`reports/find-by-date?user_card_id=${localStorage.getItem('cardId')}&date=${day}`) apiRequest(`reports/find-by-date?user_card_id=${localStorage.getItem('cardId')}&date=${day}`)
.then(res => { .then(res => {
let spendTime = 0 let spendTime = 0;
for (const item of res) { for (const item of res) {
if(item.difficulties) { if(item.difficulties) {
setDifficulties(prevArray => [...prevArray, item.difficulties]) setDifficulties(prevArray => [...prevArray, item.difficulties])
@ -57,14 +56,14 @@ export const ViewReport = () => {
hours: task.hours_spent, hours: task.hours_spent,
task: task.task, task: task.task,
id: task.id id: task.id
} };
if(task.hours_spent) { if(task.hours_spent) {
spendTime += Number(task.hours_spent) spendTime += Number(task.hours_spent)
} }
setTaskText(prevArray => [...prevArray, taskInfo]) setTaskText(prevArray => [...prevArray, taskInfo])
}) })
} }
setTotalHours(spendTime) setTotalHours(spendTime);
setLoader(false) setLoader(false)
}) })
} }