Merge pull request #172 from kaogeek/develop

Merge develop

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# /cons60-web

src/components/Constitution.jsx

@@ -25,8 +25,6 @@ export default function Constitution({constitution, search = null}) {
             dangerouslySetInnerHTML={{__html: constitution.replace(new RegExp(search, 'gi'), `<span class="highlight">${search}</span>`)}}
           ></div>
         </div>
-        <button className="visually-hidden">ก่อนหน้า</button>
-        <button className="visually-hidden">ต่อไป</button>
       </div>
     </div>
   )

src/components/HamburgerSVG.jsx

@@ -6,6 +6,7 @@ export default function HamburgerSVG() {
       height="16"
       viewBox="0 0 25 16"
       fill="none"
+      aria-label="เมนู"
     >
       <path
         fillRule="evenodd"

src/components/Overview/ByChapter.jsx

@@ -28,9 +28,23 @@ function ByChapter() {
 
     // Convert to array
     // [chapterName, count]
-    const sorted = Object.entries(newResult).sort((a, b) =>
-      sort === 0 ? b[1] - a[1] : a[1] - b[1]
-    );
+    const sorted = Object.entries(newResult).sort((a, b) => {
+      if (sort === 2) {
+        const idA = parseInt(chapterNameToId[a[0]].match(/\d+/), 10);
+        const idB = parseInt(chapterNameToId[b[0]].match(/\d+/), 10);
+
+        if (isNaN(idA)) return 1;
+        if (isNaN(idB)) return -1;
+
+        return idA - idB ;
+      } else if (sort === 1) {
+        return a[1] - b[1];
+      } else if (sort === 0) {
+        return b[1] - a[1];
+      }
+      return 0;
+    });
+
     setResult(sorted);
   }, [sort]);
 
