quickblox-react-ui-kit 0.1.0

package/src/Presentation/Views/Dialogs/Dialogs.tsx

@@ -0,0 +1,372 @@
+import React, { useEffect } from 'react';
+import './Dialogs.scss';
+import ColumnContainer from '../../components/containers/ColumnContainer/ColumnContainer';
+import { DialogType } from '../../../Domain/entity/DialogTypes';
+import BaseViewModel, {
+  FunctionTypeViewModelToVoid,
+} from '../Base/BaseViewModel';
+import PreviewDialogViewModel from '../../components/UI/Dialogs/PreviewDialog/PreviewDialogViewModel';
+import PreviewDialog, {
+  ThemeNames,
+} from '../../components/UI/Dialogs/PreviewDialog/PreviewDialog';
+import LoaderComponent from '../../components/UI/Placeholders/LoaderComponent/LoaderComponent';
+import ErrorComponent from '../../components/UI/Placeholders/ErrorComponent/ErrorComponent';
+import HeaderDialogs from '../../components/UI/Dialogs/HeaderDialogs/HeaderDialogs';
+import { ModalContext } from '../../components/providers/ModalContextProvider/Modal';
+import { DialogsViewModel } from './DialogViewModel';
+import { DialogEntity } from '../../../Domain/entity/DialogEntity';
+import CreateNewDialogFlow from '../CreateDialogFlow/CreateNewDialogFlow';
+import { getTimeShort24hFormat } from '../../../utils/DateTimeFormatter';
+import { IconTheme } from '../../components/UI/svgs/Icons/IconsCommonTypes';
+import { GroupDialogEntity } from '../../../Domain/entity/GroupDialogEntity';
+import Search from '../../components/UI/svgs/Icons/Navigation/Search';
+import Remove from '../../components/UI/svgs/Icons/Actions/Remove';
+
+type DialogsComponentSettings = {
+  themeName?: ThemeNames;
+  withoutHeader?: boolean;
+  useSubHeader?: boolean;
+};
+
+type DialogsProps = {
+  header?: React.ReactNode;
+  subHeaderContent?: React.ReactNode;
+  itemSelectHandler?: FunctionTypeViewModelToVoid<DialogEntity>;
+  dialogsViewModel: DialogsViewModel;
+  additionalSettings?: DialogsComponentSettings;
+};
+
+// eslint-disable-next-line react/function-component-definition
+const DialogsComponent: React.FC<DialogsProps> = ({
+  header,
+  subHeaderContent,
+  itemSelectHandler,
+  dialogsViewModel,
+  additionalSettings = undefined,
+}: DialogsProps) => {
+  const dialogs: PreviewDialogViewModel[] = [];
+  const [dialogsToView, setDialogsToView] = React.useState<
+    PreviewDialogViewModel[]
+  >([]);
+
+  const [selectedItem, setSelectedItem] = React.useState<{
+    selectedIndex: number | undefined;
+    item: BaseViewModel<DialogEntity> | undefined;
+  }>({ selectedIndex: undefined, item: undefined });
+
+  const [showSearchDialogs, setShowSearchDialogs] = React.useState(false);
+  const [nameDialogForSearch, setNameDialogForSearch] = React.useState('');
+
+  useEffect(() => {
+    console.log('USE EFFECT DIALOG LIST HAS CHANGED');
+    console.log(JSON.stringify(dialogsViewModel?.dialogs));
+    dialogs.slice(0);
+
+    dialogsViewModel?.dialogs.forEach((entiy, index) => {
+      const pw: PreviewDialogViewModel = new PreviewDialogViewModel(
+        (it) => {
+          if (itemSelectHandler) {
+            setSelectedItem({ selectedIndex: index, item: it });
+            itemSelectHandler(it);
+          }
+        },
+        (it) => {
+          if (itemSelectHandler) {
+            setSelectedItem({ selectedIndex: index, item: it });
+            itemSelectHandler(it);
+          }
+        },
+        // Number(entiy.id),
+        // entiy.name,
+        entiy,
+      );
+
+      if (selectedItem && selectedItem.selectedIndex === index) {
+        pw.isSelected = true;
+      }
+      dialogs.push(pw);
+    });
+
+    setDialogsToView(dialogs);
+  }, [dialogsViewModel?.dialogs]);
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const fetchMoreData = () => {
+    console.log(
+      'call fetchMoreData with: pagination: ',
+      JSON.stringify(dialogsViewModel?.pagination),
+      'View length: ',
+      dialogsToView.length,
+      'Model length: ',
+      dialogsViewModel?.dialogs.length,
+    );
+    if (
+      dialogsViewModel?.dialogs.length === dialogsToView.length &&
+      dialogsViewModel?.pagination?.hasNextPage()
+    ) {
+      // setDialogsToView((prevState) => {
+      //   const newState = [...prevState];
+      //
+      //   const newDialogEntity: DialogEntity =
+      //     dialogsViewModel?.dialogs[prevState.length];
+      //
+      //   newState.push(newDialogEntity);
+      //
+      //   return newState;
+      // });
+      const newPagination = dialogsViewModel?.pagination;
+
+      newPagination.perPage = 6;
+      newPagination.nextPage(); // curPage + 1
+
+      console.log(
+        'call fetchMoreData with: pagination: ',
+        JSON.stringify(newPagination),
+        'View length: ',
+        dialogsToView.length,
+        'Model length: ',
+        dialogsViewModel?.dialogs.length,
+      );
+      // eslint-disable-next-line @typescript-eslint/await-thenable
+      dialogsViewModel?.getDialogs(newPagination);
+    }
+  };
+
+  // useEffect(() => {
+  //   const firstPagination = new Pagination(1, 1000);
+  //
+  //   console.log(
+  //     'useEffect DialogsComponent, getDialogs(): ',
+  //     JSON.stringify(firstPagination),
+  //   );
+  //   dialogsViewModel?.getDialogs(firstPagination);
+  // }, []);
+
+  const { handleModal } = React.useContext(ModalContext);
+  const useHeader = !additionalSettings?.withoutHeader || header || false;
+  const useSubContent =
+    additionalSettings?.useSubHeader || subHeaderContent || false;
+  const usingHeader = header || (
+    <HeaderDialogs
+      title="Dialogs"
+      clickSearchHandler={() => {
+        setShowSearchDialogs(!showSearchDialogs);
+        setNameDialogForSearch('');
+      }}
+      ClickActionHandler={() => {
+        handleModal(
+          true,
+          <CreateNewDialogFlow dialogsViewModel={dialogsViewModel} />,
+          'New dialog',
+          false,
+          false,
+          {
+            minHeight: '200px',
+            minWidth: '380px',
+            maxWidth: '380px',
+            backgroundColor: 'var(--main-background)',
+            // border: '3px solid red',
+          },
+        );
+      }}
+    />
+  );
+
+  const renderPreviewDialog = (item: PreviewDialogViewModel, index: number) => {
+    function getMessageDateTimeSent() {
+      let dateInt = 0;
+      let formattedValue = '';
+
+      if (item.entity.lastMessage.dateSent) {
+        dateInt = parseInt(item.entity.lastMessage.dateSent, 10);
+        if (Number.isNaN(dateInt)) {
+          return formattedValue;
+        }
+        formattedValue = getTimeShort24hFormat(dateInt);
+      }
+
+      return formattedValue;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    function isMute(entity: DialogEntity) {
+      return false;
+    }
+
+    const getDialogAvatar = (
+      currentDialog: PreviewDialogViewModel,
+    ): JSX.Element | undefined => {
+      let AvatarComponent: JSX.Element | undefined;
+
+      if (
+        currentDialog.entity.type === DialogType.group ||
+        currentDialog.entity.type === DialogType.public
+      ) {
+        const imagePhoto = (currentDialog.entity as GroupDialogEntity).photo;
+
+        console.log('Dialogs: avatar: ', imagePhoto || 'NO FOTO');
+        AvatarComponent = imagePhoto ? (
+          <img
+            style={{ width: '55px', height: '55px', borderRadius: '50%' }}
+            src={imagePhoto}
+          />
+        ) : undefined;
+      }
+
+      return AvatarComponent;
+    };
+
+    return (
+      <div
+        key={index}
+        onClick={() => {
+          setDialogsToView((prevState) => {
+            const newState = [...prevState];
+
+            if (selectedItem && selectedItem.selectedIndex) {
+              newState[selectedItem.selectedIndex].isSelected = false;
+            }
+            newState[index].isSelected = true;
+
+            return newState;
+          });
+        }}
+      >
+        <PreviewDialog
+          typeDialog={item?.entity?.type || DialogType.group}
+          dialogViewModel={item}
+          theme={{
+            themeName:
+              additionalSettings?.themeName === 'dark' ? 'dark' : 'light',
+            selected: item.isSelected,
+            muted: isMute(item.entity),
+          }}
+          title={`${item.entity.name || ''}`}
+          unreadMessageCount={
+            item.entity.unreadMessageCount > 0
+              ? item.entity.unreadMessageCount
+              : undefined
+          }
+          message_date_time_sent={getMessageDateTimeSent()}
+          previewMessage={item.entity.lastMessage.text}
+          dialogAvatar={getDialogAvatar(item)}
+        />
+      </div>
+    );
+  };
+
+  const loaderTheme: IconTheme = {
+    color: 'var(--divider)',
+    width: '42',
+    height: '42',
+  };
+
+  const renderSearchDialogs = () => {
+    return (
+      <div className="search-dialog-name-input">
+        <Search
+          applyZoom
+          width="24"
+          height="24"
+          color="var(--tertiary-elements)"
+        />
+        <input
+          type="text"
+          style={{ width: '268px' }}
+          value={nameDialogForSearch}
+          onChange={(event) => {
+            setNameDialogForSearch(event.target.value);
+          }}
+          placeholder="Search"
+        />
+        {nameDialogForSearch.length > 0 ? (
+          <div
+            style={{ cursor: 'pointer' }}
+            onClick={() => {
+              setNameDialogForSearch('');
+            }}
+          >
+            <Remove width="24" height="24" color="var(--tertiary-elements)" />
+          </div>
+        ) : null}
+      </div>
+    );
+  };
+
+  return (
+    <div
+      style={{
+        minHeight: '800px',
+        minWidth: '322px',
+        border: '1px solid var(--divider)',
+      }}
+    >
+      <ColumnContainer>
+        {useHeader && usingHeader}
+        {/* {showSearchDialogs ? renderSearchDialogs() : null} */}
+        {useSubContent && subHeaderContent}
+        {dialogsViewModel?.loading && (
+          // <div style={{ maxHeight: '44px', minHeight: '44px', height: '44px' }}>
+          //   <LoaderComponent width="44" height="44" color="var(--divider)" />
+          // </div>
+          <LoaderComponent
+            width={loaderTheme.width}
+            height={loaderTheme.height}
+            color={loaderTheme.color}
+          />
+        )}
+        {dialogsViewModel?.error && (
+          <ErrorComponent
+            title="Something is wrong."
+            ClickActionHandler={() => {
+              alert('call click retry');
+            }}
+          />
+        )}
+        {/* <div className="scroll-box"> */}
+        <div className="scroll-box">
+          {showSearchDialogs ? renderSearchDialogs() : null}
+          {nameDialogForSearch.length > 0 &&
+            dialogsToView
+              .filter((item) =>
+                item.entity.name.includes(nameDialogForSearch, 0),
+              )
+              .map((item, index) => renderPreviewDialog(item, index))}
+          {nameDialogForSearch.length === 0 &&
+            (dialogsToView && dialogsToView.length) > 0 &&
+            dialogsToView.map((item, index) =>
+              renderPreviewDialog(item, index),
+            )}
+
+          {/* /!* eslint-disable-next-line no-nested-ternary *!/ */}
+          {/* {nameDialogForSearch.length > 0 ? ( */}
+          {/*  dialogsToView */}
+          {/*    .filter((item) => */}
+          {/*      item.entity.name.includes(nameDialogForSearch, 0), */}
+          {/*    ) */}
+          {/*    .map((item, index) => renderPreviewDialog(item, index)) */}
+          {/* ) : (dialogsToView && dialogsToView.length) > 0 ? ( */}
+          {/*  dialogsToView.map((item, index) => renderPreviewDialog(item, index)) */}
+          {/* ) : ( */}
+          {/*  <div>Create new chat</div> */}
+          {/* )} */}
+          {/* {dialogsToView && dialogsToView.length > 0 ? ( */}
+          {/*  dialogsToView.map((item, index) => renderPreviewDialog(item, index)) */}
+          {/* ) : ( */}
+          {/*  // <ScrollableContainer */}
+          {/*  //   data={dialogsToView} */}
+          {/*  //   renderItem={renderPreviewDialog} */}
+          {/*  //   onEndReached={fetchMoreData} */}
+          {/*  //   // onEndReachedThreshold={0.8} */}
+          {/*  //   refreshing={dialogsViewModel?.loading} */}
+          {/*  // /> */}
+          {/*  // */}
+          {/*  <div>Create new chat</div> */}
+          {/* )} */}
+        </div>
+      </ColumnContainer>
+    </div>
+  );
+};
+
+export default DialogsComponent;

package/src/Presentation/Views/Dialogs/useDialogsViewModel.ts

@@ -0,0 +1,136 @@
+import { useState } from 'react';
+import { PublicDialogEntity } from '../../../Domain/entity/PublicDialogEntity';
+import { GetAllDialogsUseCase } from '../../../Domain/use_cases/GetAllDialogsUseCase';
+import { SubscribeToDialogsUpdatesUseCase } from '../../../Domain/use_cases/SubscribeToDialogsUpdatesUseCase';
+import { DialogEntity } from '../../../Domain/entity/DialogEntity';
+import useQbDataContext from '../../components/providers/QuickBloxUIKitProvider/useQbDataContext';
+import { DialogsViewModel } from './DialogViewModel';
+import DialogsRepository from '../../../Data/repository/DialogsRepository';
+import { GroupDialogEntity } from '../../../Domain/entity/GroupDialogEntity';
+import { FileEntity } from '../../../Domain/entity/FileEntity';
+
+export default function useDialogsViewModel(): DialogsViewModel {
+  console.log('useDialogsViewModel');
+  const currentContext = useQbDataContext(); // React.useContext(dataContext);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [dialogs, setDialogs] = useState<PublicDialogEntity[]>([]);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [newDialog, setNewDialog] = useState<DialogEntity>();
+
+  const getAllUseCaseInit: GetAllDialogsUseCase = new GetAllDialogsUseCase(
+    new DialogsRepository(
+      currentContext.storage.LOCAL_DATA_SOURCE,
+      currentContext.storage.REMOTE_DATA_SOURCE,
+    ),
+  );
+
+  const [useCaseGetAllDialogs] =
+    useState<GetAllDialogsUseCase>(getAllUseCaseInit);
+
+  const subscribeToUpdatesUseCaseInit: SubscribeToDialogsUpdatesUseCase =
+    new SubscribeToDialogsUpdatesUseCase(
+      new DialogsRepository(
+        currentContext.storage.LOCAL_DATA_SOURCE,
+        currentContext.storage.REMOTE_DATA_SOURCE,
+      ),
+    );
+  const [useCaseSubscribeToDialogsUpdates] =
+    useState<SubscribeToDialogsUpdatesUseCase>(subscribeToUpdatesUseCaseInit);
+
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async function getDialogs() {
+    console.log('getDialogs');
+    setLoading(true);
+
+    //
+    // const result = await useCaseGetAllDialogs?.execute();
+
+    useCaseGetAllDialogs
+      ?.execute()
+      // eslint-disable-next-line promise/always-return
+      .then((result) => {
+        console.log('states: ', useCaseGetAllDialogs);
+        setDialogs([...(result as PublicDialogEntity[])]);
+        setLoading(false);
+      })
+      .catch(() => {
+        console.log('call catch....');
+        setError('ERROR!!!');
+        setLoading(false);
+      });
+
+    //
+
+    await useCaseSubscribeToDialogsUpdates?.execute((data) => {
+      try {
+        console.log('3.SUBSCRIBE EXECUTE in useDialogsViewModel:', data);
+        // throw new Error('Error!!!');
+        setDialogs([...(data as PublicDialogEntity[])]);
+        setLoading(false);
+        setError('');
+      } catch (e) {
+        console.log('catch error2');
+        setError('ERROR2!!!');
+      }
+    });
+  }
+
+  const createDialog = (dialogInfo: GroupDialogEntity) => {
+    console.log(JSON.stringify(dialogInfo));
+
+    return Promise.reject(dialogInfo);
+  };
+
+  const updateDialog = async (
+    // eslint-disable-next-line @typescript-eslint/no-shadow,@typescript-eslint/no-unused-vars
+    dialogToUpdate: GroupDialogEntity,
+  ): Promise<DialogEntity> => {
+    return Promise.reject(newDialog);
+  };
+
+  const deleteDialog = async (
+    // eslint-disable-next-line @typescript-eslint/no-shadow,@typescript-eslint/no-unused-vars
+    dialogToDelete: GroupDialogEntity,
+  ): Promise<boolean> => {
+    return Promise.reject(newDialog);
+  };
+
+  const release = () => {
+    useCaseSubscribeToDialogsUpdates.release();
+  };
+
+  const removeMembers = async (dialog: GroupDialogEntity): Promise<boolean> => {
+    console.log('call removeMembers(), dialog: ', dialog);
+
+    // eslint-disable-next-line prefer-promise-reject-errors
+    return Promise.reject('');
+  };
+
+  const uploadFile = (file: File): Promise<FileEntity> => {
+    console.log('call uploadFile(), file: ', file);
+
+    // eslint-disable-next-line prefer-promise-reject-errors
+    return Promise.reject('');
+  };
+
+  return {
+    get entity(): DialogEntity {
+      return newDialog as DialogEntity;
+    },
+    set entity(item) {
+      setNewDialog(item);
+    },
+    dialogs,
+    loading,
+    error,
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    getDialogs,
+    release,
+    createDialog,
+    updateDialog,
+    deleteDialog,
+    uploadFile,
+    removeMembers,
+  };
+}