From 2314dbd2df0b752d6c270048fb6cd4c45373624d Mon Sep 17 00:00:00 2001 From: Patrick Arminio Date: Thu, 4 Apr 2024 16:30:42 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=86=99=20Update=20React=20Query=20to=20Ta?= =?UTF-8?q?nStack=20Query=20(#1153)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package-lock.json | 448 +++--------------- frontend/package.json | 5 +- frontend/src/components/Admin/AddUser.tsx | 33 +- frontend/src/components/Admin/EditUser.tsx | 30 +- .../src/components/Common/DeleteAlert.tsx | 9 +- frontend/src/components/Common/Sidebar.tsx | 4 +- .../src/components/Common/SidebarItems.tsx | 4 +- frontend/src/components/Items/AddItem.tsx | 33 +- frontend/src/components/Items/EditItem.tsx | 30 +- .../UserSettings/ChangePassword.tsx | 24 +- .../UserSettings/DeleteConfirmation.tsx | 42 +- .../UserSettings/UserInformation.tsx | 32 +- frontend/src/hooks/useAuth.ts | 17 +- frontend/src/main.tsx | 2 +- frontend/src/routes/_layout/admin.tsx | 9 +- frontend/src/routes/_layout/index.tsx | 4 +- frontend/src/routes/_layout/items.tsx | 7 +- frontend/src/routes/_layout/settings.tsx | 4 +- frontend/src/routes/reset-password.tsx | 5 +- 19 files changed, 225 insertions(+), 517 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index b18b547..a071cc3 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -12,6 +12,8 @@ "@chakra-ui/react": "2.8.2", "@emotion/react": "11.11.3", "@emotion/styled": "11.11.0", + "@tanstack/react-query": "^5.28.14", + "@tanstack/react-query-devtools": "^5.28.14", "@tanstack/react-router": "1.19.1", "axios": "1.6.2", "form-data": "4.0.0", @@ -19,8 +21,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "7.49.3", - "react-icons": "5.0.1", - "react-query": "3.39.3" + "react-icons": "5.0.1" }, "devDependencies": { "@biomejs/biome": "1.6.1", @@ -2491,6 +2492,55 @@ "url": "https://github.com/sponsors/tannerlinsley" } }, + "node_modules/@tanstack/query-core": { + "version": "5.28.13", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.28.13.tgz", + "integrity": "sha512-C3+CCOcza+mrZ7LglQbjeYEOTEC3LV0VN0eYaIN6GvqAZ8Foegdgch7n6QYPtT4FuLae5ALy+m+ZMEKpD6tMCQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/query-devtools": { + "version": "5.28.10", + "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.28.10.tgz", + "integrity": "sha512-5UN629fKa5/1K/2Pd26gaU7epxRrYiT1gy+V+pW5K6hnf1DeUKK3pANSb2eHKlecjIKIhTwyF7k9XdyE2gREvQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/react-query": { + "version": "5.28.14", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.28.14.tgz", + "integrity": "sha512-cZqt03Igb3I9tM72qNX5TAAmeYl75Z+k4Mv92VkXIXc2hCrv0fIywd7GN3JV1BBJl4mr7Cc+OOKKOPy8sNVOkA==", + "dependencies": { + "@tanstack/query-core": "5.28.13" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^18.0.0" + } + }, + "node_modules/@tanstack/react-query-devtools": { + "version": "5.28.14", + "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.28.14.tgz", + "integrity": "sha512-4CrFBI1O5wibV1ZdGAnBMmTuc7SiShhxWubxRMyIloeEioxs3DQkFbouGBea5nexuwIxAkvhUB8khpPnNjhxMw==", + "dependencies": { + "@tanstack/query-devtools": "5.28.10" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "@tanstack/react-query": "^5.28.14", + "react": "^18.0.0" + } + }, "node_modules/@tanstack/react-router": { "version": "1.19.1", "resolved": "https://registry.npmjs.org/@tanstack/react-router/-/react-router-1.19.1.tgz", @@ -2736,43 +2786,6 @@ "npm": ">=6" } }, - "node_modules/balanced-match": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" - }, - "node_modules/big-integer": { - "version": "1.6.52", - "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz", - "integrity": "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==", - "engines": { - "node": ">=0.6" - } - }, - "node_modules/brace-expansion": { - "version": "1.1.11", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", - "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "dependencies": { - "balanced-match": "^1.0.0", - "concat-map": "0.0.1" - } - }, - "node_modules/broadcast-channel": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz", - "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==", - "dependencies": { - "@babel/runtime": "^7.7.2", - "detect-node": "^2.1.0", - "js-sha3": "0.8.0", - "microseconds": "0.2.0", - "nano-time": "1.0.0", - "oblivious-set": "1.0.0", - "rimraf": "3.0.2", - "unload": "2.2.0" - } - }, "node_modules/callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", @@ -2811,11 +2824,6 @@ "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.0.3.tgz", "integrity": "sha512-nadqwNxghAGTamwIqQSG433W6OADZx2vCo3UXHNrzTRHK/htu+7+L0zhjEoaeaQVNAi3YgqWDv8+tzf0hRfR+A==" }, - "node_modules/concat-map": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" - }, "node_modules/convert-source-map": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", @@ -2881,11 +2889,6 @@ "node": ">=0.4.0" } }, - "node_modules/detect-node": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz", - "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==" - }, "node_modules/detect-node-es": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz", @@ -3046,11 +3049,6 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" }, - "node_modules/fs.realpath": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" - }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -3081,25 +3079,6 @@ "node": ">=6" } }, - "node_modules/glob": { - "version": "7.2.3", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", - "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", - "dependencies": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.1.1", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" - }, - "engines": { - "node": "*" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, "node_modules/goober": { "version": "2.1.14", "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz", @@ -3164,20 +3143,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/inflight": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", - "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", - "dependencies": { - "once": "^1.3.0", - "wrappy": "1" - } - }, - "node_modules/inherits": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" - }, "node_modules/invariant": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", @@ -3202,11 +3167,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/js-sha3": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz", - "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==" - }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -3250,20 +3210,6 @@ "loose-envify": "cli.js" } }, - "node_modules/match-sorter": { - "version": "6.3.4", - "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.4.tgz", - "integrity": "sha512-jfZW7cWS5y/1xswZo8VBOdudUiSd9nifYRWphc9M5D/ee4w4AoXLgBEdRbgVaxbMuagBPeUC5y2Hi8DO6o9aDg==", - "dependencies": { - "@babel/runtime": "^7.23.8", - "remove-accents": "0.5.0" - } - }, - "node_modules/microseconds": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz", - "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==" - }, "node_modules/mime-db": { "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", @@ -3283,17 +3229,6 @@ "node": ">= 0.6" } }, - "node_modules/minimatch": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", - "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", - "dependencies": { - "brace-expansion": "^1.1.7" - }, - "engines": { - "node": "*" - } - }, "node_modules/minimist": { "version": "1.2.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", @@ -3303,14 +3238,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/nano-time": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz", - "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==", - "dependencies": { - "big-integer": "^1.6.16" - } - }, "node_modules/nanoid": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", @@ -3343,19 +3270,6 @@ "node": ">=0.10.0" } }, - "node_modules/oblivious-set": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz", - "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==" - }, - "node_modules/once": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", - "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", - "dependencies": { - "wrappy": "1" - } - }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -3384,14 +3298,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/path-is-absolute": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", - "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", @@ -3559,31 +3465,6 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, - "node_modules/react-query": { - "version": "3.39.3", - "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz", - "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==", - "dependencies": { - "@babel/runtime": "^7.5.5", - "broadcast-channel": "^3.4.1", - "match-sorter": "^6.0.2" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/tannerlinsley" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react-dom": { - "optional": true - }, - "react-native": { - "optional": true - } - } - }, "node_modules/react-remove-scroll": { "version": "2.5.7", "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz", @@ -3656,11 +3537,6 @@ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" }, - "node_modules/remove-accents": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz", - "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==" - }, "node_modules/resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", @@ -3685,20 +3561,6 @@ "node": ">=4" } }, - "node_modules/rimraf": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", - "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", - "dependencies": { - "glob": "^7.1.3" - }, - "bin": { - "rimraf": "bin.js" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, "node_modules/rollup": { "version": "4.6.1", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.6.1.tgz", @@ -3829,15 +3691,6 @@ "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", "dev": true }, - "node_modules/unload": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz", - "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==", - "dependencies": { - "@babel/runtime": "^7.6.2", - "detect-node": "^2.0.4" - } - }, "node_modules/use-callback-ref": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.1.tgz", @@ -3948,11 +3801,6 @@ "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==", "dev": true }, - "node_modules/wrappy": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" - }, "node_modules/yaml": { "version": "1.10.2", "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", @@ -5601,6 +5449,32 @@ "resolved": "https://registry.npmjs.org/@tanstack/history/-/history-1.15.13.tgz", "integrity": "sha512-ToaeMtK5S4YaxCywAlYexc7KPFN0esjyTZ4vXzJhXEWAkro9iHgh7m/4ozPJb7oTo65WkHWX0W9GjcZbInSD8w==" }, + "@tanstack/query-core": { + "version": "5.28.13", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.28.13.tgz", + "integrity": "sha512-C3+CCOcza+mrZ7LglQbjeYEOTEC3LV0VN0eYaIN6GvqAZ8Foegdgch7n6QYPtT4FuLae5ALy+m+ZMEKpD6tMCQ==" + }, + "@tanstack/query-devtools": { + "version": "5.28.10", + "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.28.10.tgz", + "integrity": "sha512-5UN629fKa5/1K/2Pd26gaU7epxRrYiT1gy+V+pW5K6hnf1DeUKK3pANSb2eHKlecjIKIhTwyF7k9XdyE2gREvQ==" + }, + "@tanstack/react-query": { + "version": "5.28.14", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.28.14.tgz", + "integrity": "sha512-cZqt03Igb3I9tM72qNX5TAAmeYl75Z+k4Mv92VkXIXc2hCrv0fIywd7GN3JV1BBJl4mr7Cc+OOKKOPy8sNVOkA==", + "requires": { + "@tanstack/query-core": "5.28.13" + } + }, + "@tanstack/react-query-devtools": { + "version": "5.28.14", + "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.28.14.tgz", + "integrity": "sha512-4CrFBI1O5wibV1ZdGAnBMmTuc7SiShhxWubxRMyIloeEioxs3DQkFbouGBea5nexuwIxAkvhUB8khpPnNjhxMw==", + "requires": { + "@tanstack/query-devtools": "5.28.10" + } + }, "@tanstack/react-router": { "version": "1.19.1", "resolved": "https://registry.npmjs.org/@tanstack/react-router/-/react-router-1.19.1.tgz", @@ -5788,40 +5662,6 @@ "resolve": "^1.19.0" } }, - "balanced-match": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" - }, - "big-integer": { - "version": "1.6.52", - "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz", - "integrity": "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==" - }, - "brace-expansion": { - "version": "1.1.11", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", - "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "requires": { - "balanced-match": "^1.0.0", - "concat-map": "0.0.1" - } - }, - "broadcast-channel": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz", - "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==", - "requires": { - "@babel/runtime": "^7.7.2", - "detect-node": "^2.1.0", - "js-sha3": "0.8.0", - "microseconds": "0.2.0", - "nano-time": "1.0.0", - "oblivious-set": "1.0.0", - "rimraf": "3.0.2", - "unload": "2.2.0" - } - }, "callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", @@ -5851,11 +5691,6 @@ "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.0.3.tgz", "integrity": "sha512-nadqwNxghAGTamwIqQSG433W6OADZx2vCo3UXHNrzTRHK/htu+7+L0zhjEoaeaQVNAi3YgqWDv8+tzf0hRfR+A==" }, - "concat-map": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" - }, "convert-source-map": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", @@ -5908,11 +5743,6 @@ "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==" }, - "detect-node": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz", - "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==" - }, "detect-node-es": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz", @@ -6030,11 +5860,6 @@ } } }, - "fs.realpath": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" - }, "fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -6052,19 +5877,6 @@ "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz", "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==" }, - "glob": { - "version": "7.2.3", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", - "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", - "requires": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.1.1", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" - } - }, "goober": { "version": "2.1.14", "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz", @@ -6110,20 +5922,6 @@ "resolve-from": "^4.0.0" } }, - "inflight": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", - "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", - "requires": { - "once": "^1.3.0", - "wrappy": "1" - } - }, - "inherits": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" - }, "invariant": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", @@ -6145,11 +5943,6 @@ "hasown": "^2.0.0" } }, - "js-sha3": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz", - "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==" - }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -6187,20 +5980,6 @@ "js-tokens": "^3.0.0 || ^4.0.0" } }, - "match-sorter": { - "version": "6.3.4", - "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.4.tgz", - "integrity": "sha512-jfZW7cWS5y/1xswZo8VBOdudUiSd9nifYRWphc9M5D/ee4w4AoXLgBEdRbgVaxbMuagBPeUC5y2Hi8DO6o9aDg==", - "requires": { - "@babel/runtime": "^7.23.8", - "remove-accents": "0.5.0" - } - }, - "microseconds": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz", - "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==" - }, "mime-db": { "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", @@ -6214,28 +5993,12 @@ "mime-db": "1.52.0" } }, - "minimatch": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", - "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", - "requires": { - "brace-expansion": "^1.1.7" - } - }, "minimist": { "version": "1.2.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", "dev": true }, - "nano-time": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz", - "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==", - "requires": { - "big-integer": "^1.6.16" - } - }, "nanoid": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", @@ -6253,19 +6016,6 @@ "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==" }, - "oblivious-set": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz", - "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==" - }, - "once": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", - "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", - "requires": { - "wrappy": "1" - } - }, "parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -6285,11 +6035,6 @@ "lines-and-columns": "^1.1.6" } }, - "path-is-absolute": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", - "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==" - }, "path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", @@ -6398,16 +6143,6 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, - "react-query": { - "version": "3.39.3", - "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz", - "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==", - "requires": { - "@babel/runtime": "^7.5.5", - "broadcast-channel": "^3.4.1", - "match-sorter": "^6.0.2" - } - }, "react-remove-scroll": { "version": "2.5.7", "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz", @@ -6444,11 +6179,6 @@ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" }, - "remove-accents": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz", - "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==" - }, "resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", @@ -6464,14 +6194,6 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==" }, - "rimraf": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", - "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", - "requires": { - "glob": "^7.1.3" - } - }, "rollup": { "version": "4.6.1", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.6.1.tgz", @@ -6567,15 +6289,6 @@ "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", "dev": true }, - "unload": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz", - "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==", - "requires": { - "@babel/runtime": "^7.6.2", - "detect-node": "^2.0.4" - } - }, "use-callback-ref": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.1.tgz", @@ -6617,11 +6330,6 @@ "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==", "dev": true }, - "wrappy": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" - }, "yaml": { "version": "1.10.2", "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index 25df330..f8fdaa1 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -15,6 +15,8 @@ "@chakra-ui/react": "2.8.2", "@emotion/react": "11.11.3", "@emotion/styled": "11.11.0", + "@tanstack/react-query": "^5.28.14", + "@tanstack/react-query-devtools": "^5.28.14", "@tanstack/react-router": "1.19.1", "axios": "1.6.2", "form-data": "4.0.0", @@ -22,8 +24,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "7.49.3", - "react-icons": "5.0.1", - "react-query": "3.39.3" + "react-icons": "5.0.1" }, "devDependencies": { "@biomejs/biome": "1.6.1", diff --git a/frontend/src/components/Admin/AddUser.tsx b/frontend/src/components/Admin/AddUser.tsx index 7339f8b..00bb582 100644 --- a/frontend/src/components/Admin/AddUser.tsx +++ b/frontend/src/components/Admin/AddUser.tsx @@ -15,7 +15,7 @@ import { ModalOverlay, } from "@chakra-ui/react" import { type SubmitHandler, useForm } from "react-hook-form" -import { useMutation, useQueryClient } from "react-query" +import { useMutation, useQueryClient } from "@tanstack/react-query" import { type UserCreate, UsersService } from "../../client" import type { ApiError } from "../../client/core/ApiError" @@ -53,23 +53,22 @@ const AddUser = ({ isOpen, onClose }: AddUserProps) => { }, }) - const mutation = useMutation( - (data: UserCreate) => UsersService.createUser({ requestBody: data }), - { - onSuccess: () => { - showToast("Success!", "User created successfully.", "success") - reset() - onClose() - }, - onError: (err: ApiError) => { - const errDetail = (err.body as any)?.detail - showToast("Something went wrong.", `${errDetail}`, "error") - }, - onSettled: () => { - queryClient.invalidateQueries("users") - }, + const mutation = useMutation({ + mutationFn: (data: UserCreate) => + UsersService.createUser({ requestBody: data }), + onSuccess: () => { + showToast("Success!", "User created successfully.", "success") + reset() + onClose() }, - ) + onError: (err: ApiError) => { + const errDetail = (err.body as any)?.detail + showToast("Something went wrong.", `${errDetail}`, "error") + }, + onSettled: () => { + queryClient.invalidateQueries({ queryKey: ["users"] }) + }, + }) const onSubmit: SubmitHandler = (data) => { mutation.mutate(data) diff --git a/frontend/src/components/Admin/EditUser.tsx b/frontend/src/components/Admin/EditUser.tsx index b6d4d18..a25ddbc 100644 --- a/frontend/src/components/Admin/EditUser.tsx +++ b/frontend/src/components/Admin/EditUser.tsx @@ -15,7 +15,7 @@ import { ModalOverlay, } from "@chakra-ui/react" import { type SubmitHandler, useForm } from "react-hook-form" -import { useMutation, useQueryClient } from "react-query" +import { useMutation, useQueryClient } from "@tanstack/react-query" import { type ApiError, @@ -52,23 +52,21 @@ const EditUser = ({ user, isOpen, onClose }: EditUserProps) => { defaultValues: user, }) - const mutation = useMutation( - (data: UserUpdateForm) => + const mutation = useMutation({ + mutationFn: (data: UserUpdateForm) => UsersService.updateUser({ userId: user.id, requestBody: data }), - { - onSuccess: () => { - showToast("Success!", "User updated successfully.", "success") - onClose() - }, - onError: (err: ApiError) => { - const errDetail = (err.body as any)?.detail - showToast("Something went wrong.", `${errDetail}`, "error") - }, - onSettled: () => { - queryClient.invalidateQueries("users") - }, + onSuccess: () => { + showToast("Success!", "User updated successfully.", "success") + onClose() }, - ) + onError: (err: ApiError) => { + const errDetail = (err.body as any)?.detail + showToast("Something went wrong.", `${errDetail}`, "error") + }, + onSettled: () => { + queryClient.invalidateQueries({ queryKey: ["users"] }) + }, + }) const onSubmit: SubmitHandler = async (data) => { if (data.password === "") { diff --git a/frontend/src/components/Common/DeleteAlert.tsx b/frontend/src/components/Common/DeleteAlert.tsx index c8b8e18..15e8cf7 100644 --- a/frontend/src/components/Common/DeleteAlert.tsx +++ b/frontend/src/components/Common/DeleteAlert.tsx @@ -9,7 +9,7 @@ import { } from "@chakra-ui/react" import React from "react" import { useForm } from "react-hook-form" -import { useMutation, useQueryClient } from "react-query" +import { useMutation, useQueryClient } from "@tanstack/react-query" import { ItemsService, UsersService } from "../../client" import useCustomToast from "../../hooks/useCustomToast" @@ -40,7 +40,8 @@ const Delete = ({ type, id, isOpen, onClose }: DeleteProps) => { } } - const mutation = useMutation(deleteEntity, { + const mutation = useMutation({ + mutationFn: deleteEntity, onSuccess: () => { showToast( "Success", @@ -57,7 +58,9 @@ const Delete = ({ type, id, isOpen, onClose }: DeleteProps) => { ) }, onSettled: () => { - queryClient.invalidateQueries(type === "Item" ? "items" : "users") + queryClient.invalidateQueries({ + queryKey: [type === "Item" ? "items" : "users"], + }) }, }) diff --git a/frontend/src/components/Common/Sidebar.tsx b/frontend/src/components/Common/Sidebar.tsx index 90a0c06..d6650ab 100644 --- a/frontend/src/components/Common/Sidebar.tsx +++ b/frontend/src/components/Common/Sidebar.tsx @@ -13,7 +13,7 @@ import { useDisclosure, } from "@chakra-ui/react" import { FiLogOut, FiMenu } from "react-icons/fi" -import { useQueryClient } from "react-query" +import { useQueryClient } from "@tanstack/react-query" import Logo from "../../assets/images/fastapi-logo.svg" import type { UserOut } from "../../client" @@ -25,7 +25,7 @@ const Sidebar = () => { const bgColor = useColorModeValue("ui.light", "ui.dark") const textColor = useColorModeValue("ui.dark", "ui.light") const secBgColor = useColorModeValue("ui.secondary", "ui.darkSlate") - const currentUser = queryClient.getQueryData("currentUser") + const currentUser = queryClient.getQueryData(["currentUser"]) const { isOpen, onOpen, onClose } = useDisclosure() const { logout } = useAuth() diff --git a/frontend/src/components/Common/SidebarItems.tsx b/frontend/src/components/Common/SidebarItems.tsx index 361318a..4063273 100644 --- a/frontend/src/components/Common/SidebarItems.tsx +++ b/frontend/src/components/Common/SidebarItems.tsx @@ -1,7 +1,7 @@ import { Box, Flex, Icon, Text, useColorModeValue } from "@chakra-ui/react" import { Link } from "@tanstack/react-router" import { FiBriefcase, FiHome, FiSettings, FiUsers } from "react-icons/fi" -import { useQueryClient } from "react-query" +import { useQueryClient } from "@tanstack/react-query" import type { UserOut } from "../../client" @@ -19,7 +19,7 @@ const SidebarItems = ({ onClose }: SidebarItemsProps) => { const queryClient = useQueryClient() const textColor = useColorModeValue("ui.main", "ui.light") const bgActive = useColorModeValue("#E2E8F0", "#4A5568") - const currentUser = queryClient.getQueryData("currentUser") + const currentUser = queryClient.getQueryData(["currentUser"]) const finalItems = currentUser?.is_superuser ? [...items, { icon: FiUsers, title: "Admin", path: "/admin" }] diff --git a/frontend/src/components/Items/AddItem.tsx b/frontend/src/components/Items/AddItem.tsx index 6a0df58..dfd5bf4 100644 --- a/frontend/src/components/Items/AddItem.tsx +++ b/frontend/src/components/Items/AddItem.tsx @@ -13,7 +13,7 @@ import { ModalOverlay, } from "@chakra-ui/react" import { type SubmitHandler, useForm } from "react-hook-form" -import { useMutation, useQueryClient } from "react-query" +import { useMutation, useQueryClient } from "@tanstack/react-query" import { type ApiError, type ItemCreate, ItemsService } from "../../client" import useCustomToast from "../../hooks/useCustomToast" @@ -40,23 +40,22 @@ const AddItem = ({ isOpen, onClose }: AddItemProps) => { }, }) - const mutation = useMutation( - (data: ItemCreate) => ItemsService.createItem({ requestBody: data }), - { - onSuccess: () => { - showToast("Success!", "Item created successfully.", "success") - reset() - onClose() - }, - onError: (err: ApiError) => { - const errDetail = (err.body as any)?.detail - showToast("Something went wrong.", `${errDetail}`, "error") - }, - onSettled: () => { - queryClient.invalidateQueries("items") - }, + const mutation = useMutation({ + mutationFn: (data: ItemCreate) => + ItemsService.createItem({ requestBody: data }), + onSuccess: () => { + showToast("Success!", "Item created successfully.", "success") + reset() + onClose() }, - ) + onError: (err: ApiError) => { + const errDetail = (err.body as any)?.detail + showToast("Something went wrong.", `${errDetail}`, "error") + }, + onSettled: () => { + queryClient.invalidateQueries({ queryKey: ["items"] }) + }, + }) const onSubmit: SubmitHandler = (data) => { mutation.mutate(data) diff --git a/frontend/src/components/Items/EditItem.tsx b/frontend/src/components/Items/EditItem.tsx index db83114..d3f0896 100644 --- a/frontend/src/components/Items/EditItem.tsx +++ b/frontend/src/components/Items/EditItem.tsx @@ -13,7 +13,7 @@ import { ModalOverlay, } from "@chakra-ui/react" import { type SubmitHandler, useForm } from "react-hook-form" -import { useMutation, useQueryClient } from "react-query" +import { useMutation, useQueryClient } from "@tanstack/react-query" import { type ApiError, @@ -43,23 +43,21 @@ const EditItem = ({ item, isOpen, onClose }: EditItemProps) => { defaultValues: item, }) - const mutation = useMutation( - (data: ItemUpdate) => + const mutation = useMutation({ + mutationFn: (data: ItemUpdate) => ItemsService.updateItem({ id: item.id, requestBody: data }), - { - onSuccess: () => { - showToast("Success!", "Item updated successfully.", "success") - onClose() - }, - onError: (err: ApiError) => { - const errDetail = (err.body as any)?.detail - showToast("Something went wrong.", `${errDetail}`, "error") - }, - onSettled: () => { - queryClient.invalidateQueries("items") - }, + onSuccess: () => { + showToast("Success!", "Item updated successfully.", "success") + onClose() }, - ) + onError: (err: ApiError) => { + const errDetail = (err.body as any)?.detail + showToast("Something went wrong.", `${errDetail}`, "error") + }, + onSettled: () => { + queryClient.invalidateQueries({ queryKey: ["items"] }) + }, + }) const onSubmit: SubmitHandler = async (data) => { mutation.mutate(data) diff --git a/frontend/src/components/UserSettings/ChangePassword.tsx b/frontend/src/components/UserSettings/ChangePassword.tsx index 4e8b7ea..0b08456 100644 --- a/frontend/src/components/UserSettings/ChangePassword.tsx +++ b/frontend/src/components/UserSettings/ChangePassword.tsx @@ -10,7 +10,7 @@ import { useColorModeValue, } from "@chakra-ui/react" import { type SubmitHandler, useForm } from "react-hook-form" -import { useMutation } from "react-query" +import { useMutation } from "@tanstack/react-query" import { type ApiError, type UpdatePassword, UsersService } from "../../client" import useCustomToast from "../../hooks/useCustomToast" @@ -34,20 +34,18 @@ const ChangePassword = () => { criteriaMode: "all", }) - const mutation = useMutation( - (data: UpdatePassword) => + const mutation = useMutation({ + mutationFn: (data: UpdatePassword) => UsersService.updatePasswordMe({ requestBody: data }), - { - onSuccess: () => { - showToast("Success!", "Password updated.", "success") - reset() - }, - onError: (err: ApiError) => { - const errDetail = (err.body as any)?.detail - showToast("Something went wrong.", `${errDetail}`, "error") - }, + onSuccess: () => { + showToast("Success!", "Password updated.", "success") + reset() }, - ) + onError: (err: ApiError) => { + const errDetail = (err.body as any)?.detail + showToast("Something went wrong.", `${errDetail}`, "error") + }, + }) const onSubmit: SubmitHandler = async (data) => { mutation.mutate(data) diff --git a/frontend/src/components/UserSettings/DeleteConfirmation.tsx b/frontend/src/components/UserSettings/DeleteConfirmation.tsx index 522805d..3b5a26e 100644 --- a/frontend/src/components/UserSettings/DeleteConfirmation.tsx +++ b/frontend/src/components/UserSettings/DeleteConfirmation.tsx @@ -9,7 +9,7 @@ import { } from "@chakra-ui/react" import React from "react" import { useForm } from "react-hook-form" -import { useMutation, useQueryClient } from "react-query" +import { useMutation, useQueryClient } from "@tanstack/react-query" import { type ApiError, type UserOut, UsersService } from "../../client" import useAuth from "../../hooks/useAuth" @@ -28,30 +28,28 @@ const DeleteConfirmation = ({ isOpen, onClose }: DeleteProps) => { handleSubmit, formState: { isSubmitting }, } = useForm() - const currentUser = queryClient.getQueryData("currentUser") + const currentUser = queryClient.getQueryData(["currentUser"]) const { logout } = useAuth() - const mutation = useMutation( - (id: number) => UsersService.deleteUser({ userId: id }), - { - onSuccess: () => { - showToast( - "Success", - "Your account has been successfully deleted.", - "success", - ) - logout() - onClose() - }, - onError: (err: ApiError) => { - const errDetail = (err.body as any)?.detail - showToast("Something went wrong.", `${errDetail}`, "error") - }, - onSettled: () => { - queryClient.invalidateQueries("currentUser") - }, + const mutation = useMutation({ + mutationFn: (id: number) => UsersService.deleteUser({ userId: id }), + onSuccess: () => { + showToast( + "Success", + "Your account has been successfully deleted.", + "success", + ) + logout() + onClose() }, - ) + onError: (err: ApiError) => { + const errDetail = (err.body as any)?.detail + showToast("Something went wrong.", `${errDetail}`, "error") + }, + onSettled: () => { + queryClient.invalidateQueries({ queryKey: ["currentUser"] }) + }, + }) const onSubmit = async () => { mutation.mutate(currentUser!.id) diff --git a/frontend/src/components/UserSettings/UserInformation.tsx b/frontend/src/components/UserSettings/UserInformation.tsx index 358f258..80141f3 100644 --- a/frontend/src/components/UserSettings/UserInformation.tsx +++ b/frontend/src/components/UserSettings/UserInformation.tsx @@ -13,7 +13,7 @@ import { } from "@chakra-ui/react" import { useState } from "react" import { type SubmitHandler, useForm } from "react-hook-form" -import { useMutation, useQueryClient } from "react-query" +import { useMutation, useQueryClient } from "@tanstack/react-query" import { type ApiError, @@ -50,22 +50,22 @@ const UserInformation = () => { setEditMode(!editMode) } - const mutation = useMutation( - (data: UserUpdateMe) => UsersService.updateUserMe({ requestBody: data }), - { - onSuccess: () => { - showToast("Success!", "User updated successfully.", "success") - }, - onError: (err: ApiError) => { - const errDetail = (err.body as any)?.detail - showToast("Something went wrong.", `${errDetail}`, "error") - }, - onSettled: () => { - queryClient.invalidateQueries("users") - queryClient.invalidateQueries("currentUser") - }, + const mutation = useMutation({ + mutationFn: (data: UserUpdateMe) => + UsersService.updateUserMe({ requestBody: data }), + onSuccess: () => { + showToast("Success!", "User updated successfully.", "success") }, - ) + onError: (err: ApiError) => { + const errDetail = (err.body as any)?.detail + showToast("Something went wrong.", `${errDetail}`, "error") + }, + onSettled: () => { + // TODO: can we do just one call now? + queryClient.invalidateQueries({ queryKey: ["users"] }) + queryClient.invalidateQueries({ queryKey: ["currentUser"] }) + }, + }) const onSubmit: SubmitHandler = async (data) => { mutation.mutate(data) diff --git a/frontend/src/hooks/useAuth.ts b/frontend/src/hooks/useAuth.ts index bdcfc65..db36308 100644 --- a/frontend/src/hooks/useAuth.ts +++ b/frontend/src/hooks/useAuth.ts @@ -1,6 +1,6 @@ import { useNavigate } from "@tanstack/react-router" import { useState } from "react" -import { useMutation, useQuery } from "react-query" +import { useMutation, useQuery } from "@tanstack/react-query" import { type Body_login_login_access_token as AccessToken, @@ -17,13 +17,11 @@ const isLoggedIn = () => { const useAuth = () => { const [error, setError] = useState(null) const navigate = useNavigate() - const { data: user, isLoading } = useQuery( - "currentUser", - UsersService.readUserMe, - { - enabled: isLoggedIn(), - }, - ) + const { data: user, isLoading } = useQuery({ + queryKey: ["currentUser"], + queryFn: UsersService.readUserMe, + enabled: isLoggedIn(), + }) const login = async (data: AccessToken) => { const response = await LoginService.loginAccessToken({ @@ -32,7 +30,8 @@ const useAuth = () => { localStorage.setItem("access_token", response.access_token) } - const loginMutation = useMutation(login, { + const loginMutation = useMutation({ + mutationFn: login, onSuccess: () => { navigate({ to: "/" }) }, diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index ff4ff14..a479e96 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -1,7 +1,7 @@ import { ChakraProvider } from "@chakra-ui/react" import { RouterProvider, createRouter } from "@tanstack/react-router" import ReactDOM from "react-dom/client" -import { QueryClient, QueryClientProvider } from "react-query" +import { QueryClient, QueryClientProvider } from "@tanstack/react-query" import { routeTree } from "./routeTree.gen" import { StrictMode } from "react" diff --git a/frontend/src/routes/_layout/admin.tsx b/frontend/src/routes/_layout/admin.tsx index de79a02..e1f06aa 100644 --- a/frontend/src/routes/_layout/admin.tsx +++ b/frontend/src/routes/_layout/admin.tsx @@ -14,7 +14,7 @@ import { Tr, } from "@chakra-ui/react" import { createFileRoute } from "@tanstack/react-router" -import { useQuery, useQueryClient } from "react-query" +import { useQuery, useQueryClient } from "@tanstack/react-query" import { type UserOut, UsersService } from "../../client" import ActionsMenu from "../../components/Common/ActionsMenu" @@ -28,13 +28,16 @@ export const Route = createFileRoute("/_layout/admin")({ function Admin() { const queryClient = useQueryClient() const showToast = useCustomToast() - const currentUser = queryClient.getQueryData("currentUser") + const currentUser = queryClient.getQueryData(["currentUser"]) const { data: users, isLoading, isError, error, - } = useQuery("users", () => UsersService.readUsers({})) + } = useQuery({ + queryKey: ["users"], + queryFn: () => UsersService.readUsers({}), + }) if (isError) { const errDetail = (error as any).body?.detail diff --git a/frontend/src/routes/_layout/index.tsx b/frontend/src/routes/_layout/index.tsx index 2c99597..72ac91a 100644 --- a/frontend/src/routes/_layout/index.tsx +++ b/frontend/src/routes/_layout/index.tsx @@ -1,6 +1,6 @@ import { Box, Container, Text } from "@chakra-ui/react" import { createFileRoute } from "@tanstack/react-router" -import { useQueryClient } from "react-query" +import { useQueryClient } from "@tanstack/react-query" import type { UserOut } from "../../client" @@ -11,7 +11,7 @@ export const Route = createFileRoute("/_layout/")({ function Dashboard() { const queryClient = useQueryClient() - const currentUser = queryClient.getQueryData("currentUser") + const currentUser = queryClient.getQueryData(["currentUser"]) return ( <> diff --git a/frontend/src/routes/_layout/items.tsx b/frontend/src/routes/_layout/items.tsx index bb0d309..3e4650b 100644 --- a/frontend/src/routes/_layout/items.tsx +++ b/frontend/src/routes/_layout/items.tsx @@ -12,7 +12,7 @@ import { Tr, } from "@chakra-ui/react" import { createFileRoute } from "@tanstack/react-router" -import { useQuery } from "react-query" +import { useQuery } from "@tanstack/react-query" import { ItemsService } from "../../client" import ActionsMenu from "../../components/Common/ActionsMenu" @@ -30,7 +30,10 @@ function Items() { isLoading, isError, error, - } = useQuery("items", () => ItemsService.readItems({})) + } = useQuery({ + queryKey: ["items"], + queryFn: () => ItemsService.readItems({}), + }) if (isError) { const errDetail = (error as any).body?.detail diff --git a/frontend/src/routes/_layout/settings.tsx b/frontend/src/routes/_layout/settings.tsx index 7e830b0..2130536 100644 --- a/frontend/src/routes/_layout/settings.tsx +++ b/frontend/src/routes/_layout/settings.tsx @@ -8,7 +8,7 @@ import { Tabs, } from "@chakra-ui/react" import { createFileRoute } from "@tanstack/react-router" -import { useQueryClient } from "react-query" +import { useQueryClient } from "@tanstack/react-query" import type { UserOut } from "../../client" import Appearance from "../../components/UserSettings/Appearance" @@ -29,7 +29,7 @@ export const Route = createFileRoute("/_layout/settings")({ function UserSettings() { const queryClient = useQueryClient() - const currentUser = queryClient.getQueryData("currentUser") + const currentUser = queryClient.getQueryData(["currentUser"]) const finalTabs = currentUser?.is_superuser ? tabsConfig.slice(0, 3) : tabsConfig diff --git a/frontend/src/routes/reset-password.tsx b/frontend/src/routes/reset-password.tsx index 80f7171..5f3e033 100644 --- a/frontend/src/routes/reset-password.tsx +++ b/frontend/src/routes/reset-password.tsx @@ -10,7 +10,7 @@ import { } from "@chakra-ui/react" import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router" import { type SubmitHandler, useForm } from "react-hook-form" -import { useMutation } from "react-query" +import { useMutation } from "@tanstack/react-query" import { type ApiError, LoginService, type NewPassword } from "../client" import { isLoggedIn } from "../hooks/useAuth" @@ -57,7 +57,8 @@ function ResetPassword() { }) } - const mutation = useMutation(resetPassword, { + const mutation = useMutation({ + mutationFn: resetPassword, onSuccess: () => { showToast("Success!", "Password updated.", "success") reset()