From 35f55fcabbedf14726886286e0730f9e023ec3d5 Mon Sep 17 00:00:00 2001
From: ap-atul <atulpatare99@gmail.com>
Date: Mon, 17 Apr 2023 23:54:28 +0530
Subject: [PATCH 1/2] removed send button | minor bug fix

---
 .../sections/ThreadSection/ThreadSection.tsx  | 50 +++++++------------
 1 file changed, 18 insertions(+), 32 deletions(-)

diff --git a/apps/web/src/sections/ThreadSection/ThreadSection.tsx b/apps/web/src/sections/ThreadSection/ThreadSection.tsx
index 863a92b7..107b5dd5 100644
--- a/apps/web/src/sections/ThreadSection/ThreadSection.tsx
+++ b/apps/web/src/sections/ThreadSection/ThreadSection.tsx
@@ -11,16 +11,6 @@ import {Loader} from "../../components/Loader";
 import {LoadMore} from "../../components/Button/LoadMore";
 import {get, has, isNil} from "lodash";
 
-const SendIcon = () => {
-  return (
-    <svg aria-hidden="true" className="w-6 h-6 rotate-90" fill="white" viewBox="0 0 20 20"
-         xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z"></path>
-    </svg>
-  );
-}
-
 export const ThreadSection = (props: ThreadSectionProps) => {
   const threadId = props.threadId;
   const user = useAppSelector((state) => state.user);
@@ -57,13 +47,14 @@ export const ThreadSection = (props: ThreadSectionProps) => {
     return <Loader/>;
   }
 
+  const setOrResetChatBoxHeight = (height: string = "20px") => {
+    if (commentBoxRef.current) {
+      commentBoxRef.current.style.height = height;
+    }
+  }
+
   const handleOnSend = () => {
-    handleOnCommentSubmit().finally(() => {
-      // setting default height for comment box
-      if (commentBoxRef.current) {
-        commentBoxRef.current.style.height = `20px`;
-      }
-    });
+    handleOnCommentSubmit().then(() => setOrResetChatBoxHeight());
   }
 
   const handleOnCommentSubmit = async () => {
@@ -81,7 +72,7 @@ export const ThreadSection = (props: ThreadSectionProps) => {
       session: user.didSession,
       threadId: threadId,
       userId: user.id,
-      comment: comment,
+      comment: comment.trim(),
       createdFrom: constants.CREATED_FROM_DEVNODE,
       createdAt: new Date().toISOString()
     }).finally(() => setIsCommenting(false));
@@ -156,23 +147,24 @@ export const ThreadSection = (props: ThreadSectionProps) => {
         </div>
       </div>
       <div className="relative pb-[20px] h-auto bg-[#FBFBFB] mt-4 w-full">
-      <div className="flex flex-row py-2 px-4 rounded-xl bg-white border h-auto items-center">
+      <div className="flex flex-row p-2 rounded-xl bg-white border shadow-sm h-auto items-center">
         <textarea
           id="chat"
           ref={commentBoxRef}
           spellCheck={true}
           rows={1}
-          className="block min-h-[20px] max-h-72 mx-4 w-full resize-none scrollbar-hide focus:outline-none"
-          placeholder="Send message"
+          className="block min-h-[25px] resize-none max-h-48 mx-4 w-full scrollbar-hide focus:outline-none disabled:opacity-65"
+          placeholder="Send a message"
           value={comment}
+          disabled={isCommenting}
           onChange={(e) => {
-            setComment(e.target.value);
-            const numberOfLineBreaks = (e.target.value.match(/\n/g) || []).length;
-            // min-height + lines x line-height + padding + border
-            const newHeight = 20 + numberOfLineBreaks * 20;
-            if (commentBoxRef.current) {
-              commentBoxRef.current.style.height = `${newHeight}px`;
+            const value = e.target.value;
+            setComment(value);
+            if (value.trim().length === 0) {
+              setOrResetChatBoxHeight();
+              return;
             }
+            setOrResetChatBoxHeight(e.target.scrollHeight + "px");
           }}
           onKeyDown={(e) => {
             if (e.key === "Enter" && !e.shiftKey) {
@@ -180,12 +172,6 @@ export const ThreadSection = (props: ThreadSectionProps) => {
             }
           }}
         />
-          <button
-            onClick={handleOnSend}
-            disabled={isCommenting}
-            className="inline-flex h-max justify-center p-2 rounded-full cursor-pointer bg-gray-600 disabled:opacity-20">
-            <SendIcon/>
-          </button>
         </div>
       </div>
     </div>

From 245cfe346593a84794cb082d307dafbcd2b39bcc Mon Sep 17 00:00:00 2001
From: ap-atul <atulpatare99@gmail.com>
Date: Tue, 18 Apr 2023 10:10:48 +0530
Subject: [PATCH 2/2] remove unused test

---
 .../ThreadSection/ThreadSection.test.tsx      | 123 ------------------
 1 file changed, 123 deletions(-)
 delete mode 100644 apps/web/src/sections/ThreadSection/ThreadSection.test.tsx

diff --git a/apps/web/src/sections/ThreadSection/ThreadSection.test.tsx b/apps/web/src/sections/ThreadSection/ThreadSection.test.tsx
deleted file mode 100644
index 5af248d3..00000000
--- a/apps/web/src/sections/ThreadSection/ThreadSection.test.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import "../../../test/setup";
-import {ThreadSection} from "./ThreadSection";
-import {Provider} from "react-redux";
-import {store} from "../../store";
-import {renderWithTrpc} from "../../../test/trpcWrapper";
-import {act, fireEvent, screen} from "@testing-library/react";
-import {right} from "../../utils/fp";
-
-const mockCreateComment = right({ data: { message: 'Comment posted successfully' } });
-const mockThreadDetails = {
-  isLoading: false,
-  isError: false,
-  data: {
-    node: {
-      id: 'thread id',
-      title: 'Thread title',
-      content: 'Thread content',
-      createdAt: '2022-01-01T00:00:00.000Z',
-      createdBy: {
-        id: 'user id',
-        username: 'Username',
-        avatar: 'https://some-url.com/avatar.jpg',
-      },
-    },
-  },
-};
-const mockFetchCommentsByThreadId = {
-  isLoading: false,
-  isError: false,
-  refetch: jest.fn(),
-  data: {
-    pages: [{
-      edges: [
-        {
-          node: {
-            id: 'comment id',
-            content: 'Comment content',
-            createdAt: '2022-01-02T00:00:00.000Z',
-            createdBy: {
-              id: 'user id',
-              username: 'Username',
-              avatar: 'https://some-url.com/avatar.jpg',
-            },
-          },
-        },
-      ],
-    }]
-  },
-};
-
-const mutationMock = jest.fn().mockResolvedValue(mockCreateComment);
-const dispatchMock = jest.fn();
-const showUserProfileMock = jest.fn();
-
-jest.mock('../../utils/trpc', () => ({
-  trpc: {
-    public: {
-      fetchThreadDetails: {
-        useQuery: () => mockThreadDetails
-      },
-    },
-    comment: {
-      createComment: {
-        useMutation: () => ({mutateAsync: mutationMock}),
-      },
-      fetchCommentsByThreadId: {
-        useInfiniteQuery: () => mockFetchCommentsByThreadId,
-      },
-      upVoteComment: {
-        useMutation: () => ({mutateAsync: mutationMock}),
-      },
-      downVoteComment: {
-        useMutation: () => ({mutateAsync: mutationMock}),
-      }
-    },
-  },
-}));
-
-jest.mock('../../store', () => ({
-  useAppSelector: () => {
-    return { id: "sample-id", didSession: "sample-session" };
-  },
-  useAppDispatch: () => {
-    return dispatchMock;
-  },
-  showUserProfile: () => {
-    return showUserProfileMock;
-  },
-  store: {
-    getState: jest.fn(),
-    subscribe: jest.fn(),
-  }
-}));
-
-describe("<ThreadSection />", () => {
-  const renderComponent = (ui) => {
-    return renderWithTrpc(<Provider store={store}>{ui}</Provider>);
-  }
-
-  it("should render the component with no issues", () => {
-    const result = renderComponent(<ThreadSection threadId={"sample-thread-id"} />);
-    expect(result.container).toBeInTheDocument();
-  });
-
-  it("should be able to post comment", async () => {
-    renderComponent(<ThreadSection threadId={"sample-thread-id"} />);
-    await act(async () => {
-      fireEvent.change(document.getElementById("chat"), {target: {value: "sample comment"}});
-      fireEvent.click(screen.getByRole("button"));
-    });
-    expect(mutationMock).toBeCalledTimes(1);
-  });
-
-  it("should not be able to post comment is comment is empty", async () => {
-    mutationMock.mockReset();
-    renderComponent(<ThreadSection threadId={"sample-thread-id"} />);
-    await act(async () => {
-      fireEvent.change(document.getElementById("chat"), {target: {value: ""}});
-      fireEvent.click(screen.getByRole("button"));
-    });
-    expect(mutationMock).toBeCalledTimes(0);
-  });
-});