quickblox-react-ui-kit 0.5.1-join-dialog-off.5 → 0.5.2-alpha.1

package/src/Presentation/Views/DialogList/useDialogListViewModel.ts

@@ -33,10 +33,6 @@ import UsersRepository from '../../../Data/repository/UsersRepository';
 import { UserEntity } from '../../../Domain/entity/UserEntity';
 import { DefaultConfigurations } from '../../../Data/DefaultConfigurations';
 import { UpdateCurrentDialogInDataSourceUseCase } from '../../../Domain/use_cases/UpdateCurrentDialogInDataSourceUseCase';
-import { CreateDialogWithAutoJoinUseCase } from '../../../Domain/use_cases/CreateDialogWithAutoJoinUseCase';
-import { UnJoinFromTheDialogUseCase } from '../../../Domain/use_cases/UnJoinFromTheDialogUseCase';
-import { JoinFromTheDialogUseCase } from '../../../Domain/use_cases/JoinFromTheDialogUseCase';
-import { CreateDialogSetUpAutoJoinUseCase } from '../../../Domain/use_cases/CreateDialogSetUpAutoJoinUseCase';
 
 export default function useDialogListViewModel(
   currentContext: QBDataContextType,
@@ -396,69 +392,6 @@ export default function useDialogListViewModel(
     return Promise.reject(resultDialog);
   };
 
-  const createDialogForAutoJoin = async (
-    dialogInfo: GroupDialogEntity, disableAutoJoin: boolean | null
-  ): Promise<DialogEntity> => {
-    const textInformationMessage = `${currentUserName} create the chat`;
-    const createDialogWitAutoJoinUseCase: CreateDialogWithAutoJoinUseCase = new CreateDialogWithAutoJoinUseCase(
-      eventMessageRepository,
-      new DialogsRepository(
-        currentContext.storage.LOCAL_DATA_SOURCE,
-        remoteDataSourceMock,
-      ),
-      dialogInfo,
-      textInformationMessage,
-    );
-    const resultDialog: DialogEntity = await createDialogWitAutoJoinUseCase
-      .execute()
-      .catch((e) => {
-        console.log('EXCEPTION IN CREATE NEW DIALOG WITH AUTO JOIN 0: ', stringifyError(e));
-        setNewDialog(undefined);
-
-        throw new Error(stringifyError(e));
-      });
-
-    if (resultDialog) {
-      setNewDialog(resultDialog);
-
-      return Promise.resolve(resultDialog);
-    }
-
-    return Promise.reject(resultDialog);
-  };
-
-  const createDialogSetUpAutoJoin = async (
-    dialogInfo: GroupDialogEntity, disableAutoJoin: boolean | null
-  ): Promise<DialogEntity> => {
-    const textInformationMessage = `${currentUserName} create the chat`;
-    const createDialogSetUpAutoJoinUseCase: CreateDialogSetUpAutoJoinUseCase = new CreateDialogSetUpAutoJoinUseCase(
-      eventMessageRepository,
-      new DialogsRepository(
-        currentContext.storage.LOCAL_DATA_SOURCE,
-        remoteDataSourceMock,
-      ),
-      dialogInfo,
-      textInformationMessage,
-    );
-    const resultDialog: DialogEntity = await createDialogSetUpAutoJoinUseCase
-      .execute()
-      .catch((e) => {
-        console.log('EXCEPTION IN CREATE NEW DIALOG WITH SET UP AUTO JOIN TO 1: ', stringifyError(e));
-        setNewDialog(undefined);
-
-        throw new Error(stringifyError(e));
-      });
-
-    if (resultDialog) {
-      setNewDialog(resultDialog);
-
-      return Promise.resolve(resultDialog);
-    }
-
-    return Promise.reject(resultDialog);
-  };
-
-
   const updateDialog = async (
     // eslint-disable-next-line @typescript-eslint/no-shadow,@typescript-eslint/no-unused-vars
     dialog: GroupDialogEntity,
@@ -561,82 +494,6 @@ export default function useDialogListViewModel(
     return Promise.reject(leaveResult);
   };
 
-  const unJoinDialog = async (
-    // eslint-disable-next-line @typescript-eslint/no-shadow,@typescript-eslint/no-unused-vars
-    dialogToDelete: GroupDialogEntity,
-  ): Promise<boolean> => {
-    let unJoinResult = false;
-
-    if (dialogToDelete.type === DialogType.group) {
-
-      const usersForDeleteFromDialog: Array<number> = new Array<number>();
-
-      const userToDeleteId: number =
-        remoteDataSourceMock?.authInformation?.userId || 0;
-
-      usersForDeleteFromDialog.push(userToDeleteId);
-      const unjoinFromDialog: UnJoinFromTheDialogUseCase =
-        new UnJoinFromTheDialogUseCase(
-          eventMessageRepository,
-          new DialogsRepository(
-            currentContext.storage.LOCAL_DATA_SOURCE,
-            remoteDataSourceMock,
-          ),
-          dialogToDelete,
-        );
-
-      unJoinResult = await unjoinFromDialog.execute().catch((e) => {
-        console.log(
-          'Error delete users from UnJoinFromTheDialogUseCase: ',
-          stringifyError(e),
-        );
-        throw new Error(stringifyError(e));
-      });
-    }
-
-    if (unJoinResult) {
-      return Promise.resolve(unJoinResult);
-    }
-
-    return Promise.reject(unJoinResult);
-  };
-
-  const joinToDialog = async (
-    // eslint-disable-next-line @typescript-eslint/no-shadow,@typescript-eslint/no-unused-vars
-    dialogToDelete: GroupDialogEntity,
-  ): Promise<boolean> => {
-    let joinResult = false;
-
-    if (dialogToDelete.type === DialogType.group) {
-
-
-      const joinFromDialog: JoinFromTheDialogUseCase =
-        new JoinFromTheDialogUseCase(
-          eventMessageRepository,
-          new DialogsRepository(
-            currentContext.storage.LOCAL_DATA_SOURCE,
-            remoteDataSourceMock,
-          ),
-          dialogToDelete,
-        );
-
-      joinResult = await joinFromDialog.execute().catch((e) => {
-        console.log(
-          'Error delete users from JoinFromTheDialogUseCase: ',
-          stringifyError(e),
-        );
-        throw new Error(stringifyError(e));
-      });
-    }
-
-    if (joinResult) {
-      return Promise.resolve(joinResult);
-    }
-
-    return Promise.reject(joinResult);
-  };
-
-
   const removeMembers = async (dialog: GroupDialogEntity): Promise<boolean> => {
     let leaveResult = false;
 
@@ -734,12 +591,8 @@ export default function useDialogListViewModel(
     getDialogs,
     release,
     createDialog,
-    createDialogForAutoJoin,
-    createDialogSetUpAutoJoin,
     updateDialog,
     deleteDialog,
-    unJoinDialog,
-    joinToDialog,
     uploadFile,
     removeMembers,
     setWaitLoadingStatus,

package/src/Presentation/Views/EditDialog/EditDialog.scss

@@ -1,7 +1,7 @@
 $container-width: 332px;
-$container-height: 290px;
+$container-height: 236px;
 $create-dialog-container-width: 332px;
-$create-dialog-container-height: 245px;
+$create-dialog-container-height: 180px;
 
 .edit-container {
   min-height: $container-height;
@@ -131,25 +131,6 @@ $create-dialog-container-height: 245px;
       color: var(--main-text);
     }
 
-    &__auto-join {
-      min-height: 12px;
-      font-style: normal;
-      font-weight: 400;
-      font-size: 12px;
-      line-height: 12px;
-      letter-spacing: 0.25px;
-      margin-top: 5px;
-      color: var(--error);
-      display: flex;
-      flex-flow: row;
-      align-items: center;
-
-      svg {
-        margin: 2px 2px 0 0;
-        fill: var(--error);
-      }
-    }
-
     &__text-field {
       width: 100%;
     }

package/src/Presentation/Views/EditDialog/EditDialog.tsx

@@ -13,10 +13,9 @@ import { DialogType } from '../../../Domain/entity/DialogTypes';
 import GroupChat from '../../components/UI/svgs/Icons/Contents/GroupChat';
 import PublicChannel from '../../components/UI/svgs/Icons/Contents/PublicChannel';
 import useQbInitializedDataContext from '../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
-import { Button, CheckBox, TextField } from '../../ui-components';
+import { Button, TextField } from '../../ui-components';
 import { formatFileSize } from '../../../utils/formatFileSize';
 import './EditDialog.scss';
-import { SettingsFilledSvg } from '../../icons';
 
 export const TypeOpenDialog = {
   edit: 'edit',
@@ -25,12 +24,6 @@ export const TypeOpenDialog = {
 
 export type OpenDialogArcheType = keyof typeof TypeOpenDialog;
 
-export enum AutoJoinState {
-  Enabled = 'enabled',
-  Disabled = 'disabled',
-  Pending = 'pending', // "null"
-}
-
 type EditDialogProps = {
   nameDialog: string;
   typeDialog: DialogType;
@@ -67,7 +60,6 @@ const EditDialog = ({
       nameDialog.length > maxLengthNameDialog,
   );
   const [errorMessageUpload, setErrorMessageUpload] = useState('');
-  const [disableAutoJoin, setDisableAutoJoin] = useState<AutoJoinState>(AutoJoinState.Pending)
 
   const handleUploadAvatar = (event: React.ChangeEvent<HTMLInputElement>) => {
     const allowedExtensions = ['jpg', 'jpeg', 'gif', 'png'];
@@ -165,22 +157,11 @@ const EditDialog = ({
   }, [dialogName]);
 
   const handleUpdate = () => {
-    let disableAutoJoinValue: boolean | null = null
-
-    if (disableAutoJoin === AutoJoinState.Enabled) {
-      disableAutoJoinValue = true
-    } else if (disableAutoJoin === AutoJoinState.Disabled) {
-      disableAutoJoinValue = false
-    } else {
-      disableAutoJoinValue = null
-    }
-
     if (clickUpdatedHandler) {
       const params: EditDialogParams = {
         dialogTitle: dialogName,
         // dialogAvatar: urlAvatar.length ? fileUploadAvatar : '',
         dialogAvatar: urlAvatar === 'null' ? 'null' : fileUploadAvatar,
-        disableAutoJoin: disableAutoJoinValue,
       };
 
       clickUpdatedHandler(params);
@@ -252,33 +233,6 @@ const EditDialog = ({
               placeholder="Enter name"
               className="edit-dialog-container--wrapper__text-field"
             />
-            <div className="edit-dialog-container--wrapper__auto-join">
-              <CheckBox
-                disabled={false}
-                checked={disableAutoJoin === AutoJoinState.Enabled}
-                onChange={() => setDisableAutoJoin(AutoJoinState.Enabled)}
-              />
-              <SettingsFilledSvg />
-              is_join_required: 1
-            </div>
-            <div className="edit-dialog-container--wrapper__auto-join">
-              <CheckBox
-                disabled={false}
-                checked={disableAutoJoin === AutoJoinState.Disabled}
-                onChange={() => setDisableAutoJoin(AutoJoinState.Disabled)}
-              />
-              <SettingsFilledSvg />
-              is_join_required: 0
-            </div>
-            <div className="edit-dialog-container--wrapper__auto-join">
-              <CheckBox
-                disabled={false}
-                checked={disableAutoJoin === AutoJoinState.Pending}
-                onChange={() => setDisableAutoJoin(AutoJoinState.Pending)}
-              />
-              <SettingsFilledSvg />
-              do not sending is_join_required
-            </div>
           </div>
         </div>
         <div className="edit-btn-container">

package/src/Presentation/Views/Flow/CreateDialogFlow/CreateNewDialogFlow.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import CreateDialog from '../CreateDialog/CreateDialog';
 import { DialogType } from '../../../../Domain/entity/DialogTypes';
-import EditDialog, { AutoJoinState, TypeOpenDialog } from '../../EditDialog/EditDialog';
+import EditDialog, { TypeOpenDialog } from '../../EditDialog/EditDialog';
 import InviteMembers from '../../InviteMembers/InviteMembers';
 import { DialogListViewModel } from '../../DialogList/DialogListViewModel';
 import { GroupDialogEntity } from '../../../../Domain/entity/GroupDialogEntity';
@@ -36,11 +36,9 @@ const CreateNewDialogFlow = ({
   const [stepToCreate, setNumStepToCreate] = React.useState(setUpDialogType);
   const [selectedDialogType, setSelectedDialogType] = useState<DialogType>();
   const [dialogName, setDialogName] = React.useState<string>('NOT DEFINE');
-  const [uidAvatar, setUidAvatar] = React.useState<string| number | undefined>(
+  const [uidAvatar, setUidAvatar] = React.useState<string | undefined>(
     undefined,
   );
-  const [disableAutoJoin, setDisableAutoJoin] = useState<AutoJoinState>(AutoJoinState.Pending)
-
   const { allowPublicDialogCreation } =
     currentContext.InitParams.qbConfig.appConfig;
 
@@ -56,20 +54,10 @@ const CreateNewDialogFlow = ({
   }, [selectedDialogType]);
 
   const getDialogNameHandler = (params: EditDialogParams) => {
-
-    let disableAutoJoinValue = AutoJoinState.Pending
-    if (params.disableAutoJoin === true) {
-      disableAutoJoinValue = AutoJoinState.Enabled
-    } else if (params.disableAutoJoin === false) {
-      disableAutoJoinValue = AutoJoinState.Disabled
-    } else {
-      disableAutoJoinValue = AutoJoinState.Pending
-    }
     console.log(params.dialogTitle);
     setDialogName(params.dialogTitle);
-    setDisableAutoJoin(disableAutoJoinValue)
 
-    let newUidAvatar: string | number | undefined = '';
+    let newUidAvatar: string | undefined = '';
 
     console.log('before urlPhoto: ', newUidAvatar);
     if (params.dialogAvatar) {
@@ -117,41 +105,17 @@ const CreateNewDialogFlow = ({
       dialog.photo = uidAvatar || '';
       dialog.participantIds = participants;
       dialog.type = selectedDialogType;
-      if (disableAutoJoin=== AutoJoinState.Enabled) // isAutoJoin = 1
-      {
-        await dialogsViewModel.createDialogSetUpAutoJoin(dialog, null)
-          // eslint-disable-next-line promise/always-return
-          .then((newEntity) => {
-            onFinished(newEntity);
-          })
-          .catch((e) => {
-            console.log('Have exception: ', stringifyError(e));
-          });
-      }
-      else
-      if (disableAutoJoin === AutoJoinState.Pending) { // without isAutoJoin, does not use isAutoJoin flag
+      // eslint-disable-next-line promise/always-return
+      await dialogsViewModel
+        .createDialog(dialog)
         // eslint-disable-next-line promise/always-return
-        await dialogsViewModel
-          .createDialog(dialog)
-          // eslint-disable-next-line promise/always-return
-          .then((newEntity) => {
-            onFinished(newEntity);
-          })
-          .catch((e) => {
-            console.log('Have exception: ', stringifyError(e));
-          });
-        // }
-      } else { // isAutoJoin = 0
-        await dialogsViewModel.createDialogForAutoJoin(dialog, true)
-          // eslint-disable-next-line promise/always-return
-          .then((newEntity) => {
-            onFinished(newEntity);
-          })
-          .catch((e) => {
-            console.log('Have exception: ', stringifyError(e));
-          });
-      }
-
+        .then((newEntity) => {
+          onFinished(newEntity);
+        })
+        .catch((e) => {
+          console.log('Have exception: ', stringifyError(e));
+        });
+      // }
     }
   };
 

package/src/Presentation/layouts/Desktop/QuickBloxUIKitDesktopLayout.tsx

@@ -137,7 +137,7 @@ const QuickBloxUIKitDesktopLayout = ({
 
       return (
         <Avatar
-          src={String(groupDialogEntity.photo) || ''}
+          src={groupDialogEntity.photo || ''}
           icon={<GroupChatSvg />}
           size="md"
         />
@@ -384,7 +384,7 @@ const QuickBloxUIKitDesktopLayout = ({
       const imagePhoto = (currentDialog.entity as GroupDialogEntity).photo;
 
       AvatarComponent = imagePhoto ? (
-        <Avatar size="lg" src={String(imagePhoto)} />
+        <Avatar size="lg" src={imagePhoto} />
       ) : undefined;
     }
 

package/src/Presentation/ui-components/Message/Bubble/AttachmentBubble/AttachmentBubble.tsx

@@ -45,10 +45,10 @@ export default function AttachmentBubble({
     return (
       <AudioBubble
         title={attachment.file?.name || ''}
-        href={String(attachment.url)}
+        href={attachment.url}
         type={typeMessage}
         audioFileType={attachment.file?.type?.toString()}
-        fileUid={String(attachment.file?.uid)}
+        fileUid={attachment.file?.uid}
       />
     );
   }

package/src/Presentation/ui-components/MessageInput/ReplyMessagePreview/ReplyImagePreviewAttachment/ReplyImagePreviewAttachment.tsx

@@ -9,11 +9,11 @@ type ReplyImagePreviewAttachmentProps = {
 const ReplyImagePreviewAttachment = ({ imageFile }: ReplyImagePreviewAttachmentProps) => {
   return (
     <div>
-      <a href={String(imageFile.url)} download="file" target="_blank" rel="noreferrer">
+      <a href={imageFile.url} download="file" target="_blank" rel="noreferrer">
         <img
           className="reply-preview-image-body"
           key={imageFile.id}
-          src={String(imageFile.url)}
+          src={imageFile.url}
           alt={imageFile.name || 'attached image'}
         />
       </a>

package/src/Presentation/ui-components/MessageInput/VoiceRecordingProgress/VoiceRecordingProgress.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import './VoiceRecordingProgress.scss';
 import { FunctionTypeVoidToVoid } from '../../../../CommonTypes/BaseViewModel';
 
@@ -15,7 +15,8 @@ const VoiceRecordingProgress = ({
   onClick,
   onTouch,
 }: VoiceRecordingProgressProps) => {
-  let timerId: NodeJS.Timeout | null = null;
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const [currentTime, setCurrentTime] = useState(Date.now());
   const [timeString, setTimeString] = useState('00:00:00');
   const [startTime] = useState(Date.now());
@@ -33,9 +34,13 @@ const VoiceRecordingProgress = ({
   }, [currentTime]);
 
   const stopTimer = () => {
-    if (timerId) {
-      clearInterval(timerId as NodeJS.Timeout);
-      timerId = null;
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
     }
     if (onClick) onClick();
     if (onTouch) onTouch();
@@ -45,12 +50,12 @@ const VoiceRecordingProgress = ({
   const startTimer = () => {
     const longRec = longRecInSec <= 60 && longRecInSec > 0 ? longRecInSec : 10;
 
-    setTimeout(() => {
+    timeoutRef.current = setTimeout(() => {
       stopTimer();
     }, longRec * 1000);
 
-    if (!timerId) {
-      timerId = setInterval(() => {
+    if (!intervalRef.current) {
+      intervalRef.current = setInterval(() => {
         setCurrentTime(Date.now());
       }, 1000);
     }
@@ -58,6 +63,17 @@ const VoiceRecordingProgress = ({
 
   useEffect(() => {
     if (startStatus) startTimer();
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
   }, [startStatus]);
 
   return (

package/src/QBconfig.ts

@@ -2,10 +2,10 @@ import { QBUIKitConfig } from './CommonTypes/CommonTypes';
 
 export const QBConfig: QBUIKitConfig = {
   credentials: {
-    appId: 75949,
-    accountKey: 'uK_8uinNyz8-npTNB6tx',
-    authKey: 'DdS7zxMEm5Q7DaS',
-    authSecret: 'g88RhdOjnDOqFkv',
+    appId: -1,
+    accountKey: '',
+    authKey: '',
+    authSecret: '',
     sessionToken: '',
   },
   configAIApi: {

package/src/qb-api-calls/index.ts

@@ -503,7 +503,7 @@ export function QBCreateGroupDialogWithAutojoinFalse(
   data?: Dictionary<unknown>,
 ) {
   console.log(
-    `call QBCreateGroupDialogWithAutojoinFalse with ids: ${JSON.stringify(userIds)} name: ${
+    `call QBCreateGroupDialog with ids: ${JSON.stringify(userIds)} name: ${
       dialogName || ''
     }`,
   );
@@ -550,60 +550,6 @@ export function QBCreateGroupDialogWithAutojoinFalse(
   });
 }
 
-export function QBCreateGroupDialogWithAutojoinTrue(
-  userIds: Array<QBUser['id']>,
-  dialogName?: string,
-  data?: Dictionary<unknown>,
-) {
-  console.log(
-    `call QBCreateGroupDialogWithAutojoinTrue with ids: ${JSON.stringify(userIds)} name: ${
-      dialogName || ''
-    }`,
-  );
-
-  let params = {};
-
-  if (data && data?.photo) {
-    params = {
-      name: dialogName || '-',
-      occupants_ids: [userIds],
-      type: 2,
-      photo: data?.photo,
-      is_join_required: 1,
-    };
-  } else {
-    params = {
-      name: dialogName || '-',
-      occupants_ids: [userIds],
-      type: 2,
-      is_join_required: 1
-    };
-  }
-
-  return new Promise<QBUIKitChatDialog>((resolve, reject) => {
-    // eslint-disable-next-line @typescript-eslint/no-shadow
-    const QB = getQB();
-
-    QB.chat.dialog.create(
-      // {
-      //   name: dialogName || '-',
-      //   occupants_ids: [userIds],
-      //   type: 2,
-      //   photo: data?.photo,
-      // },
-      params,
-      (error, chat) => {
-        if (error) {
-          reject(stringifyError(error));
-        } else {
-          resolve(chat!);
-        }
-      },
-    );
-  });
-}
-
-
 // END
 
 export function QBUpdateDialog(
@@ -689,11 +635,8 @@ export function QBLeaveDialog(dialogId: QBUIKitChatDialog['_id']) {
     // unjoin
     QB.chat.muc.leave(dialogJid, (error, res) => {
       if (error) {
-        const errorMessage = stringifyError(error);
-        console.log('QBLeaveDialog error: ', errorMessage);
-        reject(errorMessage);
+        reject(stringifyError(error));
       } else {
-        console.log('QBLeaveDialog success: ',res);
         resolve(res);
       }
     });

package/storybook-static/161.77e7dbc5.iframe.bundle.js

@@ -0,0 +1,2 @@
+/*! For license information please see 161.77e7dbc5.iframe.bundle.js.LICENSE.txt */
+"use strict";(self.webpackChunkquickblox_react_ui_kit=self.webpackChunkquickblox_react_ui_kit||[]).push([[161],{"./node_modules/react-dom/cjs/react-dom-test-utils.production.js"(__unused_webpack_module,exports,__webpack_require__){var React=__webpack_require__("./node_modules/react/index.js"),didWarnAboutUsingAct=!1;exports.act=function(callback){return!1===didWarnAboutUsingAct&&(didWarnAboutUsingAct=!0,console.error("`ReactDOMTestUtils.act` is deprecated in favor of `React.act`. Import `act` from `react` instead of `react-dom/test-utils`. See https://react.dev/warnings/react-dom-test-utils for more info.")),React.act(callback)}},"./node_modules/react-dom/test-utils.js"(module,__unused_webpack_exports,__webpack_require__){module.exports=__webpack_require__("./node_modules/react-dom/cjs/react-dom-test-utils.production.js")}}]);