Replaced all TextAreaForm component with Textarea shadcn ui component (…

…#10277)
ohcnetwork · Jan 29, 2025 · 933fff1 · 933fff1
1 parent dcf2bb9
commit 933fff1
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 69 deletions.
diff --git 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
diff --git 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,28 +42,28 @@ 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 () => {
                 await onSubmitComment();
                 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
@@ -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>