diff --git a/package-lock.json b/package-lock.json index ec70d22ea20..a07b8db6a5f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,21 +6,25 @@ "packages": { "": { "name": "linkfree", - "version": "0.71.1", + "version": "0.76.5", "license": "MIT", "dependencies": { + "@reduxjs/toolkit": "^1.8.5", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", "primeflex": "^3.1.2", "primeicons": "^5.0.0", "primereact": "^6.5.1", + "prop-types": "^15.8.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-icons": "^4.3.1", + "react-redux": "^8.0.4", "react-router-dom": "^5.3.0", "react-scripts": "^5.0.1", "react-transition-group": "^4.4.2", + "redux": "^4.2.0", "serve": "^12.0.1", "web-vitals": "^1.1.2" }, @@ -1806,9 +1810,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.6.tgz", - "integrity": "sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==", + "version": "7.19.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz", + "integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==", "dependencies": { "regenerator-runtime": "^0.13.4" }, @@ -3021,6 +3025,29 @@ "node": ">= 8" } }, + "node_modules/@reduxjs/toolkit": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.5.tgz", + "integrity": "sha512-f4D5EXO7A7Xq35T0zRbWq5kJQyXzzscnHKmjnu2+37B3rwHU6mX9PYlbfXdnxcY6P/7zfmjhgan0Z+yuOfeBmA==", + "dependencies": { + "immer": "^9.0.7", + "redux": "^4.1.2", + "redux-thunk": "^2.4.1", + "reselect": "^4.1.5" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17.0.0 || ^18", + "react-redux": "^7.2.1 || ^8.0.2" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-redux": { + "optional": true + } + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -3674,6 +3701,15 @@ "@types/node": "*" } }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -3777,6 +3813,11 @@ "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.6.3.tgz", "integrity": "sha512-ymZk3LEC/fsut+/Q5qejp6R9O1rMxz3XaRHDV6kX8MrGAhOSPqVARbDi+EZvInBpw+BnCX3TD240byVkOfQsHg==" }, + "node_modules/@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + }, "node_modules/@types/q": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz", @@ -3792,6 +3833,16 @@ "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz", "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==" }, + "node_modules/@types/react": { + "version": "18.0.21", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz", + "integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==", + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -3805,6 +3856,11 @@ "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz", "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==" }, + "node_modules/@types/scheduler": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" + }, "node_modules/@types/serve-index": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz", @@ -3860,6 +3916,11 @@ "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" }, + "node_modules/@types/use-sync-external-store": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", + "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" + }, "node_modules/@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -7196,9 +7257,9 @@ "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==" }, "node_modules/csstype": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", - "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==" + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", + "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==" }, "node_modules/cucumber": { "version": "4.2.1", @@ -16659,6 +16720,49 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-redux": { + "version": "8.0.4", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.4.tgz", + "integrity": "sha512-yMfQ7mX6bWuicz2fids6cR1YT59VTuT8MKyyE310wJQlINKENCeT1UcPdEiX6znI5tF8zXyJ/VYvDgeGuaaNwQ==", + "dependencies": { + "@babel/runtime": "^7.12.1", + "@types/hoist-non-react-statics": "^3.3.1", + "@types/use-sync-external-store": "^0.0.3", + "hoist-non-react-statics": "^3.3.2", + "react-is": "^18.0.0", + "use-sync-external-store": "^1.0.0" + }, + "peerDependencies": { + "@types/react": "^16.8 || ^17.0 || ^18.0", + "@types/react-dom": "^16.8 || ^17.0 || ^18.0", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0", + "react-native": ">=0.59", + "redux": "^4" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + }, + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + }, + "redux": { + "optional": true + } + } + }, + "node_modules/react-redux/node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -17076,9 +17180,9 @@ } }, "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==", + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", "dependencies": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", @@ -17192,6 +17296,22 @@ "node": ">=8" } }, + "node_modules/redux": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz", + "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==", + "dependencies": { + "@babel/runtime": "^7.9.2" + } + }, + "node_modules/redux-thunk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz", + "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==", + "peerDependencies": { + "redux": "^4" + } + }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -17372,6 +17492,11 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==" }, + "node_modules/reselect": { + "version": "4.1.6", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.6.tgz", + "integrity": "sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ==" + }, "node_modules/resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -19842,6 +19967,14 @@ "integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw==", "dev": true }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util": { "version": "0.10.4", "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz", @@ -22370,9 +22503,9 @@ } }, "@babel/runtime": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.6.tgz", - "integrity": "sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==", + "version": "7.19.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz", + "integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==", "requires": { "regenerator-runtime": "^0.13.4" } @@ -23251,6 +23384,17 @@ } } }, + "@reduxjs/toolkit": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.5.tgz", + "integrity": "sha512-f4D5EXO7A7Xq35T0zRbWq5kJQyXzzscnHKmjnu2+37B3rwHU6mX9PYlbfXdnxcY6P/7zfmjhgan0Z+yuOfeBmA==", + "requires": { + "immer": "^9.0.7", + "redux": "^4.1.2", + "redux-thunk": "^2.4.1", + "reselect": "^4.1.5" + } + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -23730,6 +23874,15 @@ "@types/node": "*" } }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -23826,6 +23979,11 @@ "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.6.3.tgz", "integrity": "sha512-ymZk3LEC/fsut+/Q5qejp6R9O1rMxz3XaRHDV6kX8MrGAhOSPqVARbDi+EZvInBpw+BnCX3TD240byVkOfQsHg==" }, + "@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + }, "@types/q": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz", @@ -23841,6 +23999,16 @@ "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz", "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==" }, + "@types/react": { + "version": "18.0.21", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz", + "integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==", + "requires": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, "@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -23854,6 +24022,11 @@ "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz", "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==" }, + "@types/scheduler": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" + }, "@types/serve-index": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz", @@ -23909,6 +24082,11 @@ "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" }, + "@types/use-sync-external-store": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", + "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" + }, "@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -26446,9 +26624,9 @@ } }, "csstype": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", - "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==" + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", + "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==" }, "cucumber": { "version": "4.2.1", @@ -33384,6 +33562,26 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "react-redux": { + "version": "8.0.4", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.4.tgz", + "integrity": "sha512-yMfQ7mX6bWuicz2fids6cR1YT59VTuT8MKyyE310wJQlINKENCeT1UcPdEiX6znI5tF8zXyJ/VYvDgeGuaaNwQ==", + "requires": { + "@babel/runtime": "^7.12.1", + "@types/hoist-non-react-statics": "^3.3.1", + "@types/use-sync-external-store": "^0.0.3", + "hoist-non-react-statics": "^3.3.2", + "react-is": "^18.0.0", + "use-sync-external-store": "^1.0.0" + }, + "dependencies": { + "react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + } + } + }, "react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -33691,9 +33889,9 @@ } }, "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==", + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", "requires": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", @@ -33794,6 +33992,20 @@ } } }, + "redux": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz", + "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==", + "requires": { + "@babel/runtime": "^7.9.2" + } + }, + "redux-thunk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz", + "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==", + "requires": {} + }, "regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -33937,6 +34149,11 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==" }, + "reselect": { + "version": "4.1.6", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.6.tgz", + "integrity": "sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ==" + }, "resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -35829,6 +36046,12 @@ } } }, + "use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "requires": {} + }, "util": { "version": "0.10.4", "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz", @@ -36926,4 +37149,4 @@ "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==" } } -} \ No newline at end of file +} diff --git a/package.json b/package.json index 84aa79576fc..d9f7b838626 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "primeflex": "^3.1.2", "primeicons": "^5.0.0", "primereact": "^6.5.1", + "prop-types": "^15.8.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-icons": "^4.3.1", @@ -102,4 +103,4 @@ "eslint --ext [.json,.js] --fix" ] } -} \ No newline at end of file +} diff --git a/src/App.js b/src/App.js index 04acecc25c5..0692367cb1d 100644 --- a/src/App.js +++ b/src/App.js @@ -10,13 +10,22 @@ import Footer from './Components/Footer' import User from './Components/UserProfile/User' import Home from './Components/Home' import Search from './Components/Search/Search' - import user from './config/user.json' +import { useTheme } from './ThemeContext' function App() { + const darkTheme = useTheme() + const body = document.querySelector('body') + + const theme = { + color: `${darkTheme ? 'white' : 'black'}`, + } + + body.style.backgroundColor = `${darkTheme ? '#202023' : 'white'}` + return ( -
+
{user.username && } {!user.username && ( diff --git a/src/Components/Footer.js b/src/Components/Footer.js index 9a26858155a..3c4c51eae29 100644 --- a/src/Components/Footer.js +++ b/src/Components/Footer.js @@ -2,8 +2,10 @@ import React, { useState, useEffect } from 'react' import { Link } from 'react-router-dom' import GetIcons from './Icons/GetIcons' import ScrollToTopBtn from './ScrollToTopBtn' +import { useTheme } from '../ThemeContext' function Footer() { + const darkTheme = useTheme() const [version, setVersion] = useState('') useEffect(() => { fetch('/app.json') @@ -25,7 +27,11 @@ function Footer() { className="mr-2" aria-label="LinkFree repository on GitHub" > - + v{version}

diff --git a/src/Components/Home.js b/src/Components/Home.js index 3b29391815e..c3aa9d856b9 100644 --- a/src/Components/Home.js +++ b/src/Components/Home.js @@ -1,18 +1,24 @@ import React from 'react' import { Link } from 'react-router-dom' import './Home.css' - import Navbar from './Navbar' import GetIcons from './Icons/GetIcons' +import { useTheme } from '../ThemeContext' function Home() { + const darkTheme = useTheme() + return ( <>
- + } /> diff --git a/src/Components/Icons/GetIcons.js b/src/Components/Icons/GetIcons.js index 71cd60aa781..ebbf62b76a6 100644 --- a/src/Components/Icons/GetIcons.js +++ b/src/Components/Icons/GetIcons.js @@ -19,11 +19,13 @@ import { FaLink, FaLinkedin, FaMicrosoft, + FaMoon, FaNodeJs, FaPaypal, FaSearch, FaSlack, FaSnapchat, + FaSun, FaStackOverflow, FaTelegram, FaTiktok, @@ -98,6 +100,8 @@ function GetIcons({ iconName, ...restProps }) { return case 'microsoft': return + case 'moon': + return case 'node-js': return case 'open-source': @@ -116,6 +120,8 @@ function GetIcons({ iconName, ...restProps }) { return case 'stackoverflow': return + case 'sun': + return case 'telegram': return case 'tiktok': diff --git a/src/Components/Links.js b/src/Components/Links.js index b4471a8b5a6..deb2fb784fc 100644 --- a/src/Components/Links.js +++ b/src/Components/Links.js @@ -1,14 +1,15 @@ import './Links.css' - import React from 'react' import PropTypes from 'prop-types' import StyledLink from './StyledLink' import GetIcons from './Icons/GetIcons' import { IconContext } from 'react-icons/lib' import linksConfig from '../config/links.json' +import { useTheme } from '../ThemeContext' function Links({ links }) { const colors = linksConfig.validIcons + const darkTheme = useTheme() function MouseOver(e, color) { e.target.style.background = color @@ -29,7 +30,12 @@ function Links({ links }) { onMouseOver={(e) => MouseOver(e, colors[link.icon])} onMouseOut={MouseOut} className={`p-3 my-2 p-button-outlined ${link.icon}`} - style={{ color: colors[link.icon] }} + style={{ + color: + colors[link.icon] === 'links' || darkTheme + ? 'white' + : colors[link.icon], + }} href={link.url} > { fetch('/app.json') @@ -32,10 +34,29 @@ function Navbar({ items, start, end }) { className="mr-2" aria-label="LinkFree repository on GitHub" > - + -
v{version}
+
v{version}
+ +
+ {darkTheme + ? ( + + ) + : ( + + )} +
) } @@ -45,6 +66,10 @@ function Navbar({ items, start, end }) { model={items} start={start} end={end} + style={{ + backgroundColor: `${darkTheme ? '#181818' : 'white'}`, + border: `${darkTheme ? 'none' : '1px solid #dee2e6'}`, + }} className="mb-4 flex-wrap justify-content-center" /> ) diff --git a/src/Components/Search/Placeholders.js b/src/Components/Search/Placeholders.js index 6b4d5c269a0..5fa667734f9 100644 --- a/src/Components/Search/Placeholders.js +++ b/src/Components/Search/Placeholders.js @@ -2,8 +2,17 @@ import React from 'react' import PropTypes from 'prop-types' import { Skeleton } from 'primereact/skeleton' +import { useTheme } from '../../ThemeContext' function Placeholder({ list }) { + const darkTheme = useTheme() + + const theme = { + backgroundColor: `${darkTheme ? '#333333' : 'white'}`, + border: `${darkTheme ? 'none' : 'white'}`, + color: `${darkTheme ? 'gray' : 'grey'}`, + } + return ( <> @@ -16,6 +25,7 @@ function Placeholder({ list }) { borderRadius="2rem" className="m-2 mr-2" key={`skeleton-${key}`} + style={theme} /> ) })} diff --git a/src/Components/Search/Search.js b/src/Components/Search/Search.js index 15e2fa0e51b..c2312626373 100644 --- a/src/Components/Search/Search.js +++ b/src/Components/Search/Search.js @@ -1,18 +1,18 @@ import './Search.css' - import React, { useState, useEffect, useRef } from 'react' -import { Link } from 'react-router-dom' -import { Toast } from 'primereact/toast' - -import Placeholders from './Placeholders' -import Users from './Users' import Navbar from '../Navbar' +import Placeholders from './Placeholders' import GetIcons from '../Icons/GetIcons' +import Users from './Users' +import { Link } from 'react-router-dom' +import { Toast } from 'primereact/toast' +import { useTheme } from '../../ThemeContext' function Search() { const [list, setList] = useState([]) const [skeleton, setskeleton] = useState(true) const toast = useRef(null) + const darkTheme = useTheme() useEffect(() => { fetch('/list.json') @@ -45,7 +45,11 @@ function Search() { - + } /> diff --git a/src/Components/Search/Searchbar.js b/src/Components/Search/Searchbar.js index b8e29958199..1bba7d2f25a 100644 --- a/src/Components/Search/Searchbar.js +++ b/src/Components/Search/Searchbar.js @@ -3,8 +3,17 @@ import PropTypes from 'prop-types' import { InputText } from 'primereact/inputtext' import GetIcons from '../Icons/GetIcons' import './Search.css' +import { useTheme } from '../../ThemeContext' const Searchbar = ({ searchHandler, searchTerm }) => { + const darkTheme = useTheme() + + const theme = { + backgroundColor: `${darkTheme ? '#333333' : 'white'}`, + border: `${darkTheme ? 'none' : '1px solid #ced4da'}`, + color: `${darkTheme ? 'white' : 'grey'}`, + } + return (
@@ -18,6 +27,7 @@ const Searchbar = ({ searchHandler, searchTerm }) => { id="search-input" placeholder="Search user..." autoFocus + style={theme} />
diff --git a/src/Components/Search/Users.js b/src/Components/Search/Users.js index 594768ca981..2d5234535cf 100644 --- a/src/Components/Search/Users.js +++ b/src/Components/Search/Users.js @@ -3,7 +3,7 @@ import { Link } from 'react-router-dom' import PropTypes from 'prop-types' import { Chip } from 'primereact/chip' import { Message } from 'primereact/message' - +import { useTheme } from '../../ThemeContext' import Searchbar from './Searchbar' import ProfileTypeFilter from './filterProfileType' @@ -11,6 +11,12 @@ function Users({ list }) { const [profileType, setProfileType] = useState('all') const [searchTerm, setSearchTerm] = useState('') const [filteredList, setFilteredList] = useState(list) + const darkTheme = useTheme() + + const theme = { + backgroundColor: `${darkTheme ? '#333333' : '#dee2e6'}`, + color: `${darkTheme ? 'white' : 'grey'}`, + } const typeHandler = (value) => { setProfileType(value) @@ -69,6 +75,7 @@ function Users({ list }) { filteredList.map((user, key) => ( diff --git a/src/Components/Search/filterProfileType.js b/src/Components/Search/filterProfileType.js index d7cf485402a..8fcfb16dba3 100644 --- a/src/Components/Search/filterProfileType.js +++ b/src/Components/Search/filterProfileType.js @@ -1,19 +1,28 @@ import React from 'react' import PropTypes from 'prop-types' +import { useTheme } from '../../ThemeContext' import { Dropdown } from 'primereact/dropdown' export default function ProfileTypeFilter({ profileType, typeHandler }) { + const darkTheme = useTheme() const profileTypes = [ { label: 'Personal', value: 'personal' }, { label: 'All', value: 'all' }, { label: 'Community', value: 'community' }, ] + const theme = { + backgroundColor: `${darkTheme ? '#333333' : 'white'}`, + border: `${darkTheme ? 'none' : '1px solid #ced4da'}`, + color: `${darkTheme ? 'white' : '#f3f3f3'}`, + } + return ( typeHandler(e.value)} + style={theme} /> ) } diff --git a/src/ThemeContext.js b/src/ThemeContext.js new file mode 100644 index 00000000000..501ff9983f3 --- /dev/null +++ b/src/ThemeContext.js @@ -0,0 +1,32 @@ +import React, { useState, useContext } from 'react' +import PropTypes from 'prop-types' +const ThemeContext = React.createContext() +const ThemeUpdateContext = React.createContext() + +export function useTheme() { + return useContext(ThemeContext) +} + +export function useThemeUpdate() { + return useContext(ThemeUpdateContext) +} + +export function ThemeProvider({ children }) { + const [darkTheme, setDarkTheme] = useState(false) + + function toggleTheme() { + setDarkTheme((prevTheme) => !prevTheme) + } + + return ( + + + {children} + + + ) +} + +ThemeProvider.propTypes = { + children: PropTypes.node.isRequired, +} diff --git a/src/index.js b/src/index.js index 68bf7230c17..d52efa98fd8 100644 --- a/src/index.js +++ b/src/index.js @@ -3,10 +3,13 @@ import ReactDOM from 'react-dom' import './index.css' import App from './App' import reportWebVitals from './reportWebVitals' +import { ThemeProvider } from './ThemeContext' ReactDOM.render( - + + + , document.getElementById('root'), )