From ab4ab0fc9174418b1fd8ee8aae9d89dfa2e98334 Mon Sep 17 00:00:00 2001
From: Maciej Krawczyk <63869461+wzarek@users.noreply.github.com>
Date: Sun, 23 Jun 2024 15:35:59 +0200
Subject: [PATCH] [RSN-84] - Implemented UI for adding a comment (#70)

---
 .../apps/web/app/events/[slug]/page.tsx        |  3 ++-
 .../ui/src/components/shared/Comment.tsx       | 18 ++++++++++++++++--
 .../ui/src/components/shared/form/Dropdown.tsx |  4 +++-
 .../ui/src/components/shared/index.tsx         |  2 +-
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/Client/reasn-client/apps/web/app/events/[slug]/page.tsx b/Client/reasn-client/apps/web/app/events/[slug]/page.tsx
index deb47f14..69d6f5a3 100644
--- a/Client/reasn-client/apps/web/app/events/[slug]/page.tsx
+++ b/Client/reasn-client/apps/web/app/events/[slug]/page.tsx
@@ -2,7 +2,7 @@
 
 import { MOCK_IMG_URL } from "@reasn/ui/src/components/shared/Card";
 import { ButtonBase } from "@reasn/ui/src/components/shared/form";
-import { Comment } from "@reasn/ui/src/components/shared/Comment";
+import { Comment, NewComment } from "@reasn/ui/src/components/shared/Comment";
 import { useEffect, useRef, useState } from "react";
 import {
   ArrowLeft,
@@ -271,6 +271,7 @@ const EventPage = ({ params }: { params: { slug: string } }) => {
           <div className="relative">
             <h3 className="font-semibold">Komentarze:</h3>
             <div className="flex flex-col gap-2">
+              <NewComment />
               <Comment />
               <Comment />
               <Comment />
diff --git a/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx b/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx
index c2bceb92..a979009e 100644
--- a/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx
+++ b/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx
@@ -3,12 +3,13 @@ import {
   CommentDto,
   CommentDtoMapper,
 } from "@reasn/common/src/schemas/CommentDto";
+import { ButtonBase, FloatingTextarea } from "./form";
 
 interface CommentProps {
-  comment: CommentDto;
+  comment?: CommentDto;
 }
 
-export const Comment = () => {
+export const Comment = (props: CommentProps) => {
   const comment = CommentDtoMapper.fromObject({
     EventId: 1,
     Content:
@@ -36,3 +37,16 @@ export const Comment = () => {
     </div>
   );
 };
+
+export const NewComment = () => {
+  return (
+    <div className="mb-8 flex flex-col gap-4 rounded-md bg-[#4b4e526d] p-2">
+      <FloatingTextarea
+        label="Treść komentarza"
+        name="newComment"
+        className="mt-8 h-32"
+      />
+      <ButtonBase className="ml-auto" text="Dodaj" />
+    </div>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx b/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx
index 834786de..6a2ddb7c 100644
--- a/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx
+++ b/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useRef, useState } from "react";
 import { FloatingInput } from "./Input";
 import clsx from "clsx";
@@ -47,7 +49,7 @@ export const SearchMultiDropdown = (props: MultiDropdownProps) => {
         label={label}
         className="w-full rounded-b-none"
         defaultValue={search}
-        onChange={setSearch}
+        onChange={(e) => setSearch(e.target.value)}
       />
       <div className="flex h-16 flex-wrap justify-start gap-2 overflow-auto rounded-b-lg bg-[#232327] p-2 text-xs">
         {selectedOptions.concat(filteredOptions).map((option) => (
diff --git a/Client/reasn-client/packages/ui/src/components/shared/index.tsx b/Client/reasn-client/packages/ui/src/components/shared/index.tsx
index ab5033f7..29d6008b 100644
--- a/Client/reasn-client/packages/ui/src/components/shared/index.tsx
+++ b/Client/reasn-client/packages/ui/src/components/shared/index.tsx
@@ -2,5 +2,5 @@ export { Card, CardVariant } from "./Card";
 export { Navbar } from "./Navbar";
 export { Footer } from "./Footer";
 export { Interest } from "./Interest";
-export { Comment } from "./Comment";
+export { Comment, NewComment } from "./Comment";
 export { Toast } from "./Toast";