Fix the saring counter error #3 & bug in iOS 18.1 Safari #6

src/App.css

@@ -7,7 +7,7 @@
 
 /* TODO: potentially pushing HTML elements out of viewport, had to get rid of the class for Teroka and Sumber */
 .App-main {
-  height: 100%;
+/*   height: 100%; */
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -78,4 +78,4 @@ kbd {
   line-height: 1;
   padding: 2px 4px;
   white-space: nowrap;
-}
+}

src/pages/Lesen.css

@@ -1,6 +1,8 @@
 #lesen {
-    width: 45%;
+/*     width: 45%; */
     border: 1px solid #aaa;
     border-radius: 20px;
     padding: 20px;
-}
+    margin: 20px;
+    max-width: 720px;
+}

src/pages/TerokaTema.js

@@ -15,7 +15,7 @@ let headers = {
 
 function TerokaTema() {
   const { tema_id, nama_tema } = useLocation().state;
-  const [filteredPantun, setFilteredPantun] = useState("");
+  const [saringKeyword, setSaringKeyword] = useState("");
   const [pantun, setPantun] = useState("");
   const [loading, setLoading] = useState(true);
 
@@ -57,9 +57,41 @@ function TerokaTema() {
     );
 
   const handleChange = (e) => {
-    setFilteredPantun(e.target.value);
+    setSaringKeyword(e.target.value);
   };
 
+  const getFilteredPantunList = () => {
+    // Process and return list of pantun for rendering
+
+    if (pantun.length > 0) {
+
+      if (saringKeyword.length > 0) {
+        // Only perform filtering when saring "keyword" available
+        return pantun.filter((p, index, array) => {
+          const filterCheck =
+            p.pantun_bayang1.toLowerCase().includes(saringKeyword) ||
+            p.pantun_bayang2.toLowerCase().includes(saringKeyword) ||
+            p.pantun_maksud1.toLowerCase().includes(saringKeyword) ||
+            p.pantun_maksud2.toLowerCase().includes(saringKeyword);
+
+          return filterCheck;
+          } 
+        );
+
+      } else {
+        // Return all pantun since saring "keyword" unavailable
+        return pantun;
+      }
+
+    } else {
+      // Return empty array since no pantun exist
+      return [];
+    }
+  }
+
+  // Call pantun filtering function before render
+  const pantunListToRender = getFilteredPantunList();
+
   return (
     <main className="d-flex flex-column justify-content-between align-items-center my-3">
       <section className="mb-3">
@@ -76,33 +108,24 @@ function TerokaTema() {
           Saring pantun guna perkataan.
         </div>
       </section>
-      {filteredPantun.length > 0 ? (
+      {saringKeyword.length > 0 ? (
         <span className="text-muted" style={{ fontSize: "smaller" }}>
-          Kami jumpa {filteredPantun.length} pantun untuk tema: {nama_tema}.
+          Kami jumpa {pantunListToRender.length} pantun untuk tema: {nama_tema}.
         </span>
       ) : (
         <span className="text-muted" style={{ fontSize: "smaller" }}>
-          Kami jumpa {pantun.length} pantun untuk tema: {nama_tema}.
+          Kami jumpa {pantunListToRender.length} pantun untuk tema: {nama_tema}.
         </span>
       )}
       <span className="text-muted mb-3" style={{ fontSize: "smaller" }}>
         Tekan ikon untuk ketahui info lebih.
       </span>
+
       <div className="pantun-pantun">
-        {pantun.length > 0
-          ? pantun.map((p) => {
-              const filterCheck =
-                p.pantun_bayang1.toLowerCase().includes(filteredPantun) ||
-                p.pantun_bayang2.toLowerCase().includes(filteredPantun) ||
-                p.pantun_maksud1.toLowerCase().includes(filteredPantun) ||
-                p.pantun_maksud2.toLowerCase().includes(filteredPantun);
-              if (filterCheck) {
-                return <Pantun kata={""}>{p}</Pantun>;
-              } else {
-                return <></>;
-              }
-            })
-          : ""}
+        {pantunListToRender.map((p, index) => {
+            return <Pantun kata={saringKeyword} key={index}>{p}</Pantun>;
+          })
+        }
       </div>
     </main>
   );