feat: get list service

packages/ext/package.json

@@ -6,28 +6,30 @@
   "author": "cnwangjie",
   "license": "MIT",
   "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack --watch --config webpack.common.js"
+    "dev": "cross-env TAILWIND_MODE=watch NODE_ENV=development webpack --watch --config webpack.common.js"
   },
   "dependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
     "@iconify/react": "^3.0.1",
     "@mui/material": "^5.0.4",
+    "dayjs": "^1.10.7",
     "lodash": "^4.17.21",
     "pouchdb-adapter-idb": "^7.2.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
     "rxdb": "^10.2.1",
     "rxjs": "^7.4.0",
-    "webextension-polyfill-ts": "^0.26.0"
+    "swr": "^1.0.1"
   },
   "devDependencies": {
     "@types/history": "^4.7.9",
     "@types/lodash": "^4.14.176",
     "@types/react": "^17.0.31",
     "@types/react-dom": "^17.0.10",
     "@types/react-router-dom": "^5.3.1",
+    "@types/webextension-polyfill": "^0.8.1",
     "autoprefixer": "^10.3.7",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^9.0.1",

packages/ext/src/app/layout/AppLayout.tsx

@@ -18,6 +18,7 @@ import {
   Typography,
 } from '@mui/material'
 import React, { FC, useState } from 'react'
+import { Link } from 'react-router-dom'
 
 const drawerWidth = 240
 
@@ -112,7 +113,19 @@ const StyledListItemButton = styled(ListItemButton, {
       }),
 }))
 