@@ -39,7 +53,7 @@ function ByChapter() {
       <div className="w-11/12 md:w-5/6 lg:w-3/4 flex flex-col gap-4">
         <div className="flex flex-row justify-between flex-wrap gap-1 text-center">
           <div className="text-2xl md:text-3xl font-bold text-header">ค้นหาจากหมวด</div>
-          <SortBy sort={sort} setSort={setSort} />
+          <SortBy sort={sort} setSort={setSort} mode="chapter"/>
         </div>
         <div className="flex flex-col items-center gap-2 w-full">
           {result.map(([chapterName, count]) => (
@@ -61,4 +75,4 @@ function ByChapter() {
   );
 }
 
-export default ByChapter;
+export default ByChapter;

src/components/Overview/BySection.jsx

@@ -77,6 +77,12 @@ function BySection() {
 
   const sortResult = useCallback(
     (result) => {
+      if (sort === 2) {
+        return result.sort((a, b) =>
+        sort === parseInt(b[0], 10) - parseInt(a[0], 10)
+        );
+      }
+
       return result.sort((a, b) =>
         sort === 0 ? b[1].total - a[1].total : a[1].total - b[1].total
       );
@@ -141,7 +147,7 @@ function BySection() {
                   )}
                 </>
               )}
-              <SortBy sort={sort} setSort={setSort} />
+              <SortBy sort={sort} setSort={setSort} mode="section"/>
             </div>
             <div className="flex flex-col justify-center items-center gap-2.5 w-full">
               {result.map(([Section, { chapterName, total }]) => (

src/components/Sections.jsx

@@ -1,31 +1,39 @@
 import accordionToggle from "../utils/accordion.js";
+import React, { useState, useEffect } from 'react';
 import "../styles/Section.css";
 import "../styles/Normal.css";
 
 export default function Sections({sections, search = null}) {
 
   const convertDate = dateStr => {
     const dateArr = dateStr.split('/');
-    const date = new Date(dateArr[2]-543, dateArr[1]-1, dateArr[0]);
+    const date = new Date(dateArr[2] - 543, dateArr[1] - 1, dateArr[0]);
     return date.toLocaleDateString('th-TH', {
       day: 'numeric',
       month: 'long',
       year: 'numeric',
     })
   };
-
+
+  const [isTopicExpanded, setTopicIsExpanded] = useState(false);
+  const [isShown, setIsShown] = useState(false);
+
   const sectionArr = sections.map((section, index) => (
-    <div id={'accordion-'+(index+1)} data-accordion-id={index+1} className="accordion accordion-collapsed flex flex-col w-full gap-x-1">
+    <div id={'accordion-' + (index + 1)} data-accordion-id={index + 1} className="accordion accordion-collapsed flex flex-col w-full gap-x-1">
       <div className="w-full sm:rounded-xl bg-white bg-opacity-5">
-        <button onClick={() => accordionToggle(index+1)} className="w-full p-5 grid grid-cols-3 justify-between">
+        <button onClick={() => {
+          accordionToggle(index + 1);
+          setTopicIsExpanded(false);
+          setIsShown(section.ประเด็นการพิจารณา.length > 500)
+        }} className="w-full p-5 grid grid-cols-3 justify-between">
           <div className="block col-span-2 text-left">
             <h1 className="text-2xl md:text-3xl text-header">ประชุมครั้งที่ {section.ประชุมครั้งที่}</h1>
             <h5 className="text-sm pt-3 text-subheader">{convertDate(section.date)} / หน้า {section.หน้า}</h5>
           </div>
           <div className="flex justify-end items-center gap-2">
             <a href={section.link} onClick={evt => {
               evt.stopPropagation();
-              accordionToggle(index+1, true);
+              accordionToggle(index + 1, true);
             }} target="_blank" rel="noreferrer">
               <svg className="w-[36px] h-[36px] md:w-[48px] md:h-[48px]" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <circle cx="24.7529" cy="24.1987" r="24" fill="#240c00" />
@@ -42,44 +50,44 @@ export default function Sections({sections, search = null}) {
         <div className="accordion-collapsable">
           <hr className="opacity-20" />
           <div id="section-info" className="p-5">
-            { section.ร่างมาตรา ? (
+            {section.ร่างมาตรา ? (
               <div className="py-3">
                 <h3 className="text-sm text-header">ร่างมาตรา</h3>
                 <h2 className="text-lg md:text-xl pt-3 text-subheader">{section.ร่างมาตรา}</h2>
               </div>
-            ) : '' }
+            ) : ''}
             <div className="py-3">
               <h3 className="text-sm text-header">ผู้อภิปราย</h3>
               <h2 className="discussionist text-lg md:text-xl pt-3 text-subheader">
-                { section.ผู้อภิปราย.length
-                    ? section.ผู้อภิปราย
-                      .map(s => (
-                        <>
-                          <span className="inline-block">{s}</span>
-                          <span className="comma">, </span>
-                        </>
-                      ))
-                    : 'ไม่มีผู้อภิปราย' }
+                {section.ผู้อภิปราย.length
+                  ? section.ผู้อภิปราย
+                    .map(s => (
+                      <>
+                        <span className="inline-block">{s}</span>
+                        <span className="comma">, </span>
+                      </>
+                    ))
+                  : 'ไม่มีผู้อภิปราย'}
               </h2>
             </div>
-            { section.หมายเหตุ ? (
+            {section.หมายเหตุ ? (
               <div className="py-3">
                 <h3 className="text-sm text-header">หมายเหตุ</h3>
                 <h2 className="pt-3 text-subheader">{section.หมายเหตุ}</h2>
               </div>
-            ) : '' }
-            { section.มติที่ประชุม ? (
+            ) : ''}
+            {section.มติที่ประชุม ? (
               <div className="py-3">
                 <h3 className="text-sm text-header">มติที่ประชุม</h3>
                 <div className="pt-3 text-subheader"
-                  dangerouslySetInnerHTML={{__html: section.มติที่ประชุม}}
+                  dangerouslySetInnerHTML={{ __html: section.มติที่ประชุม }}
                 ></div>
               </div>
-            ) : '' }
+            ) : ''}
           </div>
-          { section.ร่างบทบัญญัติ.length ? (
+          {section.ร่างบทบัญญัติ.length ? (
             <>
-              <div className="w-full px-2 py-5 sm:p-5 bg-[#ddd]">
+              <div className="w-full px-2 py-5 sm:rounded-t-lg bg-[#ddd]">
                 <div className="flex items-center gap-3 sm:gap-10 px-2">
                   <div className="flex gap-2 ml-3 items-center">
                     <div className="w-4 h-4 sm:w-5 sm:h-5 rounded-full bg-[#12ad75]" />
@@ -93,20 +101,38 @@ export default function Sections({sections, search = null}) {
               </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.ร่างบทบัญญัติ.replace(new RegExp(search, 'gi'), `<span class="highlight">${search}</span>`)}}
+                  dangerouslySetInnerHTML={{ __html: section.ร่างบทบัญญัติ }}
                 ></div>
               </div>
             </>
-          ) : '' }
-          <button className="visually-hidden">ก่อนหน้า</button>
-          <button className="visually-hidden">ต่อไป</button>
+          ) : ''}
+          {section.ประเด็นการพิจารณา.length ? (
+            <>
+              <div className="py-3">
+                <h2 className="text-ml text-header">ประเด็นการพิจารณา</h2>
+              </div>
+              <div className="w-full p-5 sm:rounded-md bg-[#eee]">
+                <div className="provision md:pt-3 md:px-5 text-[#222] text-bold text-sm text-left">
+                  <div className={`truncate-500 ${isTopicExpanded ? 'expanded' : ''}`}>
+                    <div dangerouslySetInnerHTML={{ __html: section.ประเด็นการพิจารณา }} />
+                  </div>
+                  {isShown &&
+                    <button style={{ color: '#4caf50' }} onClick={() => setTopicIsExpanded(!isTopicExpanded)}>
+                      {isTopicExpanded ? 'อ่านน้อยลง' : 'อ่านเพิ่มเติม'}
+                    </button>
+                  }
+                </div>
+              </div>
+            </>
+          ) : ''}
+          <button className="visually-hidden" onClick={() => accordionToggle(index-1)} >ก่อนหน้า</button>
         </div>
       </div>
     </div>
   ));
-  
+
   return sectionArr;
-  
+
 }
 
 

src/components/SortBy.jsx

@@ -1,18 +1,24 @@
-function SortBy({ sort, setSort }) {
+import React from 'react';
+
+function SortBy({ sort, setSort, mode = "" }) {
   return (
     <div className="text-center md:text-right">
       <div className="rounded-full py-2 px-2 block-darker inline-block">
         <select
           className="bg-neutral-900 rounded-full w-full"
           value={sort}
-          onChange={(e) => setSort(parseInt(e.target.value))}
+          onChange={(e) => setSort(Number(e.target.value))}
         >
           <option value={0}>เรียงจากแก้ไขมาก</option>
           <option value={1}>เรียงจากแก้ไขน้อย</option>
+          { mode === "section" ? (
+            <option value={2}>เรียงลำตับตามมาตรา</option>
+          ) : mode === "chapter" ? ( <option value={2}>เรียงลำตับตามหมวด</option>): (<></>)
+          }
         </select>
       </div>
     </div>
   );
 }
 
-export default SortBy;
+export default SortBy;

src/pages/Discussionist.jsx

@@ -79,6 +79,11 @@ export default function Discussionist() {
 
   const sortResult = useCallback(
     (result) => {
+      if (sort === 2) {
+          return result.sort((a, b) =>
+          sort === parseInt(b[0], 10) - parseInt(a[0], 10)
+        );
+      }
       return result.sort((a, b) =>
         sort === 0 ? b[1].total - a[1].total : a[1].total - b[1].total
       );
@@ -158,7 +163,7 @@ export default function Discussionist() {
                   )}
                 </>
               )}
-              <SortBy sort={sort} setSort={setSort} />
+              <SortBy sort={sort} setSort={setSort} mode="section" />
             </div>
             <div className="flex flex-col justify-center items-center gap-2.5 w-full">
               {result.map(([Section, { chapterName, total }]) => (

src/pages/RelatedInfo.jsx

@@ -28,6 +28,9 @@ export default function RelatedInfo() {
             <a className="doc" href="https://dl.parliament.go.th/handle/20.500.13072/615371/browse" target="_blank" rel="noreferrer">
               บันทึกการประชุมคณะกรรมการร่างรัฐธรรมนูญ ครั้งที่ 1-501
             </a>
+            <a className="doc" href="https://dl.parliament.go.th/handle/20.500.13072/590380" target="_blank" rel="noreferrer">
+              รัฐธรรมนูญฉบับแก้ไขเพิ่มเติม 2564
+            </a>
           </div>
         </div>
       </div>

src/pages/Search.jsx

@@ -90,9 +90,6 @@ export default function Search({ searchInputValue, setSearchInputValue }) {
 
       const handlePageClick = (event) => {
         const newOffset = (event.selected * itemsPerPage) % articleResult.length;
-        console.log(
-          `User requested page number ${event.selected}, which is offset ${newOffset}`
-        );
         setItemOffset(newOffset);
       };
 
@@ -145,16 +142,11 @@ export default function Search({ searchInputValue, setSearchInputValue }) {
       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) {
@@ -214,6 +206,13 @@ export default function Search({ searchInputValue, setSearchInputValue }) {
         }
     };
 
+    function uniq(array) {
+      var seen = {};
+      return array.filter(function(item) {
+          return seen.hasOwnProperty(item) ? false : (seen[item] = true);
+      });
+  }
+
     useEffect(() => {
         if (searchInputValue.trim() === "") {
             setArticleResult([]);
@@ -233,6 +232,7 @@ export default function Search({ searchInputValue, setSearchInputValue }) {
                 chapterIdToName[obj.หมวด] + ")"
               ]
             ).filter(value => value[1] !== "");
+            articleResult = uniq(articleResult)
             setArticleResult(articleResult);
 
             let discussionistNameSearch = [...new Set(

src/styles/Home.css

@@ -84,6 +84,29 @@ body {
   color: #ff5151;
 }
 
+.truncate-7 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 7;
+  -webkit-box-orient: vertical;
+}
+
+.truncate-500 {
+  display: -webkit-box;
+  -webkit-line-clamp: 5; /* Adjust the number of lines as needed */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* white-space: nowrap; */
+  max-height: 100ch;
+}
+
+.expanded {
+  /* Remove truncation styles */
+  -webkit-line-clamp: initial;
+  max-height: none;
+}
+
 #truehits_div {
   position: absolute;
   left: -9999px;

src/utils/accordion.js

@@ -19,7 +19,6 @@ export default function accordionToggle(id, forceOpen=false) {
   const navExpanded = document.getElementById('nav-'+id);
   navActive.className = 'nav py-2 px-5 font-bold text-left w-full md:w-64 text-[#9F9F9F]';
   navExpanded.className = 'nav nav-active py-2 px-5 font-bold text-left w-full md:w-64 bg-white rounded-lg text-[#131313]';
-
   return;
 
 }