From e5403ca2da6f0bedc346ed323828b40eb84673f8 Mon Sep 17 00:00:00 2001 From: Ivan Date: Sun, 14 Apr 2024 12:55:58 +0300 Subject: [PATCH] optimizations for server use --- captain-definition | 12 ++ src/pages/EnterAccount.jsx | 283 ++++++++++++++++++++++--------------- src/pages/Home.jsx | 76 ++++++---- webpack.config.js | 135 +++++++++--------- 4 files changed, 293 insertions(+), 213 deletions(-) create mode 100644 captain-definition diff --git a/captain-definition b/captain-definition new file mode 100644 index 0000000..338a4e5 --- /dev/null +++ b/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\"]" + ] +} diff --git a/src/pages/EnterAccount.jsx b/src/pages/EnterAccount.jsx index 0fbc70c..df00423 100644 --- a/src/pages/EnterAccount.jsx +++ b/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 ( -
-
-
- + 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 ( +
+
+
+ +
+
+
+ {enter === "login" ? ( +
+
+

Войти в аккаунт

-
-
- {enter === 'login' ?
-
-

Войти в аккаунт

-
-
- - -
-
- -
-
: -
-
-

Зарегестрировать учетную запись

-
-
- - - -
- {/*
+
+ + +
+
+ +
+
+ ) : ( +
+
+

Зарегистрировать учетную запись

+
+
+ + + +
+ {/*
@@ -132,15 +180,20 @@ const EnterAccount = () => {
*/} -
- createUser()}/> -
-
} -
+
+ createUser()} + />
-
+
+ )} +
- ) -} +
+
+ ); +}; -export default EnterAccount; \ No newline at end of file +export default EnterAccount; diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 72adac5..cd11c39 100644 --- a/src/pages/Home.jsx +++ b/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 ( -
-
-
-
Кажется вы попали на общую страницу.
-
Чтобы перейти к форме ввелите токен ниже или снова перейдите по ссылке.
-
-
-
-
-

Перейти к нужной форме

-
-
-
-
- setToken(e)}/> -
-
-
-
- navigate(`/forms/${token}`)}/> -
-
-
-
+ return ( +
+
+
+
+ Кажется вы попали на общую страницу. +
+
+ Чтобы перейти к форме введите токен ниже или снова перейдите по + ссылке. +
- ) -} +
+
+
+

Перейти к нужной форме

+
+
+
+
+ setToken(e)} + /> +
+
+
+
+ navigate(`/forms/${token}`)} + /> +
+
+
+
+
+ ); +}; -export default Home; \ No newline at end of file +export default Home; diff --git a/webpack.config.js b/webpack.config.js index 40ec78b..b940708 100644 --- a/webpack.config.js +++ b/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 -} \ No newline at end of file + return config; +};