project wait for resolution of upload avatar

projectreact/package-lock.json

@@ -12,6 +12,7 @@
         "@testing-library/react": "^11.2.7",
         "@testing-library/user-event": "^12.8.3",
         "ace-builds": "^1.4.12",
+        "chroma-js": "^2.1.2",
         "mdbreact": "^5.1.0",
         "react": "^17.0.2",
         "react-ace": "^9.4.4",
@@ -22,6 +23,7 @@
         "react-redux": "^7.2.5",
         "react-router-dom": "^5.3.0",
         "react-scripts": "4.0.3",
+        "react-select": "^5.0.0",
         "redux": "^4.1.1",
         "redux-thunk": "^2.3.0",
         "web-vitals": "^1.1.2"
@@ -1781,6 +1783,97 @@
         "moment": "^2.22.2"
       }
     },
+    "node_modules/@emotion/cache": {
+      "version": "11.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.4.0.tgz",
+      "integrity": "sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g==",
+      "dependencies": {
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/sheet": "^1.0.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "stylis": "^4.0.3"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.4.1",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.4.1.tgz",
+      "integrity": "sha512-pRegcsuGYj4FCdZN6j5vqCALkNytdrKw3TZMekTzNXixRg4wkLsU5QEaBG5LC6l01Vppxlp7FE3aTHpIG5phLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/sheet": "^1.0.2",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/react/node_modules/@babel/runtime": {
+      "version": "7.15.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+      "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
+      "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
+      "dependencies": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.2.tgz",
+      "integrity": "sha512-QQPB1B70JEVUHuNtzjHftMGv6eC3Y9wqavyarj4x4lg47RACkeSfNo5pxIOKizwS9AEFLohsqoaxGQj4p0vSIw=="
+    },
+    "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/@emotion/utils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
+      "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -6075,6 +6168,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/chroma-js": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.1.2.tgz",
+      "integrity": "sha512-ri/ouYDWuxfus3UcaMxC1Tfp3IE9K5iQzxc2hSxbBRVNQFut1UuGAsZmiAf2mOUubzGJwgMSv9lHg+XqLaz1QQ==",
+      "dependencies": {
+        "cross-env": "^6.0.3"
+      }
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -6630,6 +6731,21 @@
         "sha.js": "^2.4.8"
       }
     },
+    "node_modules/cross-env": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-6.0.3.tgz",
+      "integrity": "sha512-+KqxF6LCvfhWvADcDPqo64yVIB31gv/jQulX2NGzKS/g3GEVz6/pt4wjHFtFWsHMddebWD/sDthJemzM4MaAag==",
+      "dependencies": {
+        "cross-spawn": "^7.0.0"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -14510,6 +14626,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "node_modules/memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -18101,6 +18222,56 @@
         "semver": "bin/semver"
       }
     },
+    "node_modules/react-select": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.0.0.tgz",
+      "integrity": "sha512-5a6+Xj9J39OSbZQFPN7YdtRc1qvoXqqoJEIMaGICfLl8QJW56YQmJUr1zfqn+2fVmQomYqCdOHHMmM8sHzj+ZQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.1.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^5.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      }
+    },
+    "node_modules/react-select/node_modules/@types/react-transition-group": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.3.tgz",
+      "integrity": "sha512-fUx5muOWSYP8Bw2BUQ9M9RK9+W1XBK/7FLJ8PTQpnpTEkn0ccyMffyEQvan4C3h53gHdx7KE5Qrxi/LnUGQtdg==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
+    "node_modules/react-transition-group/node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -20309,6 +20480,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.10.tgz",
+      "integrity": "sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg=="
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -24629,6 +24805,84 @@
       "integrity": "sha512-b0JQb10Lie07iW2/9uKCQSrXif262d6zfYBstCLLJUk0JVA+7o/yLDg5p2+GkjgJbmodjHozIXs4Bi34RRhL8Q==",
       "requires": {}
     },
