avoid duplicate message fetching and rendering (#43)

* avoid duplicate message fetching and rendering.

Prevents duplicate error messages from being fetched on the
initial load.

Does not fetch initial message for the chat pop up if
the popup is hidden

TEST=manual

ran locally, verified this functionality.

Change-Id: Idca1a37622ccc6a362681a8c4f9f7c9994f9fa58

* use state to manage rendering of chat panel in pop up.

Also use seperate function for initial message error
to enseure that duplicate messages are not sent

Change-Id: Icf571759ae15a0a3ed68756c87b518c141011520

* Remove fixes for duplicate error message.

That will be handled in a seperate PR

Change-Id: I8e98466cd9284241b3f124f946e58ee86d7b4b54

* undo name change for defaultHandleApiError

Change-Id: I83e34c5e2cc945df59c4a94cca9618e3b164053c

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/chat-ui-react",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "A library of React Components for powering Yext Chat integrations.",
   "author": "[email protected]",
   "main": "./lib/commonjs/src/index.js",

src/components/ChatPopUp.tsx

@@ -97,9 +97,11 @@ export function ChatPopUp(props: ChatPopUpProps) {
     });
   }, [reportAnalyticsEvent]);
 
+  const [renderChat, setRenderChat] = useState(false);
   const [showChat, setShowChat] = useState(false);
   const onClick = useCallback(() => {
     setShowChat(!showChat);
+    setRenderChat(true);
   }, [showChat]);
 
   const onClose = useCallback(() => {
@@ -121,19 +123,21 @@ export function ChatPopUp(props: ChatPopUpProps) {
     <div className="yext-chat w-full h-full">
       <div className={cssClasses.container}>
         <div className={panelCssClasses} aria-label="Chat Popup Panel">
-          <ChatPanel
-            {...props}
-            customCssClasses={cssClasses.panelCssClasses}
-            header={
-              <ChatHeader
-                title={title}
-                showRestartButton={showRestartButton}
-                showCloseButton={true}
-                onClose={onClose}
-                customCssClasses={cssClasses.headerCssClasses}
-              />
-            }
-          />
+          {renderChat && (
+            <ChatPanel
+              {...props}
+              customCssClasses={cssClasses.panelCssClasses}
+              header={
+                <ChatHeader
+                  title={title}
+                  showRestartButton={showRestartButton}
+                  showCloseButton={true}
+                  onClose={onClose}
+                  customCssClasses={cssClasses.headerCssClasses}
+                />
+              }
+            />
+          )}
         </div>
         <button
           aria-label="Chat Popup Button"

tests/components/ChatPanel.test.tsx

@@ -111,7 +111,7 @@ it("does not render loading dots when loading status is false", () => {
   expect(screen.queryByLabelText("Loading Indicator")).not.toBeInTheDocument();
 });
 
-it("display message bubbles based on messages in state", () => {
+it("displays message bubbles based on messages in state", () => {
   mockChatState({
     conversation: {
       messages: [dummyMessage],

tests/components/ChatPopUp.test.tsx

@@ -53,3 +53,32 @@ it("toggles display and hide css classes when click on popup button", async () =
     "button-hidden-css"
   );
 });
+
+it("does not render panel until pop up is opened", async () => {
+  render(
+    <ChatHeadlessProvider
+      config={{
+        apiKey: "",
+        botId: "",
+      }}
+    >
+      <ChatPopUp
+        title="Test Popup"
+        stream={false}
+        customCssClasses={{
+          panel__display: "panel-display-css",
+          panel__hidden: "panel-hidden-css",
+          button__display: "button-display-css",
+          button__hidden: "button-hidden-css",
+        }}
+      />
+    </ChatHeadlessProvider>
+  );
+
+  expect(screen.queryByLabelText("Send Message")).toBeNull();
+
+  const popupButton = screen.getByLabelText("Chat Popup Button");
+  await act(() => userEvent.click(popupButton));
+
+  expect(screen.getByLabelText("Send Message")).toBeTruthy();
+});