-const AppLayout: FC = ({ children }) => {
+interface Tab {
+  key: string
+  icon: string
+  label: string
+  to: string
+}
+
+interface AppLayoutProps {
+  tabs: Tab[]
+  activeTab: string
+}
+
+const AppLayout: FC<AppLayoutProps> = ({ tabs, activeTab, children }) => {
   const [open, setOpen] = useState(false)
 
   // TODO: hide shadow scroll Y is 0
@@ -137,27 +150,27 @@ const AppLayout: FC = ({ children }) => {
         <DrawerHeader />
 
         <List>
-          <StyledListItemButton open={open} selected>
-            <ListItemIcon>
-              <Icon icon="mdi:view-list" fontSize={24} />
-            </ListItemIcon>
-            <ListItemText primary="Tab lists" />
-          </StyledListItemButton>
-
-          <StyledListItemButton open={open}>
-            <ListItemIcon>
-              <Icon icon="mdi:pin-outline" fontSize={24} />
-            </ListItemIcon>
-            <ListItemText primary="Pinned" />
-          </StyledListItemButton>
+          {tabs.map(tab => {
+            return (
+              <Link to={tab.to} key={tab.key}>
+                <StyledListItemButton
+                  open={open}
+                  selected={tab.key === activeTab}
+                >
+                  <ListItemIcon>
+                    <Icon icon={tab.icon} fontSize={24} />
+                  </ListItemIcon>
+                  <ListItemText primary={tab.label} />
+                </StyledListItemButton>
+              </Link>
+            )
+          })}
         </List>
         <Divider />
       </StyledDrawer>
 
       <div className="flex-1 mt-[64px] p-8">
-        <Container>
-          {children}
-        </Container>
+        <Container>{children}</Container>
       </div>
     </div>
   )

packages/ext/src/app/pages/Main/DetailList/ListGroup.tsx

@@ -1,14 +1,46 @@
-import { Accordion, AccordionDetails, AccordionSummary } from '@mui/material'
-import React from 'react'
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Chip,
+  IconButton,
+} from '@mui/material'
+import React, { FC } from 'react'
+import __ from 'src/common/util/i18n'
+import { useListTabs } from 'src/app/service'
+import { formatTime } from 'src/common/util/formatDate'
+import { Icon } from '@iconify/react'
+
+const ListGroup: FC<{ list: any }> = ({ list }) => {
+  const { data: tabs } = useListTabs(list.id)
 
-const ListGroup = () => {
   return (
-    <Accordion>
+    <Accordion className="group">
       <AccordionSummary>
-        1
+        <div className="flex items-center gap-4 w-full h-7">
+          <Chip size="small" label={`${tabs?.length || 0} ${__('ui_tab')}`} />
+          {__('ui_created')} {formatTime(list.createdAt)}
+          <div className="flex-1" />
+          <div
+            className="hidden gap-1 group-hover:flex"
+            onClick={e => e.stopPropagation()}
+          >
+            <IconButton size="small">
+              <Icon icon="mdi:arrow-up" />
+            </IconButton>
+            <IconButton size="small">
+              <Icon icon="mdi:arrow-down" />
+            </IconButton>
+            <IconButton size="small">
+              <Icon icon="mdi:pin" />
+            </IconButton>
+          </div>
+        </div>
       </AccordionSummary>
       <AccordionDetails>
-        2
+        {tabs?.map((tab, index) => {
+          return <div key={index}>{tab.url}</div>
+        })}
       </AccordionDetails>
     </Accordion>
   )

packages/ext/src/app/pages/Main/DetailList/index.tsx

@@ -1,16 +1,16 @@
 import React from 'react'
 import ListGroup from './ListGroup'
+import { useLists } from '../../../service'
 
 const DetailList = () => {
-  const [lists, setLists] = React.useState([
-    1,2,3,4
-  ])
+  const { data } = useLists()
 
   return (
     <div>
       {
-        lists.map(list => {
-          return <ListGroup key={list} />
+        data?.result.map(list => {
+          console.log(list)
+          return <ListGroup key={list.id} list={list} />
         })
       }
     </div>

packages/ext/src/app/pages/Main/index.tsx

@@ -1,12 +1,57 @@
-import React from 'react'
-import { Route, Switch } from 'react-router-dom'
+import React, { useMemo } from 'react'
+import { matchPath, Route, Switch, useRouteMatch } from 'react-router-dom'
 import AppLayout from '../../layout/AppLayout'
 import DetailList from './DetailList'
+import { history } from '../../App'
+
+const routes = [
+  {
+    key: 'Tab lists',
+    label: 'Tab lists',
+    icon: 'mdi:view-list',
+    path: '/app/list',
+    exact: true,
+  },
+  {
+    key: 'Pinned',
+    label: 'Pinned',
+    icon: 'mdi:pin-outline',
+    path: '/app/list/pinned',
+  },
+]
 
 const Main = () => {
+  const tabs = useMemo(() => {
+    return routes.map(({ key, label, icon, path }) => {
+      return {
+        key,
+        label,
+        icon,
+        to: path,
+      }
+    })
+  }, [])
+
+  useRouteMatch()
+
+  const activeTab = useMemo(() => {
+    return (
+      routes.find(({ path, exact }) => {
+        const match = matchPath(history.location.pathname, {
+          path,
+          exact,
+        })
+        return match
+      }) || routes[0]
+    )
+  }, [history.location.pathname])
+
   return (
-    <AppLayout>
+    <AppLayout tabs={tabs} activeTab={activeTab.key}>
       <Switch>
+        <Route path="/app">
+          <DetailList />
+        </Route>
         <Route path="/app/list">
           <DetailList />
         </Route>

packages/ext/src/app/service/index.ts

@@ -0,0 +1,23 @@
+import storage from 'src/common/storage'
+import useSWR from 'swr'
+
+type ThenArg<T> = T extends PromiseLike<infer U> ? U : never
+
+const createSWR = <
+  F extends (...args: any[]) => Promise<T>,
+  T = ThenArg<ReturnType<F>>
+>(
+  prefix: string,
+  fn: F,
+  requireArgs = false,
+) => (...args: any[]) => {
+  const key = requireArgs && args.every(i => !i) ? null : [prefix, ...args]
+
+  return useSWR<T>(key, (_, ...args: any) => {
+    return fn(...args)
+  })
+}
+
+export const useLists = createSWR('lists', storage.lists.listList)
+
+export const useListTabs = createSWR('listTab', storage.tabs.getSortedTabsByList, true)

packages/ext/src/background/autoReload.ts

@@ -1,4 +1,4 @@
-import { browser } from 'webextension-polyfill-ts'
+import browser from 'webextension-polyfill'
 
 const filesInDirectory = (dir: any) =>
   new Promise(resolve => {

packages/ext/src/background/browserAction.ts

@@ -2,7 +2,7 @@ import { noop } from 'lodash'
 import { BrowserAction, NewTabs } from 'src/common/constants'
 import { browserActionConfigItems, optionsList } from 'src/common/options/list'
 import { tabsManager } from 'src/common/tabsManager'
-import { browser } from 'webextension-polyfill-ts'
+import browser from 'webextension-polyfill'
 
 const actions = {
   [BrowserAction.StoreSelected]: tabsManager.storeSelectedTabs,

packages/ext/src/background/contextMenus.ts

@@ -4,7 +4,7 @@ import { Options } from 'src/common/options/types'
 import storage from 'src/common/storage'
 import { tabsManager } from 'src/common/tabsManager'
 import { __ } from 'src/common/util/i18n'
-import { browser, Menus } from 'webextension-polyfill-ts'
+import browser, { Menus } from 'webextension-polyfill'
 
 const SHOW_TAB_LIST = 'SHOW_TAB_LIST'
 const STORE_SELECTED_TABS = 'STORE_SELECTED_TABS'

packages/ext/src/background/index.ts

@@ -1,6 +1,6 @@
 import storage from 'src/common/storage'
 import { tabsManager } from 'src/common/tabsManager'
-import { browser } from 'webextension-polyfill-ts'
+import browser from 'webextension-polyfill'
 import init from './init'
 
 if (DEBUG) {

packages/ext/src/background/init.ts

@@ -1,8 +1,9 @@
 import { debounce } from 'lodash'
 import { getOptions } from 'src/common/options'
 import storage from 'src/common/storage'
-import { registerIpcHandlerDeeply, registerIpcListener } from 'src/common/util/ipc'
-import { browser, Tabs } from 'webextension-polyfill-ts'
+import { composeListeners } from 'src/common/util/composeListener'
+import { createIpcListener, registerIpcHandlerDeeply } from 'src/common/util/ipc'
+import browser, { Tabs } from 'webextension-polyfill'
 import { updateBrowserAction } from './browserAction'
 import commandHandler from './commandHandler'
 import { dynamicDisableMenu, setupContextMenus } from './contextMenus'
@@ -14,9 +15,17 @@ const tabsChangedHandler = (activeInfo: Tabs.OnActivatedActiveInfoType) => {
   dynamicDisableMenu()
 }
 
+const registerRuntimeMessageListener = async () => {
+  const ipcListener = await createIpcListener()
+  const listener = composeListeners(
+    ipcListener,
+    messageHandler,
+  )
+  await browser.runtime.onMessage.addListener(listener)
+}
+
 const init = async () => {
-  registerIpcHandlerDeeply(storage)
-  registerIpcListener()
+  registerIpcHandlerDeeply({ storage })
 
   const opts = window.opts = await getOptions()
   console.log(opts)
@@ -25,7 +34,7 @@ const init = async () => {
   await Promise.all([
     browser.commands.onCommand.addListener(commandHandler),
     browser.runtime.onMessageExternal.addListener(commandHandler),
-    browser.runtime.onMessage.addListener(messageHandler),
+    registerRuntimeMessageListener(),
     browser.runtime.onUpdateAvailable.addListener(detail => { window.update = detail.version }),
     browser.contextMenus.onClicked.addListener(info => window.contextMenusClickedHandler(info)),
     browser.tabs.onActivated.addListener(debounce(tabsChangedHandler, 200)),

packages/ext/src/common/storage/index.ts

@@ -5,9 +5,11 @@ import { tabsStorage } from './tabs'
 export const lists = listStorage
 export const tabs = tabsStorage
 
-export const storage = wrapBackgroundCommunicationDeeply({
-  lists,
-  tabs,
+export const { storage } = wrapBackgroundCommunicationDeeply({
+  storage: {
+    lists,
+    tabs,
+  },
 })
 
 export default storage

packages/ext/src/common/storage/lists.ts

@@ -76,7 +76,7 @@ const getLatestList = async () => {
 
 const listList = async (opt?: PaginateOpt) => {
   const db = await getDB()
-  return paginate(db.lists)(opt)
+  return paginate<List>(db.lists)(opt)
 }
 
 export const listStorage = {

packages/ext/src/common/storage/tabs.ts

@@ -1,6 +1,6 @@
 import { sortBy } from "lodash";
 import { RxDocument } from "rxdb";
-import type * as Browser from "webextension-polyfill-ts";
+import type { Tabs } from "webextension-polyfill";
 import { genId } from "../util";
 import { getDB } from "./db";
 
@@ -30,7 +30,7 @@ const initTabs = (tabs: any[], listId: string): Tab[] => {
   })
 }
 
-const createTabs = async (tabs: Browser.Tabs.Tab[], listId: string) => {
+const createTabs = async (tabs: Tabs.Tab[], listId: string) => {
   const db = await getDB()
   const tabsDocs = initTabs(tabs, listId)
   const result = await db.tabs.bulkInsert(tabsDocs)
@@ -39,7 +39,7 @@ const createTabs = async (tabs: Browser.Tabs.Tab[], listId: string) => {
   }
 }
 
-const getTabsByList = async (listId: string) => {
+const getTabsByList = async (listId: string): Promise<Tab[]> => {
   const db = await getDB()
   const tabs = await db.tabs.find({ selector: { listId } }).exec()
   return tabs