@ethora/chat-component-rn 26.4.1

package/src/components/Modals/NewChatModal/UpdNewChatModal.tsx

@@ -0,0 +1,136 @@
+import React, { useState, useMemo } from 'react';
+import Button from '../../styled/Button';
+import { AddNewIcon } from '../../../assets/icons';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '../../../roomStore';
+import { useXmppClient } from '../../../context/xmppProvider';
+import { ApiRoom, ChatAccessOption } from '../../../types/types';
+import { uploadFile } from '../../../networking/api-requests/auth.api';
+import { createRoomFromApi } from '../../../helpers/createRoomFromApi';
+import { postRoom } from '../../../networking/api-requests/rooms.api';
+import { RoomMember } from '../../../types/types';
+
+import ModalContent from './ModalContent';
+import { ModalBackground } from '../styledModalComponents';
+import { addRoom, setCurrentRoom } from '../../../roomStore/roomsSlice';
+
+const NewChatModal: React.FC = () => {
+  const config = useSelector(
+    (state: RootState) => state.chatSettingStore.config
+  );
+  const dispatch = useDispatch();
+  const { client } = useXmppClient();
+
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const [activeTab, setActiveTab] = useState<'0' | '1' | null>('0');
+  const [roomName, setRoomName] = useState<string>('');
+  const [roomDescription, setRoomDescription] = useState<string>('');
+  const [chatType, setChatType] = useState<ChatAccessOption>({
+    name: 'Public',
+    id: 'public',
+  });
+  const [profileImage, setProfileImage] = useState<string | File | null>(null);
+  const [errors, setErrors] = useState({ name: '', description: '' });
+  const [selectedUsers, setSelectedUsers] = useState<RoomMember[]>([]);
+
+  const options: ChatAccessOption[] = [
+    { name: 'Public', id: 'public' },
+    { name: 'Members-only', id: 'group' },
+  ];
+
+  const isValid = useMemo(() => roomName.length >= 3, [roomName]);
+
+  const handleOpenModal = () => setIsModalOpen(true);
+  const handleCloseModal = () => {
+    setActiveTab('0');
+    setIsModalOpen(false);
+    setRoomName('');
+    setSelectedUsers([]);
+  };
+
+  const validateRoomName = (name: string) => {
+    if (name.trim().length < 3) {
+      return 'Room name must be at least 3 characters.';
+    }
+    return '';
+  };
+
+  const handleRoomNameChange = (e: string) => {
+    const name = e;
+    setRoomName(name);
+    setErrors((prevErrors) => ({
+      ...prevErrors,
+      name: validateRoomName(name),
+    }));
+  };
+
+  const handleCreateRoom = async () => {
+    if (isValid) {
+      let mediaData: FormData | null = new FormData();
+      mediaData.append('files', profileImage);
+
+      const uploadResult = await uploadFile(mediaData);
+      const location = uploadResult?.data?.results?.[0]?.location;
+
+      const namesArray = selectedUsers.map((user) => user.xmppUsername);
+      const newChat: ApiRoom = await postRoom({
+        title: roomName,
+        description: roomDescription || 'No description',
+        picture: location || '',
+        type: chatType.id || 'public',
+        members: namesArray,
+      });
+
+      // Create room
+      const normalizedChat = createRoomFromApi(
+        newChat,
+        config?.xmppSettings?.conference,
+        namesArray.length
+      );
+      dispatch(addRoom({ roomData: normalizedChat }));
+      dispatch(setCurrentRoom({ roomJID: normalizedChat.jid }));
+      client.presenceInRoomStanza(normalizedChat.jid);
+    }
+  };
+
+  return (
+    <>
+      <Button
+        style={{
+          color: 'black',
+          padding: 8,
+          borderRadius: '16px',
+          backgroundColor: 'transparent',
+        }}
+        unstyled
+        EndIcon={<AddNewIcon color={config?.colors?.primary} />}
+        onPre={handleOpenModal}
+      />
+      {isModalOpen && (
+        <ModalBackground>
+          <ModalContent
+            activeTab={activeTab}
+            roomName={roomName}
+            roomDescription={roomDescription}
+            chatType={chatType}
+            profileImage={profileImage}
+            setActiveTab={setActiveTab}
+            handleRoomNameChange={handleRoomNameChange}
+            setRoomDescription={setRoomDescription}
+            setChatType={setChatType}
+            setProfileImage={setProfileImage}
+            selectedUsers={selectedUsers}
+            setSelectedUsers={setSelectedUsers}
+            handleCreateRoom={handleCreateRoom}
+            handleCloseModal={handleCloseModal}
+            errors={errors}
+            setErrors={setErrors}
+            options={options}
+          />
+        </ModalBackground>
+      )}
+    </>
+  );
+};
+
+export default NewChatModal;

