resolve jql to gql

package-lock.json

@@ -12,7 +12,8 @@
         "@emotion/styled": "^11.10.5",
         "@fontsource/roboto": "^4.5.8",
         "@mui/icons-material": "^5.11.0",
-        "@mui/material": "^5.11.2",
+        "@mui/material": "^5.11.4",
+        "@mui/styled-engine-sc": "^5.11.0",
         "@reduxjs/toolkit": "^1.9.1",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
@@ -26,6 +27,7 @@
         "redux": "^4.2.0",
         "redux-thunk": "^2.4.2",
         "redux-toolkit": "^1.1.2",
+        "styled-components": "^5.3.6",
         "web-vitals": "^2.1.4"
       }
     },
@@ -2288,6 +2290,11 @@
         }
       }
     },
+    "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",
@@ -3161,9 +3168,9 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
     "node_modules/@mui/base": {
-      "version": "5.0.0-alpha.112",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.112.tgz",
-      "integrity": "sha512-KPwb1iYPXsV/P8uu0SNQrj7v7YU6wdN4Eccc2lZQyRDW+f6PJYjHBuFUTYKc408B98Jvs1XbC/z5MN45a2DWrQ==",
+      "version": "5.0.0-alpha.113",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.113.tgz",
+      "integrity": "sha512-XSjvyQWATM8uk+EJZvYna8D21kOXC42lwb3q4K70btuGieKlCIQLaHTTDV2OfD4+JfT4o3NJy3I4Td2co31RZA==",
       "dependencies": {
         "@babel/runtime": "^7.20.7",
         "@emotion/is-prop-valid": "^1.2.0",
@@ -3198,9 +3205,9 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.11.2",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.2.tgz",
-      "integrity": "sha512-ztLQELdSSuJFXezng8g5eCzy8mogtzMM8JcfG3HIGgUJ2RlAiBXI2Qe0adKmrJlF4FMat8vTaTeoiRNBZH4t1Q==",
+      "version": "5.11.4",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.4.tgz",
+      "integrity": "sha512-jWVwGM3vG4O0sXcW0VcIl+njCWbGCBF5vvjRpuKJajrz51AD7D6+fP1SkInZXVk5pRHf6Bnk/Yj9Of9gXxb/hA==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui"
@@ -3232,14 +3239,14 @@
       }
     },
     "node_modules/@mui/material": {
-      "version": "5.11.2",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.2.tgz",
-      "integrity": "sha512-PeraRDsghnDLzejorfe9ps1syxlB8UrGs+UKwg9GGlndv5Tghm+9nwuibrP2TCDC14mlryF+u2WlAOYaPPMwGA==",
+      "version": "5.11.4",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.4.tgz",
+      "integrity": "sha512-ZL/czK9ynrQJ6uyDwQgK+j7m1iKA1XKPON+rEPupwAu/bJ1XJxD+H/H2bkMM8UpOkzaucx/WuMbJJGQ60l7gBg==",
       "dependencies": {
         "@babel/runtime": "^7.20.7",
-        "@mui/base": "5.0.0-alpha.112",
-        "@mui/core-downloads-tracker": "^5.11.2",
-        "@mui/system": "^5.11.2",
+        "@mui/base": "5.0.0-alpha.113",
+        "@mui/core-downloads-tracker": "^5.11.4",
+        "@mui/system": "^5.11.4",
         "@mui/types": "^7.2.3",
         "@mui/utils": "^5.11.2",
         "@types/react-transition-group": "^4.4.5",
@@ -3337,10 +3344,35 @@
         }
       }
     },
