fresh proj

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "shop_project",
+  "name": "shop-project",
   "version": "0.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "shop_project",
+      "name": "shop-project",
       "version": "0.1.0",
       "dependencies": {
         "@emotion/react": "^11.10.5",
@@ -13,7 +13,6 @@
         "@fontsource/roboto": "^4.5.8",
         "@mui/icons-material": "^5.11.0",
         "@mui/material": "^5.11.2",
-        "@mui/styled-engine-sc": "^5.11.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -21,7 +20,6 @@
         "react-dom": "^18.2.0",
         "react-lorem-ipsum": "^1.4.10",
         "react-scripts": "5.0.1",
-        "styled-components": "^5.3.6",
         "web-vitals": "^2.1.4"
       }
     },
@@ -2284,11 +2282,6 @@
         }
       }
     },
-    "node_modules/@emotion/stylis": {
-      "version": "0.8.5",
-      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
-      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
-    },
     "node_modules/@emotion/unitless": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
@@ -3338,31 +3331,6 @@
         }
       }
     },
-    "node_modules/@mui/styled-engine-sc": {
-      "version": "5.11.0",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine-sc/-/styled-engine-sc-5.11.0.tgz",
-      "integrity": "sha512-U8cA7DHB3fnLpDVM5qd/9FGnw5y+LrmwIXQ9Lzk3HYkF903tSMx9jXIbiz1vltpOfZTKX/Rn02m/nkH4OF6Pcg==",
-      "dependencies": {
-        "@babel/runtime": "^7.20.6",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui"
-      },
-      "peerDependencies": {
-        "@types/styled-components": "^5.1.14",
-        "styled-components": "^5.3.1"
-      },
-      "peerDependenciesMeta": {
-        "@types/styled-components": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/system": {
       "version": "5.11.2",
       "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.2.tgz",
@@ -5686,26 +5654,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-plugin-styled-components": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz",
-      "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==",
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.16.0",
-        "@babel/helper-module-imports": "^7.16.0",
-        "babel-plugin-syntax-jsx": "^6.18.0",
-        "lodash": "^4.17.11",
-        "picomatch": "^2.3.0"
-      },
-      "peerDependencies": {
-        "styled-components": ">= 2"
-      }
-    },
-    "node_modules/babel-plugin-syntax-jsx": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-      "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw=="
-    },
     "node_modules/babel-plugin-transform-react-remove-prop-types": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
@@ -6019,14 +5967,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/camelize": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
-      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -6460,14 +6400,6 @@
         "postcss": "^8.4"
       }
     },
-    "node_modules/css-color-keywords": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
-      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/css-declaration-sorter": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
@@ -6649,16 +6581,6 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
-    "node_modules/css-to-react-native": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
-      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
-      "dependencies": {
-        "camelize": "^1.0.0",
-        "css-color-keywords": "^1.0.0",
-        "postcss-value-parser": "^4.0.2"
-      }
-    },
     "node_modules/css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -15560,11 +15482,6 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
-    "node_modules/shallowequal": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
-    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -15940,41 +15857,6 @@
         "webpack": "^5.0.0"
       }
     },
-    "node_modules/styled-components": {
-      "version": "5.3.6",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.6.tgz",
-      "integrity": "sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.0.0",
-        "@babel/traverse": "^7.4.5",
-        "@emotion/is-prop-valid": "^1.1.0",
-        "@emotion/stylis": "^0.8.4",
-        "@emotion/unitless": "^0.7.4",
-        "babel-plugin-styled-components": ">= 1.12.0",
-        "css-to-react-native": "^3.0.0",
-        "hoist-non-react-statics": "^3.0.0",
-        "shallowequal": "^1.1.0",
-        "supports-color": "^5.5.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/styled-components"
-      },
-      "peerDependencies": {
-        "react": ">= 16.8.0",
-        "react-dom": ">= 16.8.0",
-        "react-is": ">= 16.8.0"
-      }
-    },
-    "node_modules/styled-components/node_modules/@emotion/unitless": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
-    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -19137,11 +19019,6 @@
         "@emotion/utils": "^1.2.0"
       }
     },
-    "@emotion/stylis": {
-      "version": "0.8.5",
-      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
-      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
-    },
     "@emotion/unitless": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
@@ -19875,15 +19752,6 @@
         "prop-types": "^15.8.1"
       }
     },
