add search box

t9tio · Jul 11, 2019 · 02fca1c · 02fca1c
1 parent 5c9357c
commit 02fca1c
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 15 deletions.
diff --git a/pages/chat.js b/pages/chat.js
@@ -38,7 +38,7 @@ const Index = (props) => {
       return (
         <div className="msg-container">
           {
-            msgs.map(msg => (
+            msgs.filter(msg => !msg.thread_ts || msg.replies).map(msg => (
               <SlackMsg
                 msg={msg}
               />
@@ -52,7 +52,7 @@ const Index = (props) => {
   return (
     <div>
       <Head title={group.name} description={group.description} />
-      <Nav />
+      <Nav groupName={group.name} searchUrl={`wewe.t9t.io/chat/${encodeURIComponent(group.name)}`} />
 
       <div className="chat-section section">
         <div className="container">

diff --git a/pages/components/Nav.js b/pages/components/Nav.js
@@ -2,10 +2,26 @@ import React, { useState, useEffect } from 'react';
 // import ReactGA from 'react-ga';
 import './Nav.scss';
 
-function Nav() {
+function Nav({ searchUrl, groupName }) {
   // const [user, setUser] = useState('');
   const [isBurgerActive, setBugerActive] = useState(false);
+  const [search, setSearch] = useState('');
 
+  // ref https://stackoverflow.com/a/11384018/4674834
+  function openInNewTab(url) {
+    const win = window.open(url, '_blank');
+    win.focus();
+  }
+
+  function onSearch(e) {
+    if (e.key === 'Enter') {
+      openInNewTab(`https://www.google.com/search?q=site:"${searchUrl || 'wewe.t9t.io'}" ${search}`);
+    }
+  }
+
+  function onSearchChange(value) {
+    setSearch(value);
+  }
   // useEffect(() => {
   //   const urlParams = new URLSearchParams(window.location.search);
   //   const userOnQuery = urlParams.get('user');
@@ -40,14 +56,7 @@ function Nav() {
             <a href="/about" className="navbar-item">
               <strong>About</strong>
             </a>
-            {/* <div className="navbar-item">
-              <p className="control has-icons-right">
-                <input className="input nav-input" type="search" placeholder="Email" />
-                <span className="icon is-small is-right">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="#666" d="M23.822 20.88l-6.353-6.354c.93-1.465 1.467-3.2 1.467-5.059.001-5.219-4.247-9.467-9.468-9.467s-9.468 4.248-9.468 9.468c0 5.221 4.247 9.469 9.468 9.469 1.768 0 3.421-.487 4.839-1.333l6.396 6.396 3.119-3.12zm-20.294-11.412c0-3.273 2.665-5.938 5.939-5.938 3.275 0 5.94 2.664 5.94 5.938 0 3.275-2.665 5.939-5.94 5.939-3.274 0-5.939-2.664-5.939-5.939z" /></svg>
-                </span>
-              </p>
-            </div> */}
+
             <a
               href
               className={`navbar-burger ${isBurgerActive ? 'is-active' : ''}`}
@@ -85,7 +94,22 @@ function Nav() {
                   </div>
                 )
             } */}
+
             <div className="navbar-end">
+              <div className="navbar-item">
+                <p className="control has-icons-right">
+                  <input
+                    className="input nav-input"
+                    type="search"
+                    placeholder={`Search ${groupName || ''}`}
+                    onKeyDown={e => onSearch(e)}
+                    onChange={e => onSearchChange(e.target.value)}
+                  />
+                  <span className="icon is-small is-right">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="#666" d="M23.822 20.88l-6.353-6.354c.93-1.465 1.467-3.2 1.467-5.059.001-5.219-4.247-9.467-9.468-9.467s-9.468 4.248-9.468 9.468c0 5.221 4.247 9.469 9.468 9.469 1.768 0 3.421-.487 4.839-1.333l6.396 6.396 3.119-3.12zm-20.294-11.412c0-3.273 2.665-5.938 5.939-5.938 3.275 0 5.94 2.664 5.94 5.938 0 3.275-2.665 5.939-5.94 5.939-3.274 0-5.939-2.664-5.939-5.939z" /></svg>
+                  </span>
+                </p>
+              </div>
               <a href="/join" className="navbar-item "><strong>Join wewe</strong></a>
             </div>
           </div>

diff --git a/pages/components/SlackMsg.js b/pages/components/SlackMsg.js
@@ -49,7 +49,7 @@ const Msg = ({
       </div>
 
       <span className="msg-from">
-        <a href={`/chat/${groupName}/member/${user}`}><strong>{user}</strong></a>
+        {user}
 
         &nbsp;
         <a className="msg-from-time" href={`#${id}`}>

diff --git a/pages/members.js b/pages/members.js
@@ -31,7 +31,7 @@ const Index = (props) => {
   return (
     <div>
       <Head title={group.name} description={group.description} />
-      <Nav />
+      <Nav groupName={group.name} searchUrl={`wewe.t9t.io/chat/${encodeURIComponent(group.name)}`} />
       <div className="members-section section">
         <div className="container">
           <div className="columns">

diff --git a/pages/topic.js b/pages/topic.js
@@ -58,7 +58,7 @@ const Index = (props) => {
   return (
     <div>
       <Head title={topic.title} />
-      <Nav />
+      <Nav groupName={group.name} searchUrl={`wewe.t9t.io/chat/${encodeURIComponent(group.name)}`} />
       <div
         className="section"
         style={{

diff --git a/pages/topics.js b/pages/topics.js
@@ -49,7 +49,7 @@ const Index = (props) => {
   return (
     <div>
       <Head title={group.name} description={group.description} />
-      <Nav />
+      <Nav groupName={group.name} searchUrl={`wewe.t9t.io/chat/${encodeURIComponent(group.name)}`} />
       <div className="topics-section section">
         <div className="container">
           <div className="columns">
-Original file line number
+Diff line change
@@ Expand Up / @@ -49,7 +49,7 @@ const Msg = ({ @@
           </div>
           <span className="msg-from">
-            <a href={`/chat/${groupName}/member/${user}`}><strong>{user}</strong></a>
+            {user}
             &nbsp;
             <a className="msg-from-time" href={`#${id}`}>
@@ Expand Down @@