Merge pull request #20 from kaogeek/develop

Discussionist Edit History Page

README.md

@@ -1,3 +1,38 @@
+# Cloning the Repository
+
+To clone this repository along with its submodules, follow the instructions below. These steps will ensure that you have a complete copy of the project, including [กรธ.60 - Data Query](https://github.com/iampz/c60-data-query.git)
+
+### Steps to Clone
+
+1. **Clone the Repository**
+
+   Open your terminal or command prompt and run the following command:
+
+   ```
+   git clone --recurse-submodules https://github.com/kaogeek/cons60-web
+   ```
+
+ This command clones the repository and all its submodules.
+
+1. **Initialize and Update Submodules**
+
+   If the repository was cloned without using `--recurse-submodules`, you need to run the following commands to initialize and update the submodules:
+
+   ```
+   git submodule update --init --recursive
+   ```
+
+This command initializes your local configuration file for submodules and updates the submodules.
+
+### Troubleshooting
+
+If you encounter any issues with submodules, such as broken links or missing files, you can try re-syncing and updating the submodules:
+
+```
+git submodule sync
+git submodule update --init --recursive
+```
+
 # Getting Started with Create React App
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

src/App.js

@@ -3,16 +3,22 @@ import { Routes, Route } from "react-router-dom";
 import Navbar from "./components/Navbar";
 import Home from "./pages/Home";
 import About from "./pages/About";
+import Search from "./pages/Search";
 import Chapter from "./pages/Chapter";
+import Discussionist from "./pages/Discussionist";
+import ScrollToTop from "./components/ScrollToTop";
 
 export default function App() {
   return (
-    <div className="App">
+    <div className="App text-white">
       <Navbar />
+      <ScrollToTop />
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
+        <Route path="/search" element={<Search />} />
         <Route path="/chapter/:id" element={<Chapter />} />
+        <Route path="/discussionist/:name" element={<Discussionist />} />
       </Routes>
     </div>
   )

src/components/Navbar.jsx

@@ -1,76 +1,136 @@
-import React from "react";
 import Logo from "./Logo";
 import HamburgerSVG from "./HamburgerSVG";
 import CloseBtnSVG from "./CloseBtnSVG";
 import { Link } from "react-router-dom";
+import { useLocation } from 'react-router-dom';
+import { Icon } from "@iconify/react";
+import React, { useEffect, useRef } from "react";
+
 
 function Navbar() {
   const [showMenu, setShowMenu] = React.useState(false);
+  const location = useLocation();
+  const searchInputRef = useRef(null);
+
+  useEffect(() => {
+    // Automatically focus the search input when on the search page
+    if (location.pathname === '/search') {
+      searchInputRef.current?.focus();
+    }
+  }, [location.pathname]); // Dependency array to re-run effect when pathname changes
+
 
   return (
     <div className="h-16 bg-black" data-testid="navbar">
       <div className="max-w-screen-xl h-full mx-auto px-4 flex justify-between items-center">
-        <Link to="/" className="text-2xl font-bold text-white">
-          <Logo />
-        </Link>
+
+
+        {location.pathname === '/search' && (
+          <div className="inline-block">
+            <Link to="/" className="text-2xl font-bold text-white sm:hidden">
+              <Icon icon="ic:round-arrow-back-ios" />
+            </Link>
+            <Link to="/" className="text-2xl font-bold text-white hidden sm:block">
+              <Logo />
+            </Link>
+          </div>
+        )}
+
+        {location.pathname === '/search' && (
+          <div className="sm:w-3/5 w-4/5  inline-block text-sm ">
+            {/* Replace this with your actual search bar component */}
+
+            <div className="text-2xl text-black px-6 bg-white flex content-center py-1 items-center rounded-full">
+              <Icon icon="bx:bx-search-alt-2" className="text-black" />
+              <div className="px-2"></div>
+              <input
+                type="text"
+                id="search-input"
+                name="search-input"
+                className="focus:outline-none w-full"
+                ref={searchInputRef}
+              ></input>
+            </div>
+
+          </div>
+
+        )}
+
+        {location.pathname === '/search' && (
+          <div className="inline-block">
+          </div>
+        )}
+
+        {location.pathname !== '/search' && (
+          <div className="inline-block">
+            <Link to="/" className="text-2xl font-bold text-white">
+              <Logo />
+            </Link>
+          </div>
+        )}
+
         {/* Desktop Menu */}
-        <div className="hidden xs:flex gap-8">
-          <Link
-            to="/"
-            className="text-white hover:underline underline-offset-4"
-          >
-            ภาพรวม
-          </Link>
-          <Link
-            to="/about"
-            className="text-white hover:underline underline-offset-4"
-          >
-            เกี่ยวกับโครงการ
-          </Link>
-        </div>
-        {/* Mobile Menu */}
-        <div className="xs:hidden flex items-center">
-          {/* Hamburger menu icon for mobile */}
-          {!showMenu ? (
-            <button
-              onClick={() => setShowMenu(true)}
-              className="text-white focus:outline-none focus:text-white"
-            >
-              <HamburgerSVG />
-            </button>
-          ) : (
-            <button
-              onClick={() => setShowMenu(false)}
-              className="text-white focus:outline-none focus:text-white"
-            >
-              <CloseBtnSVG />
-            </button>
-          )}
-
-          {showMenu && (
-            <div className="md:hidden absolute top-16 left-0 right-0 bg-black">
-              {/* Mobile menu items */}
-              <div className="flex flex-col gap-2 mx-4 mb-4">
-                <div className="w-auto inline-block">
-                  <Link
-                    to="/"
-                    className="text-white hover:underline underline-offset-4"
-                  >
-                    ภาพรวม
-                  </Link>
-                </div>
-                <div className="w-auto inline-block">
-                  <Link
-                    to="/about"
-                    className="text-white hover:underline underline-offset-4"
-                  >
-                    เกี่ยวกับโครงการ
-                  </Link>
+        {location.pathname !== '/search' && (
+          <div className="t">
+            <div className="hidden xs:flex gap-8">
+              <Link
+                to="/"
+                className="text-white hover:underline underline-offset-4"
+              >
+                ภาพรวม
+              </Link>
+              <Link
+                to="/about"
+                className="text-white hover:underline underline-offset-4"
+              >
+                เกี่ยวกับโครงการ
+              </Link>
+            </div>
+            {/* Mobile Menu */}
+            <div className="xs:hidden flex items-center">
+              {/* Hamburger menu icon for mobile */}
+              {!showMenu ? (
+                <button
+                  onClick={() => setShowMenu(true)}
+                  className="text-white focus:outline-none focus:text-white"
+                >
+                  <HamburgerSVG />
+                </button>
+              ) : (
+                <button
+                  onClick={() => setShowMenu(false)}
+                  className="text-white focus:outline-none focus:text-white"
+                >
+                  <CloseBtnSVG />
+                </button>
+              )}
+
+              {showMenu && (
+                <div className="md:hidden absolute top-16 left-0 right-0 bg-black">
+                  {/* Mobile menu items */}
+                  <div className="flex flex-col gap-2 mx-4 mb-4">
+                    <div className="w-auto inline-block">
+                      <Link
+                        to="/"
+                        className="text-white hover:underline underline-offset-4"
+                      >
+                        ภาพรวม
+                      </Link>
+                    </div>
+                    <div className="w-auto inline-block">
+                      <Link
+                        to="/about"
+                        className="text-white hover:underline underline-offset-4"
+                      >
+                        เกี่ยวกับโครงการ
+                      </Link>
+                    </div>
+                  </div>
                 </div>
-              </div>
+              )}
             </div>
-          )}
-        </div>
+          </div>
+        )}
       </div>
     </div>
   );

src/components/Overview/ByDiscussionist.jsx

@@ -140,7 +140,7 @@ function ByDiscussionist() {
             <div className="flex flex-col justify-center items-center gap-2.5 w-full">
               {result.map(([discussionist, chapterCountMap]) => (
                 <Link
-                  to={`/${discussionist}`}
+                  to={`/discussionist/${discussionist}`}
                   className="w-full"
                   key={discussionist}
                 >

src/components/ScrollToTop.jsx

@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export default function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}