optimizations for server use

captain-definition

@@ -0,0 +1,12 @@
+{
+  "schemaVersion": 2,
+  "dockerfileLines": [
+    "FROM node",
+    "WORKDIR /app",
+    "COPY package*.json ./",
+    "RUN npm install",
+    "COPY . .",
+    "EXPOSE 3000",
+    "CMD [\"npm\", \"run\", \"start:dev\"]"
+  ]
+}

src/pages/EnterAccount.jsx

@@ -5,123 +5,171 @@ import classes from "../assets/styles/enterAccount.module.scss";
 import MyInput from "../components/MyInput.jsx";
 import MyButton from "../components/MyButton.jsx";
 import { UserData } from "../context";
-import { logIn, completeRegistration, verifyUserApi } from "../hooks/api/enterAccountApi.js";
+import {
+  logIn,
+  completeRegistration,
+  verifyUserApi,
+} from "../hooks/api/enterAccountApi.js";
 
 const EnterAccount = () => {
-    const [enter, setEnter] = useState("login");
-    const navigate = useNavigate();
+  const [enter, setEnter] = useState("login");
+  const navigate = useNavigate();
 
-    const [email, setEmail] = useState("");
-    const [phone, setPhone] = useState("");
-    const [login, setLogin] = useState("");
-    const [surname, setSurname] = useState("");
-    const [patronymic, setPatronymic] = useState("");
-    const [password, setPassword] = useState("");
-    const [repiedPassword, setRepiedPassword] = useState("");
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [login, setLogin] = useState("");
+  const [surname, setSurname] = useState("");
+  const [patronymic, setPatronymic] = useState("");
+  const [password, setPassword] = useState("");
+  const [repiedPassword, setRepiedPassword] = useState("");
 
-    const {user, setUser} = useContext(UserData);
-    const [cookies, setCookie, removeCookie] = useCookies(["user"]);
+  const { user, setUser } = useContext(UserData);
+  const [cookies, setCookie, removeCookie] = useCookies(["user"]);
 
-    function cleanState() {
-        setEmail("");
-        setPhone("");
-        setLogin("");
-        setSurname("");
-        setPatronymic("");
-        setPassword("");
-        setRepiedPassword("");
-    };
+  function cleanState() {
+    setEmail("");
+    setPhone("");
+    setLogin("");
+    setSurname("");
+    setPatronymic("");
+    setPassword("");
+    setRepiedPassword("");
+  }
 
-    function selectTag(tag) {
-        setEnter(tag);
-        cleanState();
-    };
+  function selectTag(tag) {
+    setEnter(tag);
+    cleanState();
+  }
 
-    async function createUser() {
-        const response = await completeRegistration({
-            login: login,
-            password: password,
-            repiedPassword: repiedPassword
-        });
+  async function createUser() {
+    const response = await completeRegistration({
+      login: login,
+      password: password,
+      repiedPassword: repiedPassword,
+    });
 
-        if (response.status === 200) {
-            setUser({
-                email: email,
-                phone: phone,
-                login: login,
-                surname: surname,
-                patronymic: patronymic,
-                password: password,
-            });
-            setCookie("token", response.data.token);     
-            cleanState();
-            window.location.reload();
-            // navigate("/");
-        }
-        else {
-            console.log("Error")
-        }
-    };
-
-    async function logInToAccount() {
-        const response = await logIn(login, password)
-
-        if (response.status === 200) {
-            setCookie("token", response.data.token);
-            cleanState();
-            // setUser({
-            //     login: login
-            // })
-            window.location.reload();
-            // navigate("/")
-            // window.location.reload()
-        }
-        else {
-            console.log(response)
-        }      
+    if (response.status === 200) {
+      setUser({
+        email: email,
+        phone: phone,
+        login: login,
+        surname: surname,
+        patronymic: patronymic,
+        password: password,
+      });
+      setCookie("token", response.data.token);
+      cleanState();
+      window.location.reload();
+      // navigate("/");
+    } else {
+      console.log("Error");
     }
+  }
 
-    return (
-        <div className={classes.main}>
-            <div className={classes.wrapper}>
-                <div className={classes.tabs}>
-                    <ul class="nav nav-tabs">
-                        <li class="nav-item" onClick={() => selectTag("login")}>
-                            <a className={enter === "login" ? "nav-link active" : "nav-link"} aria-current="page">Авторизация</a>
-                        </li>
-                        <li class="nav-item" onClick={() => selectTag("register")}>
-                            <a className={enter === "register" ? "nav-link active" : "nav-link"}>Регитрация</a>
-                        </li>
-                    </ul>
+  async function logInToAccount() {
+    const response = await logIn(login, password);
+
+    if (response.status === 200) {
+      setCookie("token", response.data.token);
+      cleanState();
+      // setUser({
+      //     login: login
+      // })
+      window.location.reload();
+      // navigate("/")
+      // window.location.reload()
+    } else {
+      console.log(response);
+    }
+  }
+
+  return (
+    <div className={classes.main}>
+      <div className={classes.wrapper}>
+        <div className={classes.tabs}>
+          <ul class="nav nav-tabs">
+            <li class="nav-item" onClick={() => selectTag("login")}>
+              <a
+                className={enter === "login" ? "nav-link active" : "nav-link"}
+                aria-current="page"
+              >
+                Авторизация
+              </a>
+            </li>
+            <li class="nav-item" onClick={() => selectTag("register")}>
+              <a
+                className={
+                  enter === "register" ? "nav-link active" : "nav-link"
+                }
+              >
+                Регистрация
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div className={classes.content}>
+          <div className={classes.content__wrapper}>
+            {enter === "login" ? (
+              <div className={classes.content__wrapper__login}>
+                <div className={classes.content__wrapper__login__header}>
+                  <h3>Войти в аккаунт</h3>
                 </div>
-                <div className={classes.content}>
-                    <div className={classes.content__wrapper}>
-                        {enter === 'login' ? <div className={classes.content__wrapper__login}>
-                            <div className={classes.content__wrapper__login__header}>
-                                <h3>Войти в аккаунт</h3>
-                            </div>
-                            <div className={classes.content__wrapper__login__body}>
-                                <MyInput placeholder={"Логин"} otherMainStyle={{width: "100%", height: "20%"}} otherInputStyle={{width: "100%"}} value={login} change={setLogin}/>
-                                <MyInput type={"password"} placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "20%"}} otherInputStyle={{width: "100%"}} value={password} change={setPassword}/>
-                            </div>
-                            <div className={classes.content__wrapper__login__footer}>
-                                <MyButton 
-                                    text={"Войти"} 
-                                    otherStyle={{height: "50%", width: "20%"}} 
-                                    click={logInToAccount}
-                                />
-                            </div>
-                        </div> : 
-                        <div className={classes.content__wrapper__register}>
-                            <div className={classes.content__wrapper__register__header}>
-                                <h3>Зарегестрировать учетную запись</h3>
-                            </div>
-                            <div className={classes.content__wrapper__register__body}>
-                                <MyInput placeholder={"Логин"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={login} change={setLogin}/>
-                                <MyInput type={"password"} placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={password} change={setPassword}/>
-                                <MyInput type={'password'} placeholder={"Повторите пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={repiedPassword} change={setRepiedPassword}/>
-                            </div>
-                            {/* <div className={classes.content__wrapper__register__body}>
+                <div className={classes.content__wrapper__login__body}>
+                  <MyInput
+                    placeholder={"Логин"}
+                    otherMainStyle={{ width: "100%", height: "20%" }}
+                    otherInputStyle={{ width: "100%" }}
+                    value={login}
+                    change={setLogin}
+                  />
+                  <MyInput
+                    type={"password"}
+                    placeholder={"Пароль"}
+                    otherMainStyle={{ width: "100%", height: "20%" }}
+                    otherInputStyle={{ width: "100%" }}
+                    value={password}
+                    change={setPassword}
+                  />
+                </div>
+                <div className={classes.content__wrapper__login__footer}>
+                  <MyButton
+                    text={"Войти"}
+                    otherStyle={{ height: "50%", width: "20%" }}
+                    click={logInToAccount}
+                  />
+                </div>
+              </div>
+            ) : (
+              <div className={classes.content__wrapper__register}>
+                <div className={classes.content__wrapper__register__header}>
+                  <h3>Зарегистрировать учетную запись</h3>
+                </div>
+                <div className={classes.content__wrapper__register__body}>
+                  <MyInput
+                    placeholder={"Логин"}
+                    otherMainStyle={{ width: "100%", height: "15%" }}
+                    otherInputStyle={{ width: "100%" }}
+                    value={login}
+                    change={setLogin}
+                  />
+                  <MyInput
+                    type={"password"}
+                    placeholder={"Пароль"}
+                    otherMainStyle={{ width: "100%", height: "15%" }}
+                    otherInputStyle={{ width: "100%" }}
+                    value={password}
+                    change={setPassword}
+                  />
+                  <MyInput
+                    type={"password"}
+                    placeholder={"Повторите пароль"}
+                    otherMainStyle={{ width: "100%", height: "15%" }}
+                    otherInputStyle={{ width: "100%" }}
+                    value={repiedPassword}
+                    change={setRepiedPassword}
+                  />
+                </div>
+                {/* <div className={classes.content__wrapper__register__body}>
                                 <MyInput placeholder={"Email"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={email} change={setEmail}/>
                                 <MyInput placeholder={"Номер телефона"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={phone} change={setPhone}/>
                                 <div className={classes.content__wrapper__register__body__fio}>
@@ -132,15 +180,20 @@ const EnterAccount = () => {
                                 <MyInput type={'password'} placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={password} change={setPassword}/>
                                 <MyInput type={'password'} placeholder={"Повторите пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={repiedPassword} change={setRepiedPassword}/>
                             </div> */}
-                            <div className={classes.content__wrapper__register__footer}>
-                                <MyButton text={"Создать"} otherStyle={{height: "100%", width: "20%"}} click={() => createUser()}/>
-                            </div>
-                        </div>}
-                    </div>
+                <div className={classes.content__wrapper__register__footer}>
+                  <MyButton
+                    text={"Создать"}
+                    otherStyle={{ height: "100%", width: "20%" }}
+                    click={() => createUser()}
+                  />
                 </div>
-            </div>
+              </div>
+            )}
+          </div>
         </div>
-    )
-}
+      </div>
+    </div>
+  );
+};
 