package/src/components/Modals/SelectUsersModal/SelectUsersModal.tsx

@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { getActiveRoom, RootState } from '../../../roomStore';
+import {
+  ActionButton,
+  CloseButton,
+  GroupContainer,
+  ModalBackground,
+  ModalContainer,
+} from '../styledModalComponents';
+import Button from '../../styled/Button';
+import { RoomMember } from '../../../types/types';
+import UsersList from '../../UsersList/UsersList';
+import Loader from '../../styled/Loader';
+import { postAddRoomMember } from '../../../networking/api-requests/rooms.api';
+import { useToast } from '../../../context/ToastContext';
+import { updateRoom } from '../../../roomStore/roomsSlice';
+import { Text } from 'react-native';
+
+const SelectUsersModal: React.FC = () => {
+  const { showToast } = useToast();
+  const dispatch = useDispatch();
+
+  const [loading, setIsLoading] = useState<boolean>(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedUsers, setSelectedUsers] = useState<RoomMember[]>([]);
+  const activeRoom = useSelector((state: RootState) => getActiveRoom(state));
+
+  const handleOpenModal = () => setIsModalOpen(true);
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setSelectedUsers([]);
+  };
+
+  const handleAdd = async () => {
+    setIsLoading(true);
+    const existingXmppUsernames = activeRoom?.members?.map(
+      (member) => member.xmppUsername
+    );
+
+    const usersArray = selectedUsers
+      .filter((user) => !existingXmppUsernames?.includes(user.xmppUsername))
+      .map((user) => user.xmppUsername);
+
+    try {
+      const newMembers = await postAddRoomMember({
+        chatName: activeRoom?.jid?.split('@')[0] || '',
+        members: usersArray,
+      });
+      dispatch(
+        updateRoom({
+          jid: activeRoom?.jid || '',
+          updates: {
+            members: [...newMembers, ...activeRoom?.members || []],
+            usersCnt: (activeRoom?.members?.length || 0) + newMembers.length,
+          },
+        })
+      );
+      showToast({
+        id: Date.now().toString(),
+        title: 'Success!',
+        message: 'Room created succusfully!',
+        type: 'success',
+        duration: 3000,
+      });
+    } catch (error) {
+      console.error('Error adding users:', error);
+      setIsLoading(false);
+    }
+
+    handleCloseModal();
+    setIsLoading(false);
+  };
+
+  return (
+    <>
+      <ActionButton variant="filled" unstyled onPress={handleOpenModal}>
+        Add more Users
+      </ActionButton>
+
+      {isModalOpen && (
+        <ModalBackground>
+          <ModalContainer>
+            <CloseButton onPress={handleCloseModal}>
+              <Text style={{ fontSize: 24 }}>&times;</Text>
+              &times;
+            </CloseButton>
+            <GroupContainer
+              style={{
+                flexDirection: 'column',
+                position: 'relative',
+                width: '100%',
+                minHeight: 400,
+              }}
+            >
+              <UsersList
+                selectedUsers={selectedUsers}
+                setSelectedUsers={setSelectedUsers}
+                style={{
+                  minWidth: '100%',
+                  width: '100%',
+                  maxHeight: '340px',
+                }}
+                headerElement={false}
+              />
+            </GroupContainer>
+            <GroupContainer>
+              <Button
+                onPress={handleCloseModal}
+                text="Cancel"
+                style={{ width: '100%' }}
+                unstyled
+                variant="outlined"
+              />
+              {loading ? (
+                <Loader />
+              ) : (
+                <Button
+                  onPress={handleAdd}
+                  text="Add"
+                  style={{ width: '100%' }}
+                  unstyled
+                  variant="filled"
+                />
+              )}
+            </GroupContainer>
+          </ModalContainer>
+        </ModalBackground>
+      )}
+    </>
+  );
+};
+
+export default SelectUsersModal;

