From 9915b7aae8a24421db5a87ac9e7b9317b252cfbb Mon Sep 17 00:00:00 2001 From: Kim HyunWoo <42219589+DevooKim@users.noreply.github.com> Date: Sat, 2 Mar 2024 18:47:47 +0900 Subject: [PATCH] React query (#8) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * suspense 추가 * dummy 추가 * axios version up --- .eslintrc | 16 ++-- package.json | 3 + src/pages/popup/Popup.tsx | 63 ++++++++++++--- .../popup/hooks/queries/useFetchClockData.tsx | 1 + yarn.lock | 81 +++++++++++++++++++ 5 files changed, 147 insertions(+), 17 deletions(-) create mode 100644 src/pages/popup/hooks/queries/useFetchClockData.tsx diff --git a/.eslintrc b/.eslintrc index c484520..0274e63 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,27 +2,27 @@ "env": { "browser": true, "es6": true, - "node": true + "node": true, }, "extends": [ "eslint:recommended", "plugin:react/recommended", - "plugin:@typescript-eslint/recommended" + "plugin:@typescript-eslint/recommended", ], "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaFeatures": { - "jsx": true + "jsx": true, }, "ecmaVersion": "latest", - "sourceType": "module" + "sourceType": "module", }, - "plugins": ["react", "@typescript-eslint"], + "plugins": ["react", "@typescript-eslint", "@tanstack/query"], "rules": { - "react/react-in-jsx-scope": "off" + "react/react-in-jsx-scope": "off", }, "globals": { - "chrome": "readonly" + "chrome": "readonly", }, - "ignorePatterns": ["watch.js", "dist/**"] + "ignorePatterns": ["watch.js", "dist/**"], } diff --git a/package.json b/package.json index f5c611a..0c62a12 100644 --- a/package.json +++ b/package.json @@ -14,16 +14,19 @@ "@mui/icons-material": "^5.8.2", "@mui/material": "^5.8.2", "@mui/x-date-pickers": "^5.0.8", + "@tanstack/react-query": "^5.24.1", "axios": "^1.6.7", "dayjs": "^1.11.6", "html2canvas": "^1.4.1", "lodash": "^4.17.21", "react": "^18.1.0", "react-dom": "^18.1.0", + "react-error-boundary": "^4.0.13", "webextension-polyfill": "^0.10.0" }, "devDependencies": { "@crxjs/vite-plugin": "^1.0.14", + "@tanstack/eslint-plugin-query": "^5.20.1", "@types/chrome": "^0.0.256", "@types/lodash": "^4.14.182", "@types/node": "^16.11.38", diff --git a/src/pages/popup/Popup.tsx b/src/pages/popup/Popup.tsx index 138576c..fda7cb7 100644 --- a/src/pages/popup/Popup.tsx +++ b/src/pages/popup/Popup.tsx @@ -1,5 +1,10 @@ import { blueGrey } from '@mui/material/colors' import { Container } from '@mui/system' +import { + QueryClient, + QueryClientProvider, + QueryErrorResetBoundary, +} from '@tanstack/react-query' import WorkingTimeResult from './components/WorkingTimeResult' import InActive from './components/InActive' @@ -7,19 +12,59 @@ import InActive from './components/InActive' import { useFetchUserIdHash } from './hooks' import BaseTimeProvider from './contexts/BaseTimeContext' +import { ErrorBoundary } from 'react-error-boundary' +import React from 'react' + +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + refetchOnWindowFocus: false, + refetchOnMount: false, + refetchOnReconnect: false, + retry: false, + }, + }, +}) export default function App(): JSX.Element { const { data: userIdHash, isError } = useFetchUserIdHash() return ( - - - {isError ? ( - - ) : ( - - )} - - + + + + {({ reset }) => ( + {}} + fallbackRender={({ resetErrorBoundary }) => ( + //
+ // There was an error! + // + //
+ + )} + > + loading}> + + {isError ? ( + + ) : ( + + )} + + + + )} + + + ) } diff --git a/src/pages/popup/hooks/queries/useFetchClockData.tsx b/src/pages/popup/hooks/queries/useFetchClockData.tsx new file mode 100644 index 0000000..14c4a24 --- /dev/null +++ b/src/pages/popup/hooks/queries/useFetchClockData.tsx @@ -0,0 +1 @@ +exports.useFetchClockData = () => {} diff --git a/yarn.lock b/yarn.lock index 1b25004..d1dd6c3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -320,6 +320,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.22.5" +"@babel/runtime@^7.12.5": + version "7.24.0" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.0.tgz#584c450063ffda59697021430cb47101b085951e" + integrity sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/runtime@^7.13.10", "@babel/runtime@^7.17.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7": version "7.18.3" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4" @@ -1262,6 +1269,25 @@ dependencies: "@sinonjs/commons" "^1.7.0" +"@tanstack/eslint-plugin-query@^5.20.1": + version "5.20.1" + resolved "https://registry.yarnpkg.com/@tanstack/eslint-plugin-query/-/eslint-plugin-query-5.20.1.tgz#861afedd7cde6b98c88cf86a5923bb659122e7af" + integrity sha512-oIp7Wh90KHOm1FKCvcv87fiD2H96xo/crFrlhbvqBzR2f0tMEGOK/ANKMGNFQprd6BT6lyZhQPlOEkFdezsjIg== + dependencies: + "@typescript-eslint/utils" "^6.20.0" + +"@tanstack/query-core@5.24.1": + version "5.24.1" + resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.24.1.tgz#d40928dec22b47df97fb2648e8c499772e8d7eb2" + integrity sha512-DZ6Nx9p7BhjkG50ayJ+MKPgff+lMeol7QYXkvuU5jr2ryW/4ok5eanaS9W5eooA4xN0A/GPHdLGOZGzArgf5Cg== + +"@tanstack/react-query@^5.24.1": + version "5.24.1" + resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.24.1.tgz#bcb913febe0d813cec1fda7783298d07aa998b20" + integrity sha512-4+09JEdO4d6+Gc8Y/g2M/MuxDK5IY0QV8+2wL2304wPKJgJ54cBbULd3nciJ5uvh/as8rrxx6s0mtIwpRuGd1g== + dependencies: + "@tanstack/query-core" "5.24.1" + "@types/babel__core@^7.1.14", "@types/babel__core@^7.20.5": version "7.20.5" resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.5.tgz#3df15f27ba85319caa07ba08d0721889bb39c017" @@ -1503,6 +1529,14 @@ "@typescript-eslint/visitor-keys" "7.1.0" debug "^4.3.4" +"@typescript-eslint/scope-manager@6.21.0": + version "6.21.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz#ea8a9bfc8f1504a6ac5d59a6df308d3a0630a2b1" + integrity sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg== + dependencies: + "@typescript-eslint/types" "6.21.0" + "@typescript-eslint/visitor-keys" "6.21.0" + "@typescript-eslint/scope-manager@7.1.0": version "7.1.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.1.0.tgz#e4babaa39a3d612eff0e3559f3e99c720a2b4a54" @@ -1521,11 +1555,30 @@ debug "^4.3.4" ts-api-utils "^1.0.1" +"@typescript-eslint/types@6.21.0": + version "6.21.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.21.0.tgz#205724c5123a8fef7ecd195075fa6e85bac3436d" + integrity sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg== + "@typescript-eslint/types@7.1.0": version "7.1.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.1.0.tgz#52a86d6236fda646e7e5fe61154991dc0dc433ef" integrity sha512-qTWjWieJ1tRJkxgZYXx6WUYtWlBc48YRxgY2JN1aGeVpkhmnopq+SUC8UEVGNXIvWH7XyuTjwALfG6bFEgCkQA== +"@typescript-eslint/typescript-estree@6.21.0": + version "6.21.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz#c47ae7901db3b8bddc3ecd73daff2d0895688c46" + integrity sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ== + dependencies: + "@typescript-eslint/types" "6.21.0" + "@typescript-eslint/visitor-keys" "6.21.0" + debug "^4.3.4" + globby "^11.1.0" + is-glob "^4.0.3" + minimatch "9.0.3" + semver "^7.5.4" + ts-api-utils "^1.0.1" + "@typescript-eslint/typescript-estree@7.1.0": version "7.1.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.1.0.tgz#419b1310f061feee6df676c5bed460537310c593" @@ -1553,6 +1606,27 @@ "@typescript-eslint/typescript-estree" "7.1.0" semver "^7.5.4" +"@typescript-eslint/utils@^6.20.0": + version "6.21.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.21.0.tgz#4714e7a6b39e773c1c8e97ec587f520840cd8134" + integrity sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ== + dependencies: + "@eslint-community/eslint-utils" "^4.4.0" + "@types/json-schema" "^7.0.12" + "@types/semver" "^7.5.0" + "@typescript-eslint/scope-manager" "6.21.0" + "@typescript-eslint/types" "6.21.0" + "@typescript-eslint/typescript-estree" "6.21.0" + semver "^7.5.4" + +"@typescript-eslint/visitor-keys@6.21.0": + version "6.21.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz#87a99d077aa507e20e238b11d56cc26ade45fe47" + integrity sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A== + dependencies: + "@typescript-eslint/types" "6.21.0" + eslint-visitor-keys "^3.4.1" + "@typescript-eslint/visitor-keys@7.1.0": version "7.1.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.1.0.tgz#576c4ad462ca1378135a55e2857d7aced96ce0a0" @@ -5358,6 +5432,13 @@ react-dom@^18.1.0: loose-envify "^1.1.0" scheduler "^0.23.0" +react-error-boundary@^4.0.13: + version "4.0.13" + resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-4.0.13.tgz#80386b7b27b1131c5fbb7368b8c0d983354c7947" + integrity sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ== + dependencies: + "@babel/runtime" "^7.12.5" + react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"