update react, react-dom, react-query

package.json

@@ -117,8 +117,8 @@
         "error",
         {
           "args": "after-used",
-          "argsIgnorePattern": "^omit_",
-          "varsIgnorePattern": "^omit_"
+          "argsIgnorePattern": "^_",
+          "varsIgnorePattern": "^_"
         }
       ],
       "no-unused-expressions": [
@@ -143,12 +143,12 @@
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.6.0",
     "eslint": "^7.3.0",
+    "eslint-config-react-app": "^5.2.1",
+    "eslint-plugin-flowtype": "^5.2.2",
+    "eslint-plugin-import": "^2.21.2",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.20.0",
     "eslint-plugin-react-hooks": "^4.0.4",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-import": "^2.21.2",
-    "eslint-plugin-flowtype": "^5.2.2",
-    "eslint-config-react-app": "^5.2.1",
     "file-loader": "^6.0.0",
     "generate-json-webpack-plugin": "^1.0.0",
     "html-webpack-plugin": "^4.3.0",
@@ -167,20 +167,20 @@
     "immer": "~7.0.14",
     "is-binary-path": "^2.1.0",
     "lang-map": "^0.4.0",
-    "react": "~17.0.1",
-    "react-dom": "~17.0.1",
-    "react-query": "~2.25.2",
+    "react": "~17.0.2",
+    "react-dom": "~17.0.2",
+    "react-query": "~3.19.0",
     "react-svg-spinner": "^1.0.4",
-    "react-syntax-highlighter": "~15.2.1",
+    "react-syntax-highlighter": "~15.4.4",
     "react-use-hover": "~2.0.0",
     "rehype-dom-parse": "~3.0.0",
     "rehype-dom-stringify": "^2.0.1",
-    "styled-components": "^5.0.1",
-    "unified": "^9.0.0",
-    "unist-util-visit": "^2.0.2",
+    "styled-components": "^5.3.0",
+    "unified": "^10.0.1",
+    "unist-util-visit": "^3.1.0",
     "use-timeout": "^1.1.0",
     "zip-webpack-plugin": "^3.0.0",
-    "zustand": "~3.1.3"
+    "zustand": "~3.5.7"
   },
   "husky": {
     "hooks": {

src/api.js

@@ -36,7 +36,10 @@ const githubFetch = (fragment, options = {}) =>
     return response
   })
 
-export const getNode = (type, { user, repo, path, branch }, prefetch = false) =>
+export const getNode = (
+  { queryKey: [_type, { user, repo, path, branch }] },
+  prefetch = false
+) =>
   limiter
     .schedule(
       { priority: prefetch ? 1 : 9 },
@@ -61,8 +64,7 @@ export const getNode = (type, { user, repo, path, branch }, prefetch = false) =>
     })
 
 export const getFileContent = (
-  type,
-  { user, repo, path, branch },
+  { queryKey: [_type, { user, repo, path, branch }] },
   prefetch = false
 ) =>
   limiter