+    "@emotion/cache": {
+      "version": "11.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.4.0.tgz",
+      "integrity": "sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g==",
+      "requires": {
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/sheet": "^1.0.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "stylis": "^4.0.3"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "@emotion/memoize": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+    },
+    "@emotion/react": {
+      "version": "11.4.1",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.4.1.tgz",
+      "integrity": "sha512-pRegcsuGYj4FCdZN6j5vqCALkNytdrKw3TZMekTzNXixRg4wkLsU5QEaBG5LC6l01Vppxlp7FE3aTHpIG5phLg==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/sheet": "^1.0.2",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+          "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
+    },
+    "@emotion/serialize": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
+      "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
+      "requires": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.2.tgz",
+      "integrity": "sha512-QQPB1B70JEVUHuNtzjHftMGv6eC3Y9wqavyarj4x4lg47RACkeSfNo5pxIOKizwS9AEFLohsqoaxGQj4p0vSIw=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "@emotion/utils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
+      "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -27951,6 +28205,14 @@
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ=="
     },
+    "chroma-js": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.1.2.tgz",
+      "integrity": "sha512-ri/ouYDWuxfus3UcaMxC1Tfp3IE9K5iQzxc2hSxbBRVNQFut1UuGAsZmiAf2mOUubzGJwgMSv9lHg+XqLaz1QQ==",
+      "requires": {
+        "cross-env": "^6.0.3"
+      }
+    },
     "chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -28414,6 +28676,14 @@
         "sha.js": "^2.4.8"
       }
     },
+    "cross-env": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-6.0.3.tgz",
+      "integrity": "sha512-+KqxF6LCvfhWvADcDPqo64yVIB31gv/jQulX2NGzKS/g3GEVz6/pt4wjHFtFWsHMddebWD/sDthJemzM4MaAag==",
+      "requires": {
+        "cross-spawn": "^7.0.0"
+      }
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -34376,6 +34646,11 @@
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
     },
+    "memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -37225,6 +37500,52 @@
         }
       }
     },
+    "react-select": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.0.0.tgz",
+      "integrity": "sha512-5a6+Xj9J39OSbZQFPN7YdtRc1qvoXqqoJEIMaGICfLl8QJW56YQmJUr1zfqn+2fVmQomYqCdOHHMmM8sHzj+ZQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.1.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^5.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0"
+      },
+      "dependencies": {
+        "@types/react-transition-group": {
+          "version": "4.4.3",
+          "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.3.tgz",
+          "integrity": "sha512-fUx5muOWSYP8Bw2BUQ9M9RK9+W1XBK/7FLJ8PTQpnpTEkn0ccyMffyEQvan4C3h53gHdx7KE5Qrxi/LnUGQtdg==",
+          "requires": {
+            "@types/react": "*"
+          }
+        }
+      }
+    },
+    "react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "dependencies": {
+        "dom-helpers": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+          "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+          "requires": {
+            "@babel/runtime": "^7.8.7",
+            "csstype": "^3.0.2"
+          }
+        }
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -38991,6 +39312,11 @@
         }
       }
     },
+    "stylis": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.10.tgz",
+      "integrity": "sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg=="
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",

projectreact/package.json

@@ -8,6 +8,7 @@
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "ace-builds": "^1.4.12",
+    "chroma-js": "^2.1.2",
     "mdbreact": "^5.1.0",
     "react": "^17.0.2",
     "react-ace": "^9.4.4",
@@ -18,6 +19,7 @@
     "react-redux": "^7.2.5",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
+    "react-select": "^5.0.0",
     "redux": "^4.1.1",
     "redux-thunk": "^2.3.0",
     "web-vitals": "^1.1.2"

projectreact/src/App.css

@@ -15,6 +15,10 @@ display: inline-block;
   border: 1px solid #494949
 } */
 
