diff --git a/package-lock.json b/package-lock.json index 6a893cc..3c31f04 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,6 @@ "license": "Apache-2.0", "dependencies": { "@craco/craco": "^6.2.0", - "@reduxjs/toolkit": "^1.6.1", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", @@ -23,7 +22,6 @@ "react-dom": "^17.0.2", "react-helmet-async": "^1.1.0", "react-icons": "^4.2.0", - "react-redux": "^7.2.4", "react-scripts": "4.0.3", "sass": "^1.38.0", "web-vitals": "^1.0.1" @@ -2694,29 +2692,6 @@ "node": ">= 8" } }, - "node_modules/@reduxjs/toolkit": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.6.1.tgz", - "integrity": "sha512-pa3nqclCJaZPAyBhruQtiRwtTjottRrVJqziVZcWzI73i6L3miLTtUyWfauwv08HWtiXLx1xGyGt+yLFfW/d0A==", - "dependencies": { - "immer": "^9.0.1", - "redux": "^4.1.0", - "redux-thunk": "^2.3.0", - "reselect": "^4.0.0" - }, - "peerDependencies": { - "react": "^16.14.0 || ^17.0.0", - "react-redux": "^7.2.1" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-redux": { - "optional": true - } - } - }, "node_modules/@rollup/plugin-node-resolve": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz", @@ -3219,15 +3194,6 @@ "@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": "5.1.2", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz", @@ -3298,37 +3264,11 @@ "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.3.2.tgz", "integrity": "sha512-eI5Yrz3Qv4KPUa/nSIAi0h+qX0XyewOliug5F2QAtuRg6Kjg6jfmxe1GIwoIRhZspD1A0RP8ANrPwvEXXtRFog==" }, - "node_modules/@types/prop-types": { - "version": "15.7.4", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz", - "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==" - }, "node_modules/@types/q": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz", "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==" }, - "node_modules/@types/react": { - "version": "17.0.19", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.19.tgz", - "integrity": "sha512-sX1HisdB1/ZESixMTGnMxH9TDe8Sk709734fEQZzCV/4lSu9kJCPbo2PbTRoZM+53Pp0P10hYVyReUueGwUi4A==", - "dependencies": { - "@types/prop-types": "*", - "@types/scheduler": "*", - "csstype": "^3.0.2" - } - }, - "node_modules/@types/react-redux": { - "version": "7.1.18", - "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.18.tgz", - "integrity": "sha512-9iwAsPyJ9DLTRH+OFeIrm9cAbIj1i2ANL3sKQFATqnPWRbg+jEFXyZOKHiQK/N86pNRXbb4HRxAxo0SIX1XwzQ==", - "dependencies": { - "@types/hoist-non-react-statics": "^3.3.0", - "@types/react": "*", - "hoist-non-react-statics": "^3.3.0", - "redux": "^4.0.0" - } - }, "node_modules/@types/resolve": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz", @@ -3337,11 +3277,6 @@ "@types/node": "*" } }, - "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/source-list-map": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz", @@ -6559,11 +6494,6 @@ "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz", "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==" }, - "node_modules/csstype": { - "version": "3.0.8", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", - "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==" - }, "node_modules/cyclist": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz", @@ -9679,19 +9609,6 @@ "minimalistic-crypto-utils": "^1.0.1" } }, - "node_modules/hoist-non-react-statics": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", - "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", - "dependencies": { - "react-is": "^16.7.0" - } - }, - "node_modules/hoist-non-react-statics/node_modules/react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" - }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -10129,15 +10046,6 @@ "node": ">= 4" } }, - "node_modules/immer": { - "version": "9.0.5", - "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.5.tgz", - "integrity": "sha512-2WuIehr2y4lmYz9gaQzetPR2ECniCifk4ORaQbU3g5EalLt+0IVTosEPJ5BoYl/75ky2mivzdRzV8wWgQGOSYQ==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/immer" - } - }, "node_modules/import-cwd": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz", @@ -16383,35 +16291,6 @@ "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": "7.2.4", - "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz", - "integrity": "sha512-hOQ5eOSkEJEXdpIKbnRyl04LhaWabkDPV+Ix97wqQX3T3d2NQ8DUblNXXtNMavc7DpswyQM6xfaN4HQDKNY2JA==", - "dependencies": { - "@babel/runtime": "^7.12.1", - "@types/react-redux": "^7.1.16", - "hoist-non-react-statics": "^3.3.2", - "loose-envify": "^1.4.0", - "prop-types": "^15.7.2", - "react-is": "^16.13.1" - }, - "peerDependencies": { - "react": "^16.8.3 || ^17" - }, - "peerDependenciesMeta": { - "react-dom": { - "optional": true - }, - "react-native": { - "optional": true - } - } - }, - "node_modules/react-redux/node_modules/react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" - }, "node_modules/react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", @@ -16770,19 +16649,6 @@ "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", "dev": true }, - "node_modules/redux": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.1.tgz", - "integrity": "sha512-hZQZdDEM25UY2P493kPYuKqviVwZ58lEmGQNeQ+gXa+U0gYPUBf7NKYazbe3m+bs/DzM/ahN12DbF+NG8i0CWw==", - "dependencies": { - "@babel/runtime": "^7.9.2" - } - }, - "node_modules/redux-thunk": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz", - "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==" - }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -16981,11 +16847,6 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=" }, - "node_modules/reselect": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.0.0.tgz", - "integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==" - }, "node_modules/resolve": { "version": "1.18.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.18.1.tgz", @@ -23946,17 +23807,6 @@ } } }, - "@reduxjs/toolkit": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.6.1.tgz", - "integrity": "sha512-pa3nqclCJaZPAyBhruQtiRwtTjottRrVJqziVZcWzI73i6L3miLTtUyWfauwv08HWtiXLx1xGyGt+yLFfW/d0A==", - "requires": { - "immer": "^9.0.1", - "redux": "^4.1.0", - "redux-thunk": "^2.3.0", - "reselect": "^4.0.0" - } - }, "@rollup/plugin-node-resolve": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz", @@ -24315,15 +24165,6 @@ "@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": "5.1.2", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz", @@ -24394,37 +24235,11 @@ "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.3.2.tgz", "integrity": "sha512-eI5Yrz3Qv4KPUa/nSIAi0h+qX0XyewOliug5F2QAtuRg6Kjg6jfmxe1GIwoIRhZspD1A0RP8ANrPwvEXXtRFog==" }, - "@types/prop-types": { - "version": "15.7.4", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz", - "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==" - }, "@types/q": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz", "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==" }, - "@types/react": { - "version": "17.0.19", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.19.tgz", - "integrity": "sha512-sX1HisdB1/ZESixMTGnMxH9TDe8Sk709734fEQZzCV/4lSu9kJCPbo2PbTRoZM+53Pp0P10hYVyReUueGwUi4A==", - "requires": { - "@types/prop-types": "*", - "@types/scheduler": "*", - "csstype": "^3.0.2" - } - }, - "@types/react-redux": { - "version": "7.1.18", - "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.18.tgz", - "integrity": "sha512-9iwAsPyJ9DLTRH+OFeIrm9cAbIj1i2ANL3sKQFATqnPWRbg+jEFXyZOKHiQK/N86pNRXbb4HRxAxo0SIX1XwzQ==", - "requires": { - "@types/hoist-non-react-statics": "^3.3.0", - "@types/react": "*", - "hoist-non-react-statics": "^3.3.0", - "redux": "^4.0.0" - } - }, "@types/resolve": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz", @@ -24433,11 +24248,6 @@ "@types/node": "*" } }, - "@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/source-list-map": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz", @@ -27003,11 +26813,6 @@ } } }, - "csstype": { - "version": "3.0.8", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", - "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==" - }, "cyclist": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz", @@ -29373,21 +29178,6 @@ "minimalistic-crypto-utils": "^1.0.1" } }, - "hoist-non-react-statics": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", - "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", - "requires": { - "react-is": "^16.7.0" - }, - "dependencies": { - "react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" - } - } - }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -29731,11 +29521,6 @@ "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz", "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==" }, - "immer": { - "version": "9.0.5", - "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.5.tgz", - "integrity": "sha512-2WuIehr2y4lmYz9gaQzetPR2ECniCifk4ORaQbU3g5EalLt+0IVTosEPJ5BoYl/75ky2mivzdRzV8wWgQGOSYQ==" - }, "import-cwd": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz", @@ -34689,26 +34474,6 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, - "react-redux": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz", - "integrity": "sha512-hOQ5eOSkEJEXdpIKbnRyl04LhaWabkDPV+Ix97wqQX3T3d2NQ8DUblNXXtNMavc7DpswyQM6xfaN4HQDKNY2JA==", - "requires": { - "@babel/runtime": "^7.12.1", - "@types/react-redux": "^7.1.16", - "hoist-non-react-statics": "^3.3.2", - "loose-envify": "^1.4.0", - "prop-types": "^15.7.2", - "react-is": "^16.13.1" - }, - "dependencies": { - "react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" - } - } - }, "react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", @@ -34993,19 +34758,6 @@ } } }, - "redux": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.1.tgz", - "integrity": "sha512-hZQZdDEM25UY2P493kPYuKqviVwZ58lEmGQNeQ+gXa+U0gYPUBf7NKYazbe3m+bs/DzM/ahN12DbF+NG8i0CWw==", - "requires": { - "@babel/runtime": "^7.9.2" - } - }, - "redux-thunk": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz", - "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==" - }, "regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -35160,11 +34912,6 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=" }, - "reselect": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.0.0.tgz", - "integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==" - }, "resolve": { "version": "1.18.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.18.1.tgz", diff --git a/package.json b/package.json index 1af427b..1cf89d1 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,6 @@ }, "dependencies": { "@craco/craco": "^6.2.0", - "@reduxjs/toolkit": "^1.6.1", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", @@ -26,7 +25,6 @@ "react-dom": "^17.0.2", "react-helmet-async": "^1.1.0", "react-icons": "^4.2.0", - "react-redux": "^7.2.4", "react-scripts": "4.0.3", "sass": "^1.38.0", "web-vitals": "^1.0.1" diff --git a/src/App.js b/src/App.js index 845d6b4..3e0842d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,26 +1,25 @@ import axios from "axios"; -import { Fragment, useCallback, useEffect, useState } from "react"; -import { useDispatch, useSelector } from "react-redux"; +import { Fragment, useCallback, useContext, useEffect, useState } from "react"; import AvatarCard from "./components/AvatarCard"; import ErrorPage from "./components/ErrorPage"; import ThemeChanger from "./components/ThemeChanger"; import config from "./config"; import moment from 'moment'; -import { setLoading } from "./store/slices/loadingSlice"; -import { setProfile } from "./store/slices/profileSlice"; import Details from "./components/Details"; import Skill from "./components/Skill"; import Experience from "./components/Experience"; import Education from "./components/Education"; import Project from "./components/Project"; -import { setRepo } from "./store/slices/repoSlice"; import Blog from "./components/Blog"; import MetaTags from "./components/MetaTags"; +import { LoadingContext } from "./contexts/LoadingContext"; +import { ThemeContext } from "./contexts/ThemeContext"; function App() { - const dispatch = useDispatch(); - const theme = useSelector(state => state.theme); - + const [theme] = useContext(ThemeContext); + const [, setLoading] = useContext(LoadingContext); + const [profile, setProfile] = useState(null); + const [repo, setRepo] = useState(null); const [error, setError] = useState(null); const [rateLimit, setRateLimit] = useState(null); @@ -43,7 +42,7 @@ function App() { company: data.company ? data.company : '' } - dispatch(setProfile(profileData)); + setProfile(profileData); }) .then(() => { let excludeRepo = ``; @@ -64,7 +63,7 @@ function App() { .then(response => { let data = response.data; - dispatch(setRepo(data.items)); + setRepo(data.items); }) .catch((error) => { handleError(error); @@ -74,9 +73,9 @@ function App() { handleError(error); }) .finally(() => { - dispatch(setLoading(false)); + setLoading(false); }); - }, [dispatch]) + }, [setLoading]) useEffect(() => { loadData(); @@ -104,7 +103,7 @@ function App() { return ( - +
{ @@ -144,20 +143,20 @@ function App() {
{ !config.themeConfig.disableSwitch && ( - + ) } - -
- - - + +
+ + +
- - + +
diff --git a/src/components/AvatarCard.js b/src/components/AvatarCard.js index 2f74ccb..1f01949 100644 --- a/src/components/AvatarCard.js +++ b/src/components/AvatarCard.js @@ -1,16 +1,17 @@ -import { useSelector } from "react-redux"; import { fallbackImage, skeleton } from "../helpers/utils"; import LazyImage from "./LazyImage"; +import PropTypes from 'prop-types'; +import { useContext } from "react"; +import { LoadingContext } from "../contexts/LoadingContext"; -const AvatarCard = () => { - const profile = useSelector(state => state.profile); - const loading = useSelector(state => state.loading); +const AvatarCard = (props) => { + const [loading] = useContext(LoadingContext); return (
{ - loading ? ( + (loading || !props.profile) ? (
{ @@ -27,8 +28,8 @@ const AvatarCard = () => {
{ {
{ - loading ? ( + (loading || !props.profile) ? ( skeleton({ width: 'w-48', height: 'h-8' }) - ) : {profile.name} + ) : {props.profile.name} }
{ - loading ? ( + (loading || !props.profile) ? ( skeleton({ width: 'w-48', height: 'h-5' }) - ) : profile.bio + ) : props.profile.bio }
@@ -63,4 +64,8 @@ const AvatarCard = () => { ) } +AvatarCard.propTypes = { + profile: PropTypes.object +} + export default AvatarCard; \ No newline at end of file diff --git a/src/components/Blog.js b/src/components/Blog.js index 3237b70..4b6e6ae 100644 --- a/src/components/Blog.js +++ b/src/components/Blog.js @@ -1,9 +1,9 @@ import { getDevtoArticle, getMediumArticle } from "article-api"; import moment from "moment"; -import { Fragment, useEffect, useState } from "react"; +import { Fragment, useContext, useEffect, useState } from "react"; import { CgHashtag } from 'react-icons/cg'; -import { useSelector } from "react-redux"; import config from "../config"; +import { LoadingContext } from "../contexts/LoadingContext"; import { ga, skeleton } from "../helpers/utils"; import LazyImage from "./LazyImage"; @@ -23,7 +23,7 @@ const displaySection = () => { const Blog = () => { const [articles, setArticles] = useState(null); - const loading = useSelector(state => state.loading); + const [loading] = useContext(LoadingContext); useEffect(() => { if (displaySection()) { diff --git a/src/components/Details.js b/src/components/Details.js index bc70bb5..52e98d5 100644 --- a/src/components/Details.js +++ b/src/components/Details.js @@ -5,13 +5,14 @@ import { GrLinkedinOption } from 'react-icons/gr'; import { CgDribbble } from 'react-icons/cg'; import { RiPhoneFill } from 'react-icons/ri'; import { FaBehanceSquare, FaBuilding, FaDev, FaFacebook, FaGlobe } from 'react-icons/fa'; -import { useSelector } from 'react-redux'; import config from '../config'; import { skeleton } from '../helpers/utils'; +import PropTypes from 'prop-types'; +import { useContext } from 'react'; +import { LoadingContext } from '../contexts/LoadingContext'; -const Details = () => { - const profile = useSelector(state => state.profile); - const loading = useSelector(state => state.loading); +const Details = (props) => { + const [loading] = useContext(LoadingContext); const renderSkeleton = () => { let array = []; @@ -34,24 +35,24 @@ const Details = () => {
    { - loading ? renderSkeleton() : ( + (loading || !props.profile) ? renderSkeleton() : ( <> { - profile && profile.location && ( + props.profile.location && (
  • - {profile.location} + {props.profile.location}
    • ) } { - profile && profile.company && ( + props.profile.company && (
  • - {profile.company} + {props.profile.company}
    • ) @@ -247,4 +248,8 @@ const Details = () => { ) } +Details.propTypes = { + profile: PropTypes.object +} + export default Details; \ No newline at end of file diff --git a/src/components/Education.js b/src/components/Education.js index b7f4763..d151807 100644 --- a/src/components/Education.js +++ b/src/components/Education.js @@ -1,10 +1,11 @@ -import { useSelector } from "react-redux"; import config from "../config"; import { GoPrimitiveDot } from 'react-icons/go'; import { skeleton } from "../helpers/utils"; +import { useContext } from "react"; +import { LoadingContext } from "../contexts/LoadingContext"; const Education = () => { - const loading = useSelector(state => state.loading); + const [loading] = useContext(LoadingContext); const renderSkeleton = () => { let array = []; diff --git a/src/components/Experience.js b/src/components/Experience.js index 4830a20..eee6f8f 100644 --- a/src/components/Experience.js +++ b/src/components/Experience.js @@ -1,10 +1,11 @@ -import { useSelector } from "react-redux"; import config from "../config"; import { GoPrimitiveDot } from 'react-icons/go'; import { skeleton } from "../helpers/utils"; +import { useContext } from "react"; +import { LoadingContext } from "../contexts/LoadingContext"; const Experience = () => { - const loading = useSelector(state => state.loading); + const [loading] = useContext(LoadingContext); const renderSkeleton = () => { let array = []; @@ -44,9 +45,11 @@ const Experience = () => {
  • - {loading ? skeleton({width: 'w-32', height: 'h-8'}) : ( - Experience - )} + { + loading ? skeleton({width: 'w-32', height: 'h-8'}) : ( + Experience + ) + }
    • diff --git a/src/components/MetaTags.js b/src/components/MetaTags.js index eeb942e..0c38cd4 100644 --- a/src/components/MetaTags.js +++ b/src/components/MetaTags.js @@ -1,17 +1,17 @@ -import React, { Fragment } from 'react'; +import React, { Fragment, useContext } from 'react'; import { Helmet } from "react-helmet-async"; -import { useSelector } from 'react-redux'; import config from '../config'; import { isThemeDarkish } from '../helpers/utils'; +import PropTypes from 'prop-types'; +import { ThemeContext } from '../contexts/ThemeContext'; -const MetaTags = () => { - const profile = useSelector(state => state.profile); - const theme = useSelector(state => state.theme); +const MetaTags = (props) => { + const [theme] = useContext(ThemeContext); return ( { - profile && ( + props.profile && ( { config.googleAnalytics.id && ( @@ -33,25 +33,25 @@ const MetaTags = () => { ) } - Portfolio of {profile.name} + Portfolio of {props.profile.name} - + - - - + + + - - - + + + - - - + + + ) } @@ -59,4 +59,8 @@ const MetaTags = () => { ) } +MetaTags.propTypes = { + profile: PropTypes.object +} + export default MetaTags; \ No newline at end of file diff --git a/src/components/Project.js b/src/components/Project.js index ff32a12..f1c8783 100644 --- a/src/components/Project.js +++ b/src/components/Project.js @@ -1,12 +1,12 @@ -import { Fragment } from "react"; -import { useSelector } from "react-redux"; +import { Fragment, useContext } from "react"; import { ga, languageColor, skeleton } from "../helpers/utils"; import { AiOutlineStar, AiOutlineFork } from 'react-icons/ai'; import config from "../config"; +import PropTypes from 'prop-types'; +import { LoadingContext } from "../contexts/LoadingContext"; -const Project = () => { - const loading = useSelector(state => state.loading); - const repo = useSelector(state => state.repo); +const Project = (props) => { + const [loading] = useContext(LoadingContext); const renderSkeleton = () => { let array = []; @@ -51,7 +51,7 @@ const Project = () => { } const renderProjects = () => { - return repo.map((item, index) => ( + return props.repo.map((item, index) => (
    {
    - {(loading || !repo) ? renderSkeleton() : renderProjects()} + {(loading || !props.repo) ? renderSkeleton() : renderProjects()}
@@ -155,4 +155,8 @@ const Project = () => { ) } +Project.propTypes = { + repo: PropTypes.array +} + export default Project; \ No newline at end of file diff --git a/src/components/Skill.js b/src/components/Skill.js index 41de46f..e5f0d21 100644 --- a/src/components/Skill.js +++ b/src/components/Skill.js @@ -1,9 +1,10 @@ -import { useSelector } from "react-redux"; +import { useContext } from "react"; import config from "../config"; +import { LoadingContext } from "../contexts/LoadingContext"; import { skeleton } from "../helpers/utils"; const Skill = () => { - const loading = useSelector(state => state.loading); + const [loading] = useContext(LoadingContext); const renderSkeleton = () => { let array = []; @@ -26,9 +27,11 @@ const Skill = () => {
- {loading ? skeleton({width: 'w-32', height: 'h-8'}) : ( - Tech Stack - )} + { + loading ? skeleton({width: 'w-32', height: 'h-8'}) : ( + Tech Stack + ) + }
diff --git a/src/components/ThemeChanger.js b/src/components/ThemeChanger.js index 125e1fb..cc2f5ca 100644 --- a/src/components/ThemeChanger.js +++ b/src/components/ThemeChanger.js @@ -1,17 +1,20 @@ -import { useDispatch, useSelector } from 'react-redux'; -import { setTheme } from '../store/slices/themeSlice'; import config from '../config'; import { skeleton } from '../helpers/utils'; import { AiOutlineControl } from 'react-icons/ai'; +import { useContext } from 'react'; +import { ThemeContext } from '../contexts/ThemeContext'; +import { LoadingContext } from '../contexts/LoadingContext'; const ThemeChanger = () => { - const dispatch = useDispatch(); - const theme = useSelector(state => state.theme); - const loading = useSelector(state => state.loading); + const [theme, setTheme] = useContext(ThemeContext); + const [loading] = useContext(LoadingContext); const changeTheme = (e, selectedTheme) => { e.preventDefault(); - dispatch(setTheme(selectedTheme)); + document.querySelector('html').setAttribute('data-theme', selectedTheme); + localStorage.setItem('ezprofileTheme', selectedTheme); + + setTheme(selectedTheme); } return ( @@ -26,7 +29,9 @@ const ThemeChanger = () => { } - {loading ? skeleton({ width: 'w-16', height: 'h-5' }) : (theme === config.themeConfig.default ? 'Default' : theme)} + { + loading ? skeleton({ width: 'w-16', height: 'h-5' }) : (theme === config.themeConfig.default ? 'Default' : theme) + }
diff --git a/src/contexts/LoadingContext.js b/src/contexts/LoadingContext.js new file mode 100644 index 0000000..fd9313c --- /dev/null +++ b/src/contexts/LoadingContext.js @@ -0,0 +1,15 @@ +import { createContext, useState } from "react"; + +const initialValue = true; + +export const LoadingContext = createContext(); + +export const LoadingProvider = (props) => { + const [loading, setLoading] = useState(initialValue); + + return ( + + {props.children} + + ); +} \ No newline at end of file diff --git a/src/contexts/ThemeContext.js b/src/contexts/ThemeContext.js new file mode 100644 index 0000000..1d6436b --- /dev/null +++ b/src/contexts/ThemeContext.js @@ -0,0 +1,16 @@ +import { createContext, useState } from "react"; +import { getInitialTheme } from "../helpers/utils"; + +const initialValue = getInitialTheme(); + +export const ThemeContext = createContext(); + +export const ThemeProvider = (props) => { + const [theme, setTheme] = useState(initialValue); + + return ( + + {props.children} + + ); +} \ No newline at end of file diff --git a/src/helpers/utils.js b/src/helpers/utils.js index d0d2231..6de01df 100644 --- a/src/helpers/utils.js +++ b/src/helpers/utils.js @@ -1,7 +1,7 @@ import config from "../config"; import colors from './colors.json'; -export const getThemeValue = () => { +export const getInitialTheme = () => { if (config.themeConfig.disableSwitch) { return config.themeConfig.default; } diff --git a/src/index.js b/src/index.js index d1735e1..24d5e40 100644 --- a/src/index.js +++ b/src/index.js @@ -2,18 +2,20 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.scss'; import App from './App'; -import { Provider } from 'react-redux'; import reportWebVitals from './reportWebVitals'; -import { store } from './store/store'; import { HelmetProvider } from 'react-helmet-async'; +import { ThemeProvider } from './contexts/ThemeContext'; +import { LoadingProvider } from './contexts/LoadingContext'; ReactDOM.render( - - - - - + + + + + + + , document.getElementById('root') ); diff --git a/src/store/slices/loadingSlice.js b/src/store/slices/loadingSlice.js deleted file mode 100644 index b24395c..0000000 --- a/src/store/slices/loadingSlice.js +++ /dev/null @@ -1,19 +0,0 @@ -import { createSlice } from '@reduxjs/toolkit'; - -const initialState = true; - -export const loadingSlice = createSlice({ - name: 'loading', - initialState: initialState, - reducers: { - setLoading: (state, action) => { - state = action.payload; - - return state; - } - } -}) - -export const { setLoading } = loadingSlice.actions; - -export default loadingSlice.reducer; \ No newline at end of file diff --git a/src/store/slices/profileSlice.js b/src/store/slices/profileSlice.js deleted file mode 100644 index 0b585d7..0000000 --- a/src/store/slices/profileSlice.js +++ /dev/null @@ -1,19 +0,0 @@ -import { createSlice } from '@reduxjs/toolkit'; - -const initialState = null; - -export const profileSlice = createSlice({ - name: 'profile', - initialState: initialState, - reducers: { - setProfile: (state, action) => { - state = action.payload; - - return state; - } - } -}) - -export const { setProfile } = profileSlice.actions; - -export default profileSlice.reducer; \ No newline at end of file diff --git a/src/store/slices/repoSlice.js b/src/store/slices/repoSlice.js deleted file mode 100644 index ef8301d..0000000 --- a/src/store/slices/repoSlice.js +++ /dev/null @@ -1,19 +0,0 @@ -import { createSlice } from '@reduxjs/toolkit'; - -const initialState = null; - -export const repoSlice = createSlice({ - name: 'repo', - initialState: initialState, - reducers: { - setRepo: (state, action) => { - state = action.payload; - - return state; - } - } -}) - -export const { setRepo } = repoSlice.actions; - -export default repoSlice.reducer; \ No newline at end of file diff --git a/src/store/slices/themeSlice.js b/src/store/slices/themeSlice.js deleted file mode 100644 index 2604be8..0000000 --- a/src/store/slices/themeSlice.js +++ /dev/null @@ -1,23 +0,0 @@ -import { createSlice } from '@reduxjs/toolkit'; -import { getThemeValue } from '../../helpers/utils'; - -const initialState = getThemeValue(); - -export const themeSlice = createSlice({ - name: 'theme', - initialState: initialState, - reducers: { - setTheme: (state, action) => { - state = action.payload; - - document.querySelector('html').setAttribute('data-theme', state); - localStorage.setItem('ezprofileTheme', state); - - return state; - } - } -}) - -export const { setTheme } = themeSlice.actions; - -export default themeSlice.reducer; \ No newline at end of file diff --git a/src/store/store.js b/src/store/store.js deleted file mode 100644 index fb15eed..0000000 --- a/src/store/store.js +++ /dev/null @@ -1,16 +0,0 @@ -import { combineReducers, configureStore } from '@reduxjs/toolkit'; -import loadingSlice from './slices/loadingSlice'; -import profileSlice from './slices/profileSlice'; -import repoSlice from './slices/repoSlice'; -import themeSlice from './slices/themeSlice'; - -const rootReducer = combineReducers({ - profile: profileSlice, - theme: themeSlice, - loading: loadingSlice, - repo: repoSlice, -}) - -export const store = configureStore({ - reducer: rootReducer -}) \ No newline at end of file