Added update & create collection button

src/components/UI/Form/Calendar/Calendar.tsx

@@ -31,9 +31,11 @@ export const Calendar: React.SFC<CalendarProps> = ({
   const dateValue = field.value ? moment(field.value, moment.defaultFormat).toDate() : null;
   // const defaultDateValue = field.value ? field.value : setFieldValue(field.name, '');
 
-  const handleDateChange = (date: Date | null) => {
+  const handleDateChange = (date: Date | null | string) => {
     if (date) {
-      setFieldValue(field.name, date);
+      if (date !== 'Invalid Date') setFieldValue(field.name, date);
+    } else {
+      setFieldValue(field.name, null);
     }
   };
 

src/components/UI/SearchBar/SearchBar.tsx

@@ -52,7 +52,7 @@ export const SearchBar: React.SFC<SearchBarProps> = (props) => {
         <IconButton
           aria-label="toggle password visibility"
           onClick={(e: any) => {
-            props.handleClick(e, 'search');
+            props.handleClick(e, 'search', 'update');
           }}
         >
           <AdvancedSearch />

src/components/UI/Tooltip/Tooltip.tsx

@@ -5,11 +5,17 @@ interface TooltipProps {
   title: String;
   placement: TooltipElement.TooltipProps['placement'];
   children: ReactNode;
+  tooltipClass?: string;
 }
 
 export const Tooltip: React.SFC<TooltipProps> = (props: TooltipProps) => {
   return (
-    <TooltipElement.default title={props.title} placement={props.placement} arrow>
+    <TooltipElement.default
+      title={props.title}
+      placement={props.placement}
+      arrow
+      classes={{ tooltip: props.tooltipClass }}
+    >
       <div>{props.children}</div>
     </TooltipElement.default>
   );

src/containers/Chat/ChatConversations/ChatConversations.module.css

@@ -34,21 +34,13 @@
 }
 
 .SaveCollection {
-  margin: 6%;
+  margin: 0% 6%;
   position: absolute;
-  width: 100%;
-  bottom: 3%;
-  background-color: #fff;
-  border: 1px solid rgba(17, 150, 86, 0.5);
-  border-radius: 25px;
-  width: fit-content;
+  width: 85%;
+  height: 10% !important;
+  bottom: 15px;
+  width: -moz-fit-content;
   height: 48px;
-  text-align: center !important;
-}
-
-.button {
-  border: unset !important;
-  padding: 0px !important;
 }
 
 .cancelButton {
@@ -57,4 +49,11 @@
 
 .container {
   padding: 10px !important;
+  display: flex;
+  justify-content: center;
+}
+
+.tooltipClass {
+  background-color: #073f24 !important;
+  width: 150px !important;
 }

src/containers/Chat/ChatConversations/ChatConversations.test.helper.ts

@@ -1,137 +1,76 @@
 import { mocks as SAVED_SEARCH_MOCK } from '../../SavedSearch/SavedSearchToolbar/SavedSearchToolbar.test';
 import { SEARCH_QUERY } from '../../../graphql/queries/Search';
-import { conversationQuery } from '../Chat.test.helper';
 
-const searchQuery = (messageLimit: number, contactLimit: number, filter: any) => {
-  return {
-    request: {
-      query: SEARCH_QUERY,
-      variables: {
-        filter: filter,
-        messageOpts: { limit: messageLimit },
-        contactOpts: { limit: contactLimit },
-      },
-    },
-    result: {
-      data: {
-        search: [
+const withResult = {
+  data: {
+    search: [
+      {
+        __typename: 'Conversation',
+        contact: {
+          id: '6',
+          name: 'Red Sparrow',
+          phone: '919520285543',
+          lastMessageAt: '2020-08-03T07:01:36Z',
+        },
+        messages: [
           {
-            contact: {
+            id: '34',
+            body: 'Hi',
+            insertedAt: '2020-08-03T07:01:36Z',
+            receiver: {
+              id: '2',
+            },
+            sender: {
               id: '6',
-              name: 'Red Sparrow',
-              phone: '919520285543',
-              lastMessageAt: '2020-08-03T07:01:36Z',
             },
-            messages: [
+            tags: [
               {
-                body: 'Hi',
-                id: '34',
-                insertedAt: '2020-08-03T07:01:36Z',
-                receiver: {
-                  id: '2',
-                },
-                sender: {
-                  id: '6',
-                },
-                tags: [
-                  {
-                    id: '8',
-                    label: 'Not working',
-                    colorCode: '#00d084',
-                    parent: null,
-                  },
-                ],
+                id: '8',
+                label: 'Not working',
+                colorCode: '#00d084',
+                parent: null,
               },
             ],
           },
         ],
       },
-    },
-  };
+    ],
+  },
 };
-export const chatConversationsMocks = [
-  {
+
+const noResult = { data: { search: [] } };
+
+const searchQuery = (
+  messageLimit: number,
+  contactLimit: number,
+  filter: any,
+  showResult: boolean = true
+) => {
+  return {
     request: {
       query: SEARCH_QUERY,
-      variables: { contactOpts: { limit: 25 }, filter: { id: '2' }, messageOpts: { limit: 25 } },
-    },
-    result: {
-      data: {
-        conversation: {
-          contact: {
-            id: '2',
-            name: 'Jane Doe',
-            phone: '919520285543',
-            lastMessageAt: '2020-08-03T07:01:36Z',
-          },
-          messages: [
-            {
-              id: '1',
-              body: 'Hey there whats up?',
-              insertedAt: '2020-06-25T13:36:43Z',
-              receiver: {
-                id: '1',
-              },
-              sender: {
-                id: '2',
-              },
-              tags: [
-                {
-                  id: '1',
-                  label: 'important',
-                  colorCode: null,
-                  parent: null,
-                },
-              ],
-            },
-          ],
-        },
+      variables: {
+        filter: filter,
+        messageOpts: { limit: messageLimit },
+        contactOpts: { limit: contactLimit },
       },
     },
-  },
+    result: showResult ? withResult : noResult,
+  };
+};
+
+export const chatConversationsMocks = [
   searchQuery(50, 50, {}),
-  searchQuery(50, 50, { term: 'a' }),
+  searchQuery(50, 50, { term: 'a' }, false),
   searchQuery(50, 50, { term: '' }),
-  searchQuery(5, 10, { includeTags: ['12'] }),
-  searchQuery(5, 10, { term: '', includeTags: ['12'] }),
-];
-
-export const searchQueryMock = searchQuery(50, 50, { term: '' });
-export const searchQueryEmptyMock = searchQuery(50, 50, {});
-
-export const conversations = [
-  {
-    contact: {
-      id: '6',
-      name: 'Red Eye',
-      phone: '919520225543',
-      lastMessageAt: '2020-08-03T07:01:36Z',
-    },
-    messages: [
-      {
-        id: '34',
-        body: 'Hi',
-        insertedAt: '2020-08-03T07:01:36Z',
-        receiver: {
-          id: '1',
-        },
-        sender: {
-          id: '6',
-        },
-        tags: [
-          {
-            id: '8',
-            label: 'Not replied',
-          },
-        ],
-      },
-    ],
-  },
+  searchQuery(5, 10, { includeTags: ['12'] }, false),
 ];
 
 export const ChatConversationMocks = [
   ...chatConversationsMocks,
   ...chatConversationsMocks,
   ...SAVED_SEARCH_MOCK,
-  conversationQuery,
 ];
+
+export const searchQueryMock = searchQuery(50, 50, { term: '' });
+export const searchQueryEmptyMock = searchQuery(50, 50, {});

src/containers/Chat/ChatConversations/ChatConversations.test.tsx

@@ -1,16 +1,17 @@
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
-import { render, wait, fireEvent } from '@testing-library/react';
+import { render, wait, fireEvent, cleanup } from '@testing-library/react';
 import ChatConversations from './ChatConversations';
 import { MockedProvider } from '@apollo/client/testing';
-import { ChatConversationMocks, conversations } from './ChatConversations.test.helper';
+import { ChatConversationMocks } from './ChatConversations.test.helper';
 
 const mocks = ChatConversationMocks;
 
+afterEach(cleanup);
 const chatConversation = (
-  <MockedProvider mocks={mocks} addTypename={false}>
+  <MockedProvider mocks={mocks}>
     <Router>
-      <ChatConversations contactId={2} />
+      <ChatConversations contactId={6} />
     </Router>
   </MockedProvider>
 );