refactor: rewrite Ticket component (#277)

Replace storage SDK with REST API.

api/customerService/api.js

@@ -0,0 +1,31 @@
+const AV = require('leancloud-storage')
+const { Router } = require('express')
+
+const { requireAuth, catchError, customerServiceOnly } = require('../middleware')
+
+const router = Router().use(requireAuth, customerServiceOnly)
+
+router.get(
+  '/',
+  catchError(async (req, res) => {
+    const role = await new AV.Query(AV.Role).equalTo('name', 'customerService').first()
+    if (!role) {
+      res.throw(500, 'Missing customer services role')
+    }
+    const customerServices = await role.getUsers().query().find({ useMasterKey: true })
+    res.json(
+      customerServices.map((user) => {
+        return {
+          id: user.id,
+          nid: user.get('nid'),
+          email: user.get('email') || '',
+          username: user.get('username'),
+          name: user.get('name') || '',
+          category_ids: user.get('categories')?.map((c) => c.objectId) || [],
+        }
+      })
+    )
+  })
+)
+
+module.exports = router

api/index.js

@@ -41,6 +41,7 @@ apiRouter.use('/ticket-fields', require('./TicketField'))
 apiRouter.use('/tickets', require('./ticket/api'))
 apiRouter.use('/users', require('./user/api'))
 apiRouter.use('/categories', require('./category/api'))
+apiRouter.use('/customer-services', require('./customerService/api'))
 apiRouter.get('/debug/search', parseSearchingQ, (req, res) => {
   res.json({ q: req.q, query: req.query })
 })

index.js

@@ -1,12 +1,24 @@
 import React from 'react'
 import { render } from 'react-dom'
 import { BrowserRouter } from 'react-router-dom'
+import { QueryClient, QueryClientProvider } from 'react-query'
+
 import App from './modules/App'
 import './config.webapp'
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+    },
+  },
+})
+
 render(
   <BrowserRouter>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
   </BrowserRouter>,
   document.getElementById('app')
 )

modules/About.js

@@ -1,10 +1,11 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { useTitle } from 'react-use'
+
+import { useTitle } from './utils/hooks'
 
 export default function About() {
   const { t } = useTranslation()
-  useTitle(`${t('about')} - LeanTicket`)
+  useTitle(t('about'))
 
   return (
     <div>

modules/App.js

@@ -190,6 +190,7 @@ class App extends Component {
         {!this.state.loading && (
           <AppContext.Provider
             value={{
+              currentUser: this.state.currentUser,
               isCustomerService: props.isCustomerService,
               tagMetadatas: props.tagMetadatas,
               addNotification: this.getChildContext().addNotification,

modules/CustomerService/Tickets.js

@@ -647,7 +647,7 @@ TicketPager.propTypes = {
 
 export default function CustomerServiceTickets() {
   const { t } = useTranslation()
-  useTitle(`${t('customerServiceTickets')} - LeanTicket`)
+  useTitle(t('customerServiceTickets'))
   const { addNotification } = useContext(AppContext)
   const [checkedTickets, setCheckedTickets] = useState(new Set())
   const customerServices = useCustomerServices()

modules/NotFound.js

@@ -1,11 +1,12 @@
 /*global SUPPORT_EMAIL*/
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { useTitle } from 'react-use'
+
+import { useTitle } from './utils/hooks'
 
 export default function NotFound() {
   const { t } = useTranslation()
-  useTitle('404 - LeanTicket')
+  useTitle('404')
 
   return (
     <div className="jumbotron">