From c4ce6aa11e60d47d0bf96b4f7a18da156f3dfc8f Mon Sep 17 00:00:00 2001 From: DrMint Date: Tue, 22 Feb 2022 13:53:44 +0100 Subject: [PATCH] Added darkmode and replaced redux by context --- README.md | 3 +- package-lock.json | 223 ++----------- package.json | 2 - public/js/toggleTheme.js | 29 -- src/components/AppLayout.tsx | 304 +++++++++--------- src/components/Button.tsx | 6 +- .../Chronology/ChronologyItemComponent.tsx | 8 +- .../Chronology/ChronologyYearComponent.tsx | 2 +- src/components/Content/ThumbnailHeader.tsx | 4 +- src/components/HorizontalLine.tsx | 2 +- src/components/InsetBox.tsx | 2 +- .../Library/LibraryContentPreview.tsx | 6 +- .../Library/LibraryItemsPreview.tsx | 6 +- src/components/Markdown/Markdawn.tsx | 2 +- src/components/Markdown/SceneBreak.tsx | 2 +- src/components/PanelComponents/NavOption.tsx | 6 +- .../PanelComponents/ReturnButton.tsx | 7 +- src/components/Panels/MainPanel.tsx | 89 ++--- src/contexts/AppLayoutContext.tsx | 99 ++++++ src/pages/_app.tsx | 7 +- src/pages/editor.tsx | 6 +- src/pages/library/[slug].tsx | 25 +- src/redux/appLayoutSlice.ts | 47 --- src/redux/store.ts | 11 - src/tailwind.css | 24 +- 25 files changed, 362 insertions(+), 560 deletions(-) delete mode 100644 public/js/toggleTheme.js create mode 100644 src/contexts/AppLayoutContext.tsx delete mode 100644 src/redux/appLayoutSlice.ts delete mode 100644 src/redux/store.ts diff --git a/README.md b/README.md index c09890a..2a58c9d 100644 --- a/README.md +++ b/README.md @@ -22,5 +22,6 @@ - Support for [Material Icons](https://fonts.google.com/icons) - Framework: [Next.js](https://nextjs.org/) (React) - Multilanguage support -- State Management: [Redux Toolkit](https://redux-toolkit.js.org) +- State Management: [React Context](https://reactjs.org/docs/context.html) + - Persistent app state using LocalStorage - Support for many screen sizes and resolutions diff --git a/package-lock.json b/package-lock.json index b045a6a..69604da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,12 +9,10 @@ "@fontsource/material-icons-rounded": "^4.5.2", "@fontsource/vollkorn": "^4.5.4", "@fontsource/zen-maru-gothic": "^4.5.5", - "@reduxjs/toolkit": "^1.7.2", "markdown-to-jsx": "^7.1.6", "next": "^12.1.0", "react": "17.0.2", "react-dom": "17.0.2", - "react-redux": "^7.2.6", "react-swipeable": "^6.2.0", "react-tooltip": "^4.2.21", "turndown": "^7.1.1" @@ -139,6 +137,7 @@ "version": "7.17.2", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz", "integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==", + "dev": true, "dependencies": { "regenerator-runtime": "^0.13.4" }, @@ -442,29 +441,6 @@ "node": ">= 8" } }, - "node_modules/@reduxjs/toolkit": { - "version": "1.7.2", - "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.7.2.tgz", - "integrity": "sha512-wwr3//Ar8ZhM9bS58O+HCIaMlR4Y6SNHfuszz9hKnQuFIKvwaL3Kmjo6fpDKUOjo4Lv54Yi299ed8rofCJ/Vjw==", - "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.0.0-beta", - "react-redux": "^7.2.1 || ^8.0.0-beta" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-redux": { - "optional": true - } - } - }, "node_modules/@rushstack/eslint-patch": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz", @@ -485,15 +461,6 @@ "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || insiders" } }, - "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/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", @@ -515,33 +482,25 @@ "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==" + "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==", + "dev": true }, "node_modules/@types/react": { "version": "17.0.39", "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.39.tgz", "integrity": "sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==", + "dev": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", "csstype": "^3.0.2" } }, - "node_modules/@types/react-redux": { - "version": "7.1.22", - "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.22.tgz", - "integrity": "sha512-GxIA1kM7ClU73I6wg9IRTVwSO9GS+SAKZKe0Enj+82HMU6aoESFU2HNAdNi3+J53IaOHPiUfT3kSG4L828joDQ==", - "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/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", + "dev": true }, "node_modules/@typescript-eslint/parser": { "version": "5.12.0", @@ -1123,7 +1082,8 @@ "node_modules/csstype": { "version": "3.0.10", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz", - "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==" + "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==", + "dev": true }, "node_modules/damerau-levenshtein": { "version": "1.0.8", @@ -2034,14 +1994,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "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/ignore": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz", @@ -2051,15 +2003,6 @@ "node": ">= 4" } }, - "node_modules/immer": { - "version": "9.0.12", - "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.12.tgz", - "integrity": "sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/immer" - } - }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -3116,35 +3059,6 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, - "node_modules/react-redux": { - "version": "7.2.6", - "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz", - "integrity": "sha512-10RPdsz0UUrRL1NZE0ejTkucnclYSgXp5q+tB5SWx2qeG2ZJQJyymgAhwKy73yiL/13btfB6fPr+rgbMAaZIAQ==", - "dependencies": { - "@babel/runtime": "^7.15.4", - "@types/react-redux": "^7.1.20", - "hoist-non-react-statics": "^3.3.2", - "loose-envify": "^1.4.0", - "prop-types": "^15.7.2", - "react-is": "^17.0.2" - }, - "peerDependencies": { - "react": "^16.8.3 || ^17" - }, - "peerDependenciesMeta": { - "react-dom": { - "optional": true - }, - "react-native": { - "optional": true - } - } - }, - "node_modules/react-redux/node_modules/react-is": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", - "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" - }, "node_modules/react-swipeable": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-6.2.0.tgz", @@ -3181,26 +3095,11 @@ "node": ">=8.10.0" } }, - "node_modules/redux": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz", - "integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==", - "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/regenerator-runtime": { "version": "0.13.9", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", - "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==", + "dev": true }, "node_modules/regexp.prototype.flags": { "version": "1.4.1", @@ -3230,11 +3129,6 @@ "url": "https://github.com/sponsors/mysticatea" } }, - "node_modules/reselect": { - "version": "4.1.5", - "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.5.tgz", - "integrity": "sha512-uVdlz8J7OO+ASpBYoz1Zypgx0KasCY20H+N8JD13oUMtPvSHQuscrHop4KbXrbsBcdB9Ds7lVK7eRkBIfO43vQ==" - }, "node_modules/resolve": { "version": "1.22.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz", @@ -3857,6 +3751,7 @@ "version": "7.17.2", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz", "integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==", + "dev": true, "requires": { "regenerator-runtime": "^0.13.4" } @@ -4039,17 +3934,6 @@ "fastq": "^1.6.0" } }, - "@reduxjs/toolkit": { - "version": "1.7.2", - "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.7.2.tgz", - "integrity": "sha512-wwr3//Ar8ZhM9bS58O+HCIaMlR4Y6SNHfuszz9hKnQuFIKvwaL3Kmjo6fpDKUOjo4Lv54Yi299ed8rofCJ/Vjw==", - "requires": { - "immer": "^9.0.7", - "redux": "^4.1.2", - "redux-thunk": "^2.4.1", - "reselect": "^4.1.5" - } - }, "@rushstack/eslint-patch": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz", @@ -4067,15 +3951,6 @@ "lodash.merge": "^4.6.2" } }, - "@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/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", @@ -4097,33 +3972,25 @@ "@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==" + "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==", + "dev": true }, "@types/react": { "version": "17.0.39", "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.39.tgz", "integrity": "sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==", + "dev": true, "requires": { "@types/prop-types": "*", "@types/scheduler": "*", "csstype": "^3.0.2" } }, - "@types/react-redux": { - "version": "7.1.22", - "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.22.tgz", - "integrity": "sha512-GxIA1kM7ClU73I6wg9IRTVwSO9GS+SAKZKe0Enj+82HMU6aoESFU2HNAdNi3+J53IaOHPiUfT3kSG4L828joDQ==", - "requires": { - "@types/hoist-non-react-statics": "^3.3.0", - "@types/react": "*", - "hoist-non-react-statics": "^3.3.0", - "redux": "^4.0.0" - } - }, "@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", + "dev": true }, "@typescript-eslint/parser": { "version": "5.12.0", @@ -4518,7 +4385,8 @@ "csstype": { "version": "3.0.10", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz", - "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==" + "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==", + "dev": true }, "damerau-levenshtein": { "version": "1.0.8", @@ -5217,25 +5085,12 @@ "has-symbols": "^1.0.2" } }, - "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" - } - }, "ignore": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz", "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==", "dev": true }, - "immer": { - "version": "9.0.12", - "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.12.tgz", - "integrity": "sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA==" - }, "import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -5964,26 +5819,6 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, - "react-redux": { - "version": "7.2.6", - "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz", - "integrity": "sha512-10RPdsz0UUrRL1NZE0ejTkucnclYSgXp5q+tB5SWx2qeG2ZJQJyymgAhwKy73yiL/13btfB6fPr+rgbMAaZIAQ==", - "requires": { - "@babel/runtime": "^7.15.4", - "@types/react-redux": "^7.1.20", - "hoist-non-react-statics": "^3.3.2", - "loose-envify": "^1.4.0", - "prop-types": "^15.7.2", - "react-is": "^17.0.2" - }, - "dependencies": { - "react-is": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", - "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" - } - } - }, "react-swipeable": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-6.2.0.tgz", @@ -6008,24 +5843,11 @@ "picomatch": "^2.2.1" } }, - "redux": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz", - "integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==", - "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": {} - }, "regenerator-runtime": { "version": "0.13.9", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", - "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==", + "dev": true }, "regexp.prototype.flags": { "version": "1.4.1", @@ -6043,11 +5865,6 @@ "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==", "dev": true }, - "reselect": { - "version": "4.1.5", - "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.5.tgz", - "integrity": "sha512-uVdlz8J7OO+ASpBYoz1Zypgx0KasCY20H+N8JD13oUMtPvSHQuscrHop4KbXrbsBcdB9Ds7lVK7eRkBIfO43vQ==" - }, "resolve": { "version": "1.22.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz", diff --git a/package.json b/package.json index 74bc564..8bb6374 100644 --- a/package.json +++ b/package.json @@ -12,12 +12,10 @@ "@fontsource/material-icons-rounded": "^4.5.2", "@fontsource/vollkorn": "^4.5.4", "@fontsource/zen-maru-gothic": "^4.5.5", - "@reduxjs/toolkit": "^1.7.2", "markdown-to-jsx": "^7.1.6", "next": "^12.1.0", "react": "17.0.2", "react-dom": "17.0.2", - "react-redux": "^7.2.6", "react-swipeable": "^6.2.0", "react-tooltip": "^4.2.21", "turndown": "^7.1.1" diff --git a/public/js/toggleTheme.js b/public/js/toggleTheme.js deleted file mode 100644 index fb4997b..0000000 --- a/public/js/toggleTheme.js +++ /dev/null @@ -1,29 +0,0 @@ -function applyTheme() { - if (!("theme" in localStorage)) { - if (window.matchMedia("(prefers-color-scheme: dark)").matches) { - localStorage.theme = "dark"; - } else { - localStorage.theme = "light"; - } - } - - if (localStorage.theme === "dark") { - document.documentElement.classList.add("dark"); - document.querySelector("#themeButtonIcon").innerHTML = "light_mode"; - } else { - document.documentElement.classList.remove("dark"); - document.querySelector("#themeButtonIcon").innerHTML = "dark_mode"; - } -} - -function toggleTheme() { - if (localStorage.theme === "dark") { - localStorage.theme = "light"; - } else { - localStorage.theme = "dark"; - } - applyTheme(); -} - -applyTheme(); -document.querySelector("#themeButton").onclick = () => toggleTheme(); diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 8a4bd8c..b8c8541 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -6,17 +6,8 @@ import { useRouter } from "next/router"; import Button from "components/Button"; import { prettyLanguage } from "queries/helpers"; import { useMediaCoarse, useMediaMobile } from "hooks/useMediaQuery"; - -import { useSelector, useDispatch } from "react-redux"; -import { - setMainPanelOpen, - setLanguagePanelOpen, - setSubPanelOpen, - setMainPanelReduced, -} from "redux/appLayoutSlice"; -import { RootState } from "redux/store"; import ReactTooltip from "react-tooltip"; -import Script from "next/script"; +import { useAppLayout } from "contexts/AppLayoutContext"; type AppLayoutProps = { subPanel?: React.ReactNode; @@ -29,208 +20,203 @@ type AppLayoutProps = { export default function AppLayout(props: AppLayoutProps): JSX.Element { const titlePrefix = "Accord’s Library"; const router = useRouter(); - const dispatch = useDispatch(); const isMobile = useMediaMobile(); const isCoarse = useMediaCoarse(); - - const languagePanelOpen = useSelector( - (state: RootState) => state.appLayout.languagePanelOpen - ); - const mainPanelOpen = useSelector( - (state: RootState) => state.appLayout.mainPanelOpen - ); - const mainPanelReduced = useSelector( - (state: RootState) => state.appLayout.mainPanelReduced - ); - const subPanelOpen = useSelector( - (state: RootState) => state.appLayout.subPanelOpen - ); + const appLayout = useAppLayout(); const sensibilitySwipe = 1.1; const handlers = useSwipeable({ onSwipedLeft: (SwipeEventData) => { if (SwipeEventData.velocity < sensibilitySwipe) return; - if (mainPanelOpen) { - dispatch(setMainPanelOpen(false)); + if (appLayout.mainPanelOpen) { + appLayout.setMainPanelOpen(false); } else if (props.subPanel && props.contentPanel) { - dispatch(setSubPanelOpen(true)); + appLayout.setSubPanelOpen(true); } }, onSwipedRight: (SwipeEventData) => { if (SwipeEventData.velocity < sensibilitySwipe) return; - if (subPanelOpen) { - dispatch(setSubPanelOpen(false)); + if (appLayout.subPanelOpen) { + appLayout.setSubPanelOpen(false); } else { - dispatch(setMainPanelOpen(true)); + appLayout.setMainPanelOpen(true); } }, }); const mainPanelClass = `fixed desktop:left-0 desktop:top-0 desktop:bottom-0 ${ - mainPanelReduced ? "desktop:w-[6rem]" : "desktop:w-[20rem]" + appLayout.mainPanelReduced ? "desktop:w-[6rem]" : "desktop:w-[20rem]" }`; const subPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:w-[20rem] ${ - mainPanelReduced ? " desktop:left-[6rem]" : "desktop:left-[20rem]" + appLayout.mainPanelReduced ? " desktop:left-[6rem]" : "desktop:left-[20rem]" }`; let contentPanelClass = ""; if (props.subPanel) { contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${ - mainPanelReduced ? "desktop:left-[26rem]" : "desktop:left-[40rem]" + appLayout.mainPanelReduced + ? "desktop:left-[26rem]" + : "desktop:left-[40rem]" }`; } else if (props.contentPanel) { contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${ - mainPanelReduced ? "desktop:left-[6rem]" : "desktop:left-[20rem]" + appLayout.mainPanelReduced + ? "desktop:left-[6rem]" + : "desktop:left-[20rem]" }`; } const turnSubIntoContent = props.subPanel && !props.contentPanel; return ( -
- - - {props.title ? `${titlePrefix} - ${props.title}` : titlePrefix} - - - - {/* Navbar */} -
- dispatch(setMainPanelOpen(true))} - > - menu - -

