Merge pull request #14 from kaogeek/develop

Finishing up home page overview, and About page

.github/workflows/build-deploy.yml

@@ -28,7 +28,7 @@ jobs:
         run: npm ci
 
       - name: Building project
-        run: npm run build
+        run: CI=false npm run build
 
       - name: Running tests
         run: npm run test

package.json

@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-responsive": "^9.0.2",
     "react-router-dom": "^6.20.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

src/App.js

@@ -3,6 +3,7 @@ import { Routes, Route } from "react-router-dom";
 import Navbar from "./components/Navbar";
 import Home from "./pages/Home";
 import About from "./pages/About";
+import Section from "./pages/Section";
 
 export default function App() {
   return (
@@ -11,6 +12,7 @@ export default function App() {
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
+        <Route path="/section/:id" element={<Section />} />
       </Routes>
     </div>
   )

src/c60-data-query/README.md

@@ -0,0 +1,21 @@
+# กรธ.60 - Data Query
+
+### Documents
+
+filter(columnName, keyword) - Selected filtered rows by exact value.
+
+filterOut(columnName, keyword) - Remove filtered rows by exact value.
+
+filterArray(columnName, keyword) - Filter rows which have seach value in array item.
+
+search(columnName, keywords) - Partial search and order by ranking.
+
+sort(columnsObj{columnName: ASC/DESC}) - Sort data by using selected column.
+
+reverse() - Reverse data array.
+
+append(dataObj) - Concat another data at the end.
+
+prepend(dataObj) - Concat another data at the start.
+
+render(elemId, tableProps{}) - Render data table.

src/c60-data-query/app.js

@@ -0,0 +1,171 @@
+import data from './data.js';
+import createDataObject from './data-object.js';
+
+let $dataObj;
+
+(function init(param) {
+
+  const code = {
+'filter':
+`createDataObject(data.con)
+  .filter('หมวด', 16)
+  .render(
+    'data-section',
+    { id: 'data-table', border: 1 }
+  );`,
+'filterOut':
+`createDataObject(data.con)
+  .filterOut('หมวด', 1)
+  .filterOut('หมวด', 2)
+  .render(
+    'data-section',
+    { id: 'data-table', border: 1 }
+  );`,
+'filterArray':
+`createDataObject(data.doc)
+  .filterArray('ผู้อภิปราย', 'นายอัชพร จารุจินดา')
+  .render(
+    'data-section',
+    { id: 'data-table', border: 1 }
+  );`,
+'search':
+`createDataObject(data.doc)
+  .search('ประเด็นการพิจารณา', 'ศาลรัฐธรรมนูญ นิติธรรม รัฐสภา')
+  .render(
+    'data-section',
+    { id: 'data-table', border: 1 }
+  );`,
+'sort':
+`createDataObject(data.con)
+  .sort({
+    หมวด: 'ASC',
+    มาตรา: 'DESC'
+  })
+  .render(
+    'data-section',
+    { id: 'data-table', border: 1 }
+  );`,
+'reverse':
+`createDataObject(data.con)
+  .reverse()
+  .render(
+    'data-section',
+    { id: 'data-table', border: 1 }
+  );`,
+'append':
+`createDataObject(data.con)
+  .filter('มาตรา', 2)
+  .append(
+    createDataObject(data.con)
+      .filter('มาตรา', 5)
+  )
+  .render(
+    'data-section',
+    { id: 'data-table', border: 1 }
+  );`,
+'prepend':
+`createDataObject(data.con)
+  .filter('มาตรา', 2)
+  .prepend(
+    createDataObject(data.con)
+      .filter('มาตรา', 5)
+  )
+  .render(
+    'data-section',
+    { id: 'data-table', border: 1 }
+  );`,
+'log':
+`// Data object log during chain.
+createDataObject(data.con)
+  .filter('หมวด', 7)
+  .log('%c $dataObj log -> ', 'color: lime; background: black; ')
+  .filter('ส่วน', 3)
+  .render(
+    'data-section',
+    { id: 'data-table', border: 1 }
+  );
+  
+// Array log during chain
+$dataObj
+  .data  // get array of objects
+  .toReversed()
+  .log('%c Native array log -> ', 'color: lime; background: black; ')
+  .join('\\n');
+  
+// $dataObj.toString() return JSON
+console.log(
+  '%c $dataObj.toString() -> ',
+  'color: lime; background: black; ',
+  $dataObj+'');
+
+/**
+ * Open console to see logs.
+ **/
+`
+  };
+
+  addEventListener('load', evt => {
+
+    const editor = document.getElementById('query-editor');
+    const querySubmit = document.getElementById('query-submit');
+    const queryCopy = document.getElementById('query-copy');
+    const result = document.getElementById('query-result');
+    const resultCopy = document.getElementById('result-copy');
+    const querySampleIds = Array.from(
+      document.querySelectorAll('.query-sample')
+    ).map(elem => elem.id);
+
+    querySampleIds.forEach(id => {
+      document
+        .getElementById(id)
+        .addEventListener('click', evt => {
+          evt.stopPropagation();
+          evt.preventDefault();
+          editor.value = code[id.substring(6)];
+          document.getElementById('query-submit').click();
+          return evt;
+      });
+    });
+
+    // run query
+    querySubmit.addEventListener('click', evt => {
+      const code = `$dataObj = ${editor.value}`;
+      eval(code);
+      result.value = JSON.stringify($dataObj.data);
+      editor.focus();
+      editor.selectionStart = editor.value.length;
+      return evt;
+    });
+
+    // copy query
+    queryCopy.addEventListener('click', evt => {
+      editor.select();
+      document.execCommand('copy');
+    });
+
+    // copy JSON
+    resultCopy.addEventListener('click', evt => {
+      result.select();
+      document.execCommand('copy');
+    });
+
+    // back to top
+    document
+      .getElementById('btt')
+      .addEventListener('click', evt => {
+        evt.stopPropagation();
+        evt.preventDefault();
+        document
+          .querySelector('h1')
+          .scrollIntoView({ behavior: 'smooth', block: 'start' });
+        return evt;
+    });
+
+    querySubmit.click();
+    return evt;
+
+  });
+
+  return true;
+
+})({});

src/c60-data-query/array-log.js

@@ -0,0 +1,16 @@
+/**
+ * Array helper function for log during chaining
+ * Example: [1,2,3,4,5].filter(x).log(args).map(y).reduce(z)
+ * Result: Log filtered array, then map and reduce afterward.
+ * Warning: This code extend array prototype, don't use in production.
+ **/
+
+Object.defineProperty(
+  Array.prototype, 'log', {
+    enumerable: false,
+    value(...args) {
+      console.log(...args, this);
+      return this;
+    },
+  }
+);