fixed comment section

ohcnetwork · Nov 6, 2023 · f89be30 · f89be30
1 parent 910df57
commit f89be30
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 50 deletions.
diff --git a/src/CAREUI/misc/PaginatedList.tsx b/src/CAREUI/misc/PaginatedList.tsx
@@ -33,7 +33,10 @@ function useContextualized<TItem>() {
 interface Props<TItem> extends QueryOptions<PaginatedResponse<TItem>> {
   route: QueryRoute<PaginatedResponse<TItem>>;
   perPage?: number;
-  children: (ctx: PaginatedListContext<TItem>) => JSX.Element | JSX.Element[];
+  children: (
+    ctx: PaginatedListContext<TItem>,
+    refetch: () => void
+  ) => JSX.Element | JSX.Element[];
 }
 
 export default function PaginatedList<TItem extends object>({
@@ -59,7 +62,7 @@ export default function PaginatedList<TItem extends object>({
       value={{ ...query, items, perPage, currentPage, setPage }}
     >
       <context.Consumer>
-        {(ctx) => children(ctx as PaginatedListContext<TItem>)}
+        {(ctx) => children(ctx as PaginatedListContext<TItem>, query.refetch)}
       </context.Consumer>
     </context.Provider>
   );

diff --git a/src/Components/Shifting/CommentsSection.tsx b/src/Components/Shifting/CommentsSection.tsx
@@ -4,7 +4,6 @@ import * as Notification from "../../Utils/Notifications.js";
 import { formatDateTime } from "../../Utils/utils";
 import { useTranslation } from "react-i18next";
 import ButtonV2 from "../Common/components/ButtonV2";
-import useQuery from "../../Utils/request/useQuery";
 import routes from "../../Redux/api";
 import { IComment } from "../Resource/models";
 import PaginatedList from "../../CAREUI/misc/PaginatedList";
@@ -17,10 +16,6 @@ const CommentSection = (props: CommentSectionProps) => {
   const [commentBox, setCommentBox] = useState("");
   const { t } = useTranslation();
 
-  const { loading, refetch: fetchData } = useQuery(routes.getShiftComments, {
-    pathParams: { id: props.id },
-  });
-
   const onSubmitComment = async () => {
     const payload = {
       comment: commentBox,
@@ -37,54 +32,55 @@ const CommentSection = (props: CommentSectionProps) => {
     });
     if (res?.ok) {
       Notification.Success({ msg: t("comment_added_successfully") });
-      fetchData();
+
       setCommentBox("");
     }
   };
 
   return (
-    <div className="flex w-full flex-col">
-      <textarea
-        rows={3}
-        value={commentBox}
-        minLength={3}
-        placeholder={t("type_your_comment")}
-        className="mt-4 rounded-lg border border-gray-500 p-4 focus:ring-primary-500"
-        onChange={(e) => setCommentBox(e.target.value)}
-      />
-      <div className="flex w-full justify-end">
-        <ButtonV2 onClick={onSubmitComment} className="mt-4">
-          {t("post_your_comment")}
-        </ButtonV2>
-      </div>
-      <div className=" w-full">
-        {loading ? (
-          <CircularProgress />
-        ) : (
-          <PaginatedList
-            route={routes.getShiftComments}
-            pathParams={{ id: props.id }}
-          >
-            {() => (
-              <div>
-                <PaginatedList.WhenEmpty>
-                  <span>No comments available</span>
-                </PaginatedList.WhenEmpty>
-                <PaginatedList.WhenLoading>
-                  <CircularProgress />
-                </PaginatedList.WhenLoading>
-                <PaginatedList.Items<IComment>>
-                  {(item) => <Comment {...item} />}
-                </PaginatedList.Items>
-                <div className="flex w-full items-center justify-center">
-                  <PaginatedList.Paginator hideIfSinglePage />
-                </div>
-              </div>
-            )}
-          </PaginatedList>
-        )}
-      </div>
-    </div>
+    <PaginatedList
+      route={routes.getShiftComments}
+      pathParams={{ id: props.id }}
+    >
+      {(_, refetch) => (
+        <div className="flex w-full flex-col">
+          <textarea
+            rows={3}
+            value={commentBox}
+            minLength={3}
+            placeholder={t("type_your_comment")}
+            className="mt-4 rounded-lg border border-gray-500 p-4 focus:ring-primary-500"
+            onChange={(e) => setCommentBox(e.target.value)}
+          />
+          <div className="flex w-full justify-end">
+            <ButtonV2
+              className="mt-4"
+              onClick={async () => {
+                await onSubmitComment();
+                refetch();
+              }}
+            >
+              {t("post_your_comment")}
+            </ButtonV2>
+          </div>
+          <div className="w-full">
+            <PaginatedList.WhenEmpty>
+              <span>No comments available</span>
+            </PaginatedList.WhenEmpty>
+            <PaginatedList.WhenLoading>
+              <CircularProgress />
+            </PaginatedList.WhenLoading>
+            <PaginatedList.Items<IComment>>
+              {(item) => <Comment {...item} />}
+            </PaginatedList.Items>
+            <PaginatedList.Paginator
+              className="flex w-full items-center justify-center"
+              hideIfSinglePage
+            />
+          </div>
+        </div>
+      )}
+    </PaginatedList>
   );
 };