{props.title}

- dispatch(setSubPanelOpen(true))} - > - {props.subPanel && !turnSubIntoContent - ? props.subPanelIcon - ? props.subPanelIcon - : "tune" - : ""} - -
- - {/* Content panel */} +
- {props.contentPanel ? ( - props.contentPanel - ) : ( -
-
-

❮

-

- Select one of the options in the sidebar -

-
-
- )} -
+ + + {props.title ? `${titlePrefix} - ${props.title}` : titlePrefix} + + - {/* Background when navbar is opened */} -
+ appLayout.setMainPanelOpen(true)} + > + menu + +

{props.title}

+ appLayout.setSubPanelOpen(true)} + > + {props.subPanel && !turnSubIntoContent + ? props.subPanelIcon + ? props.subPanelIcon + : "tune" + : ""} + +
+ + {/* Content panel */} +
+ {props.contentPanel ? ( + props.contentPanel + ) : ( +
+
+

❮

+

+ Select one of the options in the sidebar +

+
+
+ )} +
+ + {/* Background when navbar is opened */} +
{ - dispatch(setMainPanelOpen(false)); - dispatch(setSubPanelOpen(false)); - }} - >
+ onClick={() => { + appLayout.setMainPanelOpen(false); + appLayout.setSubPanelOpen(false); + }} + >
- {/* Sub panel */} - {props.subPanel ? ( -
- {props.subPanel} -
- ) : ( - "" - )} + > + {props.subPanel} +
+ ) : ( + "" + )} - {/* Main panel */} -
- -
- - {/* Main panel minimize button*/} -
dispatch(setMainPanelReduced(!mainPanelReduced))} - > - -
- - {/* Language selection background */} -
{ - dispatch(setLanguagePanelOpen(false)); - }} - > + {/* Main panel */}
-

Select a language

-
- {router.locales?.sort().map((locale) => ( - - ))} + +
+ + {/* Main panel minimize button*/} +
+ appLayout.setMainPanelReduced(!appLayout.mainPanelReduced) + } + > + +
+ + {/* Language selection background */} +
{ + appLayout.setLanguagePanelOpen(false); + }} + > +
+

Select a language

+
+ {router.locales?.sort().map((locale) => ( + + ))} +
+ +
- - - -