-    "@mui/styled-engine-sc": {
-      "version": "5.11.0",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine-sc/-/styled-engine-sc-5.11.0.tgz",
-      "integrity": "sha512-U8cA7DHB3fnLpDVM5qd/9FGnw5y+LrmwIXQ9Lzk3HYkF903tSMx9jXIbiz1vltpOfZTKX/Rn02m/nkH4OF6Pcg==",
-      "requires": {
-        "@babel/runtime": "^7.20.6",
-        "prop-types": "^15.8.1"
-      }
-    },
     "@mui/system": {
       "version": "5.11.2",
       "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.2.tgz",
@@ -21585,23 +21453,6 @@
         "@babel/helper-define-polyfill-provider": "^0.3.3"
       }
     },
-    "babel-plugin-styled-components": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz",
-      "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.16.0",
-        "@babel/helper-module-imports": "^7.16.0",
-        "babel-plugin-syntax-jsx": "^6.18.0",
-        "lodash": "^4.17.11",
-        "picomatch": "^2.3.0"
-      }
-    },
-    "babel-plugin-syntax-jsx": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-      "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw=="
-    },
     "babel-plugin-transform-react-remove-prop-types": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
@@ -21846,11 +21697,6 @@
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
     },
-    "camelize": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
-      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ=="
-    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -22176,11 +22022,6 @@
         "postcss-selector-parser": "^6.0.9"
       }
     },
-    "css-color-keywords": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
-      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg=="
-    },
     "css-declaration-sorter": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
@@ -22288,16 +22129,6 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
-    "css-to-react-native": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
-      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
-      "requires": {
-        "camelize": "^1.0.0",
-        "css-color-keywords": "^1.0.0",
-        "postcss-value-parser": "^4.0.2"
-      }
-    },
     "css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -28579,11 +28410,6 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
-    "shallowequal": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
-    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -28869,30 +28695,6 @@
       "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
       "requires": {}
     },
-    "styled-components": {
-      "version": "5.3.6",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.6.tgz",
-      "integrity": "sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==",
-      "requires": {
-        "@babel/helper-module-imports": "^7.0.0",
-        "@babel/traverse": "^7.4.5",
-        "@emotion/is-prop-valid": "^1.1.0",
-        "@emotion/stylis": "^0.8.4",
-        "@emotion/unitless": "^0.7.4",
-        "babel-plugin-styled-components": ">= 1.12.0",
-        "css-to-react-native": "^3.0.0",
-        "hoist-non-react-statics": "^3.0.0",
-        "shallowequal": "^1.1.0",
-        "supports-color": "^5.5.0"
-      },
-      "dependencies": {
-        "@emotion/unitless": {
-          "version": "0.7.5",
-          "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-          "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
-        }
-      }
-    },
     "stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "shop_project",
+  "name": "shop-project",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -8,7 +8,6 @@
     "@fontsource/roboto": "^4.5.8",
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.2",
-    "@mui/styled-engine-sc": "^5.11.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -16,7 +15,6 @@
     "react-dom": "^18.2.0",
     "react-lorem-ipsum": "^1.4.10",
     "react-scripts": "5.0.1",
