From 933fff14265967feb853d01d9e71bd4d9bdcc427 Mon Sep 17 00:00:00 2001
From: Nikhila C <115739037+NikhilA8606@users.noreply.github.com>
Date: Wed, 29 Jan 2025 18:05:38 +0530
Subject: [PATCH] Replaced all TextAreaForm component with Textarea shadcn ui
 component (#10277)

---
 public/locale/en.json                         |  1 +
 .../Form/FormFields/TextAreaFormField.tsx     | 56 -------------------
 .../Resource/ResourceCommentSection.tsx       | 14 ++---
 .../Resource/ResourceDetailsUpdate.tsx        | 21 +++++--
 4 files changed, 23 insertions(+), 69 deletions(-)
 delete mode 100644 src/components/Form/FormFields/TextAreaFormField.tsx

diff --git a/public/locale/en.json b/public/locale/en.json
index 19132126140..4baaa151214 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -1308,6 +1308,7 @@
   "no_beds_available": "No beds available",
   "no_changes": "No changes",
   "no_changes_made": "No changes made",
+  "no_comments_available": "No comments available",
   "no_consultation_filed": "No consultation filed",
   "no_consultation_history": "No consultation history available",
   "no_consultation_updates": "No consultation updates",
diff --git a/src/components/Form/FormFields/TextAreaFormField.tsx b/src/components/Form/FormFields/TextAreaFormField.tsx
deleted file mode 100644
index 70b0000a0b5..00000000000
--- a/src/components/Form/FormFields/TextAreaFormField.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { forwardRef } from "react";
-
-import FormField from "@/components/Form/FormFields/FormField";
-import {
-  FormFieldBaseProps,
-  useFormFieldPropsResolver,
-} from "@/components/Form/FormFields/Utils";
-
-import { classNames } from "@/Utils/utils";
-
-export type TextAreaFormFieldProps = FormFieldBaseProps<string> & {
-  placeholder?: string;
-  value?: string | number;
-  rows?: number;
-  // prefixIcon?: React.ReactNode;
-  // suffixIcon?: React.ReactNode;
-  innerClassName?: string;
-  onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
-  onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
-};
-
-/**
- * @deprecated use shadcn/ui's textarea instead
- */
-const TextAreaFormField = forwardRef(
-  (
-    { rows = 3, ...props }: TextAreaFormFieldProps,
-    ref?: React.Ref<HTMLTextAreaElement>,
-  ) => {
-    const field = useFormFieldPropsResolver(props);
-    return (
-      <FormField field={field}>
-        <textarea
-          id={field.id}
-          ref={ref}
-          disabled={field.disabled}
-          name={field.name}
-          value={field.value ?? ""}
-          required={field.required}
-          onChange={(e) => field.handleChange(e.target.value)}
-          placeholder={props.placeholder}
-          rows={rows}
-          className={classNames(
-            "cui-input-base resize-none",
-            field.error && "border-danger-500",
-            props.innerClassName,
-          )}
-          onFocus={props.onFocus}
-          onBlur={props.onBlur}
-        />
-      </FormField>
-    );
-  },
-);
-TextAreaFormField.displayName = "TextAreaFormField";
-export default TextAreaFormField;
diff --git a/src/components/Resource/ResourceCommentSection.tsx b/src/components/Resource/ResourceCommentSection.tsx
index b10e3b5c1cf..24adeba890b 100644
--- a/src/components/Resource/ResourceCommentSection.tsx
+++ b/src/components/Resource/ResourceCommentSection.tsx
@@ -5,10 +5,10 @@ import { toast } from "sonner";
 import PaginatedList from "@/CAREUI/misc/PaginatedList";
 
 import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
 
 import { Avatar } from "@/components/Common/Avatar";
 import CircularProgress from "@/components/Common/CircularProgress";
-import TextAreaFormField from "@/components/Form/FormFields/TextAreaFormField";
 
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
@@ -42,14 +42,14 @@ const CommentSection = (props: { id: string }) => {
     >
       {(_, query) => (
         <div className="flex w-full flex-col">
-          <TextAreaFormField
+          <Textarea
             name="comment"
-            placeholder="Type your comment"
+            placeholder={t("type_your_comment")}
             value={commentBox}
-            onChange={(e) => setCommentBox(e.value)}
+            onChange={(e) => setCommentBox(e.target.value)}
           />
 
-          <div className="flex w-full justify-end">
+          <div className="flex w-full justify-end mt-2">
             <Button
               variant="primary"
               onClick={async () => {
@@ -57,13 +57,13 @@ const CommentSection = (props: { id: string }) => {
                 query.refetch();
               }}
             >
-              Post Your Comment
+              {t("post_your_comment")}
             </Button>
           </div>
           <div className="w-full">
             <div>
               <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-secondary-200 bg-white p-5 text-center text-2xl font-bold text-secondary-500">
-                <span>No comments available</span>
+                <span>{t("no_comments_available")}</span>
               </PaginatedList.WhenEmpty>
               <PaginatedList.WhenLoading>
                 <CircularProgress className="h-12 w-12" />
diff --git a/src/components/Resource/ResourceDetailsUpdate.tsx b/src/components/Resource/ResourceDetailsUpdate.tsx
index f8197b481a0..8d3bb755796 100644
--- a/src/components/Resource/ResourceDetailsUpdate.tsx
+++ b/src/components/Resource/ResourceDetailsUpdate.tsx
@@ -6,6 +6,8 @@ import { toast } from "sonner";
 import Card from "@/CAREUI/display/Card";
 
 import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
 
 import CircularProgress from "@/components/Common/CircularProgress";
 import { FacilitySelect } from "@/components/Common/FacilitySelect";
@@ -15,7 +17,6 @@ import UserAutocomplete from "@/components/Common/UserAutocompleteFormField";
 import { FieldLabel } from "@/components/Form/FormFields/FormField";
 import RadioFormField from "@/components/Form/FormFields/RadioFormField";
 import { SelectFormField } from "@/components/Form/FormFields/SelectFormField";
-import TextAreaFormField from "@/components/Form/FormFields/TextAreaFormField";
 import TextFormField from "@/components/Form/FormFields/TextFormField";
 import { FieldChangeEvent } from "@/components/Form/FormFields/Utils";
 import { UserModel } from "@/components/Users/models";
@@ -254,15 +255,23 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
             </div>
 
             <div className="md:col-span-2">
-              <TextAreaFormField
+              <Label className="text-gray-700 mb-3 mt-1">
+                {t("request_reason")}
+              </Label>
+              <Textarea
                 rows={5}
                 name="reason"
-                placeholder="Type your description here"
+                placeholder={t("request_reason_placeholder")}
                 value={state.form.reason}
-                onChange={handleChange}
-                label="Reason of Request*"
-                error={state.errors.reason}
+                onChange={(e) =>
+                  handleChange({ name: e.target.name, value: e.target.value })
+                }
               />
+              {state.errors.reason && (
+                <p className="text-red-500 text-sm mt-2">
+                  {state.errors.emergency}
+                </p>
+              )}
             </div>
 
             <div>