[js] migrace na fuse.js 5 (fixes #102), aktualizace js deps

rodlukas · Apr 30, 2020 · 5d05231 · 5d05231
1 parent daff815
commit 5d05231
Show file tree

Hide file tree

Showing 5 changed files with 150 additions and 343 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -84,7 +84,7 @@
     "axios": "^0.19.0",
     "bootstrap": "^4.3.1",
     "chroma-js": "^2.0.4",
-    "fuse.js": "^3.4.5",
+    "fuse.js": "^5.2.3",
     "history": "^4.9.0",
     "jwt-decode": "^2.2.0",
     "react": "^16.12.0",

diff --git a/frontend/src/Main.tsx b/frontend/src/Main.tsx
@@ -1,4 +1,4 @@
-import * as Fuse from "fuse.js"
+import Fuse from "fuse.js"
 import * as React from "react"
 import { NavLink as RouterNavLink, Switch, useLocation } from "react-router-dom"
 import { toast, ToastContainer } from "react-toastify"
@@ -31,19 +31,19 @@ const Clients = React.lazy(() => lazySafe(() => import("./pages/Clients")))
 const Card = React.lazy(() => lazySafe(() => import("./pages/Card")))
 const Diary = React.lazy(() => lazySafe(() => import("./pages/Diary")))
 
-// konfigurace Fuse vyhledavani
-const searchOptions: Fuse.FuseOptions<ClientActiveType> = {
+// konfigurace Fuse.js vyhledavani
+const searchOptions: Fuse.IFuseOptions<ClientActiveType> = {
     shouldSort: true,
     threshold: 0.5,
-    tokenize: true,
-    matchAllTokens: true,
-    keys: ["normalized", "phone", "email"],
+    keys: ["firstname", "surname", "phone", "email", "normalized"],
 }
 
 /** Hlavní kostra aplikace. */
 const Main: React.FC = () => {
     const [isMenuOpened, setIsMenuOpened] = React.useState(false)
-    const [foundResults, setFoundResults] = React.useState<Array<ClientActiveType>>([])
+    const [foundResults, setFoundResults] = React.useState<
+        Array<Fuse.FuseResult<ClientActiveType>>
+    >([])
     const [searchVal, setSearchVal] = React.useState("")
     const authContext = React.useContext(AuthContext)
     const clientsActiveContext = React.useContext(ClientsActiveContext)
@@ -52,9 +52,7 @@ const Main: React.FC = () => {
 
     const search = React.useCallback(() => {
         if (searchVal !== "" && clientsActiveContext.isLoaded) {
-            const results = new Fuse(clientsActiveContext.clients, searchOptions).search(
-                searchVal
-            ) as Array<ClientActiveType>
+            const results = new Fuse(clientsActiveContext.clients, searchOptions).search(searchVal)
             setFoundResults(results)
         }
     }, [searchVal, clientsActiveContext.clients, clientsActiveContext.isLoaded])

diff --git a/frontend/src/components/SearchResults.tsx b/frontend/src/components/SearchResults.tsx
@@ -1,3 +1,4 @@
+import Fuse from "fuse.js"
 import * as React from "react"
 import { Badge, Col, Container, ListGroup, ListGroupItem, Row } from "reactstrap"
 import { ClientsActiveContext } from "../contexts/ClientsActiveContext"
@@ -13,7 +14,7 @@ import Loading from "./Loading"
 
 type Props = {
     /** Výsledky vyhledávání klientů. */
-    foundResults: Array<ClientActiveType>
+    foundResults: Array<Fuse.FuseResult<ClientActiveType>>
     /** Vyhledávaný výraz. */
     searchVal: string
     /** Funkce pro zahájení vyhledávání klientů. */
@@ -47,34 +48,32 @@ const SearchResults: React.FC<Props> = ({ foundResults, searchVal, search, reset
                             <Loading />
                         ) : (
                             <>
-                                {foundResults.map((client) => (
-                                    <ListGroupItem key={client.id}>
+                                {foundResults.map(({ item }) => (
+                                    <ListGroupItem key={item.id}>
                                         <Row className="align-items-center">
                                             {" "}
                                             <Col md="6">
                                                 <h5 className="mb-0 d-inline-block">
-                                                    <ClientName client={client} link />
+                                                    <ClientName client={item} link />
                                                 </h5>
-                                                {client.note !== "" && (
+                                                {item.note !== "" && (
                                                     <span className="text-secondary">
                                                         {" "}
-                                                        &ndash; {client.note}
+                                                        &ndash; {item.note}
                                                     </span>
                                                 )}
                                             </Col>
                                             <Col md="2">
-                                                {client.phone && (
-                                                    <ClientPhone phone={client.phone} icon />
+                                                {item.phone && (
+                                                    <ClientPhone phone={item.phone} icon />
                                                 )}
                                             </Col>
                                             <Col md="3">
-                                                {client.email && (
-                                                    <ClientEmail email={client.email} />
-                                                )}
+                                                {item.email && <ClientEmail email={item.email} />}
                                             </Col>
                                             <Col className="text-right mt-1 mt-md-0" md="1">
                                                 <ModalClients
-                                                    currentClient={client}
+                                                    currentClient={item}
                                                     refresh={search}
                                                 />
                                             </Col>

diff --git a/frontend/src/contexts/ClientsActiveContext.tsx b/frontend/src/contexts/ClientsActiveContext.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 import ClientService, { ListWithActiveClients } from "../api/services/ClientService"
-import { clientName, noop } from "../global/utils"
+import { noop } from "../global/utils"
 import { ClientActiveType } from "../types/models"
 import { fEmptyVoid, fFunction } from "../types/types"
 
@@ -46,10 +46,13 @@ export class ClientsActiveProvider extends React.Component<{}, State> {
 
     loadClients = (): Promise<ListWithActiveClients> => {
         return ClientService.getActive().then((clients) => {
-            // pridani klice se zjednodusenym jmenem klienta
+            // pridani klice s krestnim jmenem a prijmenim klienta bez diakritiky
             return clients.map((client) => ({
                 ...client,
-                normalized: [clientName(client), this.removeSpecialCharacters(clientName(client))],
+                normalized: [
+                    this.removeSpecialCharacters(client.firstname),
+                    this.removeSpecialCharacters(client.surname),
+                ],
             }))
         })
     }