package/src/components/Modals/SettingsModals/BlockedUsers/BlockedUsersModal.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+  EmptySection,
+  CenterContainer,
+  UserInfo,
+  UserName,
+  UserStatus,
+  ModalContainerFullScreen,
+  ActionButton,
+  Label,
+  BorderedContainer,
+  LabelData,
+} from '../../styledModalComponents';
+import { ChatIcon } from '../../../../assets/icons';
+import ModalHeaderComponent from '../../ModalHeaderComponent';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../../../roomStore';
+import { ProfileImagePlaceholder } from '../../../MainComponents/ProfileImagePlaceholder';
+import {
+  SharedSettingsSectionContainer,
+  SharedSettingsStyledLabel,
+  SharedSettingsLabelData,
+  SharedSettingsInfoPanel,
+  SharedSettingsInfoText,
+} from '../SharedStyledComponents';
+
+interface BlockedUsersModalProps {
+  handleCloseModal: any;
+}
+
+const BlockedUsersModal: React.FC<BlockedUsersModalProps> = ({
+  handleCloseModal,
+}) => {
+  const { config } = useSelector((state: RootState) => state.chatSettingStore);
+
+  return (
+    <ModalContainerFullScreen>
+      <ModalHeaderComponent
+        handleCloseModal={handleCloseModal}
+        headerTitle={'Blocke Users'}
+      />
+      <SharedSettingsSectionContainer>
+        <SharedSettingsStyledLabel>
+          Current Document Shares
+        </SharedSettingsStyledLabel>
+        <SharedSettingsLabelData>
+          Listed below are your currently active document sharing links. You can
+          share or delete them.
+        </SharedSettingsLabelData>
+        <BorderedContainer>
+          <SharedSettingsInfoPanel bgColor={config?.colors?.secondary}>
+            <SharedSettingsInfoText>
+              There are no shares yet, or you can add them by clicking the “Add
+              New Share” button
+            </SharedSettingsInfoText>
+          </SharedSettingsInfoPanel>
+        </BorderedContainer>
+      </SharedSettingsSectionContainer>
+    </ModalContainerFullScreen>
+  );
+};
+
+export default BlockedUsersModal;

package/src/components/Modals/SettingsModals/DocumentShares/DocumentSharesModal.tsx

