change folders structure

chinook/app/front/package.json

@@ -10,12 +10,13 @@
     "lint": "./node_modules/.bin/eslint"
   },
   "dependencies": {
+    "@ant-design/icons": "4.3.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "@umijs/hooks": "^1.9.3",
     "antd": "^4.8.2",
-    "@ant-design/icons": "4.3.0",
     "axios": "^0.20.0",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^6.3.2",
@@ -29,6 +30,7 @@
     "react": "^16.14.0",
     "react-dev-utils": "^11.0.1",
     "react-dom": "^16.14.0",
+    "react-refresh": "^0.9.0",
     "react-router-dom": "^5.2.0",
     "terser-webpack-plugin": "^5.0.3",
     "webpack": "5.8.0",

chinook/app/front/src/components/TracksPage.jsx

@@ -19,6 +19,10 @@ const DEBOUNCE_OPTIONS = {
   trailing: false,
 };
 
+const isEven = (value) => {
+  return value % 2 === 0;
+};
+
 const renderGenres = (genres) =>
   genres.map(({ ID, name }) => (
     <Option key={ID} value={ID.toString()}>
@@ -80,7 +84,9 @@ const TracksContainer = () => {
       setLoading(true);
       const options = {
         $top: state.pagination.pageSize,
-        substr: state.searchOptions.substr.replace(`'`, `''`),
+        substr: state.searchOptions.substr.replace(/'*/g, (value) =>
+          isEven(value.length) ? value : `${value}'`
+        ),
         genreIds: state.searchOptions.genreIds,
       };
 

chinook/app/front/src/components/tracks/EditAction.jsx

@@ -103,11 +103,15 @@ const EditAction = ({ ID, name, composer, genre, unitPrice, album, afterTrackUpd
 EditAction.propTypes = {
   ID: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
-  composer: PropTypes.string.isRequired,
+  composer: PropTypes.string,
   genre: PropTypes.object.isRequired,
   unitPrice: PropTypes.number.isRequired,
   album: PropTypes.object.isRequired,
   afterTrackUpdate: PropTypes.func.isRequired,
 };
 
+EditAction.defaultProps = {
+  composer: undefined,
+};
+
 export { EditAction };

chinook/app/front/webpack/common-plugins.js

@@ -7,10 +7,10 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 
 module.exports = {
   plugins: [
-    new CleanWebpackPlugin(),
+    new CleanWebpackPlugin({ dangerouslyAllowCleanPatternsOutsideProject: true }),
     new HtmlWebpackPlugin({
       template: path.join(__dirname, '../public/index.html'),
-      filename: path.join(__dirname, '../../app/index.html'),
+      filename: path.join(__dirname, '../../build/index.html'),
       publicPath: '/static/', // for js bundles path
     }),
     new InterpolateHtmlPlugin(HtmlWebpackPlugin, {
@@ -20,7 +20,7 @@ module.exports = {
       patterns: [
         {
           from: path.join(__dirname, '../public'),
-          to: path.join(__dirname, '../../app'),
+          to: path.join(__dirname, '../../build'),
           globOptions: {
             dot: true,
             ignore: ['**/index.html'],

chinook/app/front/webpack/common-rules.js

@@ -10,6 +10,7 @@ module.exports = {
         },
       },
     },
+
     {
       test: /\.(png|jpg)$/,
       use: [{ loader: 'url-loader' }],

chinook/app/front/webpack/webpack-dev-server.js

@@ -3,28 +3,47 @@ const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const { rules } = require('./common-rules');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 module.exports = {
-  mode: 'development',
-  devtool: 'inline-source-map',
   entry: {
-    index: './src/index.jsx',
+    app: './src/index.jsx',
   },
+  devtool: 'inline-source-map',
   devServer: {
     contentBase: './dist',
-    compress: true, // compress files to gzip to increase download speed
+    hot: true,
     port: 3000,
+    compress: true, // compress files to gzip to increase download speed
     disableHostCheck: false, // by default true, it is not recomended,
     // because it makes app vulnerable to DNS rebinding attacks
-    headers: {
-      'X-Custom-header': 'custom', // this requires apps with authentication
-      // useful config obj
-    },
     open: true, // open the browser after server had been started
-    hot: true, // hot module replacement
-    historyApiFallback: true, // needs for react-router-dom
+    historyApiFallback: true,
   },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react'],
+            plugins: ['react-refresh/babel'].filter(Boolean),
+          },
+        },
+      },
+      {
+        test: /\.(png|jpg)$/,
+        use: [{ loader: 'url-loader' }],
+      },
+      {
+        test: /\.css$/,
+        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
+      },
+    ],
+  },
+
   plugins: [
     new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
     new HtmlWebpackPlugin({
@@ -33,24 +52,17 @@ module.exports = {
     new InterpolateHtmlPlugin(HtmlWebpackPlugin, {
       PUBLIC_URL: '',
     }),
-    new webpack.ProgressPlugin(),
+
     new webpack.DefinePlugin({
       'process.env.SERVICE_URL': JSON.stringify('http://localhost:4004/'),
     }),
-    // new webpack.HotModuleReplacementPlugin(), // for hot module replacement option of devServer
-  ],
+    new webpack.ProgressPlugin(),
+    new webpack.HotModuleReplacementPlugin(), // for hot module replacement option of devServer
+    new ReactRefreshWebpackPlugin(),
+  ].filter(Boolean),
   output: {
-    filename: '[name].[fullhash].js',
+    filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
-  module: {
-    rules: [
-      ...rules,
-      {
-        test: /\.css$/,
-        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
-      },
-    ],
-  },
   resolve: { extensions: ['*', '.js', '.jsx'] },
 };

chinook/app/front/webpack/webpack.common.js

@@ -16,7 +16,7 @@ module.exports = {
     // from update when developing (doing changes in the files)
     filename: '[name].[fullhash].js',
     // in this folder path bundles will be placed
-    path: path.resolve(__dirname, '../../app/static'),
+    path: path.resolve(__dirname, '../../build/static'),
     // where you uploaded your bundled files. (Relative to server root)
     // needs for react-router-dom
     publicPath: '/static/',