-    "styled-components": "^5.3.6",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,3 +1,4 @@
+import logo from './logo.svg';
 import './App.css';
 import { 
   JqlTests_RootCats, 
@@ -7,8 +8,7 @@ import {
   JqlTests_GoodFindOne,
   JqlTests_AuthUpsert
  } from './Tests/test_jql';
-
- import { ManualReact } from './Tests/ManualReact';
+import{ManualReact} from "./Tests/ManualReact"
 
 function App() {
   return (

src/Tests/ManualReact.js

@@ -1,4 +1,4 @@
-import React, { Component, useState } from 'react';
+import React, { Component, startTransition, useState } from 'react';
 import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
 import Button from '@mui/material/Button';
 import { LoremIpsum } from 'react-lorem-ipsum';

test.html

@@ -1,458 +0,0 @@
-<head>
-    <Header>MODULE MARKET</Header>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
-        crossorigin="anonymous"></script>
-    <link rel="stylesheet" href="https://cdn.reflowhq.com/v2/toolkit.min.css">
-    <link rel="stylesheet" href="index.css">
-    <style>
-        .alert-fixed {
-            position: fixed;
-            top: 0px;
-            left: 0px;
-            width: 100%;
-            z-index: 9999;
-            border-radius: 0px;
-        }
-    </style>
-    <div class="alert-fixed" id="alertsZone"></div>
-</head>
-
-<body>
-    <div class="container-fluid">
-        <nav class="navbar navbar-expand-md">
-            <a class="navbar-brand" href="?#"><img src="./Img/Logo.png" width="140px"></a>
-            <div class="collapse navbar-collapse" id="main-navigation">
-                <ul class="navbar-nav  align-items-center h3">
-                    <li id="loginLink" class="nav-item  d-none">
-                        <a class="nav-link" href="?#/login/">Login</a>
-                    </li>
-                    <li id="regLink" class="nav-item d-none">
-                        <a class="nav-link" href="?#/register/">Register</a>
-                    </li>
-                    <li id="logoutLink" class="nav-item d-none">
-                        <a class="nav-link" href="?#/logout/">Logout</a>
-                    </li>
-                    <li id="cartLink" class="nav-item">
-                        <a class="nav-link" href="?#/cart/">
-                            <i class="fa badge fa-lg" id="cartCountBadge" value=0>
-                                <img src="./Img/корзина.png" width="60px">
-                                <!--<span class="badge badge-light" id="cartCountBadge">0</span>-->
-                            </i>
-                        </a>
-                    </li>
-                    <li id="historyLink" class="nav-item  d-none">
-                        <a class="nav-link" href="#/orders/">History</a>
-                    </li>
-                </ul>
-            </div>
-        </nav>
-    </div>
-
-    <div class="container-fluid">
-        <div class="row">
-            <div class="col-2 left">
-                <div style="background-color: wheat;" class="d-flex flex-column flex-shrink-0 p-3 text-dark">
-                    <ul id="categoriesList" class="nav nav-pills flex-column mb-auto">
-                    </ul>
-                </div>
-            </div>
-            <div class="col-8">
-                <div id="main">
-                </div>
-            </div>
-        </div>
-    </div>
-
-
-    <!--<header>
-        <div>
-            <a href="#/login/">Login</a>
-        </div>
-        <div>
-            <a href="#/logout/">Logout</a>
-        </div>
-        <div>
-            <a href="#/orders/">Orders History</a>
-        </div>
-        <div id='cartIcon'></div>
-        <div>
-            <a href="#/cart">Cart</a>
-        </div>
-    </header>
-    <div id='mainContainer'>
-        <aside id='aside'>
-        </aside>
-        <main id='main'>
-        </main>
-    </div>-->
-    <script type="text/javascript" src="./login.js"></script>
-    <script type="text/javascript" src="./alerts.js"></script>
-    <script type="text/javascript" src="./pagination.js"></script>
-    <script type="module" src="./src/store.js"></script>
-    <script type="module" src="./src/reducers/localStoredReducer.js"></script>
-    <script type="module" src="./src/utills/gql.js"></script>
-    <script type="module" >
-        import {createStore} from "./src/store.js";
-        const addErrorAlert = (error) => {
-            alert(error);
-        }
-        const store = createStore(combineReducers({ promiseReducer, authReducer, cartReducer: localStoredReducer(cartReducer, 'cart') }));
-        const delay = (ms, action) => new Promise(ok => setTimeout(() => {
-            action();
-            ok(ms);
-        }, ms));
-        store.subscribe(() => {
-            let state = store.getState();
-            let cartItemsCount = 0;
-            if (state.cartReducer) {
-                let cartItems = Object.values(state.cartReducer);
-                for (item of  Object.values(state.cartReducer))
-                     cartItemsCount += item.count;
-            }
-            cartCountBadge.setAttribute("value", cartItemsCount);
-            console.log({ state: store.getState() });
-        });
-        //////////////////////////////////////////////
-        const addToCartBtn = (htmlEl, good) => {
-            let btn = document.createElement("button");
-            btn.innerText = "Add to Cart";
-            btn.classList.add("ref-button");
-            btn.classList.add("preview-toggle");
-            btn.onclick = () => {
-                store.dispatch(actionCartAdd(good));
-            };
-            htmlEl.appendChild(btn);
-            return btn;
-        }
-
-        const fillRootCategories = (categories, htmlEl) => {
-            htmlEl.innerText = '';
-            if (!categories)
-                return;
-            let innerHtml = '';
-            for (category of categories) {
-                innerHtml += `<li class="h3"><a href="#/categories/${category._id}" class="nav-link text-dark">${category.name}</a></li>`;
-            }
-            htmlEl.innerHTML = innerHtml;
-        }
-        store.subscribe(() =>
-            subscribePromiseItem("rootCats", categoriesList, [], fillRootCategories));
-
-        const fillCurrentCategoryContent = (category, htmlEl) => {
-            htmlEl.innerHTML = '';
-            const { name, parent, subCategories, goods } = category;
-            htmlEl.innerHTML = `<h1>${name}</h1>
-                                ${parent?.name ? `<section>Parent: <a href="#/subCategories/${parent?._id}">${parent.name}</a></section>` : ''}
-                             `
-            if (subCategories?.length > 0) {
-                htmlEl.innerHTML += '';//`<h3>Sub Categories:</h3><br>`
-                for (const subCategory of subCategories) {
-                    htmlEl.innerHTML += `<h4><a href="#/subCategories/${subCategory._id}">${subCategory.name}</a><h4><hr/>`
-                }
-            }
-            htmlEl.innerHTML += '';//`<section>Products:</section><br>`;
-            addProductsList(goods, htmlEl)
-        }
-        store.subscribe(() =>
-            subscribePromiseItem(
-                "catFindOne", main, ["categories", "subCategories"], fillCurrentCategoryContent));
-
-
-        const addProductsList = (goods, htmlEl) => {
-            let outerDiv = document.createElement("div");
-            outerDiv.innerHTML =
-                `
-                    <div class="reflow-product-list">
-                        <div id="productsList" class="ref-products">
-                        </div>
-                        <div id="productsListPagination">
-                        </div>
-                    </div>
-                `;
-
-            htmlEl.appendChild(outerDiv);
-            for (good of goods) {
-                addProductToList(good, productsList);
-            }
-            new Pagination(productsList, productsListPagination, 5, listItemTag = 'div.ref-product')
-        }
-        const addProductToList = (good, htmlEl) => {
-            let outerDiv = document.createElement('div');
-            const { name, _id, price, description, images } = good;
-            outerDiv.innerHTML =
-                `
-                    <div id="good_${_id}" class="ref-product d-none">
-                        <div class="ref-media"><img class="ref-image"
-                                src="${getFullImageUrl(good.images[0])}" loading="lazy" /></div>
-                        <div class="ref-product-data">
-                            <div class="ref-product-info">
-                                <h5 class="ref-name"><a href="#/goods/${_id}">${name}</a></h5>
-                                <p class="ref-excerpt">${description}</p>
-                            </div><strong class="ref-price">$${price}</strong>
-                        </div>
-                        <div id="addCartDiv_${_id}" class="ref-addons"></div>
-                    </div>
-                `;
-            htmlEl.appendChild(outerDiv);
-            let addCartDiv = document.getElementById(`addCartDiv_${_id}`);
-            addToCartBtn(addCartDiv, good);
-        }
-
-        const fillCurrentGoodContent = (good, htmlEl) => {
-            htmlEl.innerHTML = '';
-            const { name, _id, price, description, images } = good;
-            htmlEl.innerHTML = `<h1>${name}</h1>
-                                <section>Description: ${description}</section>
-                                <section>Price: ${price}</section>
-                             `;
-            htmlEl.innerHTML += `<section>Images:</section><br>`  //вставить css display block
-            for (const image of images) {
-                htmlEl.innerHTML += `<img width="170px" src="${"http://shop-roles.node.ed.asmer.org.ua/"}${image.url}"</img><br>`//вставить css display block
-            }
-            addToCartBtn(htmlEl, good);
-        }
-        store.subscribe(() =>
-            subscribePromiseItem(
-                "goodFindOne", main, ["goods"], fillCurrentGoodContent));
-
-        const subscribePromiseItem = (promiseName, htmlEl, subscrNames, execFunc) => {
-            const [, route, _id] = location.hash.split('/');
-            if ((subscrNames.length > 0 && (!route || !subscrNames.some(v => v == route)))/* || !_id*/)
-                return;
-            let reducerData = store.getState().promiseReducer[promiseName];
-            if (!reducerData)
-                return;
-            const { status, payload, error } = reducerData;
-            if (status === 'PENDING') {
-                htmlEl.innerHTML = `<img src='https://cdn.dribbble.com/users/63485/screenshots/1309731/infinite-gif-preloader.gif' />`
-            }
-            else if (status == "FULFILLED") {
-                execFunc(payload, htmlEl);
-            }
-            else if (status == "FULFILLED") {
-                addErrorAlert(error.message);
-            }
-        }
-
-        const getFullImageUrl = (image) =>
-            `http://shop-roles.node.ed.asmer.org.ua/${image?.url}`;
-
-        const showCartContent = (cart, htmlEl) => {
-            htmlEl.innerHTML = '';
-            htmlEl.innerHTML = `<h1>Cart</h1>
-                               `;
-            htmlEl.innerHTML += '';//`<section>Items:</section><br>`  //вставить css display block
-            let allCount = 0;
-            let htmlContent = '';
-            for (const item of Object.values(cart)) {
-                let { count, good } = item;
-                let inpId = `inp_${good._id}`;
-                let delBtnId = `delBtn_${good._id}`;
-                htmlContent += `
-                    <div>
-                        <img width="170px" src="${getFullImageUrl(good.images[0])}"</img>
-                        <a href="#/goods/${good._id}">${good.name}</a>
-                        <input type="number" min="1" max="999" id="${inpId}" value="${count}">
-                        <button class="ref-button preview-toggle" id="${delBtnId}">Remove</button>
-                    </div>
-                    <br>`//вставить css display block
-                allCount += count;
-            }
-            htmlContent += `<div>Count ${allCount}</div><br>`;
-            htmlContent += `<button class="ref-button preview-toggle" id="btnCheckout">Checkout</button><br>`;
-            htmlEl.innerHTML += htmlContent;
-            for (const item of Object.values(cart)) {
-                let { good } = item;
-                let inpId = `inp_${good._id}`;
-                let delBtnId = `delBtn_${good._id}`;
-                let inp = document.getElementById(inpId);
-                inp.addEventListener("change", function (e) { store.dispatch(actionCartSet(good, +inp.value)); });
-                let delBtn = document.getElementById(delBtnId);
-                delBtn.addEventListener("click", function (e) { store.dispatch(actionCartDel(good)); });
-            }
-            let btnCheckout = document.getElementById("btnCheckout");
-            btnCheckout.addEventListener("click", function (e) {
-                window.location = "#/checkout/";
-            });
-        }
-        store.subscribe(() =>
-            subscribeSimple(
-                "cartReducer", main, ["cart"], showCartContent));
-
-
-        const showOrder = (order, num, htmlEl) => {
-            let htmlContent = `<div class="order d-none"><h2>Order: #${num}</h2>
-                                <!--<div>Created on: ${order.createdAt}</div>-->
-                               `;
-            htmlContent += `<h3>Items:</h3>`  //вставить css display block
-            let orderGoods = Object.values(order.orderGoods);
-            for (let i = 0; i < orderGoods.length; i++) {
-                let { order, count, price, total, good } = orderGoods[i];
-                htmlContent +=
-                    `
-                        <div class="ref-product align-items-center">
-                            <strong class="ref-count">${i}.   </strong>
-                            <div class="ref-media"><img class="ref-image" width="170px" src="${getFullImageUrl(good.images[0])}"</img></div>
-                            <div class="ref-product-data">
-                                <div class="ref-product-info">
-                                    <h5 class="ref-name"><a href="#/goods/${good._id}">${good.name}</a></h5>
-                                </div>
-                                <strong class="ref-price">Price: ${price}</strong>
-                                <strong class="ref-count">Count: ${count}</strong>
-                                <strong class="ref-price">Total: ${total}</strong>
-                            </div>
-                        </div>
-                    `//вставить css display block
-            }
-            htmlContent += `<h3 class="ref-count">Total ${order.total}</h3><hr/></div>`;
-            htmlEl.innerHTML += htmlContent;
-        }
-        const showOrders = (orders, htmlEl) => {
-            htmlEl.innerHTML = "<header>Orders:</header>";
-            if (!localStorage?.authToken)
-                return;
-            if (orders) {
-                let ordersContainerDiv = document.createElement("div");
-                ordersContainerDiv.classList.add("container", "reflow-product-list");
-                let ordersDiv = document.createElement("div");
-                ordersContainerDiv.appendChild(ordersDiv);
-                ordersDiv.classList.add("ref-products");
-                for (let i = orders.length; i > 0; i--) {
-                    let order = orders[i - 1];
-                    showOrder(order, i, ordersDiv);
-                }
-                let paginationDiv = document.createElement("div");
-                htmlEl.append(ordersContainerDiv, paginationDiv);
-                new Pagination(ordersDiv, paginationDiv, 5, listItemTag = 'div.order')
-            }
-        }
-        store.subscribe(() =>
-            subscribePromiseItem(
-                "orders", main, ["orders"], showOrders));
-
-        const subscribeSimple = (reducerName, htmlEl, subscrNames, execFunc) => {
-            const [, route, _id] = location.hash.split('/');
-            if (!subscrNames || !subscrNames.some(v => v == route))
-                return;
-            let reducerData = store.getState()[reducerName];
-            execFunc(reducerData, htmlEl);
-        }
-
-        window.onhashchange = () => {
-            const [, route, _id] = location.hash.split('/')
-
-            const routes = {
-                categories() {
-                    console.log('Category', _id)
-                    store.dispatch(actionCategoryFindOne(_id))
-                },
-                subCategories() {
-                    console.log('subCategory', _id)
-                    store.dispatch(actionCategoryFindOne(_id))
-                },
-                goods() {
-                    console.log('good', _id)
-                    store.dispatch(actionGoodFindOne(_id))
-                },
-                cart() {
-                    console.log('cart')
-                    store.dispatch(actionCartShow())
-                },
-                checkout() {
-                    console.log('checkout');
-                    let state = store.getState();
-                    if (routes.login())
-                        store.dispatch(orderFullUpsert(() => window.location = "#/orders/"));
-                },
-                orders() {
-                    if (!localStorage.authToken) {
-                        showOrders([], main);
-                        return;
-                    }
-                    console.log('order');
-                    store.dispatch(actionFindOrders());
-                },
-                login() {
-                    if (!localStorage.authToken) {
-                        main.innerText = '';
-                        const form = new LoginForm(main);
-                        form.onLogin = (login, password) => {
-                            store.dispatch(actionFullLogin(login, password));
-                        }
-                        return false;
-                    }
-                    else if (route == "login") {
-                        window.location = "#/";
-                        window.location.reload();
-                    }
-                    return true;
-                },
-                register() {
-                    if (!localStorage.authToken) {
-                        main.innerText = '';
-                        const form = new LoginForm(main);
-                        form.onLogin = (login, password) => {
-                            store.dispatch(actionFullAuthUpsert(login, password));
-                        }
-                        return false;
-                    }
-                    else if (route == "register") {
-                        window.location = "#/";
-                        window.location.reload();
-                    }
-                    return true;
-                },
-                logout() {
-                    if (localStorage.authToken) {
-                        store.dispatch(actionAuthLogout());
-                        window.location = "#/login/";
-                        window.location.reload();
-                    }
-                },
-                //register(){
-                ////нарисовать форму регистрации, которая по нажатию кнопки Login делает store.dispatch(actionFullRegister(login, password))
-                //},
-            }
-
-            if (localStorage.authToken) {
-                loginLink.classList.add('d-none');
-                regLink.classList.add('d-none');
-                historyLink.classList.remove('d-none');
-                logoutLink.classList.remove('d-none');
-            }
-            else {
-                loginLink.classList.remove('d-none');
-                regLink.classList.remove('d-none');
-                historyLink.classList.add('d-none');
-                logoutLink.classList.add('d-none');
-            }
-
-            if (route in routes) {
-                routes[route]()
-            }
-        }
-
-        window.onhashchange()
-
-        store.dispatch(actionRootCats());
-
-        /*store.dispatch(actionCategoryFindOne("6262ca7dbf8b206433f5b3d1"));
-        store.dispatch(actionGoodFindOne("62d3099ab74e1f5f2ec1a125"));
-        store.dispatch(actionFullLogin("Berg", "123456789"));
-        //store.dispatch(actionFullAuthUpsert("Berg1", "12345678911"));
-        store.dispatch(actionCartAdd({ _id: '62d30938b74e1f5f2ec1a124', price: 50 }));
-
-        delay(3000, () => {
-            store.dispatch(orderFullUpsert());
-            store.dispatch(actionFindOrders());
-        });*/
-
-        //delay(500, () => store.dispatch(actionFindOrders()));
-
-    </script>
-</body>