update demo-dictionary-app,

03_source/mobile/src/pages/DemoDictionaryApp/AppPages/Tab2.jsx

@@ -2,6 +2,7 @@ import {
   IonButton,
   IonCol,
   IonContent,
+  IonGrid,
   IonHeader,
   IonPage,
   IonRow,
@@ -9,30 +10,32 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/react';
-import { useState } from 'react';
-import { CurrentWeather } from '../components/CurrentWeather';
+import { useState, useRef } from 'react';
+import { NoSearch } from '../components/NoSearch';
+import { NoResultsWordCard, WordCard } from '../components/WordCard';
+import { WordStore } from '../store';
+import { searchWord } from '../utils';
 
-function Tab2() {
-  const [search, setSearch] = useState('');
-  const [currentWeather, setCurrentWeather] = useState(false);
+const Tab2 = () => {
+  const pageRef = useRef();
+  const [searchTerm, setSearchTerm] = useState('');
+  const [searchResult, setSearchResult] = useState(false);
+  const [animatedClass, setAnimatedClass] = useState('');
 
   const performSearch = async () => {
-    getAddress(search);
-  };
+    setAnimatedClass('animate__slideOutRight');
+    const result = searchTerm !== '' ? await searchWord(searchTerm) : undefined;
 
-  const getAddress = async (city) => {
-    const response = await fetch(
-      `https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${city}&aqi=no`
-    );
-    const data = await response.json();
+    setTimeout(() => setSearchResult(result === undefined ? 'none' : result), 250);
+    setTimeout(() => setAnimatedClass('animate__slideInLeft'), 250);
 
-    if (data && data.current && data.location) {
-      setCurrentWeather(data);
-    }
+    WordStore.update((s) => {
+      s.searchCount++;
+    });
   };
 
   return (
-    <IonPage>
+    <IonPage ref={pageRef}>
       <IonHeader>
         <IonToolbar>
           <IonTitle>Search</IonTitle>
@@ -45,37 +48,36 @@ function Tab2() {
           </IonToolbar>
         </IonHeader>
 
-        <IonRow className="ion-justify-content-center ion-margin-top ion-align-items-center">
-          <IonCol size="7">
-            <IonSearchbar
-              placeholder="Try 'London'"
-              animated
-              value={search}
-              onIonChange={(e) => setSearch(e.target.value)}
-            />
-          </IonCol>
+        <IonGrid>
+          <IonRow className="ion-align-items-center">
+            <IonCol size="9">
+              <IonSearchbar
+                animated
+                value={searchTerm}
+                onIonChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </IonCol>
 
-          <IonCol size="5">
-            <IonButton
-              expand="block"
-              className="ion-margin-start ion-margin-end"
-              onClick={performSearch}
-            >
-              Search
-            </IonButton>
-          </IonCol>
-        </IonRow>
+            <IonCol size="3">
+              <IonButton color="primary" onClick={performSearch}>
+                Search
+              </IonButton>
+            </IonCol>
+          </IonRow>
 
-        <div style={{ marginTop: '-0.8rem' }}>
-          {currentWeather ? (
-            <CurrentWeather currentWeather={currentWeather} />
-          ) : (
-            <h3 className="ion-text-center">Your search result will appear here</h3>
+          {searchResult && searchResult !== 'none' && (
+            <WordCard word={searchResult} animatedClass={animatedClass} pageRef={pageRef} />
           )}
-        </div>
+
+          {searchResult && searchResult === 'none' && (
+            <NoResultsWordCard word={searchResult} animatedClass={animatedClass} />
+          )}
+
+          {!searchResult && <NoSearch />}
+        </IonGrid>
       </IonContent>
     </IonPage>
   );
-}
+};
 
 export default Tab2;