-export default EnterAccount;
+export default EnterAccount;

src/pages/Home.jsx

@@ -1,40 +1,54 @@
 import React, { useState } from "react";
-import { useNavigate, useLocation, useParams } from 'react-router-dom';
+import { useNavigate, useLocation, useParams } from "react-router-dom";
 import classes from "../assets/styles/home.module.scss";
 import MyButton from "../components/MyButton.jsx";
 import MyInput from "../components/MyInput.jsx";
 
 const Home = () => {
-    const [token, setToken] = useState("");
-    const navigate = useNavigate();
+  const [token, setToken] = useState("");
+  const navigate = useNavigate();
 
-    return (
-        <div className={classes.main}>
-            <div className={classes.wrapper}>
-                <div className={classes.header}>
-                    <div className={classes.header__top}>Кажется вы попали на общую страницу.</div>
-                    <div className={classes.header__bottom}>Чтобы перейти к форме ввелите токен ниже или снова перейдите по ссылке.</div>
-                </div>
-                <div className={classes.content}>
-                    <div className={classes.content__title}>
-                        <div className={classes.content__title__wrapper}>
-                            <h3>Перейти к нужной форме</h3>
-                        </div>                     
-                    </div>
-                    <div className={classes.content__token}>
-                        <div className={classes.content__token__wrapper}>
-                            <MyInput placeholder={"Введите токен формы..."} otherMainStyle={{width: "100%"}} otherInputStyle={{width: "100%"}} value={token} change={(e) => setToken(e)}/>
-                        </div>
-                    </div>
-                    <div className={classes.content__search}>
-                        <div className={classes.content__search__wrapper}>
-                            <MyButton text={"Найти форму"} click={() => navigate(`/forms/${token}`)}/>
-                        </div>
-                    </div>
-                </div>
-            </div>
+  return (
+    <div className={classes.main}>
+      <div className={classes.wrapper}>
+        <div className={classes.header}>
+          <div className={classes.header__top}>
+            Кажется вы попали на общую страницу.
+          </div>
+          <div className={classes.header__bottom}>
+            Чтобы перейти к форме введите токен ниже или снова перейдите по
+            ссылке.
+          </div>
         </div>
-    )
-}
+        <div className={classes.content}>
+          <div className={classes.content__title}>
+            <div className={classes.content__title__wrapper}>
+              <h3>Перейти к нужной форме</h3>
+            </div>
+          </div>
+          <div className={classes.content__token}>
+            <div className={classes.content__token__wrapper}>
+              <MyInput
+                placeholder={"Введите токен формы..."}
+                otherMainStyle={{ width: "100%" }}
+                otherInputStyle={{ width: "100%" }}
+                value={token}
+                change={(e) => setToken(e)}
+              />
+            </div>
+          </div>
+          <div className={classes.content__search}>
+            <div className={classes.content__search__wrapper}>
+              <MyButton
+                text={"Найти форму"}
+                click={() => navigate(`/forms/${token}`)}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
 
-export default Home;
+export default Home;

webpack.config.js

@@ -1,73 +1,74 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const path = require('path');
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require("path");
 
 module.exports = (env) => {
+  const isDev = env.mode === "development";
 
-    const isDev = env.mode === 'development';
+  const cssLoader = {
+    loader: "css-loader",
+    options: {
+      modules: {
+        localIdentName: isDev ? "[path][name]__[local]" : "[hash:base64:8]",
+      },
+    },
+  };
 
-    const cssLoader = {
-        loader: "css-loader",
-        options: {
-            modules: {
-                localIdentName: isDev ? '[path][name]__[local]' : '[hash:base64:8]'
-            },           
+  const config = {
+    mode: env.mode ?? "development",
+    performance: {
+      hints: false,
+      maxEntrypointSize: 512000,
+      maxAssetSize: 512000,
+    },
+    entry: "./src/index.js",
+    output: {
+      // filename: '[name].[contenthash].js',
+      filename: "bundle.js",
+      publicPath: "/",
+      path: path.resolve(__dirname, "dist"),
+      clean: true,
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: path.resolve(__dirname, "public", "index.html"),
+      }),
+      isDev
+        ? undefined
+        : new MiniCssExtractPlugin({
+            filename: "css/[name].[contenthash:8].css",
+            chunkFilename: "css/[name].[contenthash:8].css",
+          }),
+    ],
+    module: {
+      rules: [
+        {
+          test: /\.(scss|css)$/,
+          use: [
+            isDev ? "style-loader" : MiniCssExtractPlugin.loader,
+            cssLoader,
+            "sass-loader",
+          ],
         },
-    }
+        {
+          test: /\.(js|jsx)$/,
+          exclude: /node_modules/,
+          use: {
+            loader: "babel-loader",
+            options: {
+              presets: ["@babel/preset-env", "@babel/preset-react"],
+            },
+          },
+        },
+      ],
+    },
+    devServer: {
+      port: env.port ?? 3000,
+      historyApiFallback: true,
+      host: "0.0.0.0",
+      allowedHosts: "all",
+    },
+  };
 
-    const config = {
-        mode: env.mode ?? 'development',
-        performance: {
-            hints: false,
-            maxEntrypointSize: 512000,
-            maxAssetSize: 512000
-        },
-        entry: './src/index.js',
-        output: {
-            // filename: '[name].[contenthash].js',
-            filename: 'bundle.js',
-            publicPath: '/',
-            path: path.resolve(__dirname, 'dist'),
-            clean: true
-        },
-        plugins: [
-            new HtmlWebpackPlugin({template: path.resolve(__dirname, 'public', 'index.html')}),
-            isDev ? undefined : new MiniCssExtractPlugin({
-                filename: 'css/[name].[contenthash:8].css',
-                chunkFilename: 'css/[name].[contenthash:8].css'
-            })
-        ],
-        module: {
-            rules: [
-                {
-                    test: /\.(scss|css)$/,
-                    use: [
-                        isDev ? 'style-loader' : MiniCssExtractPlugin.loader, 
-                        cssLoader, 
-                        'sass-loader'
-                    ],
-                },
-                {
-                    test: /\.(js|jsx)$/,
-                    exclude: /node_modules/,
-                    use: {
-                        loader: "babel-loader",
-                        options: {
-                            presets: [
-                                '@babel/preset-env',
-                                '@babel/preset-react'
-                            ]
-                        }
-                    }
-                }
-            ]
-        },
-        devServer: {
-            port: env.port ?? 3000,
-            open: true,
-            historyApiFallback: true
-        }
-    };
-
-    return config
-}
+  return config;
+};