Fix: PatientNoteCard Text Overflowing and Current Address

src/components/Common/Breadcrumbs.tsx

@@ -97,6 +97,7 @@ export default function Breadcrumbs({
               <li className="mr-3 flex items-center">
                 <Button
                   variant="link"
+                  type="button"
                   className="rounded bg-gray-200/50 px-1 text-sm font-normal text-gray-800 transition hover:bg-gray-200/75 hover:no-underline"
                   size="xs"
                   onClick={() => {

src/components/Facility/PatientNoteCard.tsx

@@ -1,7 +1,6 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import dayjs from "dayjs";
 import { t } from "i18next";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
@@ -20,8 +19,7 @@ import { USER_TYPES_MAP } from "@/common/constants";
 
 import { Error, Success } from "@/Utils/Notifications";
 import routes from "@/Utils/request/api";
-import mutate from "@/Utils/request/mutate";
-import query from "@/Utils/request/query";
+import request from "@/Utils/request/request";
 import {
   classNames,
   formatDateTime,
@@ -31,6 +29,7 @@ import {
 
 const PatientNoteCard = ({
   note,
+  setReload,
   disableEdit,
   setReplyTo,
 }: {
@@ -45,25 +44,15 @@ const PatientNoteCard = ({
   const [showEditHistory, setShowEditHistory] = useState(false);
   const [editHistory, setEditHistory] = useState<PatientNotesEditModel[]>([]);
   const authUser = useAuthUser();
-  const queryClient = useQueryClient();
 
-  const { data, refetch } = useQuery({
-    queryKey: [patientId, note.id],
-    queryFn: query(routes.getPatientNoteEditHistory, {
+  const fetchEditHistory = async () => {
+    const { res, data } = await request(routes.getPatientNoteEditHistory, {
       pathParams: { patientId, noteId: note.id },
-    }),
-  });
-
-  const { mutate: updateNote } = useMutation({
-    mutationFn: mutate(routes.updatePatientNote, {
-      pathParams: { patientId, noteId: note.id },
-    }),
-    onSuccess: () => {
-      Success({ msg: "Note updated successfully" });
-      queryClient.invalidateQueries({ queryKey: ["notes", patientId] });
-      setIsEditing(false);
-    },
-  });
+    });
+    if (res?.status === 200) {
+      setEditHistory(data?.results ?? []);
+    }
+  };
 
   const onUpdateNote = async () => {
     if (noteField === note.note) {
@@ -80,15 +69,20 @@ const PatientNoteCard = ({
       return;
     }
 
-    updateNote(payload);
+    const { res } = await request(routes.updatePatientNote, {
+      pathParams: { patientId, noteId: note.id },
+      body: payload,
+    });
+    if (res?.status === 200) {
+      Success({ msg: "Note updated successfully" });
+      setIsEditing(false);
+      setReload(true);
+    }
   };
 
-  useEffect(() => {
-    setEditHistory(data?.results ?? []);
-  }, [data]);
-
   return (
     <>
+      {" "}
       <div
         className={classNames(
           "mt-4 flex w-full flex-col rounded-lg border border-secondary-300 bg-white p-3 text-secondary-800",
@@ -125,7 +119,7 @@ const PatientNoteCard = ({
                   <div
                     className="cursor-pointer text-xs text-secondary-600"
                     onClick={() => {
-                      refetch();
+                      fetchEditHistory();
                       setShowEditHistory(true);
                     }}
                   >
@@ -213,7 +207,9 @@ const PatientNoteCard = ({
                 </div>
               </div>
             ) : (
-              <div className="text-sm text-secondary-700">{noteField}</div>
+              <div className="text-sm text-secondary-700 break-all ">
+                {noteField}
+              </div>
             )}
           </div>
         }

src/components/Form/Form.tsx

@@ -98,11 +98,6 @@ const Form = <T extends FormDetails>({
   return (
     <form
       onSubmit={handleSubmit}
-      onKeyDown={(e) => {
-        if (e.key === "Enter") {
-          handleSubmit(e);
-        }
-      }}
       className={classNames(
         "mx-auto w-full",
         !props.noPadding && "px-8 py-5 md:px-16 md:py-11",

src/components/Patient/PatientHome.tsx

@@ -7,7 +7,6 @@ import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Button } from "@/components/ui/button";
 
-import { AuthorizedButton } from "@/components/Common/AuthorizedButton";
 import ConfirmDialog from "@/components/Common/ConfirmDialog";
 import UserAutocomplete from "@/components/Common/UserAutocompleteFormField";
 
@@ -37,6 +36,7 @@ import {
   relativeDate,
 } from "../../Utils/utils";
 import { Avatar } from "../Common/Avatar";
+import ButtonV2 from "../Common/ButtonV2";
 import Loading from "../Common/Loading";
 import Page from "../Common/Page";
 import { SkillModel, UserBareMinimum } from "../Users/models";
@@ -523,7 +523,7 @@ export const PatientHome = (props: {
 
                     {NonReadOnlyUsers(authUser.user_type) && (
                       <div>
-                        <AuthorizedButton
+                        <ButtonV2
                           id="assign-volunteer"
                           onClick={() => setOpenAssignVolunteerDialog(true)}
                           disabled={false}
@@ -536,12 +536,12 @@ export const PatientHome = (props: {
                               ? t("update_volunteer")
                               : t("assign_to_volunteer")}
                           </span>
-                        </AuthorizedButton>
+                        </ButtonV2>
                       </div>
                     )}
 
                     <div>
-                      <AuthorizedButton
+                      <ButtonV2
                         id="patient-allow-transfer"
                         className="flex w-full flex-row bg-white font-semibold text-green-800 hover:bg-secondary-200"
                         disabled={
@@ -564,7 +564,7 @@ export const PatientHome = (props: {
                             ? t("disable_transfer")
                             : t("allow_transfer")}
                         </span>
-                      </AuthorizedButton>
+                      </ButtonV2>
                     </div>
                   </div>
                 </div>