Merge pull request #164 from kaogeek/fix/search-5

Fix/search 5
kaogeek · Aug 22, 2024 · c26bcea · c26bcea
2 parents bbb8c86 + 54acceb
commit c26bcea
Show file tree

Hide file tree

Showing 10 changed files with 1,976 additions and 3,441 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-paginate": "^8.2.0",
     "react-responsive": "^9.0.2",
     "react-router-dom": "^6.20.1",
     "web-vitals": "^2.1.4"

diff --git a/src/App.css b/src/App.css
@@ -35,4 +35,4 @@
   to {
     transform: rotate(360deg);
   }
-}
+}
diff --git a/src/App.js b/src/App.js
@@ -24,6 +24,7 @@ export default function App() {
         <Route path="/search" element={<Search searchInputValue={searchInputValue} setSearchInputValue={setSearchInputValue} />} />
         <Route path="/chapter/:name" element={<Chapter />} />
         <Route path="/section/:id" element={<Section />} />
+        <Route path="/section/:id/:search" element={<Section />} />
         <Route path="/discussionist/:name" element={<Discussionist />} />
       </Routes>
     </div>

diff --git a/src/components/Constitution.jsx b/src/components/Constitution.jsx
@@ -1,6 +1,6 @@
 import accordionToggle from "../utils/accordion.js";
 
-export default function Constitution({constitution}) {
+export default function Constitution({constitution, search = null}) {
 
   return (
     <div id="accordion-0" data-accordion-id="0" className="accordion accordion-active flex flex-col w-full gap-x-1">
@@ -21,7 +21,7 @@ export default function Constitution({constitution}) {
       <div className="accordion-collapsable">
         <div className="w-full p-5 sm:rounded-b-xl bg-[#eee]">
           <div className="provision md:pt-3 md:px-5 text-[#222] text-bold text-sm text-left"
-            dangerouslySetInnerHTML={{__html: constitution}}
+            dangerouslySetInnerHTML={{__html: constitution.replace(new RegExp(search, 'gi'), `<span class="highlight">${search}</span>`)}}
           ></div>
         </div>
       </div>

diff --git a/src/components/Sections.jsx b/src/components/Sections.jsx
@@ -1,6 +1,7 @@
 import accordionToggle from "../utils/accordion.js";
+import "../styles/Section.css";
 
-export default function Sections({sections}) {
+export default function Sections({sections, search = null}) {
 
   const convertDate = dateStr => {
     const dateArr = dateStr.split('/');
@@ -91,7 +92,7 @@ export default function Sections({sections}) {
               </div>
               <div className="w-full p-5 sm:rounded-b-xl bg-[#eee]">
                 <div className="provision md:pt-3 md:px-5 text-[#222] text-bold text-sm text-left"
-                  dangerouslySetInnerHTML={{__html: section.ร่างบทบัญญัติ}}
+                  dangerouslySetInnerHTML={{__html: section.ร่างบทบัญญัติ.replace(new RegExp(search, 'gi'), `<span class="highlight">${search}</span>`)}}
                 ></div>
               </div>
             </>

diff --git a/src/pages/Search.jsx b/src/pages/Search.jsx
@@ -7,12 +7,17 @@ import { useState, useEffect } from "react";
 import { chapterIdToName } from "../../src/constants/chapters.js";
 import createDataObject from "../c60-data-query/data-object.js";
 import isNumeric from "../utils/isNumeric.js";
+import ReactPaginate from 'react-paginate';
 
 export default function Search({ searchInputValue, setSearchInputValue }) {
 
     const [searchInput, setSearchInput] = useState([]);
     const [articleResult, setArticleResult] = useState([]);
     const [discussionistResult, setDiscussionistResult] = useState('');
+    const [articleResultShow, setArticleResultShow] = useState([]);
+    const [discussionistResultShow, setDiscussionistResultShow] = useState('');
+    let size = 0;
+    let items = [];
 
     function extractNumbersFromString(text) {
         // Use a regular expression to match numbers in the text
@@ -76,15 +81,30 @@ export default function Search({ searchInputValue, setSearchInputValue }) {
         });
     }
 
-    const renderArticleResult = () => {
+    function RenderArticleResult() {
+      const [itemOffset, setItemOffset] = useState(0);
+      const itemsPerPage = 5
+      const endOffset = itemOffset + itemsPerPage;
+      const currentItems = articleResult.slice(itemOffset, endOffset);
+      const pageCount = Math.ceil(articleResult.length / itemsPerPage);
+
+      const handlePageClick = (event) => {
+        const newOffset = (event.selected * itemsPerPage) % articleResult.length;
+        console.log(
+          `User requested page number ${event.selected}, which is offset ${newOffset}`
+        );
+        setItemOffset(newOffset);
+      };
+
         if (!articleResult || articleResult.length === 0) {
             return <div className="text-gray-400 pt-2">ไม่พบข้อมูล</div>;
         }
-        return articleResult.map((item, index) => {
+        return <div>
+          {currentItems.map((item, index) => {
             const [section, chapter] = item[1].split('|');
             return (
                 <Link
-                    to={"/section/" + item[0]}
+                    to={"/section/" + item[0] + `/${searchInputValue}`}
                     onClick={() => saveHistory(searchInputValue)}
                     key={index}
                     state={{ backable: true }}
@@ -96,14 +116,52 @@ export default function Search({ searchInputValue, setSearchInputValue }) {
                     <div>{section} <br className="sm:hidden" /> <span className="text-base">{chapter}</span></div>
                 </Link>
             );
-        });
+        })}
+          <div id="react-paginate" style={{display: 'flex', justifyContent: 'center', marginTop: '1em'}}>
+              <ReactPaginate
+                breakLabel="..."
+                nextLabel="next >"
+                onPageChange={handlePageClick}
+                pageRangeDisplayed={5}
+                pageCount={pageCount}
+                previousLabel="< previous"
+                renderOnZeroPageCount={null}
+                breakClassName={'page-item'}
+                breakLinkClassName={'page-link'}
+                containerClassName={'pagination'}
+                pageClassName={'page-item'}
+                pageLinkClassName={'page-link'}
+                previousClassName={'page-item'}
+                previousLinkClassName={'page-link'}
+                nextClassName={'page-item'}
+                nextLinkClassName={'page-link'}
+                activeClassName={'active'}
+              />
+            </div>
+        </div>
     }
 
-    const renderDiscussionistResult = () => {
+    function RenderDiscussionistResult(){
+      const [itemOffset, setItemOffset] = useState(0);
+      const itemsPerPage = 5
+      const endOffset = itemOffset + itemsPerPage;
+      console.log(`Loading items from ${itemOffset} to ${endOffset}`);
+      const currentItems = discussionistResult.slice(itemOffset, endOffset);
+      const pageCount = Math.ceil(discussionistResult.length / itemsPerPage);
+      console.log(currentItems);
+
+      const handlePageClick = (event) => {
+        const newOffset = (event.selected * itemsPerPage) % discussionistResult.length;
+        console.log(
+          `User requested page number ${event.selected}, which is offset ${newOffset}`
+        );
+        setItemOffset(newOffset);
+      };
         if (!discussionistResult || discussionistResult.length === 0) {
             return <div className="text-gray-400 pt-2">ไม่พบข้อมูล</div>;
         }
-        return discussionistResult.map((item, index) => {
+        return <div>
+          {currentItems.map((item, index) => {
             return (
                 <Link
                     to={"/discussionist/" + item}
@@ -118,7 +176,29 @@ export default function Search({ searchInputValue, setSearchInputValue }) {
                     <span>{item}</span>
                 </Link>
             );
-        });
+        })}
+        <div id="react-paginate" style={{display: 'flex', justifyContent: 'center', marginTop: '1em'}}>
+              <ReactPaginate
+                breakLabel="..."
+                nextLabel="next >"
+                onPageChange={handlePageClick}
+                pageRangeDisplayed={5}
+                pageCount={pageCount}
+                previousLabel="< previous"
+                renderOnZeroPageCount={null}
+                breakClassName={'page-item'}
+                breakLinkClassName={'page-link'}
+                containerClassName={'pagination'}
+                pageClassName={'page-item'}
+                pageLinkClassName={'page-link'}
+                previousClassName={'page-item'}
+                previousLinkClassName={'page-link'}
+                nextClassName={'page-item'}
+                nextLinkClassName={'page-link'}
+                activeClassName={'active'}
+              />
+            </div>
+        </div>
     }
 
 
@@ -164,10 +244,8 @@ export default function Search({ searchInputValue, setSearchInputValue }) {
                   score: item[2],
                 };
               });
-
-            setArticleResult([...new Set(scoringArr.map(obj => [obj.มาตรา, (isNumeric(obj.มาตรา) ? "มาตรา " : "") + obj.มาตรา + "|("+(isNumeric(obj.หมวด) ? "หมวด  " + obj.หมวด + " " : "") + chapterIdToName[obj.หมวด] + ")"]))].filter(value => value[1] !== "").splice(0, 5));
-            // discussionist
-            // search by name
+            let articleResult = [...new Set(scoringArr.map(obj => [obj.มาตรา, (isNumeric(obj.มาตรา) ? "มาตรา " : "") + obj.มาตรา + "|("+(isNumeric(obj.หมวด) ? "หมวด  " + obj.หมวด + " " : "") + chapterIdToName[obj.หมวด] + ")"]))].filter(value => value[1] !== "")
+            setArticleResult(articleResult)
             let discussionistNameSearch = [...new Set(
               createDataObject(data)
                 .data
@@ -186,7 +264,7 @@ export default function Search({ searchInputValue, setSearchInputValue }) {
                 .flat()
             );
 
-            setDiscussionistResult([...new Set(discussionistNameSearch.concat(discussionistOthersSearch))].filter(value => value !== "").splice(0, 5));
+            setDiscussionistResult([...new Set(discussionistNameSearch.concat(discussionistOthersSearch))].filter(value => value !== ""));
         }
 
     }, [searchInputValue, searchInput]);
@@ -203,20 +281,26 @@ export default function Search({ searchInputValue, setSearchInputValue }) {
                   ค้นหาตามมาตรา
                 </h4>
 
-                {renderArticleResult()}
+                <RenderArticleResult />
+                {/* <div style={{display: 'flex', justifyContent: 'center'}}>
+              <PaginatedItems itemsPerPage={5} />
+            </div> */}
 
                 <h4 className="pt-4 text-header">
                   ค้นหาตามผู้อภิปราย
                 </h4>
+                <RenderDiscussionistResult />
 
-                {renderDiscussionistResult()}
+                {/* {renderDiscussionistResult()} */}
               </div>
             ) : getHistory().length ? (
               <div>
                 <h4 className="text-header">ประวัติการค้นหา</h4>
                 {renderHistory()}
               </div>
-            ) : '' }
+            ) : ''
+            }
+
 
           </div>
         </div>

diff --git a/src/pages/Section.jsx b/src/pages/Section.jsx
@@ -15,6 +15,7 @@ export default function Section() {
 
   const {state} = useLocation();
   const {id} = useParams();
+  const {search} = useParams();
   const query = () => {
 
     const dataObj = createDataObject(data).filter("มาตรา", id);
@@ -68,8 +69,8 @@ export default function Section() {
             </div>
             <div className="flex flex-col gap-4 w-full">
               <div className="flex flex-col md:flex-row justify-between flex-wrap gap-4">
-                <Constitution constitution={section.constitution.บทบัญญัติ} />
-                <Sections sections={section.rows} />
+                <Constitution constitution={section.constitution.บทบัญญัติ} search={search}/>
+                <Sections sections={section.rows} search={search} />
               </div>
             </div>
 

diff --git a/src/styles/Home.css b/src/styles/Home.css
@@ -88,3 +88,31 @@ body {
   position: absolute;
   left: -9999px;
 }
+
+#react-paginate ul {
+  display: inline-block;
+  margin-left: 20px;
+  padding-left: 0;
+}
+
+#react-paginate li {
+  display: inline-block;
+  border: 1px solid rgb(224, 224, 224);
+  color: #fff;
+  cursor: pointer;
+  margin-right: 4px;
+  border-radius: 5px;
+  margin-bottom: 5px;
+}
+
+#react-paginate li a {
+    padding: 2px 10px;
+    display: inline-block;
+    color: #fff;
+    outline: none;
+}
+
+#react-paginate li.active {
+  background: rgb(224, 224, 224);
+  outline: none;
+}
diff --git a/src/styles/Section.css b/src/styles/Section.css
@@ -0,0 +1,4 @@
+.highlight {
+    background-color: yellow;
+    color: black;
+  }
-Original file line number
+Diff line change
@@ Expand Up / @@ -35,4 +35,4 @@ @@
       to {
         transform: rotate(360deg);
       }
-    }
+    }