@@ -0,0 +1,115 @@
+/** @format */
+
+import React from 'react';
+import {
+  EmptySection,
+  CenterContainer,
+  UserInfo,
+  UserName,
+  UserStatus,
+  ModalContainerFullScreen,
+  ActionButton,
+  Label,
+  BorderedContainer,
+  LabelData,
+} from '../../styledModalComponents';
+import {
+  AddNewIcon,
+  ChatIcon,
+  PlusIcon,
+  SearchIcon,
+} from '../../../../assets/icons';
+import ModalHeaderComponent from '../../ModalHeaderComponent';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../../../roomStore';
+import { ProfileImagePlaceholder } from '../../../MainComponents/ProfileImagePlaceholder';
+import {
+  SharedSettingsSectionContainer,
+  SharedSettingsStyledLabel,
+  SharedSettingsLabelData,
+  SharedSettingsInfoPanel,
+  SharedSettingsInfoText,
+  SharedSettingsColumnContainer,
+} from '../SharedStyledComponents';
+import { SearchInput } from '../../../InputComponents/Search';
+import Button from '../../../styled/Button';
+import DropdownMenu from '../../../SortDropDown';
+import { View } from 'react-native';
+
+interface DocumentSharesModalProps {
+  handleCloseModal: any;
+}
+
+const DocumentSharesModal: React.FC<DocumentSharesModalProps> = ({
+  handleCloseModal,
+}) => {
+  const { config } = useSelector((state: RootState) => state.chatSettingStore);
+
+  return (
+    <ModalContainerFullScreen>
+      <ModalHeaderComponent
+        handleCloseModal={handleCloseModal}
+        headerTitle={'Document Shares'}
+      />
+      <CenterContainer>
+        <SharedSettingsColumnContainer>
+          <SharedSettingsSectionContainer>
+            <SharedSettingsStyledLabel>
+              Current Document Shares
+            </SharedSettingsStyledLabel>
+            <SharedSettingsLabelData>
+              Listed below are your currently active document sharing links. You
+              can share or delete them.
+            </SharedSettingsLabelData>
+            <BorderedContainer>
+              <View
+                style={{
+                  display: 'flex',
+                  padding: 8,
+                  width: '100%',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                }}
+              >
+                <View>List of shares</View>
+                <View style={{ display: 'flex', flexDirection: 'row' }}>
+                  <View>
+                    {/* <SearchInput
+                      animated
+                      icon={<SearchIcon />}
+                      direction="right"
+                    /> */}
+                  </View>
+                  <View>
+                    <DropdownMenu
+                      sortFunction={function (value: string): void {
+                        throw new Error('Function not implemented.');
+                      }}
+                      icon={''}
+                      values={['Name', 'Surname']}
+                    />
+                  </View>
+                  <Button
+                    variant="filled"
+                    StartIcon={<PlusIcon />}
+                    style={{ width: '100%' }}
+                  >
+                    Add New Share
+                  </Button>
+                </View>
+              </View>
+              <SharedSettingsInfoPanel bgColor={config?.colors?.secondary}>
+                <SharedSettingsInfoText>
+                  There are no shares yet, or you can add them by clicking the
+                  “Add New Share” button
+                </SharedSettingsInfoText>
+              </SharedSettingsInfoPanel>
+            </BorderedContainer>
+          </SharedSettingsSectionContainer>
+        </SharedSettingsColumnContainer>
+      </CenterContainer>
+    </ModalContainerFullScreen>
+  );
+};
+
+export default DocumentSharesModal;

package/src/components/Modals/SettingsModals/ManageDataModal/ManageDataModal.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import {
+  LabelData,
+  ModalContainerFullScreen,
+} from '../../styledModalComponents';
+import ModalHeaderComponent from '../../ModalHeaderComponent';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../../../roomStore';
+import styled from 'styled-components/native';
+import { InfoIcon } from '../../../../assets/icons';
+import { getExportMyData } from '../../../../networking/api-requests/user.api';
+import {
+  SharedSettingsCenterContainer,
+  SharedSettingsColumnContainer,
+  SharedSettingsInfoPanel,
+  SharedSettingsInfoText,
+  SharedSettingsLabelData,
+  SharedSettingsSectionContainer,
+  SharedSettingsStyledButton,
+  SharedSettingsStyledLabel,
+} from '../SharedStyledComponents';
+import { View } from 'react-native';
+
+interface ManageDataModalProps {
+  handleCloseModal: any;
+}
+
+const InfoPanel = styled.View`
+  background-color: "#F3F6FC";
+  display: flex;
+  gap: 8px;
+  border-radius: 8px;
+  padding: 8px;
+`;
+
+const ManageDataModal: React.FC<ManageDataModalProps> = ({
+  handleCloseModal,
+}) => {
+  const { config } = useSelector((state: RootState) => state.chatSettingStore);
+
+  const handleDownloadClick = async () => {
+    // const exportedData = await getExportMyData();
+    // const binaryData = exportedData.data;
+    // console.log(binaryData);
+    // const blob = new Blob([binaryData], { type: "text/plain" });
+    // const url = URL.createObjectURL(blob);
+    // const a = document.createElement("a");
+    // a.href = url;
+    // a.download = "mydata.json";
+    // document.body.appendChild(a);
+    // a.click();
+    // document.body.removeChild(a);
+    // URL.revokeObjectURL(url);
+  };
+
+  return (
+    <ModalContainerFullScreen>
+      <ModalHeaderComponent
+        handleCloseModal={handleCloseModal}
+        headerTitle={'Manage Data'}
+      />
+      <SharedSettingsCenterContainer>
+        <SharedSettingsColumnContainer>
+          <SharedSettingsSectionContainer>
+            <SharedSettingsStyledLabel>
+              Download your data
+            </SharedSettingsStyledLabel>
+            <LabelData
+              style={{
+                fontSize: 12,
+                textAlign: 'left',
+              }}
+            >
+              You own your data. Tap the button below to download a copy of your
+              data
+            </LabelData>
+          </SharedSettingsSectionContainer>
+          <SharedSettingsStyledButton
+            borderColor={config?.colors?.primary || '#0052CD'}
+            onPress={handleDownloadClick}
+            text="Download your data"
+            color={config?.colors?.primary || '#0052CD'}
+          />
+        </SharedSettingsColumnContainer>
+        <SharedSettingsColumnContainer>
+          <SharedSettingsSectionContainer>
+            <SharedSettingsStyledLabel>
+              Download your data
+            </SharedSettingsStyledLabel>
+            <SharedSettingsLabelData>
+              Use this only if you want to permanently delete your account &
+              data from our system.
+            </SharedSettingsLabelData>
+          </SharedSettingsSectionContainer>
+          <SharedSettingsInfoPanel
+            bgColor={config?.colors?.secondary || '#F3F6FC'}
+          >
+            <View>
+              <InfoIcon color={config?.colors?.primary || '#0052CD'} />
+            </View>
+            <SharedSettingsInfoText>
+              Due to the immutable nature of distributed ledger technology,
+              network nodes operated by the community may still retain
+              historical transactions generated by your account, however your
+              personally identifiable information such as your name, e-mail,
+              your key-value storage etc will be removed. Any of your digital
+              assets will be lost.
+            </SharedSettingsInfoText>
+          </SharedSettingsInfoPanel>
+          <SharedSettingsStyledButton
+            borderColor="#E53935"
+            text="Delete My Account"
+            color="#E53935"
+          />
+        </SharedSettingsColumnContainer>
+      </SharedSettingsCenterContainer>
+    </ModalContainerFullScreen>
+  );
+};
+
+export default ManageDataModal;

