Merge pull request #68 from ArthurLobopro/useSearch

Use search

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dicionario",
-  "version": "2.7.5",
+  "version": "2.8.0",
   "description": "Dicionário simples onde você pode cadastrar as palavras que você aprendeu recentemente, fácil e prático.",
   "main": "./dist/main/main.js",
   "scripts": {
@@ -21,35 +21,35 @@
   "license": "MIT",
   "devDependencies": {
     "@arthur-lobo/eslint-config": "^1.0.0",
-    "@electron-forge/cli": "^7.2.0",
-    "@electron-forge/maker-deb": "^7.2.0",
-    "@electron-forge/maker-rpm": "^7.2.0",
-    "@electron-forge/maker-squirrel": "^7.2.0",
-    "@electron-forge/maker-zip": "^7.2.0",
-    "@electron-forge/publisher-github": "^7.2.0",
+    "@electron-forge/cli": "^7.5.0",
+    "@electron-forge/maker-deb": "^7.5.0",
+    "@electron-forge/maker-rpm": "^7.5.0",
+    "@electron-forge/maker-squirrel": "^7.5.0",
+    "@electron-forge/maker-zip": "^7.5.0",
+    "@electron-forge/publisher-github": "^7.5.0",
     "@types/deep-equal": "^1.0.4",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.17",
-    "electron": "^28.0.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "electron": "30",
     "eslint": "^8.44.0",
     "sass-compiler": "^1.3.3",
     "svg-react-icon": "^1.2.0",
-    "typescript": "^5.3.3"
+    "typescript": "^5.6.3"
   },
   "dependencies": {
     "@arthur-lobo/react-onclickout": "^1.1.1",
-    "@electron-fonts/nunito": "^1.1.1",
-    "@electron-fonts/open-sans": "^1.1.1",
-    "@hookform/resolvers": "^3.3.4",
+    "@electron-fonts/nunito": "^1.2.0",
+    "@electron-fonts/open-sans": "^1.2.0",
+    "@hookform/resolvers": "^3.9.0",
     "deep-equal": "^2.2.3",
-    "electron-frame": "^1.5.1",
-    "electron-squirrel-startup": "^1.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.50.1",
+    "electron-frame": "^1.6.1",
+    "electron-squirrel-startup": "^1.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.1",
     "react-router-dom": "^6.22.0",
     "update-electron-app": "^3.0.0",
-    "zod": "^3.22.4",
-    "zod-electron-store": "^1.0.4"
+    "zod": "^3.23.8",
+    "zod-electron-store": "^1.0.5"
   }
 }

src/renderer/Frame.ts

@@ -1,17 +1,17 @@
-import { ElectronFrame, frameStyle } from "electron-frame/renderer"
+import { ElectronFrame, FrameStyle } from "electron-frame/renderer"
 import { api } from "../store/Api"
 
 const options = () => api.options
 
 const frame = new ElectronFrame({
-  frameStyle: options().frameStyle as frameStyle,
+  frameStyle: options().frameStyle as FrameStyle,
   darkMode: (options().frameTheme === "auto"
     ? options().darkMode
     : options().frameTheme === "dark") as boolean,
 })
 
 const frameApi = {
-  setFrameStyle(frameStyle: frameStyle) {
+  setFrameStyle(frameStyle: FrameStyle) {
     frame.setFrameStyle(frameStyle)
   },
 

src/renderer/contexts/ViewContext.ts

@@ -5,6 +5,7 @@ import { useModal } from "../hooks/useModal"
 interface ViewPageContext {
   modal: ReturnType<typeof useModal>
   search: string
+  searchRegex: RegExp
   words: typeof DictionaryController.prototype.Words.words
   dictionary: DictionaryController
   wrapperRef: React.RefObject<HTMLDivElement>

src/renderer/hooks/useSearch.ts

@@ -0,0 +1,26 @@
+import { useMemo, useState } from "react"
+
+export function useSearch() {
+  const [search, setSearch] = useState("")
+
+  const searchRegex = useMemo(() => {
+    const treatedSearch = search
+      .toLowerCase()
+      .replace(/a/g, "(a|á|ã|à|â)")
+      .replace(/e/g, "(e|é|ê|ẽ)")
+      .replace(/i/g, "(i|í|ì)")
+      .replace(/o/g, "(o|õ|ô|ó)")
+      .replace(/u/g, "(u|ú|û|ũ)")
+      .replace(/c/g, "(c|ç)")
+
+    return new RegExp(`^${treatedSearch}`)
+  }, [search])
+
+  console.log(searchRegex)
+
+  return {
+    search,
+    searchRegex,
+    setSearch,
+  }
+}

src/renderer/pages/Config/components/WindowSection.tsx

@@ -1,7 +1,7 @@
 import { ipcRenderer } from "electron"
-import { frameStyle } from "electron-frame"
 import { useState } from "react"
 
+import { FrameStyle } from "electron-frame"
 import { api } from "../../../../store/Api"
 import { StoreOptions } from "../../../../store/ZodSchemas/options"
 import { frame } from "../../../Frame"
@@ -23,7 +23,7 @@ export function WindowSection() {
   }
 
   function HandleFrameStyleChange(event: React.ChangeEvent<HTMLSelectElement>) {
-    const frameStyle = event.currentTarget.value as frameStyle
+    const frameStyle = event.currentTarget.value as FrameStyle
     api.options.setFrameStyle(frameStyle)
     setConfig({ ...config, frameStyle })
     frame.setFrameStyle(frameStyle)

src/renderer/pages/View/View.tsx

@@ -6,6 +6,7 @@ import { SelectDictionary } from "../../components/selects/Dictionary"
 import { ViewContext } from "../../contexts/ViewContext"
 import { useModal } from "../../hooks/useModal"
 import { useQuery } from "../../hooks/useQuery"
+import { useSearch } from "../../hooks/useSearch"
 import { EmptyPage } from "./components/EmptyPage"
 import { RightContent } from "./components/RightContent"
 import { WordList } from "./components/WordList"
@@ -24,10 +25,11 @@ export function ViewScreen() {
   const getWords = () => dictionary.Words.words
 
   const words = useMemo(getWords, [dictionary])
-  const [search, setSearch] = useState("")
   const modal = useModal()
   const wrapperRef = useRef<HTMLDivElement>(null)
 
+  const { search, setSearch, searchRegex } = useSearch()
+
   function reload() {
     try {
       setDictionary(api.dictionaries.getDictionary(dictionary.name))
@@ -60,6 +62,7 @@ export function ViewScreen() {
           handleAddWord,
           setSearch,
           reload,
+          searchRegex,
         }}
       >
         {modal.content}

src/renderer/pages/View/components/WordList.tsx

@@ -4,17 +4,12 @@ import { EmptySearch } from "./EmptySearch"
 import { Word } from "./Word"
 
 export function WordList() {
-  const { words, search, reload, dictionary, modal, wrapperRef } =
+  const { words, search, reload, dictionary, modal, wrapperRef, searchRegex } =
     useContext(ViewContext)
 
-  const filter = useMemo(
-    () => new RegExp(`^${search.toLowerCase().trim()}`),
-    [search],
-  )
-
   const filtered_words = useMemo(() => {
-    return words.filter(({ word }) => filter.test(word))
-  }, [filter, words.length, words])
+    return words.filter(({ word }) => searchRegex.test(word))
+  }, [search, words.length, words])
 
   const list = useMemo(() => {
     return filtered_words.length === 0 ? (