Merge pull request #195 from glific/search-fixes

Search fixes
glific · Jul 14, 2020 · 30d6ec1 · 30d6ec1
2 parents 12508bd + 4d86f49
commit 30d6ec1
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 49 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -26,13 +26,10 @@ const App = () => {
           <Route path="/tag" exact component={TagPage} />
           <Route path="/tag/add" exact component={Tag} />
           <Route path="/tag/:id/edit" exact component={Tag} />
-          {/* Doesn't this error without a passed in `contactId`? */}
-
           <Route path="/speed-send" exact component={MessageTemplatePage} />
           <Route path="/speed-send/add" exact component={MessageTemplate} />
           <Route path="/speed-send/:id/edit" exact component={MessageTemplate} />
           <Route path="/chat" exact component={Chat} />
-          {/* This part isn't working properly */}
           <Route
             exact
             path="/chat/:contactId"

diff --git a/src/containers/Chat/Chat.tsx b/src/containers/Chat/Chat.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useCallback } from 'react';
 import { Paper } from '@material-ui/core';
 import { useQuery } from '@apollo/client';
+import { Redirect } from 'react-router-dom';
 
 import ChatMessages from './ChatMessages/ChatMessages';
 import ChatConversations from './ChatConversations/ChatConversations';
@@ -30,7 +31,7 @@ const Chat: React.SFC<ChatProps> = ({ contactId }) => {
     },
   };
 
-  const { loading, error, subscribeToMore } = useQuery<any>(GET_CONVERSATION_QUERY, {
+  const { loading, error, data, subscribeToMore } = useQuery<any>(GET_CONVERSATION_QUERY, {
     variables: queryVariables,
   });
 
@@ -115,6 +116,10 @@ const Chat: React.SFC<ChatProps> = ({ contactId }) => {
   if (loading) return <Loading />;
   if (error) return <p>Error :(</p>;
 
+  if (!contactId && data.conversations.length !== 0) {
+    return <Redirect to={'/chat/'.concat(data.conversations[0].contact.id)} />;
+  }
+
   return (
     <Paper>
       <div className={styles.Chat}>

diff --git a/src/containers/Chat/ChatConversations/ChatConversations.tsx b/src/containers/Chat/ChatConversations/ChatConversations.tsx
@@ -92,23 +92,6 @@ export const ChatConversations: React.SFC<ChatConversationsProps> = () => {
     conversationList = <p data-testid="empty-result">You do not have any conversations.</p>;
   }
 
-  // // Constructing ChatConversation objects for conversations with at least one message.
-  // let conversationList;
-  // if (data.search.length > 0) {
-  //   conversationList = data.search.reduce((filtered: Array<any>, conversation: any) => {
-  //     if (conversation.messages.length > 0) {
-  //       return filtered.concat(
-  //         <ChatConversation
-  //           key={conversation.contact.id}
-  //           contactId={conversation.contact.id}
-  //           contactName={conversation.contact.name}
-  //           lastMessage={conversation.messages[0]}
-  //         />
-  //       );
-  //     }
-  //     return filtered;
-  //   }, []);
-
   const handleSearch = (e: any) => {
     e.preventDefault();
     let searchVal = e.target.searchInput.value.trim();

diff --git a/src/containers/Chat/ChatConversations/SearchBar.tsx b/src/containers/Chat/ChatConversations/SearchBar.tsx
@@ -13,40 +13,48 @@ export interface SearchBarProps {
 }
 
 export const SearchBar: React.SFC<SearchBarProps> = (props) => {
-  const [localSearchVal, setLocalSearchVal] = useState('');
+  const [localSearchValue, setLocalSearchValue] = useState('');
+
+  // use local state value so that we can set the defaults correctly
+  let inputValue: string = '';
+  if (localSearchValue) {
+    inputValue = localSearchValue;
+  } else {
+    inputValue = props.searchVal || '';
+  }
+
+  // display reset button only if value is entered
+  let resetButton = null;
+  if (inputValue) {
+    resetButton = (
+      <IconButton
+        className={styles.ResetSearch}
+        onClick={() => {
+          setLocalSearchValue('');
+          props.onReset();
+        }}
+      >
+        <CloseIcon className={styles.CloseIcon}></CloseIcon>
+      </IconButton>
+    );
+  }
+
   return (
     <form onSubmit={props.handleSubmit}>
       <div className={styles.SearchBar}>
         <div className={styles.IconAndText}>
           <img src={searchIcon} className={styles.SearchIcon} alt="Search" />
-          {props.searchVal ? (
-            <InputBase
-              className={styles.SearchField}
-              name="searchInput" // This is important for extracting the search value in parent component.
-              placeholder="Search"
-              defaultValue={props.searchVal}
-            />
-          ) : (
-            <InputBase
-              className={styles.SearchField}
-              name="searchInput" // This is important for extracting the search value in parent component.
-              placeholder="Search"
-              onChange={(e) => setLocalSearchVal(e.target.value)}
-              value={localSearchVal}
-            />
-          )}
+          <InputBase
+            className={styles.SearchField}
+            name="searchInput" // This is important for extracting the search value in parent component.
+            placeholder="Search"
+            onChange={(e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) =>
+              setLocalSearchValue(e.target.value)
+            }
+            value={inputValue}
+          />
         </div>
-        {props.searchVal || localSearchVal ? (
-          <IconButton
-            className={styles.ResetSearch}
-            onClick={() => {
-              setLocalSearchVal('');
-              props.onReset();
-            }}
-          >
-            <CloseIcon className={styles.CloseIcon}></CloseIcon>
-          </IconButton>
-        ) : null}
+        {resetButton}
       </div>
     </form>
   );