+    "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",
-      "integrity": "sha512-PPkYhrcP2MkhscX6SauIl0wPgra0w1LGPtll+hIKc2Z2JbGRSrUCFif93kxejB7I1cAoCay9jWW4mnNhsOqF/g==",
+      "version": "5.11.4",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.4.tgz",
+      "integrity": "sha512-fE2Ts33V5zh7ouciwXgMm/a6sLvjIj9OMeojuHNYY7BStTxparC/Fp9CNUZNJwt76U6ZJC59aYScFSRQKbW08g==",
       "dependencies": {
         "@babel/runtime": "^7.20.7",
         "@mui/private-theming": "^5.11.2",
@@ -5697,6 +5729,26 @@
         "@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",
@@ -6010,6 +6062,14 @@
         "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",
@@ -6443,6 +6503,14 @@
         "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",
@@ -6624,6 +6692,16 @@
       "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.1.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.1.0.tgz",
+      "integrity": "sha512-AryfkFA29b4I3vG7N4kxFboq15DxwSXzhXM37XNEjwJMgjYIc8BcqfiprpAqX0zadI5PMByEIwAMzXxk5Vcc4g==",
+      "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",
@@ -15755,6 +15833,11 @@
       "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",
@@ -16130,6 +16213,41 @@
         "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",
@@ -19315,6 +19433,11 @@
         "@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",
@@ -19967,9 +20090,9 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
     "@mui/base": {
-      "version": "5.0.0-alpha.112",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.112.tgz",
-      "integrity": "sha512-KPwb1iYPXsV/P8uu0SNQrj7v7YU6wdN4Eccc2lZQyRDW+f6PJYjHBuFUTYKc408B98Jvs1XbC/z5MN45a2DWrQ==",
+      "version": "5.0.0-alpha.113",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.113.tgz",
+      "integrity": "sha512-XSjvyQWATM8uk+EJZvYna8D21kOXC42lwb3q4K70btuGieKlCIQLaHTTDV2OfD4+JfT4o3NJy3I4Td2co31RZA==",
       "requires": {
         "@babel/runtime": "^7.20.7",
         "@emotion/is-prop-valid": "^1.2.0",
@@ -19989,9 +20112,9 @@
       }
     },
     "@mui/core-downloads-tracker": {
-      "version": "5.11.2",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.2.tgz",
-      "integrity": "sha512-ztLQELdSSuJFXezng8g5eCzy8mogtzMM8JcfG3HIGgUJ2RlAiBXI2Qe0adKmrJlF4FMat8vTaTeoiRNBZH4t1Q=="
+      "version": "5.11.4",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.4.tgz",
+      "integrity": "sha512-jWVwGM3vG4O0sXcW0VcIl+njCWbGCBF5vvjRpuKJajrz51AD7D6+fP1SkInZXVk5pRHf6Bnk/Yj9Of9gXxb/hA=="
     },
     "@mui/icons-material": {
       "version": "5.11.0",
@@ -20002,14 +20125,14 @@
       }
     },
     "@mui/material": {
-      "version": "5.11.2",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.2.tgz",
-      "integrity": "sha512-PeraRDsghnDLzejorfe9ps1syxlB8UrGs+UKwg9GGlndv5Tghm+9nwuibrP2TCDC14mlryF+u2WlAOYaPPMwGA==",
+      "version": "5.11.4",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.4.tgz",
+      "integrity": "sha512-ZL/czK9ynrQJ6uyDwQgK+j7m1iKA1XKPON+rEPupwAu/bJ1XJxD+H/H2bkMM8UpOkzaucx/WuMbJJGQ60l7gBg==",
       "requires": {
         "@babel/runtime": "^7.20.7",
-        "@mui/base": "5.0.0-alpha.112",
-        "@mui/core-downloads-tracker": "^5.11.2",
-        "@mui/system": "^5.11.2",
+        "@mui/base": "5.0.0-alpha.113",
+        "@mui/core-downloads-tracker": "^5.11.4",
+        "@mui/system": "^5.11.4",
         "@mui/types": "^7.2.3",
         "@mui/utils": "^5.11.2",
         "@types/react-transition-group": "^4.4.5",
@@ -20048,10 +20171,19 @@
         "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",
-      "integrity": "sha512-PPkYhrcP2MkhscX6SauIl0wPgra0w1LGPtll+hIKc2Z2JbGRSrUCFif93kxejB7I1cAoCay9jWW4mnNhsOqF/g==",
+      "version": "5.11.4",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.4.tgz",
+      "integrity": "sha512-fE2Ts33V5zh7ouciwXgMm/a6sLvjIj9OMeojuHNYY7BStTxparC/Fp9CNUZNJwt76U6ZJC59aYScFSRQKbW08g==",
       "requires": {
         "@babel/runtime": "^7.20.7",
         "@mui/private-theming": "^5.11.2",
@@ -21774,6 +21906,23 @@
         "@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",
@@ -22018,6 +22167,11 @@
       "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",
@@ -22343,6 +22497,11 @@
         "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",
@@ -22450,6 +22609,16 @@
       "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.1.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.1.0.tgz",
+      "integrity": "sha512-AryfkFA29b4I3vG7N4kxFboq15DxwSXzhXM37XNEjwJMgjYIc8BcqfiprpAqX0zadI5PMByEIwAMzXxk5Vcc4g==",
+      "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",
@@ -28929,6 +29098,11 @@
       "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",
@@ -29214,6 +29388,30 @@
       "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

@@ -7,7 +7,8 @@
     "@emotion/styled": "^11.10.5",
     "@fontsource/roboto": "^4.5.8",
     "@mui/icons-material": "^5.11.0",
-    "@mui/material": "^5.11.2",
+    "@mui/material": "^5.11.4",
+    "@mui/styled-engine-sc": "^5.11.0",
     "@reduxjs/toolkit": "^1.9.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
@@ -21,6 +22,7 @@
     "redux": "^4.2.0",
     "redux-thunk": "^2.4.2",
     "redux-toolkit": "^1.1.2",
+    "styled-components": "^5.3.6",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/Components/LoginForm.js

@@ -4,7 +4,7 @@ import Button from '@mui/material/Button';
 import { Container, CssBaseline, TextField, Avatar, Typography, FormControlLabel, Checkbox, Grid, Link } from '@mui/material';
 import { Box } from '@mui/system';
 import { connect, useSelector } from 'react-redux';
-import { actionFullLogin } from '../jql';
+import { actionFullLogin } from '../gql';
 import { MyLink } from './MyLink';
 
 const LoginForm = ({ onLogin }) => {

src/jql/gqlAuth.js

@@ -1,53 +0,0 @@
-import {gql} from "../utills";
-import {actionAuthLogin} from '../reducers';
-
-
-export const actionLogin = (login, password) => {
-    const upsertQuery = `query login($login:String, $password:String){
-                        login(login:$login, password:$password)
-                }`;
-
-    return gql(upsertQuery, { login: login, password: password });
-}
-
-export const actionFullLogin = (login, password) => {
-    return async (dispatch) => {
-        try {
-            delete localStorage.authToken;
-            //dispatch возвращает то, что вернул thunk, возвращаемый actionLogin, а там промис, 
-            //так как actionPromise возвращает асинхронную функцию
-            let promiseResult = actionLogin(login, password);
-            let res = await promiseResult;
-            if (res && res.data) {
-                let token = Object.values(res.data)[0];
-                if (token && typeof token == 'string')
-                    return dispatch(actionAuthLogin(token));
-            }
-        }
-        catch (error) {
-            throw error;
-        }
-    }
-}
-////////////////////////////////////////
-export const actionAuthUpsert = (login, password) => {
-    const loginQuery = `mutation UserRegistration($login: String, $password: String) {
-                            UserUpsert(user: {login: $login, password: $password}) {
-                                _id createdAt
-                            }
-                        }`;
-
-    return gql(loginQuery, { login: login, password: password });////////  
-}
-/*export const actionFullAuthUpsert = (login, password) => {
-    return gqlFullAuthUpsert = async (dispatch) => {
-        //dispatch возвращает то, что вернул thunk, возвращаемый actionLogin, а там промис, 
-        //так как actionPromise возвращает асинхронную функцию
-        delete localStorage.authToken;
-        let promiseResult = actionAuthUpsert(login, password);
-        let res = await promiseResult;
-        dispatch(actionFullLogin(login, password));
-        console.log(res)
-        //проверьте что token - строка и отдайте его в actionAuthLogin
-    }
-}*/

src/jql/gqlCategories.js

@@ -1,23 +0,0 @@
-import { gql } from "../utills/gql";
-import { actionPromise } from "../reducers";
-
-export const gqlRootCats = () => {
-    const catQuery = `query roots {
-        CategoryFind(query: "[{\\"parent\\": null }]") {
-                                _id name
-                            }}`;
-    return gql(catQuery);
-}
-export const gqlCategoryFindOne = (id) => {
-    const catQuery = `query CategoryFindOne($q: String) {
-            CategoryFindOne(query: $q) {
-                _id name
-                parent { _id name }
-                subCategories { _id name }
-                goods { _id name price description 
-                    images { url }
-                }
-            }
-        }`;
-    return gql(catQuery, { q: `[{\"_id\": \"${id}\"}]` });
-}

src/jql/gqlGoods.js

@@ -1,37 +0,0 @@
-import { gql } from "../utills/gql";
-import { createFullQuery } from "./jqlUtils";
-export const gqlGoodFindOne = (id) => {
-    let params = createFullQuery({ searchStr: id, searchFieldNames: ["_id"] });
-    const gqlQuery = `
-                query GoodFindOne($q: String) {
-                    GoodFindOne(query: $q) {
-                        _id name  price description
-                        images { url }
-                    }
-                }
-                `;
-    return gql(gqlQuery, params);
-}
-
-export const gqlGoodFind = (fromPage, pageSize, searchStr = '', queryExt = {}) => {
-    let params = createFullQuery(getGoodsSearchParams(searchStr, queryExt), { fromPage, pageSize });
-    const gqlQuery = `
-                query GoodFind($q: String) {
-                    GoodFind(query: $q) {
-                        _id name  price description
-                        images { url }
-                    }
-                }
-                `;
-    return gql(gqlQuery, params);
-}
-export const gqlGoodsCount = (query = '', queryExt = {}) => {
-    let params = createFullQuery(getGoodsSearchParams(query, queryExt));
-    const gqlQuery = `query GoodsCount($q: String) { GoodCount(query: $q) }`;
-    return gql(gqlQuery, params);
-}
-const getGoodsSearchParams = (searchStr, queryExt) => (
-    {
-        searchStr: searchStr, searchFieldNames: ["name", "description"],
-        queryExt
-    });

src/jql/gqlOrders.js

@@ -1,103 +0,0 @@
-import { gql } from "../utills/gql";
-import { actionPromise } from "../reducers";
-import { actionCartClear } from '../reducers';
-import { createFullQuery } from "./jqlUtils";
-
-const orderUpsert = (order, id = null) => {
-    const orderUpsertQuery = `mutation OrderUpsert($order: OrderInput) {
-                            OrderUpsert(order: $order) {
-                                _id
-                            }
-                        }`;
-    return gql(orderUpsertQuery, { order: { "_id": id, "orderGoods": order } });
-}
-export const actionOrderUpsert = (order, id) =>
-    actionPromise('orderUpsert', orderUpsert(order, id));
-
-const orderFullUpsert = (then) => {
-    return async (dispatch, getState) => {
-        let state = getState();
-        let order = [];
-        for (let cartItem of Object.values(state.cartReducer)) {
-            //{count: 3, good: {_id: "xxxx" }}
-            order.push({ good: { _id: cartItem.good._id }, count: cartItem.count });
-        }
-        if (order.length > 0) {
-            //dispatch возвращает то, что вернул thunk, возвращаемый actionLogin, а там промис, 
-            //так как actionPromise возвращает асинхронную функцию
-            let promiseResult = orderUpsert(order);
-            let res = await promiseResult;
-            if (res && res.errors && res.errors.length > 0) {
-                throw res.errors[0];
-            }
-            dispatch(actionCartClear());
-        }
-        if (then)
-            then();
-        //проверьте что token - строка и отдайте его в actionAuthLogin
-    }
-}
-export const actionOrderFullUpsert = (then) =>
-    actionPromise('orderUpsert', orderFullUpsert(then));
-
-
-const getOrderSearchParams = query => ({ searchStr: query, searchFieldNames: ["_id"] });
-
-export const gqlOrderFindOne = (_id) => {
-    let params = createFullQuery({ queryExt: { _id } });
-    const gqlQuery = `query OrderFindOne($q: String) {
-        OrderFindOne(query: $q) {
-            _id total createdAt
-            orderGoods {
-                _id price count total createdAt
-                good {
-                    _id
-                    name 
-                    images { url }
-                }
-            }
-        }
-        }`;
-    return gql(gqlQuery, params);
-}
-
-export const gqlFindOrders = (fromPage, pageSize, query = '') => {
-    let params = createFullQuery(getOrderSearchParams(query), { fromPage, pageSize });
-    const gqlQuery = `query OrderFind($q: String) {
-                            OrderFind(query: $q) {
-                                _id total
-                                orderGoods {
-                                    _id price count total createdAt
-                                    good {
-                                        name 
-                                        images { url }
-                                    }
-                                }
-                            }
-                            }`;
-    return gql(gqlQuery, params);
-}
-
-export const gqlOrdersCount = (query = '') => {
-    let params = createFullQuery(getOrderSearchParams(query));
-    const catQuery = `query OrdersCount($q: String) { OrderCount(query: $q) }`;
-    return gql(catQuery, params);
-}
-
-/*
-    const gqlFindOrders = (fromPage, pageSize) => {
-        const findOrdersQuery = `query OrderFind {
-                                OrderFind(query: "[{}]") {
-                                    _id total
-                                    orderGoods {
-                                        _id price count total createdAt
-                                        good {
-                                            name 
-                                            images { url }
-                                        }
-                                    }
-                                }
-                                }`;
-        return gql(findOrdersQuery);
-    }
-*/

src/jql/index.js

@@ -1,3 +0,0 @@
-export { actionAuthUpsert, actionLogin, actionFullLogin } from './gqlAuth';
-export { gqlGoodFind, gqlGoodFindOne } from './gqlGoods';
-export { actionOrderFullUpsert, actionOrderUpsert , gqlOrderFindOne, gqlFindOrders, gqlOrdersCount } from './gqlOrders';

src/jql/jqlUtils.js

@@ -1,29 +0,0 @@
-const createQuery = (searchStr, searchFieldNames) => {
-    let result = [];
-    if (searchStr) {
-        for (let searchFieldName of searchFieldNames) {
-            //result[searchFieldName] = searchFieldName === '_id' ? searchStr : `/${searchStr}/`;
-            result.push({ [searchFieldName]: searchFieldName === '_id' ? searchStr : `/${searchStr}/` });
-        }
-    }
-    return result.length == 0 ? {} :  { $or: result };
-}
-
-const createQueryExt = (searchQuery = {}, queryExt = {}) => {
-    if (!queryExt)
-        return searchQuery;
-    return { $and: [searchQuery, queryExt] };
-}
-
-const createQueryPaging = (fromPage, pageSize) => {
-    let result = {};
-    if (fromPage !== undefined && pageSize !== undefined) {
-        result["skip"] = [fromPage * pageSize];
-        result["limit"] = [pageSize];
-    }
-    return result;
-}
-
-export const createFullQuery = ({ searchStr, searchFieldNames, queryExt = {} }, { fromPage, pageSize } = {}) => {
-    return { q: JSON.stringify([createQueryExt(createQuery(searchStr, searchFieldNames), queryExt), createQueryPaging(fromPage, pageSize)]) };
-}

src/reducers/categoryReducer.js

@@ -1,4 +1,4 @@
-import { gqlCategoryFindOne, gqlRootCats } from '../jql/gqlCategories';
+import { gqlCategoryFindOne, gqlRootCats } from '../gql/gqlCategories';
 import { createPromiseReducerSlice, actionPromiseGeneric } from './promiseReducer';
 
 const currentCategory = 'currentCategory';

src/reducers/goodsReducer.js

@@ -1,4 +1,4 @@
-import { gqlGoodFind, gqlGoodFindOne, gqlGoodsCount } from '../jql/gqlGoods';
+import { gqlGoodFind, gqlGoodFindOne, gqlGoodsCount } from '../gql/gqlGoods';
 import { createPromiseReducerSlice, actionPromiseGeneric } from './promiseReducer';
 
 const currentGood = 'currentGood';

src/reducers/ordersReducer.js

@@ -1,4 +1,4 @@
-import { gqlFindOrders, gqlOrderFindOne, gqlOrdersCount } from "../jql/gqlOrders";
+import { gqlFindOrders, gqlOrderFindOne, gqlOrdersCount } from "../gql/gqlOrders";
 import { actionPromiseGeneric, createPromiseReducerSlice } from "./promiseReducer";
 
 const actionFindOrders = (fromPage = 0, pageSize = undefined, query = null) =>