quickblox-react-ui-kit 0.4.6-beta.4 → 0.4.7

package/src/Presentation/Views/Dialog/useDialogViewModel.ts

@@ -43,15 +43,12 @@ export default function useDialogViewModel(
   dialogType: DialogType,
   dialogEntity: DialogEntity,
 ): DialogViewModel {
-  console.log('useDialogViewModel');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
   const startPagination: Pagination = new Pagination(0, 0);
   const [pagination, setPagination] = useState<Pagination>(startPagination);
   const [messages, setMessages] = useState<MessageEntity[]>([]);
-  // const [users, setUsers] = useState<Record<number, UserEntity>>();
   const [dialog, setDialog] = useState<DialogEntity>(dialogEntity);
-  // const [dialogsParticipants, setDialogsParticipants] = useState<number[]>([]);
 
   const currentContext = useQbInitializedDataContext();
   const remoteDataSourceMock: RemoteDataSource =
@@ -83,10 +80,9 @@ export default function useDialogViewModel(
 
     updateCurrentDialogInDataSourceUseCase.execute().catch((e) => {
       console.log(
-        'useDialogViewModel Error updateCurrentDialogInDataSourceUseCase: ',
+        'Error: useDialogViewModel Error updateCurrentDialogInDataSourceUseCase: ',
         stringifyError(e),
       );
-      throw new Error(stringifyError(e));
     });
   }
 
@@ -175,7 +171,7 @@ export default function useDialogViewModel(
         console.log(
           `DIALOG: ${JSON.stringify(dialogEntity)} WITH ${
             data.ResultData.length
-          } messages:${JSON.stringify(data)}`,
+          } messages.`,
         );
 
         messagesDialog = data.ResultData;
@@ -243,7 +239,7 @@ export default function useDialogViewModel(
       return obj;
     });
 
-    console.log(`result messages:${JSON.stringify(ResultMessages)}`);
+    console.log(`result messages, count:${ResultMessages.length}`);
     setMessages((prevState) => {
       const newItems: MessageEntity[] =
         currentPagination === undefined ||
@@ -254,12 +250,9 @@ export default function useDialogViewModel(
       return newItems;
     });
     setLoading(false);
-    console.log('EXECUTE USE CASE MessagesViewModelWithMockUseCase EXECUTED');
   }
 
   const dialogUpdateHandler = (dialogInfo: DialogEventInfo) => {
-    console.log('call dialogUpdateHandler in useDialogViewModel');
-
     if (dialogInfo.eventMessageType === EventMessageType.LocalMessage) {
       if (dialogInfo.messageStatus) {
         if (
@@ -408,13 +401,13 @@ export default function useDialogViewModel(
     );
 
   const sendTypingTextMessage = () => {
-    console.log('call release in MessagesViewModelWithMockUseCase');
     userTypingMessageUseCase.execute().catch((reason) => {
       const errorMessage: string = stringifyError(reason);
 
-      console.log('have exception in sendTypingTextMessage: ', errorMessage);
-
-      throw new Error(errorMessage);
+      console.log(
+        'Error: have exception in sendTypingTextMessage: ',
+        errorMessage,
+      );
     });
   };
 
@@ -490,11 +483,10 @@ export default function useDialogViewModel(
         const errorMessage: string = stringifyError(reason);
 
         console.log(
-          'exception in sendMessage in useDialogViewModel',
+          'Error: exception in sendMessage in useDialogViewModel',
           errorMessage,
         );
         setLoading(false);
-        throw new Error(errorMessage);
       })
       .finally(() => {
         setLoading(false);
@@ -572,7 +564,6 @@ export default function useDialogViewModel(
   };
 
   const sendAttachmentMessage = async (newMessage: File): Promise<boolean> => {
-    console.log('call sendAttachmentMessage');
     setLoading(true);
     const currentUserId = REMOTE_DATA_SOURCE.authInformation?.userId || 0;
 
@@ -614,11 +605,10 @@ export default function useDialogViewModel(
         const errorMessage: string = stringifyError(reason);
 
         console.log(
-          'exception in sendMessage in useDialogViewModel',
+          'Error: exception in sendMessage in useDialogViewModel',
           errorMessage,
         );
         setLoading(false);
-        throw new Error(errorMessage);
       })
       .finally(() => {
         setLoading(false);
@@ -707,11 +697,10 @@ export default function useDialogViewModel(
         const errorMessage: string = stringifyError(reason);
 
         console.log(
-          'exception in sendMessage in useDialogViewModel',
+          'Error: exception in sendMessage in useDialogViewModel',
           errorMessage,
         );
         setLoading(false);
-        throw new Error(errorMessage);
       })
       .finally(() => {
         setLoading(false);

package/src/Presentation/Views/DialogInfo/DialogInfo.scss

@@ -1,18 +1,11 @@
 $dialog-information-container-height: 800px;
 $dialog-information-container-dialog-information-height: 64px;
 
-.dialog-information-container {
-  // min-height: $dialog-information-container-height;
-  // max-height: $dialog-information-container-height;
-  // height: $dialog-information-container-height;
-  // border: 1px solid var(--divider);
-}
 .header-dialog-info,
 .header-dialog-info * {
   box-sizing: border-box;
 }
 .header-dialog-info {
-  background: var(--color-background, #ffffff);
   padding: 16px 16px 16px 24px;
   display: flex;
   flex-direction: row;
@@ -20,28 +13,38 @@ $dialog-information-container-dialog-information-height: 64px;
   justify-content: space-between;
   align-self: stretch;
   flex-shrink: 0;
+  font: var(--title-title-large);
   position: relative;
   border-bottom: 1px solid var(--divider);
   height: $dialog-information-container-dialog-information-height;
+
+  .dialog-header__icon {
+      svg {
+        width: 24px;
+        height: 24px;
+        fill: var(--secondary-elements);
+      }
+    }
 }
+.header-dialog-info-icon {
+  width: 24px;
+  height: 24px;
+  fill: var(--secondary-elements);
+}
+
 .header-dialog-info-headline {
   color: var(--main-text, #0b1b0f);
   text-align: left;
   font: var(--title-title-large);
   position: relative;
 }
-.header-dialog-info-icon {
-  width: 24px;
-  height: 24px;
-  fill: var(--secondary-elements);
-}
+
 
 .dialog-information-profile,
 .dialog-information-profile * {
   box-sizing: border-box;
 }
 .dialog-information-profile {
-  background: var(--color-background, #ffffff);
   padding: 24px 0px 24px 0px;
   align-self: stretch;
   flex-flow: column;
@@ -51,9 +54,7 @@ $dialog-information-container-dialog-information-height: 64px;
   border-bottom: 1px solid var(--divider);
 }
 .dialog-information-profile-avatar {
-  // width: 80px;
   height: 80px;
-  // position: absolute;
   left: 140px;
   top: 24px;
 }
@@ -62,7 +63,6 @@ $dialog-information-container-dialog-information-height: 64px;
   justify-content: center;
 }
 .dialog-info-profile-avatar-ellipse {
-  background: var(--disabled-elements, #bcc1c5);
   border-radius: 50%;
   position: absolute;
   height: 81px;
@@ -70,7 +70,6 @@ $dialog-information-container-dialog-information-height: 64px;
   top: 24px;
 }
 .dialog-info-profile-avatar-contents {
-  height: auto;
   position: absolute;
   right: 17.86%;
   left: 17.86%;
@@ -85,7 +84,6 @@ $dialog-information-container-dialog-information-height: 64px;
   color: var(--main-text, #0b1b0f);
   text-align: center;
   font: var(--title-title-medium);
-  // position: absolute;
   left: 134.5px;
   top: 112px;
   display: flex;
@@ -93,18 +91,15 @@ $dialog-information-container-dialog-information-height: 64px;
   justify-content: center;
 }
 .dialog-information-profile-edit {
-  position: relative;
   right: -10px;
-  //top: 30px;
   border-radius: 4px;
   padding: 8px 56px 0px 0px;
   display: flex;
   flex-direction: row;
-  gap: 0px;
+  gap: 0;
   align-items: center;
   justify-content: center;
   position: absolute;
-  //left: 294px;
   top: 8px;
 }
 .dialog-information-profile-edit-button {
@@ -124,7 +119,6 @@ $dialog-information-container-dialog-information-height: 64px;
   box-sizing: border-box;
 }
 .dialog-info-action-wrapper-settings {
-  background: var(--color-background, #ffffff);
   padding: 16px;
   display: flex;
   flex-direction: row;
@@ -149,7 +143,7 @@ $dialog-information-container-dialog-information-height: 64px;
   padding: 4px;
   display: flex;
   flex-direction: row;
-  gap: 0px;
+  gap: 0;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
@@ -202,7 +196,7 @@ $dialog-information-container-dialog-information-height: 64px;
   text-align: center;
   font: var(--label-label-medium);
   position: relative;
-  padding: 0px 5px 0px 5px;
+  padding: 0 5px 0 5px;
 }
 
 .dialog-info-leave {

package/src/Presentation/Views/DialogInfo/DialogInfo.tsx

@@ -397,8 +397,8 @@ const DialogInfo: React.FC<HeaderDialogsProps> = ({
                 >
                   <EditDialog
                     disableActions={disableAction}
-                    nameDialog={dialogViewModel?.entity.name || dialog?.name}
-                    typeDialog={dialogViewModel?.entity.type || dialog?.type}
+                    nameDialog={dialogViewModel?.entity?.name || dialog?.name}
+                    typeDialog={dialogViewModel?.entity?.type || dialog?.type}
                     ulrIcon={getUrlAvatar(dialogViewModel?.entity || dialog)}
                     typeAddEditDialog={TypeOpenDialog.edit}
                     clickUpdatedHandler={getDialogUpdatedInfoHandler}

package/src/Presentation/Views/DialogInfo/DialogMemberButton/DialogMembersButton.scss

@@ -1,41 +1,24 @@
 .dialog-members-btn {
   box-sizing: border-box;
 
-  /* Auto layout */
-
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   padding: 8px 10px;
-
-  // width: 143px;
   height: 32px;
 
-  /* Secondary/Secondary-500 */
 
   border: 1px solid var(--secondary-elements);
   border-radius: 4px;
-
-  /* Inside auto layout */
-
   flex: none;
   order: 0;
   flex-grow: 0;
-
-  /* Button/Default */
-
-  font-family: 'Roboto';
   font-style: normal;
   font-weight: 700;
   font-size: 14px;
   line-height: 16px;
-  /* identical to box height, or 114% */
-
   letter-spacing: 0.4px;
-
-  /* Secondary/Secondary-500 */
-
   color: var(--secondary-elements);
 
   cursor: pointer;

package/src/Presentation/Views/DialogInfo/MembersList/MembersList.scss

@@ -6,7 +6,6 @@ $members-container-header-height: 64px;
   box-sizing: border-box;
 }
 .members-container-header {
-  background: var(--color-background, #ffffff);
   padding: 16px 16px 16px 24px;
   display: flex;
   flex-direction: row;
@@ -21,6 +20,15 @@ $members-container-header-height: 64px;
   border-width: 0 0 1px 0;
 
   height: $members-container-header-height;
+
+  .dialog-header__icon {
+    svg {
+      width: 24px;
+      height: 24px;
+      fill: var(--main-text);
+      padding: 0;
+    }
+  }
 }
 .members-container-header-left {
   display: flex;

package/src/Presentation/Views/DialogInfo/UsersList/SingleUser/SingleUser.scss

@@ -41,7 +41,6 @@
   height: 100%;
 }
 .list-single-user-contents-user {
-  height: auto;
   position: absolute;
   right: 17.86%;
   left: 17.86%;

package/src/Presentation/Views/DialogInfo/UsersList/useUsersListViewModel.ts

@@ -13,7 +13,6 @@ import { DefaultConfigurations } from '../../../../Data/DefaultConfigurations';
 export default function useUsersListViewModel(
   dialogEntity?: DialogEntity,
 ): UsersListViewModel {
-  console.log('create useUsersListViewModel');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('error with getting user list');
   const [users, setUsers] = useState<UserEntity[]>([]);
@@ -26,8 +25,9 @@ export default function useUsersListViewModel(
   const { regexUserName } = QBConfig.appConfig;
   const regex = regexUserName ? new RegExp(regexUserName) : null;
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   function logData(message: string, data: any) {
-    console.log(`${message} :`, JSON.stringify(data));
+    // console.log(`${message} :`, JSON.stringify(data));
   }
   function handleSuccessfulFetch(participants: Array<number>, data: any) {
     logData('have getUsers', data);
@@ -84,7 +84,6 @@ export default function useUsersListViewModel(
     }
   }
   async function getUsers() {
-    console.log('call getUsers in useUsersListViewModel');
     const participants: Array<number> =
       // eslint-disable-next-line no-nested-ternary
       dialog?.type === DialogType.group
@@ -94,7 +93,6 @@ export default function useUsersListViewModel(
         : [];
 
     await fetchUsersData(participants);
-    console.log('EXECUTE USE CASES getUsers');
   }
   async function getUserById(id: number): Promise<UserEntity> {
     const response = await getUsersData([id]);

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

@@ -38,7 +38,6 @@ export default function useDialogListViewModel(
   currentContext: QBDataContextType,
   initPagination?: Pagination,
 ): DialogListViewModel {
-  console.log('3.1. useDialogListViewModel');
   const startPagination: Pagination = initPagination || new Pagination();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');

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

@@ -4,13 +4,9 @@ $create-dialog-container-width: 332px;
 $create-dialog-container-height: 180px;
 
 .edit-container {
-  //border: 1px solid blue;
   min-height: $container-height;
   max-height: $container-height;
   height: $container-height;
-  //min-width: $container-width;
-  //max-width: $container-width;
-  //width: $container-width;
   width: 100%;
 
   display: flex;
@@ -21,13 +17,9 @@ $create-dialog-container-height: 180px;
 }
 
 .edit-btn-container {
-  //border: 3px solid black;
   min-height: 34px;
   max-height: 34px;
   height: 34px;
-  //min-width: $container-width;
-  //max-width: $container-width;
-  //width: $container-width;
   width: 100%;
 
   display: flex;
@@ -41,13 +33,8 @@ $create-dialog-container-height: 180px;
   min-height: $create-dialog-container-height;
   max-height: $create-dialog-container-height;
   height: $create-dialog-container-height;
-  //min-width: $create-dialog-container-width;
-  //max-width: $create-dialog-container-width;
-  //width: $create-dialog-container-width;
   width: 100%;
 
-  //border: 3px solid green;
-
   margin-bottom: 24px;
 
   &--disable {
@@ -69,21 +56,14 @@ $create-dialog-container-height: 180px;
     justify-content: flex-start;
     align-items: flex-start;
 
-    //border: 1px solid blue;
-
     &__inf {
       min-height: 20px;
-
-      font-family: 'Roboto';
       font-style: normal;
       font-weight: 400;
       font-size: 14px;
       line-height: 20px;
       letter-spacing: 0.25px;
       color: var(--main-text);
-      // color: var(--color-background);
-
-      //border: 1px solid orange;
     }
 
     &__icon-container {
@@ -100,8 +80,6 @@ $create-dialog-container-height: 180px;
         max-height: 56px;
         height: 56px;
         min-width: 56px;
-        max-width: 56px;
-        height: 56px;
         margin-top: 8px;
 
         background-color: var(--disabled-elements);
@@ -111,12 +89,6 @@ $create-dialog-container-height: 180px;
         display: flex;
         justify-content: center;
         align-items: center;
-
-        //border: 1px solid red;
-
-        &__content {
-          // margin: 10px;
-        }
       }
 
       &__upload {
@@ -128,23 +100,17 @@ $create-dialog-container-height: 180px;
         padding-left: 16px;
         padding-top: 20px;
 
-        font-family: 'Roboto';
         font-style: normal;
         font-weight: 700;
         font-size: 14px;
         line-height: 16px;
         letter-spacing: 0.4px;
         color: var(--color-icon);
-        //cursor: pointer;
-
-        // border: 1px solid green;
       }
     }
 
     &__upload-error {
       min-height: 20px;
-
-      font-family: 'Roboto';
       font-style: normal;
       font-weight: 400;
       font-size: 14px;
@@ -156,16 +122,13 @@ $create-dialog-container-height: 180px;
 
     &__dialog-name-inf {
       min-height: 20px;
-
-      font-family: 'Roboto';
       font-style: normal;
       font-weight: 400;
       font-size: 14px;
       line-height: 20px;
       letter-spacing: 0.25px;
       margin-top: 24px;
-
-      //border: 1px solid orange;
+      color: var(--main-text);
     }
 
     &__text-field {

package/src/Presentation/Views/Flow/CreateDialog/CreateDialog.scss

@@ -2,46 +2,13 @@ $create-dialog-container-width: 380px;
 $create-dialog-container-height: 312px;
 
 .create-dialog-container {
-  min-height: $create-dialog-container-height;
-  max-height: $create-dialog-container-height;
-  height: $create-dialog-container-height;
-  //border: 1px solid green;
-  //&--btn-wrapper{
-  //  height: 64px;
-  //  // width: 280px;
-  //  display: flex;
-  //  flex-direction: row;
-  //  flex-wrap: nowrap;
-  //  justify-content: flex-start;
-  //  align-items: center;
-  //  gap: 16px;
-  //  cursor: pointer;
-  //  border-radius: 4px;
-  //
-  //  border: 1px solid var(--tertiary-elements);
-  //
-  //  &__text{
-  //    min-height: 24px;
-  //    // margin: 16px 16px 16px 16px;
-  //    font-family: 'Roboto';
-  //    font-style: normal;
-  //    font-weight: 400;
-  //    font-size: 16px;
-  //    line-height: 24px;
-  //    letter-spacing: 0.15px;
-  //    flex: 2 2 268px;
-  //    letter-spacing: 0.15px;
-  //
-  //    //border: 1px solid orange;
-  //  }
-  //  &__icon{
-  //    min-height: 24px;
-  //    margin-left: 10px;
-  //    flex: 1 1 24px;
-  //
-  //   // border: 1px solid red;
-  //  }
-  //}
+  //min-height: $create-dialog-container-height;
+  //max-height: $create-dialog-container-height;
+  //height: $create-dialog-container-height;
+
+  .column-container {
+    width: 330px;
+  }
 }
 
 
@@ -52,7 +19,7 @@ $create-dialog-container-height: 312px;
 .item-type-dialog {
   border-radius: 4px;
   border-style: solid;
-  border-color: var(--light-theme-tertiaryelements, #636d78);
+  border-color: var(--tertiary-elements, #636d78);
   border-width: 1px;
   padding: 16px;
   display: flex;
@@ -78,7 +45,7 @@ $create-dialog-container-height: 312px;
   position: relative;
 }
 .item-type-dialog-name {
-  color: var(--light-theme-maintext, #0b1b0f);
+  color: var(--main-text, #0b1b0f);
   text-align: left;
   font-family: var(
                   --body-body-medium-font-family,
@@ -91,3 +58,11 @@ $create-dialog-container-height: 312px;
   position: relative;
   flex: 1;
 }
+
+@media only screen and (max-width: 980px) {
+  .create-dialog-container {
+    .column-container {
+      width: unset;
+    }
+  }
+}