Test long path

.eslintignore

@@ -0,0 +1 @@
+src/background.js

.gitignore

@@ -2,7 +2,7 @@
 
 # dependencies
 /node_modules
-/.pnp
+/.pnpss
 .pnp.js
 
 # testing

src/App.js

@@ -3,6 +3,7 @@ import MainDrawer from 'components/MainDrawer'
 import { PAGE_TYPE } from 'constants'
 import usePageInfo from 'hooks/pageInfo/usePageInfo'
 import { ERROR_MESSAGE } from 'constants'
+import { useSettingCtx } from 'components/Setting/Context/Provider'
 
 const { UNKNOWN, UNSUPPORTED } = PAGE_TYPE
 const HANDLED_ERRORS = [
@@ -12,8 +13,7 @@ const HANDLED_ERRORS = [
 
 function App() {
   const { error, isLoading, pageInfo } = usePageInfo()
-
-  console.log({ error, isLoading, pageInfo })
+  const { drawerWidth } = useSettingCtx()
 
   if (
     pageInfo.pageType === UNKNOWN ||
@@ -26,7 +26,7 @@ function App() {
 
   return (
     <>
-      <GlobalStyle />
+      <GlobalStyle pl={drawerWidth} />
       <MainDrawer {...pageInfo} error={error} />
     </>
   )

src/GlobalStyle.js

@@ -2,7 +2,7 @@ import { createGlobalStyle } from 'styled-components'
 
 const GlobalStyle = createGlobalStyle`
   body {
-    margin-left: 400px;
+    margin-left: ${(props) => props.pl}px;
   }
 `
 

src/backgroundss.js

@@ -0,0 +1,23 @@
+import { GLOBAL_MESSAGE_TYPE } from 'constants'
+
+const activeTabUrlMemo = {}
+
+/**
+ * To support Github SPA
+ * ref: https://developer.chrome.com/docs/extensions/reference/webNavigation/
+ */
+chrome.webNavigation.onHistoryStateUpdated.addListener(({ tabId, url }) => {
+  if (activeTabUrlMemo[tabId] !== url) {
+    activeTabUrlMemo[tabId] = url
+
+    chrome.tabs.sendMessage(tabId, {
+      type: GLOBAL_MESSAGE_TYPE.ON_HISTORY_UPDATED,
+    })
+  }
+})
+
+chrome.tabs.onRemoved.addListener((tabId) => {
+  if (activeTabUrlMemo[tabId]) {
+    delete activeTabUrlMemo[tabId]
+  }
+})

src/components/MainDrawer/index.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import Drawer from '@material-ui/core/Drawer'
 import { makeStyles } from '@material-ui/core/styles'
 import { PAGE_TYPE } from 'constants'
@@ -9,15 +9,17 @@ import PullCommit from './Tabs/PullCommit'
 import Error from './Tabs/Error'
 import PullCommitMenu from 'components/Menu/PullCommit'
 import Setting from 'components/Setting'
+import { Resizable } from 're-resizable'
 
-import { compact } from 'lodash'
+import { compact, throttle } from 'lodash'
 import * as Style from './style'
+import { useSettingContext } from 'components/Setting/Context/Provider'
 
 const useStyles = makeStyles({
   paper: {
-    width: 400,
-    display: 'flex',
-    flexDirection: 'column',
+    boxShadow:
+      '0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%)',
+    borderRight: 'none',
   },
 })
 
@@ -32,6 +34,7 @@ const MainDrawer = ({
   defaultBranch,
   error,
 }) => {
+  const [{ drawerWidth }, dispatch] = useSettingContext()
   const classes = useStyles()
   const branch = branchFromUrl || defaultBranch
 
@@ -76,14 +79,49 @@ const MainDrawer = ({
     }
   }
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleOnResize = useCallback(
+    throttle((_, __, element) => {
+      dispatch({
+        type: 'UPDATE_DRAWER_WIDTH',
+        payload: element.clientWidth,
+      })
+    }, 100),
+    []
+  )
+
   return (
     <Drawer anchor="left" open variant="permanent" classes={classes}>
-      <Style.DrawerHeader>{renderHeader()}</Style.DrawerHeader>
-      <PullCommitMenu owner={owner} repo={repo} pull={pull} commit={commit} />
-      <Style.DrawerContent>{renderContent()}</Style.DrawerContent>
-      <Style.DrawerFooter>
-        <Setting />
-      </Style.DrawerFooter>
+      <Resizable
+        size={{
+          width: drawerWidth,
+          height: '100%',
+        }}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+        onResize={handleOnResize}
+        enable={{
+          top: false,
+          right: true,
+          bottom: false,
+          left: false,
+          topRight: false,
+          bottomRight: false,
+          bottomLeft: false,
+          topLeft: false,
+        }}
+        maxWidth="40vw"
+        minWidth={350}
+      >
+        <Style.DrawerHeader>{renderHeader()}</Style.DrawerHeader>
+        <PullCommitMenu owner={owner} repo={repo} pull={pull} commit={commit} />
+        <Style.DrawerContent>{renderContent()}</Style.DrawerContent>
+        <Style.DrawerFooter>
+          <Setting />
+        </Style.DrawerFooter>
+      </Resizable>
     </Drawer>
   )
 }

src/components/Setting/Context/Provider.js

@@ -46,4 +46,11 @@ export const useSettingDispatchCtx = () => {
   return dispatch
 }
 
+export const useSettingContext = () => {
+  const state = useSettingCtx()
+  const dispatch = useSettingDispatchCtx()
+
+  return [state, dispatch]
+}
+
 export default Provider

src/components/Setting/Context/reducer.js

@@ -35,6 +35,8 @@ export const reducer = (state, action) => {
       return { ...state, isFocusMode: !state.isFocusMode }
     case 'UPDATE_DRAWER_WIDTH':
       return { ...state, drawerWidth: action.payload }
+    case 'UPDATE_BASE_URL':
+      return { ...state, baseUrl: action.payload }
     default:
       throw new Error(`Unknown Type: ${action.type}`)
   }

src/components/Tree/index.js

@@ -38,39 +38,53 @@ const generateTree = (tree) => {
   return [objTree, folderNodeIds]
 }
 
+const isProxyNode = (node) => {
+  const hasChildNoSiblings = Object.keys(node.children).length === 1
+
+  if (!hasChildNoSiblings) return false
+
+  const childKey = Object.keys(node.children)[0]
+  const child = node.children[childKey]
+  const isChildLeaf = isEmpty(child.children)
+
+  return !isChildLeaf
+}
+
 const setNodeIds = (tree, parentNodeId = '', folderNodeIds) => {
   return Object.keys(tree).map((key) => {
     let node = tree[key]
+    let label = key
 
     const hasChildren = !isEmpty(node.children)
-    const nodeId = compact([parentNodeId, key]).join('/')
+    let nodeId = compact([parentNodeId, key]).join('/')
 
     node.nodeId = nodeId
 
     if (hasChildren) {
-      folderNodeIds.push(nodeId)
-      return setNodeIds(node.children, nodeId, folderNodeIds)
-    }
+      while (isProxyNode(node)) {
+        const childKey = Object.keys(node.children)[0]
+        const child = node.children[childKey]
 
-    return nodeId
-  })
-}
+        delete tree[label]
 
-const isProxyNode = (node) => {
-  const hasChildNoSiblings = Object.keys(node.children).length === 1
+        label = `${label}/${childKey}`
 
-  if (!hasChildNoSiblings) return false
+        tree[label] = child
+        node = tree[label]
 
-  const childKey = Object.keys(node.children)[0]
-  const child = node.children[childKey]
-  const isChildLeaf = isEmpty(child.children)
+        nodeId = compact([parentNodeId, label]).join('/')
+        node.nodeId = nodeId
+      }
 
-  if (isChildLeaf) return false
+      folderNodeIds.push(nodeId)
+      return setNodeIds(node.children, nodeId, folderNodeIds)
+    }
 
-  return true
+    return nodeId
+  })
 }
 
-const renderTree = (tree, onItemClick) => {
+const Tree = ({ tree, onItemClick }) => {
   if (isEmpty(tree)) return null
 
   return sortBy(Object.keys(tree), [
@@ -79,31 +93,22 @@ const renderTree = (tree, onItemClick) => {
       else return 1
     },
   ]).map((key) => {
-    let node = tree[key]
-    let label = key
-
+    const node = tree[key]
+    const label = key
     const hasChildren = !isEmpty(node.children)
     const status = node.status || 'normal'
 
     const handleClick = (e) => {
+      e.stopPropagation()
+
       if (onItemClick) onItemClick(node, e)
     }
 
     if (hasChildren) {
-      while (isProxyNode(node)) {
-        const childKey = Object.keys(node.children)[0]
-        const child = node.children[childKey]
-
-        label = `${label}/${childKey}`
-
-        tree[label] = child
-        node = tree[label]
-      }
-
       return (
         <div key={node.nodeId} onClick={handleClick}>
           <TreeItem nodeId={node.nodeId} label={label}>
-            {renderTree(node.children, onItemClick)}
+            <Tree tree={node.children} onItemClick={onItemClick} />
           </TreeItem>
         </div>
       )
@@ -113,7 +118,7 @@ const renderTree = (tree, onItemClick) => {
       <div key={node.nodeId} onClick={handleClick}>
         <TreeItem
           nodeId={node.nodeId}
-          label={key}
+          label={label}
           icon={<LabelIcon status={status} />}
         />
       </div>
@@ -131,16 +136,19 @@ export default function CustomizedTreeView({
 
   const treeView = useMemo(() => {
     const [objectTree, expandedNodeIds] = generateTree(tree)
+    const defaultExpandedIds = isExpandedAll
+      ? [...expandedNodeIds, treeId]
+      : [treeId]
 
     return (
       <TreeView
         className={classes.root}
-        defaultExpanded={isExpandedAll ? expandedNodeIds : []}
+        defaultExpanded={defaultExpandedIds}
         defaultCollapseIcon={<AiFillFolderOpen color={MAIN_COLOR} />}
         defaultExpandIcon={<AiFillFolder color={MAIN_COLOR} />}
         defaultEndIcon={<AiOutlineFileText color={MAIN_COLOR} />}
       >
-        {renderTree(objectTree, onItemClick)}
+        <Tree tree={objectTree} onItemClick={onItemClick} />
       </TreeView>
     )
   }, [treeId, onItemClick])

src/hooks/api/useGithubQuery.js

@@ -3,14 +3,14 @@ import { isValidQuery, createGithubQuery } from 'utils/api'
 import { useSettingCtx } from 'components/Setting/Context/Provider'
 
 function useGithubQuery(queryKeys, variables = {}, useQueryOptions = {}) {
-  const { token } = useSettingCtx()
+  const { token, baseUrl } = useSettingCtx()
   const { url, placeholders = {} } = variables
   const { enabled = true } = useQueryOptions
 
   return useQuery(
     [...queryKeys, { token }],
     async () => {
-      const { data } = await createGithubQuery({ ...variables, token })
+      const { data } = await createGithubQuery({ ...variables, token, baseUrl })
       return data
     },
     {