Skip to content

Commit

Permalink
React query (#8)
Browse files Browse the repository at this point in the history
* suspense 추가

* dummy 추가

* axios version up
  • Loading branch information
DevooKim authored Mar 2, 2024
1 parent 0e2c86b commit 9915b7a
Show file tree
Hide file tree
Showing 5 changed files with 147 additions and 17 deletions.
16 changes: 8 additions & 8 deletions .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -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/**"],
}
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
63 changes: 54 additions & 9 deletions src/pages/popup/Popup.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,70 @@
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'

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 (
<Container sx={{ minWidth: '350px', p: 1.5, background: blueGrey[50] }}>
<BaseTimeProvider>
{isError ? (
<InActive />
) : (
<WorkingTimeResult userIdHash={userIdHash} />
)}
</BaseTimeProvider>
</Container>
<QueryClientProvider client={queryClient}>
<Container
sx={{ minWidth: '350px', p: 1.5, background: blueGrey[50] }}
>
<QueryErrorResetBoundary>
{({ reset }) => (
<ErrorBoundary
onReset={() => {}}
fallbackRender={({ resetErrorBoundary }) => (
// <div>
// There was an error!
// <button
// onClick={() => resetErrorBoundary()}
// >
// Try again
// </button>
// </div>
<InActive />
)}
>
<React.Suspense fallback={<h1>loading</h1>}>
<BaseTimeProvider>
{isError ? (
<InActive />
) : (
<WorkingTimeResult
userIdHash={userIdHash}
/>
)}
</BaseTimeProvider>
</React.Suspense>
</ErrorBoundary>
)}
</QueryErrorResetBoundary>
</Container>
</QueryClientProvider>
)
}
1 change: 1 addition & 0 deletions src/pages/popup/hooks/queries/useFetchClockData.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
exports.useFetchClockData = () => {}
81 changes: 81 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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/[email protected]":
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"
Expand Down Expand Up @@ -1503,6 +1529,14 @@
"@typescript-eslint/visitor-keys" "7.1.0"
debug "^4.3.4"

"@typescript-eslint/[email protected]":
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/[email protected]":
version "7.1.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.1.0.tgz#e4babaa39a3d612eff0e3559f3e99c720a2b4a54"
Expand All @@ -1521,11 +1555,30 @@
debug "^4.3.4"
ts-api-utils "^1.0.1"

"@typescript-eslint/[email protected]":
version "6.21.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.21.0.tgz#205724c5123a8fef7ecd195075fa6e85bac3436d"
integrity sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==

"@typescript-eslint/[email protected]":
version "7.1.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.1.0.tgz#52a86d6236fda646e7e5fe61154991dc0dc433ef"
integrity sha512-qTWjWieJ1tRJkxgZYXx6WUYtWlBc48YRxgY2JN1aGeVpkhmnopq+SUC8UEVGNXIvWH7XyuTjwALfG6bFEgCkQA==

"@typescript-eslint/[email protected]":
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/[email protected]":
version "7.1.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.1.0.tgz#419b1310f061feee6df676c5bed460537310c593"
Expand Down Expand Up @@ -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/[email protected]":
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/[email protected]":
version "7.1.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.1.0.tgz#576c4ad462ca1378135a55e2857d7aced96ce0a0"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 9915b7a

Please sign in to comment.