@@ -77,7 +79,7 @@ export const getFileContent = (
     .then(response => response.json())
     .then(json => betterAtob(json.content))
 
-export const getMarkdown = (type, { user, repo, text }) =>
+export const getMarkdown = ({ queryKey: [_type, { user, repo, text }] }) =>
   limiter
     .schedule(githubFetch, 'markdown', {
       method: 'POST',
@@ -90,8 +92,7 @@ export const getMarkdown = (type, { user, repo, text }) =>
     .then(response => response.text())
 
 export const getLastCommitForNode = (
-  type,
-  { user, repo, path, branch },
+  { queryKey: [_type, { user, repo, path, branch }] },
   prefetch = false
 ) =>
   limiter

src/components/App.js

@@ -1,12 +1,13 @@
 import React from 'react'
-import { ReactQueryCacheProvider } from 'react-query'
+import { QueryClientProvider } from 'react-query'
+import { ReactQueryDevtools } from 'react-query/devtools'
 
 import { useStore } from '@/storage'
 import { APP_MOUNT_SELECTOR } from '@/constants'
 import { useHideElementWhileMounted } from '@/hooks'
 import RepoFileTree from '@/components/RepoFileTree'
 import Preview from '@/components/Preview'
-import cache from '@/cache'
+import queryClient from '@/queryClient'
 
 const App = () => {
   const selectedFilePath = useStore(state => state.selectedFilePath)
@@ -19,7 +20,7 @@ const App = () => {
   useHideElementWhileMounted(element)
 
   return (
-    <ReactQueryCacheProvider queryCache={cache}>
+    <QueryClientProvider client={queryClient}>
       <div
         css={{
           display: 'grid',
@@ -58,7 +59,9 @@ const App = () => {
           </div>
         )}
       </div>
-    </ReactQueryCacheProvider>
+
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
   )
 }
 

src/components/Listing.js

@@ -1,8 +1,7 @@
 import React, { Fragment } from 'react'
 import { useQuery } from 'react-query'
 
-import cache from '@/cache'
-import { useIdleCallback } from '@/hooks'
+import queryClient from '@/queryClient'
 import { useStore } from '@/storage'
 import { getNode } from '@/api'
 import { markAsPrefetch } from '@/utils'
@@ -19,7 +18,7 @@ const Listing = ({ path, parentCommitmessage, level = 0 }) => {
     if (data) {
       data.forEach(({ path, type }) => {
         if (type === 'dir') {
-          cache.prefetchQuery(
+          queryClient.prefetchQuery(
             ['listing', { user, repo, branch, path }],
             (...args) => getNode(...args, true)
           )

src/components/Node.js

@@ -1,18 +1,18 @@
 import React, { Fragment } from 'react'
 import useHover from 'react-use-hover'
-import { useQuery } from 'react-query'
+import { QueryObserver, useQuery } from 'react-query'
 import Spinner from 'react-svg-spinner'
 
-import cache from '@/cache'
+import queryClient from '@/queryClient'
 import { INDENT_SIZE } from '@/constants'
 import { useStore } from '@/storage'
-import { useOtherQuery } from '@/hooks'
 import {
   getNode,
   getLastCommitForNode,
   getFileContent,
   getMarkdown,
 } from '@/api'
+import { useObserver } from '@/hooks'
 import { markAsPrefetch } from '@/utils'
 import { Row, Cell, Truncateable } from '@/components/styled'
 import Listing from '@/components/Listing'
@@ -42,10 +42,19 @@ const maybeHijackClick = event => {
 
 const Node = ({ type, name, path, parentCommitmessage, level }) => {
   const { user, repo, branch } = useStore(state => state.repoDetails)
-  const { status: contentStatus } = useOtherQuery([
-    'listing',
-    { user, repo, branch, path },
-  ])
+  const childListingObserver = React.useMemo(
+    () =>
+      new QueryObserver(queryClient, {
+        queryKey: ['listing', { user, repo, branch, path }],
+      }),
+    [branch, path, repo, user]
+  )
+  const isLoadingContents = useObserver(
+    childListingObserver,
+    ({ isLoading }) => isLoading
+  )
+
+  // const isLoadingContents = false
 
   const isExpanded = useStore(state => state.expandedNodes[path] === true)
   const toggleExpandNode = useStore(state => state.toggleExpandNode)
@@ -55,7 +64,6 @@ const Node = ({ type, name, path, parentCommitmessage, level }) => {
 
   const isSelected = path === selectedFilePath
   const isFolder = type === 'dir'
-  const isLoadingContents = contentStatus === 'loading'
 
   let typeIcon = isFolder ? (
     <FolderIcon
@@ -94,14 +102,14 @@ const Node = ({ type, name, path, parentCommitmessage, level }) => {
   React.useEffect(() => {
     if (isHovering) {
       if (isFolder) {
-        cache
+        queryClient
           .prefetchQuery(
             ['listing', { user, repo, branch, path }],
             markAsPrefetch(getNode)
           )
-          .then(items => {
+          .then((items = []) => {
             items.forEach(({ path }) =>
-              cache.prefetchQuery(
+              queryClient.prefetchQuery(
                 ['last-commit', { user, repo, branch, path }],
                 markAsPrefetch(getLastCommitForNode),
                 { enabled: hasNoSelectedFilePath }
@@ -112,20 +120,20 @@ const Node = ({ type, name, path, parentCommitmessage, level }) => {
         const fileExtension = path.split('.').slice(-1)[0].toLowerCase()
 
         if (fileExtension === 'md') {
-          cache
+          queryClient
             .prefetchQuery(
               ['file', { user, repo, branch, path }],
               markAsPrefetch(getFileContent)
             )
             .then(text => {
-              cache.prefetchQuery(
+              queryClient.prefetchQuery(
                 ['markdown', { user, repo, text }],
                 getMarkdown,
                 { enabled: text }
               )
             })
         } else {
-          cache.prefetchQuery(
+          queryClient.prefetchQuery(
             ['file', { user, repo, branch, path }],
             markAsPrefetch(getFileContent)
           )

src/components/Preview.js

@@ -5,10 +5,10 @@ import { prism, darcula } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import { useStore } from '@/storage'
 import langMap from 'lang-map'
 import isBinaryPath from 'is-binary-path'
-import unified from 'unified'
+import { unified } from 'unified'
 import parse from 'rehype-dom-parse'
 import stringify from 'rehype-dom-stringify'
-import visit from 'unist-util-visit'
+import { visit } from 'unist-util-visit'
 
 import { getFileContent, getMarkdown } from '@/api'
 import {

src/hooks.js

@@ -1,7 +1,5 @@
 import React from 'react'
 
-import cache from '@/cache'
-
 export const useMountedCallback = callback => {
   const mounted = React.useRef(false)
 
@@ -16,30 +14,6 @@ export const useMountedCallback = callback => {
   )
 }
 
-export const useOtherQuery = queryKey => {
-  const [state, setState] = React.useState()
-
-  React.useEffect(() => {
-    const query = cache.getQuery(queryKey)
-
-    if (query) {
-      setState(query.state)
-      query.subscribe(setState)
-    }
-  }, [queryKey])
-
-  if (state) {
-    return state
-  }
-
-  return {
-    status: 'loading',
-    error: null,
-    isFetching: true,
-    data: undefined,
-  }
-}
-
 export const useHideElementWhileMounted = element => {
   React.useEffect(() => {
     if (element) {
@@ -53,3 +27,23 @@ export const useHideElementWhileMounted = element => {
     }
   }, [element])
 }
+
+export const useObserver = (observer, selectorFn, dependencies = []) => {
+  // eslint-disable-next-line
+  const memoizedSelectorFn = React.useCallback(selectorFn, dependencies)
+
+  const [state, set] = React.useState(() =>
+    memoizedSelectorFn(observer.currentResult)
+  )
+
+  React.useEffect(() => {
+    console.log('useobserver useeffect')
+    set(memoizedSelectorFn(observer.currentResult))
+
+    return observer.subscribe(query => {
+      set(memoizedSelectorFn(query))
+    })
+  }, [observer, memoizedSelectorFn])
+
+  return state
+}

src/queryClient.js

@@ -0,0 +1,12 @@
+import { QueryClient } from 'react-query'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      staleTime: 10 * 60 * 1000,
+    },
+  },
+})
+
+export default queryClient