update

Author: npv2k1

src/components/AppLayout/index.tsx

@@ -71,7 +71,7 @@ const AppLayout: React.FC<PropsWithChildren> = ({ children }) => {
         />
       </Sider>
       <Layout className="flex h-screen bg-gray-300" style={{ marginLeft: 200 }}>
-        <Header className="flex h-12 w-full items-start justify-center bg-white px-1 ">
+        {/* <Header className="flex h-12 w-full items-start justify-center bg-white px-1 ">
           <Row className="flex h-full w-full items-center justify-between">
             <Col span={8} className="flex items-center justify-center">
               <Search placeholder="Search" enterButton />
@@ -83,7 +83,7 @@ const AppLayout: React.FC<PropsWithChildren> = ({ children }) => {
               </div>
             </Col>
           </Row>
-        </Header>
+        </Header> */}
         <Content className="bg-slate-300 p-2 text-start">
           <div className="h-full flex-1 justify-start overflow-auto rounded-xl bg-white p-3 shadow-xl ">
             {children}

src/modules/dictionary/index.tsx

@@ -10,22 +10,24 @@ import './dictionary.css';
 import Search from 'antd/es/input/Search';
 import { Button } from 'antd';
 import { CloseOutlined, DownloadOutlined } from '@ant-design/icons';
-import { includes as lodashIncludes, filter as lodashFilter } from 'lodash';
+import { includes as lodashIncludes, filter as lodashFilter, lowerCase } from 'lodash';
 const DictionaryPage = () => {
   const [keywords, setKeywords] = useState('');
   const [isLoading, setIsloading] = useState(false);
   const contentRef = useRef<HTMLDivElement>(null);
 
   const handleSearch = async () => {
     setIsloading(true);
+    const _key = lowerCase(keywords).trim();
     contentRef.current && (contentRef.current.innerHTML = 'loading');
-    const dt = await getDbStorage(keywords);
+    const dt = await getDbStorage(_key);
     if (dt && dt !== 'None') {
       contentRef.current && (contentRef.current.innerHTML = dt);
+      setIsloading(false);
       return;
     }
 
-    const steamUrl = `https://dictionary.cambridge.org/dictionary/english-vietnamese/${keywords}`;
+    const steamUrl = `https://dictionary.cambridge.org/dictionary/english-vietnamese/${_key}`;
     const html = await fetch<string>(steamUrl, {
       method: 'GET',
       responseType: ResponseType.Text,
@@ -34,7 +36,7 @@ const DictionaryPage = () => {
     const dic = $('.entry-body').html() || '';
     if (dic) {
       contentRef.current && (contentRef.current.innerHTML = $('.entry-body').html() || '');
-      await setDbStorage(keywords, $('.entry-body').html() || '');
+      await setDbStorage(_key, $('.entry-body').html() || '');
     } else {
       contentRef.current && (contentRef.current.innerHTML = 'Not found');
     }
@@ -48,7 +50,6 @@ const DictionaryPage = () => {
     if (isLoading) return;
     (async () => {
       const keys = await getAllDbKeys();
-      console.log('🚀 ~ file: index.tsx:44 ~ keys:', keys);
       setDbKeys(keys);
       setSearchKey(keys);
     })();
@@ -85,7 +86,6 @@ const DictionaryPage = () => {
       <div className="flex w-[300px] flex-col  space-y-3 px-3">
         <Search
           placeholder="Search..."
-          loading={isLoading}
           allowClear
           enterButton
           onChange={(e) => handleSerachKey(e.target.value)}

src/routes/index.tsx

@@ -13,21 +13,21 @@ export const routers: RouteObject[] = [
     element: <Root />,
     errorElement: <h1>404</h1>,
     children: [
-      {
-        path: 'learn',
-        element: <LearnPage />,
-        children: [
-          {
-            path: '',
-            element: <h1></h1>,
-          },
-          ...lessionsRouters,
-        ],
-      },
-      {
-        path: 'tauri',
-        element: <Tauri />,
-      },
+      // {
+      //   path: 'learn',
+      //   element: <LearnPage />,
+      //   children: [
+      //     {
+      //       path: '',
+      //       element: <h1></h1>,
+      //     },
+      //     ...lessionsRouters,
+      //   ],
+      // },
+      // {
+      //   path: 'tauri',
+      //   element: <Tauri />,
+      // },
       {
         path: 'dictionary',
         element: <DictionaryPage />,