Merge pull request #96 from apuc/fix-img-and-components

Fix img, components and project structures

.prettierrc

@@ -1,4 +1,6 @@
 {
   "tabWidth": 2,
+  "semi": true,
+  "printWidth": 80,
   "useTabs": false
 }

config/paths.js

@@ -1,7 +1,7 @@
-const path = require('path');
+const path = require("path");
 module.exports = {
-    public: path.resolve(__dirname, '../public'),
-    src: path.resolve(__dirname, '../src'),
-    build: path.resolve(__dirname, '../build'),
-    '@node_modules': path.resolve(__dirname, '../node_modules'),
+  public: path.resolve(__dirname, "../public"),
+  src: path.resolve(__dirname, "../src"),
+  build: path.resolve(__dirname, "../build"),
+  "@node_modules": path.resolve(__dirname, "../node_modules"),
 };

config/webpack/analyze.js

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

config/webpack/common.js

@@ -1,45 +1,44 @@
-const paths = require('../paths');
+const paths = require("../paths");
 
-const webpack = require('webpack');
+const webpack = require("webpack");
 
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-const Dotenv = require('dotenv-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'
+  "@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');
+if (process.env.NODE_ENV === "development") {
+  plugins.push("react-refresh/babel");
 }
 
 const babelLoader = {
-  loader: 'babel-loader',
+  loader: "babel-loader",
   options: {
     presets: [
       // "react-app",
-      '@babel/preset-env',
-      '@babel/preset-react',
+      "@babel/preset-env",
+      "@babel/preset-react",
     ],
-    plugins: plugins
-  }
+    plugins: plugins,
+  },
 };
 
 module.exports = {
   entry: `${paths.src}/index.js`,
   output: {
     path: paths.build,
-    filename: '[name].bundle.js',
-    publicPath: '/',
+    filename: "[name].bundle.js",
+    publicPath: "/",
     // publicPath: 'https://itguild.info',
     asyncChunks: true,
     clean: true,
-    crossOriginLoading: 'anonymous',
+    crossOriginLoading: "anonymous",
     module: true,
     environment: {
       arrowFunction: true,
@@ -47,57 +46,65 @@ module.exports = {
       const: true,
       destructuring: true,
       dynamicImport: false,
-      forOf: true
-    }
+      forOf: true,
+    },
   },
   resolve: {
     alias: {
-      '@': `${paths.src}/modules`
+      "@": `${paths.src}/modules`,
+      assets: `${paths.src}/assets`,
+      "@components": `${paths.src}/components`,
+      "@utils": `${paths.src}/utils`,
+      "@pages": `${paths.src}/pages`,
+      "@redux": `${paths.src}/redux`,
+      "@store": `${paths.src}/store`,
+      "@api": `${paths.src}/api`,
+      "@hooks": `${paths.src}/hooks`,
     },
-    extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json']
+    // extensions: [".mjs", ".js", ".jsx", ".ts", ".tsx", ".json"],
+    extensions: [".jsx", "..."],
   },
   experiments: {
     topLevelAwait: true,
-    outputModule: true
+    outputModule: true,
   },
   module: {
     rules: [
-
       // JavaScript, React
       {
         test: /\.m?jsx?$/i,
         exclude: /node_modules/,
-        use: babelLoader
+        use: babelLoader,
       },
       // TypeScript
       {
         test: /.tsx?$/i,
         exclude: /node_modules/,
-        use: [babelLoader, 'ts-loader']
+        use: [babelLoader, "ts-loader"],
       },
       // CSS, SASS
       {
         test: /\.(c|sa|sc)ss$/i,
         use: [
-          'style-loader',
+          "style-loader",
           {
-            loader: 'css-loader',
-            options: {importLoaders: 1}
+            loader: "css-loader",
+            options: { importLoaders: 1 },
           },
-          'sass-loader'
-        ]
+          "sass-loader",
+        ],
       },
       // MD
       {
         test: /\.md$/i,
-        use: ['html-loader', 'markdown-loader']
+        use: ["html-loader", "markdown-loader"],
       },
       // static files
       {
-        test: /\.(jpe?g|png|gif|svg|eot|ttf|woff2|woff?)$/i,
-        type: 'asset/resource'
-      }
-    ]
+        test: /\.(jpe?g|png|gif|webp|svg|eot|ttf|woff2|woff?)$/i,
+        type: "asset/resource",
+      },
+    ],
   },
   plugins: [
     new webpack.ProgressPlugin(),
@@ -107,10 +114,10 @@ module.exports = {
         {
           from: `${paths.public}`,
           globOptions: {
-            ignore: ["**/index.html"]
-          }
-        }
-      ]
+            ignore: ["**/index.html"],
+          },
+        },
+      ],
     }),
 
     new HtmlWebpackPlugin({
@@ -119,11 +126,11 @@ module.exports = {
     }),
 
     new webpack.ProvidePlugin({
-      React: 'react'
+      React: "react",
     }),
 
     new Dotenv({
-      path: '.env'
-    })
-  ]
-};
+      path: ".env",
+    }),
+  ],
+};

config/webpack/dev.js

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