package/src/components/Modals/SettingsModals/ProfileShares/ProfileShares.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import {
+  EmptySection,
+  CenterContainer,
+  UserInfo,
+  UserName,
+  UserStatus,
+  ModalContainerFullScreen,
+  ActionButton,
+  Label,
+  BorderedContainer,
+  LabelData,
+} from '../../styledModalComponents';
+import { ChatIcon } from '../../../../assets/icons';
+import ModalHeaderComponent from '../../ModalHeaderComponent';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../../../roomStore';
+import { ProfileImagePlaceholder } from '../../../MainComponents/ProfileImagePlaceholder';
+import {
+  SharedSettingsInfoPanel,
+  SharedSettingsInfoText,
+  SharedSettingsLabelData,
+  SharedSettingsSectionContainer,
+  SharedSettingsStyledLabel,
+} from '../SharedStyledComponents';
+
+interface ProfileSharesModalProps {
+  handleCloseModal: any;
+}
+
+const ProfileSharesModal: React.FC<ProfileSharesModalProps> = ({
+  handleCloseModal,
+}) => {
+  const { config } = useSelector((state: RootState) => state.chatSettingStore);
+
+  return (
+    <ModalContainerFullScreen>
+      <ModalHeaderComponent
+        handleCloseModal={handleCloseModal}
+        headerTitle={'Profile Shares'}
+      />
+      <CenterContainer>
+        <SharedSettingsSectionContainer>
+          <SharedSettingsStyledLabel>
+            Current Profile Shares
+          </SharedSettingsStyledLabel>
+          <SharedSettingsLabelData>
+            Listed below are your currently active profile sharing links. You
+            can share or delete them.
+          </SharedSettingsLabelData>
+          <BorderedContainer>
+            <SharedSettingsInfoPanel bgColor={config?.colors?.secondary}>
+              <SharedSettingsInfoText>
+                There are no shares yet, or you can add them by clicking the
+                “Add New Share” button
+              </SharedSettingsInfoText>
+            </SharedSettingsInfoPanel>
+          </BorderedContainer>
+        </SharedSettingsSectionContainer>
+      </CenterContainer>
+    </ModalContainerFullScreen>
+  );
+};
+
+export default ProfileSharesModal;