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'),
+  public: path.resolve(__dirname, "../public"),
-    src: path.resolve(__dirname, '../src'),
+  src: path.resolve(__dirname, "../src"),
-    build: path.resolve(__dirname, '../build'),
+  build: path.resolve(__dirname, "../build"),
-    '@node_modules': path.resolve(__dirname, '../node_modules'),
+  "@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')
+const BundleAnalyzerPlugin =
-    .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 CopyWebpackPlugin = require("copy-webpack-plugin");
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlWebpackPlugin = require("html-webpack-plugin");
-
-const Dotenv = require('dotenv-webpack');
 
+const Dotenv = require("dotenv-webpack");
 
 const plugins = [
-  '@babel/plugin-proposal-class-properties',
+  "@babel/plugin-proposal-class-properties",
-  '@babel/plugin-syntax-dynamic-import',
+  "@babel/plugin-syntax-dynamic-import",
-  '@babel/plugin-transform-runtime'
+  "@babel/plugin-transform-runtime",
 ];
 
-if (process.env.NODE_ENV === 'development') {
+if (process.env.NODE_ENV === "development") {
-  plugins.push('react-refresh/babel');
+  plugins.push("react-refresh/babel");
 }
 
 const babelLoader = {
-  loader: 'babel-loader',
+  loader: "babel-loader",
   options: {
     presets: [
       // "react-app",
-      '@babel/preset-env',
+      "@babel/preset-env",
-      '@babel/preset-react',
+      "@babel/preset-react",
     ],
-    plugins: plugins
+    plugins: plugins,
-  }
+  },
 };
 
 module.exports = {
   entry: `${paths.src}/index.js`,
   output: {
     path: paths.build,
-    filename: '[name].bundle.js',
+    filename: "[name].bundle.js",
-    publicPath: '/',
+    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',
+            loader: "css-loader",
-            options: {importLoaders: 1}
+            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,
+        test: /\.(jpe?g|png|gif|webp|svg|eot|ttf|woff2|woff?)$/i,
-        type: 'asset/resource'
+        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 webpack = require("webpack");
-const {merge} = require('webpack-merge');
+const { merge } = require("webpack-merge");
 
-const common = require('./common');
+const common = require("./common");
 
 module.exports = merge(common, {
-  target : 'web',
+  target: "web",
-  mode: 'development',
+  mode: "development",
-  devtool: 'eval-cheap-source-map',
+  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,26 +1,25 @@
-const paths = require('../paths');
+const paths = require("../paths");
-const {merge} = require('webpack-merge');
+const { merge } = require("webpack-merge");
-const common = require('./common');
+const common = require("./common");
-
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = merge(common, {
-    mode: 'production',
+  mode: "production",
-    target :'browserslist',
+  target: "browserslist",
   entry: {
     index: {
       import: `${paths.src}/index.js`,
-            dependOn: ['react', 'helpers']
+      dependOn: ["react", "helpers"],
     },
-        react: ['react', 'react-dom', 'prop-types'],
+    react: ["react", "react-dom", "prop-types"],
-        helpers: ['immer', 'nanoid']
+    helpers: ["immer", "nanoid"],
   },
   devtool: false,
   output: {
-        filename: 'js/[name].[hash:8].bundle.js',
+    filename: "js/[name].[hash:8].bundle.js",
-        publicPath: '/',
+    publicPath: "/",
-        assetModuleFilename: '[hash][ext][query]'
+    assetModuleFilename: "[hash][ext][query]",
   },
   module: {
     rules: [
@@ -29,34 +28,32 @@ module.exports = merge(common, {
         use: [
           MiniCssExtractPlugin.loader,
           {
-                        loader: 'css-loader',
+            loader: "css-loader",
-                        options: {importLoaders: 1}
+            options: { importLoaders: 1 },
           },
-                    'postcss-loader',
+          "postcss-loader",
-                    'sass-loader'
+          "sass-loader",
-                ]
+        ],
       },
       {
-                test: /\.(jpe?g|png|gif|svg)$/i,
+        test: /\.(jpe?g|png|gif|svg|webp)$/i,
-                type: 'asset/resource'
+        type: "asset/resource",
         // type: 'asset'
       },
-
+    ],
-        ]
   },
   plugins: [
     new MiniCssExtractPlugin({
-            filename: '[name].[contenthash].css',
+      filename: "[name].[contenthash].css",
-            chunkFilename: '[id].css'
+      chunkFilename: "[id].css",
     }),
-
   ],
   optimization: {
-        runtimeChunk: 'single'
+    runtimeChunk: "single",
   },
   performance: {
-        hints: 'warning',
+    hints: "warning",
     maxEntrypointSize: 512000,
-        maxAssetSize: 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 FreeDevelopers from "./components/FreeDevelopers/FreeDevelopers";
-import { TicketFullScreen } from "./components/UI/TicketFullScreen/TicketFullScreen";
+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 axios from "axios";
-import {getToken, urlHasParams} from "../helper";
+import { getToken, urlHasParams } from "@utils/helper";
-
-
 
 const instance = axios.create({
   baseURL: process.env.REACT_APP_API_URL,
@@ -10,17 +8,21 @@ const instance = axios.create({
   },
 });
 
-export const apiRequest = (url, {
+export const apiRequest = (
-  method = 'get', params, data,
+  url,
+  {
+    method = "get",
+    params,
+    data,
     headers = {
-    'Access-Control-Allow-Origin': '*',
+      "Access-Control-Allow-Origin": "*",
-    'Content-Type': 'application/json'
+      "Content-Type": "application/json",
     },
-} = {}) => {
+  } = {}
+) => {
   const fullHeaders = { ...headers, ...getToken() };
   let urWithParams = urlHasParams(url);
 
-
   return instance
     .request({
       url: urWithParams,
@@ -29,21 +31,24 @@ export const apiRequest = (url, {
       data,
       headers: { ...fullHeaders },
     })
-      .then(response => new Promise(resolve => {
+    .then(
+      (response) =>
+        new Promise((resolve) => {
           if (response.data.redirect || response.status === 401) {
-          window.location.replace('/auth');
+            window.location.replace("/auth");
             localStorage.clear();
             // dispatch(auth(false));
           }
-        return resolve(response)
+          return resolve(response);
-      }))
+        })
-      .then(response => new Promise(resolve => resolve(response.data)))
+    )
+    .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;