config/webpack/prod.js

@@ -1,62 +1,59 @@
-const paths = require('../paths');
-const {merge} = require('webpack-merge');
-const common = require('./common');
-
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+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']
+  mode: "production",
+  target: "browserslist",
+  entry: {
+    index: {
+      import: `${paths.src}/index.js`,
+      dependOn: ["react", "helpers"],
     },
-    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'
-        }),
-
+    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|webp)$/i,
+        type: "asset/resource",
+        // type: 'asset'
+      },
     ],
-    optimization: {
-        runtimeChunk: 'single'
-    },
-    performance: {
-        hints: 'warning',
-        maxEntrypointSize: 512000,
-        maxAssetSize: 512000
-    }
-});
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: "[name].[contenthash].css",
+      chunkFilename: "[id].css",
+    }),
+  ],
+  optimization: {
+    runtimeChunk: "single",
+  },
+  performance: {
+    hints: "warning",
+    maxEntrypointSize: 512000,
+    maxAssetSize: 512000,
+  },
+});

jsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./src",
+    "paths": {
+      "assets/*": ["./assets/*"],
+      "@components/*": ["./components/*"],
+      "@utils/*": ["./utils/*"],
+      "@pages/*": ["./pages/*"],
+      "@redux/*": ["./redux/*"],
+      "@store/*": ["./store/*"],
+      "@api/*": ["./api/*"],
+      "@hooks/*": ["./hooks/*"]
+    }
+  }
+}

package.json

@@ -14,15 +14,6 @@
     "bfj": "^7.0.2",
     "bootstrap": "^4.6.0",
     "camelcase": "^6.1.0",
-    "eslint": "^7.11.0",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.1.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-testing-library": "^3.9.2",
     "form-data": "^4.0.0",
     "fs-extra": "^9.0.1",
     "identity-obj-proxy": "3.0.0",

src/App.js

@@ -12,11 +12,11 @@ import Home from "./pages/Home/Home";
 import Candidate from "./components/Candidate/Candidate";
 import Calendar from "./components/Calendar/Calendar";
 import ReportForm from "./components/ReportForm/ReportForm";
-import FreeDevelopers from "./components/UI/FreeDevelopers/FreeDevelopers";
-import { TicketFullScreen } from "./components/UI/TicketFullScreen/TicketFullScreen";
+import FreeDevelopers from "./components/FreeDevelopers/FreeDevelopers";
+import { TicketFullScreen } from "./components/Modal/Tracker/TicketFullScreen/TicketFullScreen";
 import { ProfileCalendar } from "./components/ProfileCalendar/ProfileCalendar";
 import Article from "./pages/Article/Article";
-import FormPage from "./pages/FormPage/FormPage.js";
+import FormPage from "./pages/FormPage/FormPage";
 import SingleReportPage from "./pages/SingleReportPage/SingleReportPage";
 import { QuizPage } from "./pages/quiz/QuizPage";
 import { QuizReportPage } from "./pages/quiz/QuizReportPage";
@@ -42,7 +42,7 @@ import { FrequentlyAskedQuestions } from "./pages/FrequentlyAskedQuestions/Frequ
 import { FrequentlyAskedQuestion } from "./pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion";
 
 import "./assets/global.scss";
-import "./fonts/stylesheet.css";
+import "./assets/fonts/stylesheet.css";
 import "bootstrap/dist/css/bootstrap.min.css";
 
 const App = () => {

src/api/request.js

@@ -1,7 +1,5 @@
-import axios from 'axios';
-import {getToken, urlHasParams} from "../helper";
-
-
+import axios from "axios";
+import { getToken, urlHasParams } from "@utils/helper";
 
 const instance = axios.create({
   baseURL: process.env.REACT_APP_API_URL,
@@ -10,40 +8,47 @@ const instance = axios.create({
   },
 });
 
-export const apiRequest = (url, {
-  method = 'get', params, data,
-  headers = {
-    'Access-Control-Allow-Origin': '*',
-    'Content-Type': 'application/json'
-  },
-} = {}) => {
-  const fullHeaders = {...headers, ...getToken()};
+export 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) {
-          window.location.replace('/auth');
-          localStorage.clear();
-          // dispatch(auth(false));
-        }
-        return resolve(response)
-      }))
-      .then(response => new Promise(resolve => resolve(response.data)))
+    .request({
+      url: urWithParams,
+      method,
+      params,
+      data,
+      headers: { ...fullHeaders },
+    })
+    .then(
+      (response) =>
+        new Promise((resolve) => {
+          if (response.data.redirect || response.status === 401) {
+            window.location.replace("/auth");
+            localStorage.clear();
+            // dispatch(auth(false));
+          }
+          return resolve(response);
+        })
+    )
+    .then((response) => new Promise((resolve) => resolve(response.data)));
 };
 
 const RequestError = (code, msg, data) => {
-  const description = msg ? `- ${msg}` : '';
+  const description = msg ? `- ${msg}` : "";
 
-  this.name = 'RequestError';
+  this.name = "RequestError";
   this.message = `API returned: ${code}${description}.`;
   this.code = code;
   this.description = msg;