+.select {
+  margin: auto;
+}
+
 .App-header {
   background-color: #282c34;
   min-height: 100vh;

projectreact/src/App.js

@@ -12,6 +12,7 @@ import Cabinet from './pages/cabinet';
 import Projects from './pages/projects';
 import ConUpload from './pages/upload';
 import { imgFind } from './actions';
+import SelectLang from './components/select';
 import {
   BrowserRouter as Router,
   Switch,
@@ -27,7 +28,6 @@ function App() {
     <div className="App">
       <div className = 'contentDiv'>
       <Provider store = {store}>
-       
       <Router history = {createHistory()}>
       <Route exact path='/' component={Home} />
       <Route exact path='/registration' component={RegForm}/>

projectreact/src/components/editor.js

@@ -0,0 +1,80 @@
+import { useState } from "react";
+import SelectLang from "./select";
+import AceEditor from "react-ace";
+import "ace-builds/src-noconflict/mode-html";
+import "ace-builds/src-noconflict/mode-css";
+import "ace-builds/src-noconflict/mode-javascript";
+import "ace-builds/src-noconflict/mode-java";
+import "ace-builds/src-noconflict/mode-python";
+import "ace-builds/src-noconflict/mode-xml";
+import "ace-builds/src-noconflict/mode-sass";
+import "ace-builds/src-noconflict/mode-ruby";
+import "ace-builds/src-noconflict/mode-markdown";
+import "ace-builds/src-noconflict/mode-mysql";
+import "ace-builds/src-noconflict/mode-json";
+import "ace-builds/src-noconflict/mode-handlebars";
+import "ace-builds/src-noconflict/mode-golang";
+import "ace-builds/src-noconflict/mode-csharp";
+import "ace-builds/src-noconflict/mode-elixir";
+import "ace-builds/src-noconflict/mode-typescript";
+import "ace-builds/src-noconflict/theme-monokai";
+import "ace-builds/src-noconflict/ext-language_tools";
+import { edit } from "ace-builds";
+
+const Editor = ({ data = { type: "html", text: "", name: "" }, onChange  , onDelete}) => {
+  return (
+    <div
+      style={{
+        display: "inline-block",
+        width: "calc(100% / 3)",
+        marginBottom: "10px",
+      }}
+    >
+      <SelectLang
+        onChange={(type) =>
+          onChange({ type, text: data.text, name: data.name })
+        }
+        value={data.type}
+      />{" "}
+      <br />
+      <input
+      placeholder='Your name of file'
+        style={{ marginBottom: "10px", marginLeft: "5px" }}
+        type="text"
+        value={data.name}
+        onChange={(e) =>
+          onChange({ type: data.type, text: data.text, name: e.target.value })
+        }
+      />
+      <button className = 'btn btn-success btn-xs ml-1'>Apply</button> 
+      <button className = 'btn btn-warning btn-xs ml-1'>Edit</button>
+      <button type="button" className="close mr-4" aria-label="Close" onClick = {onDelete}>
+          <span className = 'text-danger' aria-hidden="true">&times;</span>
+      </button>
+      <AceEditor
+        className="editor"
+        value={data.text}
+        onChange={(text) =>
+          onChange({ type:data.type, text, name:data.name })
+        }
+        placeholder="Your Code"
+        mode={data.type}
+        theme="monokai"
+        name="blah2"
+        fontSize={14}
+        showPrintMargin={true}
+        showGutter={true}
+        highlightActiveLine={true}
+        setOptions={{
+          enableBasicAutocompletion: true,
+          enableLiveAutocompletion: true,
+          enableSnippets: false,
+          showLineNumbers: true,
+          tabSize: 2,
+        }}
+      />
+    </div>
+  );
+};
+
+export default Editor;

projectreact/src/components/select.js

@@ -0,0 +1,15 @@
+import { useState } from "react";
+let languages = {html:'HTML' , css:'CSS' , javascript:'JavaScript' , java:'Java' , python:'Python' , xml:'XML' , ruby:'Ruby' , sass:'Sass' , markdown:'Markdown' , mysql:'MySql' , json:'JSON' , handlebars:'Handlebars' , golang:'Golang' , csharp:'C Sharp' ,elixir:'Elixir' , typescript:'TypeScript'}
+
+const SelectLang = ({list = languages , onChange , value}) => {
+   
+    return (
+     <>
+      <select style = {{marginBottom:'10px' , marginLeft:'5px'}} value = {value} onChange ={(e) => onChange(e.target.value)}  className = 'select'>
+      {Object.entries(list).map(([value , text]) => <option value={value} key={value}>{text}</option>)}
+      </select>
+      </>
+    )
+  }
+
+  export default SelectLang

projectreact/src/components/snippet.js

@@ -0,0 +1,31 @@
+import { useState } from "react";
+import Editor from "./editor";
+
+
+const Snippet = () =>{
+    const [files, setFiles] = useState([{type:'html',name:`index.html`} , {type:'css' , name:'index.css' } , {type:'javascript' , name:'index.js'}]);
+    const [name, setName] = useState("");
+    return (
+        <div>
+    {files.map((data , index) => 
+    <>
+    <Editor onDelete = {() => setFiles(files.filter(item => item != data))} data = {data} onChange = {({type , name , text}) =>
+    setFiles([...files.slice(0,index),
+    {type , name , text},
+    ...files.slice(index+1)])  } /> 
+    </>
+    ) 
+    
+     }<br/>
+    <div style = {{alignItems:'center' , textAlign:'center' , marginBottom:'10px'}}>
+    <button  className = 'btn btn-primary' style = {{marginLeft:'100px'}} onClick = {() => setFiles([...files,{type:'html'}])} key ={files} >Add editor</button>
+    <button  className = 'btn btn-success float-right mr-5' >Save project</button>
+    
+    </div>
+    
+    </div>
+    
+    )
+}
+
+export default Snippet 

projectreact/src/pages/cabinet.js

@@ -21,7 +21,7 @@ const Cabinet = () => {
             <a href="/projects" className = 'text-decoration-none'><h6 >Your projects</h6></a>
             {/* <span class="text-muted d-block mb-2">Los Angles</span>  */}
             <div class="d-flex justify-content-center align-items-center mt-4 px-4">
-            <button class="btn btn-primary btn-sm mb-3 " onClick = {console.log('aaa')} >Main Page</button>
+            <a href="/"><button class="btn btn-primary btn-sm mb-3 " onClick = {console.log('aaa')} >Main Page</button></a>
             </div>
         </div>
     </div>

projectreact/src/pages/homePage.js

@@ -1,99 +1,36 @@
 
 import React from "react";
 import { render } from "react-dom";
-import AceEditor from "react-ace";
+
 import Header from "../components/header";
 import { useState } from "react";
+import Snippet from "../components/snippet";
+import Button from "../components/button";
+
+
+
+
+// function onChangeHtml(newValue) {
+//     console.log('html' + ' ' + newValue);
+//   }
+// function onChangeCss(newValue) {
+//     console.log('css' + ' ' + newValue);
+//   }
+
+
 
-import "ace-builds/src-noconflict/mode-html";
-import "ace-builds/src-noconflict/mode-css";
-import "ace-builds/src-noconflict/mode-javascript";
-import "ace-builds/src-noconflict/theme-monokai";
-import "ace-builds/src-noconflict/ext-language_tools"
 
 
 
-function onChangeHtml(newValue) {
-    console.log('html' + ' ' + newValue);
-  }
-function onChangeCss(newValue) {
-    console.log('css' + ' ' + newValue);
-  }
-function onChangeJs(newValue) {
-    console.log('js' + ' ' + newValue);
-  }
 
 const Home = () =>{
-  const [html, setHtml] = useState(onChangeHtml);
-  const [css, setCss] = useState(onChangeCss);
-  const [js, setJs] = useState(onChangeJs);
-    return(
-        <>
-    <Header/>
-    <AceEditor
-    width = 'calc(100% / 3)'
-    className = 'editor'
-    onChange= {onChangeHtml}
-  placeholder="Your HTML"
-  mode="html"
-  theme="monokai"
-  name="blah2"
-  fontSize={14}
-  showPrintMargin={true}
-  showGutter={true}
-  highlightActiveLine={true}
-  value={html}
-  setOptions={{
-  enableBasicAutocompletion: true,
-  enableLiveAutocompletion: true,
-  enableSnippets: false,
-  showLineNumbers: true,
-  tabSize: 2,
-  
-  }}/>
- <AceEditor
- width = 'calc(100% / 3)'
- className = 'editor'
- onChange={onChangeCss}
-  placeholder="Your CSS"
-  mode="css"
-  theme="monokai"
-  name="blah2"
-  fontSize={14}
-  showPrintMargin={true}
-  showGutter={true}
-  highlightActiveLine={true}
-  value={css}
-  setOptions={{
-  enableBasicAutocompletion: true,
-  enableLiveAutocompletion: true,
-  enableSnippets: false,
-  showLineNumbers: true,
-  tabSize: 2,
-  }}/>
-  
-<AceEditor
-width = 'calc(100% / 3)'
-className ='editor'
-onChange={onChangeJs}
-  placeholder="Your JavaScript"
-  mode="javascript"
-  theme="monokai"
-  name="blah2"
-  fontSize={14}
-  showPrintMargin={true}
-  showGutter={true}
-  highlightActiveLine={true}
-  value={js}
-  setOptions={{
-  enableBasicAutocompletion: true,
-  enableLiveAutocompletion: true,
-  enableSnippets: true,
-  showLineNumbers: true,
-  tabSize: 2,
-  }}/>
+return (
+  <>
+  <Header/>
+  <Snippet/>
   </>
     )
 }
 
+
 export default Home