CHANGE | Send notification to all app users with Select All button (#16)

BANK-1166: Доробити функціонал "Відправка сповіщення обраній групі осіб (або одній особі)"
Co-authored-by: Vitalik Yatsenko <vitalik@noreply.localhost>
Reviewed-on: #16
Co-authored-by: Oksana Stepanenko <oksana.stepanenko@jetup.team>
Co-committed-by: Oksana Stepanenko <oksana.stepanenko@jetup.team>

src/api/notifications/request.interfaces.ts

@@ -16,4 +16,5 @@ export interface ISendNotificationsPayload {
   title: string;
   content: string;
   haveToSendEmail?: boolean;
+  sendToAll?: boolean;
 }

src/widgets/send-notifications/hooks/use-send-notifications.hook.ts

@@ -2,7 +2,7 @@ import { notificApi } from "@/api/notifications/request";
 import { IShortUser, notification } from "@/shared";
 import { cloneDeep } from "lodash";
 import { useState } from "react";
-import { useFieldArray, useForm } from "react-hook-form";
+import { useForm } from "react-hook-form";
 
 export interface SendNotificationsForm {
   title: string;
@@ -13,6 +13,8 @@ export interface SendNotificationsForm {
 
 export const useSendNotifications = (onSuccess?: () => void) => {
   const [isLoading, setLoading] = useState(false);
+  const [allSelected, setAllSelected] = useState<boolean>(false);
+
   const form = useForm<SendNotificationsForm>({
     defaultValues: {
       users: [],
@@ -48,6 +50,7 @@ export const useSendNotifications = (onSuccess?: () => void) => {
         title: String(values.title).trim(),
         content: String(values.content).trim(),
         haveToSendEmail: Boolean(values.haveToSendEmail),
+        sendToAll: allSelected,
       });
       onSuccess();
       form.reset();
@@ -67,5 +70,7 @@ export const useSendNotifications = (onSuccess?: () => void) => {
     unselectUser,
     selectedUsers,
     isLoading,
+    allSelected,
+    setAllSelected,
   };
 };

src/widgets/send-notifications/send-notifications.widget.tsx

@@ -25,6 +25,8 @@ export const SendNotificationsWidget: FC<Props> = ({ isOpen, onClose }) => {
     unselectUser,
     selectUsers,
     submit,
+    allSelected,
+    setAllSelected,
   } = useSendNotifications(onClose);
 
   const {
@@ -35,14 +37,16 @@ export const SendNotificationsWidget: FC<Props> = ({ isOpen, onClose }) => {
     loadParams,
   } = useFetchChatUsers();
 
-  const isSelectedAll = Boolean(selectedUsers?.length === items?.length);
-
   const toggleSelectAll = () => {
-    if (isSelectedAll) selectUsers([]);
-    else selectUsers(items);
+    if (allSelected) {
+      selectUsers([]);
+      setAllSelected(false);
+    } else setAllSelected(true);
   };
+
   const reset = () => {
     setSearchVal("");
+    setAllSelected(false);
     form.reset({ title: "", haveToSendEmail: false, content: "", users: [] });
   };
 
@@ -50,6 +54,14 @@ export const SendNotificationsWidget: FC<Props> = ({ isOpen, onClose }) => {
     if (!isOpen) reset();
   }, [isOpen]);
 
+  useEffect(() => {
+    if (allSelected) selectUsers(items);
+  }, [allSelected, items]);
+
+  useEffect(() => {
+    if (selectedUsers.length === loadParams?.count) setAllSelected(true);
+  }, [loadParams?.count, selectedUsers]);
+
   return (
     <Modal show={isOpen} toggle={() => onClose()} title="Нове сповіщення">
       <div className="form send-notifi-form">
@@ -89,7 +101,7 @@ export const SendNotificationsWidget: FC<Props> = ({ isOpen, onClose }) => {
             searchStr={searchString}
             onChangeContact={setSearchVal}
             selectAll={toggleSelectAll}
-            allBtnLabel={isSelectedAll ? "Очистити" : "Додати всіх"}
+            allBtnLabel={allSelected ? "Очистити" : "Додати всіх"}
           />
         </div>
         <Controller