remove unused route
This commit is contained in:
Pavel Prichodko
Felicio Mununga
parent
bdd51485cb
commit
65d9c33bb8
|
|
@ -1,431 +0,0 @@
|
||||||
import React, { useCallback, useMemo, useState } from 'react'
|
|
||||||
|
|
||||||
import { BellIcon } from '~/src/icons/bell-icon'
|
|
||||||
// import styled from 'styled-components'
|
|
||||||
import { styled } from '~/src/styles/config'
|
|
||||||
import { Box, Button, IconButton, TextInput } from '~/src/system'
|
|
||||||
|
|
||||||
import { ActivityButton } from '../../components/ActivityCenter/ActivityButton'
|
|
||||||
import { BackButton } from '../../components/Buttons/BackButton'
|
|
||||||
import { buttonStyles } from '../../components/Buttons/buttonStyle'
|
|
||||||
import { ChatInput } from '../../components/Chat-legacy/ChatInput'
|
|
||||||
import { CrossIcon } from '../../components/Icons/CrossIcon'
|
|
||||||
import { Member } from '../../components/Members/Member'
|
|
||||||
import { SearchBlock } from '../../components/SearchBlock'
|
|
||||||
import { textMediumStyles } from '../../components/Text'
|
|
||||||
// import { ChatState, useChatState } from '../../contexts/chatStateProvider'
|
|
||||||
// import { useUserPublicKey } from '../../contexts/identityProvider'
|
|
||||||
// import { useMessengerContext } from '../../contexts/messengerProvider'
|
|
||||||
// import { useNarrow } from '../../contexts/narrowProvider'
|
|
||||||
|
|
||||||
// import type { ChannelData } from '../../models/ChannelData'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
setEditGroup?: (val: boolean) => void
|
|
||||||
activeChannel?: ChannelData
|
|
||||||
}
|
|
||||||
|
|
||||||
export const NewChat = (props: Props) => {
|
|
||||||
const { setEditGroup, activeChannel } = props
|
|
||||||
|
|
||||||
const narrow = useNarrow()
|
|
||||||
const userPK = useUserPublicKey()
|
|
||||||
const [query, setQuery] = useState('')
|
|
||||||
const [groupChatMembersIds, setGroupChatMembersIds] = useState<string[]>(
|
|
||||||
activeChannel?.members?.map(member => member.id) ?? []
|
|
||||||
)
|
|
||||||
const { contacts, createGroupChat, addMembers } = useMessengerContext()
|
|
||||||
|
|
||||||
const groupChatMembers = useMemo(
|
|
||||||
() => groupChatMembersIds.map(id => contacts[id]).filter(e => !!e),
|
|
||||||
[groupChatMembersIds, contacts]
|
|
||||||
)
|
|
||||||
|
|
||||||
const contactsList = useMemo(() => {
|
|
||||||
return Object.values(contacts)
|
|
||||||
.filter(
|
|
||||||
member =>
|
|
||||||
member.id.includes(query) ||
|
|
||||||
member?.customName?.includes(query) ||
|
|
||||||
member.trueName.includes(query)
|
|
||||||
)
|
|
||||||
.filter(member => !groupChatMembersIds.includes(member.id))
|
|
||||||
}, [query, groupChatMembersIds, contacts])
|
|
||||||
|
|
||||||
const setChatState = useChatState()[1]
|
|
||||||
|
|
||||||
const addMember = useCallback(
|
|
||||||
(member: string) => {
|
|
||||||
setGroupChatMembersIds((prevMembers: string[]) => {
|
|
||||||
if (
|
|
||||||
prevMembers.find(mem => mem === member) ||
|
|
||||||
prevMembers.length >= 5
|
|
||||||
) {
|
|
||||||
return prevMembers
|
|
||||||
} else {
|
|
||||||
return [...prevMembers, member]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
setQuery('')
|
|
||||||
},
|
|
||||||
[setGroupChatMembersIds]
|
|
||||||
)
|
|
||||||
const removeMember = useCallback(
|
|
||||||
(member: string) => {
|
|
||||||
setGroupChatMembersIds(prev => prev.filter(e => e != member))
|
|
||||||
},
|
|
||||||
[setGroupChatMembersIds]
|
|
||||||
)
|
|
||||||
|
|
||||||
const createChat = useCallback(
|
|
||||||
(group: string[]) => {
|
|
||||||
if (userPK) {
|
|
||||||
const newGroup = group.slice()
|
|
||||||
newGroup.push(userPK)
|
|
||||||
createGroupChat(newGroup)
|
|
||||||
setChatState(ChatState.ChatBody)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[userPK, createGroupChat, setChatState]
|
|
||||||
)
|
|
||||||
|
|
||||||
const handleCreationClick = useCallback(() => {
|
|
||||||
if (!activeChannel) {
|
|
||||||
createChat(groupChatMembers.map(member => member.id))
|
|
||||||
} else {
|
|
||||||
addMembers(
|
|
||||||
groupChatMembers.map(member => member.id),
|
|
||||||
activeChannel.id
|
|
||||||
)
|
|
||||||
}
|
|
||||||
setEditGroup?.(false)
|
|
||||||
}, [activeChannel, groupChatMembers, createChat, addMembers, setEditGroup])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Wrapper>
|
|
||||||
<NavbarWrapper>
|
|
||||||
<Box css={{ flex: 1 }}>
|
|
||||||
<TextInput />
|
|
||||||
</Box>
|
|
||||||
<Button
|
|
||||||
// disabled={groupChatMembers.length === 0}
|
|
||||||
onClick={handleCreationClick}
|
|
||||||
>
|
|
||||||
Confirm
|
|
||||||
</Button>
|
|
||||||
<IconButton label="Show Activity Center">
|
|
||||||
<BellIcon />
|
|
||||||
</IconButton>
|
|
||||||
</NavbarWrapper>
|
|
||||||
</Wrapper>
|
|
||||||
)
|
|
||||||
|
|
||||||
// return (
|
|
||||||
// <Wrapper className={`${narrow && 'narrow'}`}>
|
|
||||||
// <CreationBar
|
|
||||||
// className={`${groupChatMembers.length === 5 && narrow && 'limit'}`}
|
|
||||||
// >
|
|
||||||
// {narrow && (
|
|
||||||
// <BackButton
|
|
||||||
// onBtnClick={() =>
|
|
||||||
// setEditGroup
|
|
||||||
// ? setEditGroup?.(false)
|
|
||||||
// : setChatState(ChatState.ChatBody)
|
|
||||||
// }
|
|
||||||
// className="narrow"
|
|
||||||
// />
|
|
||||||
// )}
|
|
||||||
// <Column>
|
|
||||||
// <InputBar>
|
|
||||||
// <InputText>To:</InputText>
|
|
||||||
// <StyledList>
|
|
||||||
// {groupChatMembers.map(member => (
|
|
||||||
// <StyledMember key={member.id}>
|
|
||||||
// <StyledName>
|
|
||||||
// {member?.customName?.slice(0, 10) ??
|
|
||||||
// member.trueName.slice(0, 10)}
|
|
||||||
// </StyledName>
|
|
||||||
// <CloseButton onClick={() => removeMember(member.id)}>
|
|
||||||
// <CrossIcon memberView={true} />
|
|
||||||
// </CloseButton>
|
|
||||||
// </StyledMember>
|
|
||||||
// ))}
|
|
||||||
// </StyledList>
|
|
||||||
// {groupChatMembers.length < 5 && (
|
|
||||||
// <SearchMembers>
|
|
||||||
// <Input
|
|
||||||
// value={query}
|
|
||||||
// onInput={e => setQuery(e.currentTarget.value)}
|
|
||||||
// />
|
|
||||||
// </SearchMembers>
|
|
||||||
// )}
|
|
||||||
// {!narrow && groupChatMembers.length === 5 && (
|
|
||||||
// <LimitAlert>5 user Limit reached</LimitAlert>
|
|
||||||
// )}
|
|
||||||
// </InputBar>
|
|
||||||
// {narrow && groupChatMembers.length === 5 && (
|
|
||||||
// <LimitAlert className="narrow">5 user Limit reached</LimitAlert>
|
|
||||||
// )}
|
|
||||||
// </Column>
|
|
||||||
// <Button
|
|
||||||
// disabled={groupChatMembers.length === 0}
|
|
||||||
// onClick={handleCreationClick}
|
|
||||||
// >
|
|
||||||
// Confirm
|
|
||||||
// </Button>
|
|
||||||
|
|
||||||
// <IconButton label="Show Activity Center">
|
|
||||||
// <BellIcon />
|
|
||||||
// </IconButton>
|
|
||||||
|
|
||||||
// {!narrow && <ActivityButton className="creation" />}
|
|
||||||
// {!narrow && (
|
|
||||||
// <SearchBlock
|
|
||||||
// query={query}
|
|
||||||
// discludeList={groupChatMembersIds}
|
|
||||||
// onClick={addMember}
|
|
||||||
// />
|
|
||||||
// )}
|
|
||||||
// </CreationBar>
|
|
||||||
// {((!setEditGroup && groupChatMembers.length === 0) || narrow) &&
|
|
||||||
// Object.keys(contacts).length > 0 && (
|
|
||||||
// <Contacts>
|
|
||||||
// <ContactsHeading>Contacts</ContactsHeading>
|
|
||||||
// <ContactsList>
|
|
||||||
// {userPK && narrow
|
|
||||||
// ? contactsList.map(contact => (
|
|
||||||
// <Contact key={contact.id}>
|
|
||||||
// <Member
|
|
||||||
// contact={contact}
|
|
||||||
// isOnline={contact.online}
|
|
||||||
// onClick={() => addMember(contact.id)}
|
|
||||||
// />
|
|
||||||
// </Contact>
|
|
||||||
// ))
|
|
||||||
// : Object.values(contacts)
|
|
||||||
// .filter(
|
|
||||||
// e => e.id != userPK && !groupChatMembersIds.includes(e.id)
|
|
||||||
// )
|
|
||||||
// .map(contact => (
|
|
||||||
// <Contact key={contact.id}>
|
|
||||||
// <Member
|
|
||||||
// contact={contact}
|
|
||||||
// isOnline={contact.online}
|
|
||||||
// onClick={() => addMember(contact.id)}
|
|
||||||
// />
|
|
||||||
// </Contact>
|
|
||||||
// ))}
|
|
||||||
// </ContactsList>
|
|
||||||
// </Contacts>
|
|
||||||
// )}
|
|
||||||
// {!setEditGroup && Object.keys(contacts).length === 0 && (
|
|
||||||
// <EmptyContacts>
|
|
||||||
// <EmptyContactsHeading>
|
|
||||||
// You only can send direct messages to your Contacts.{' '}
|
|
||||||
// </EmptyContactsHeading>
|
|
||||||
// <EmptyContactsHeading>
|
|
||||||
// {' '}
|
|
||||||
// Send a contact request to the person you would like to chat with,
|
|
||||||
// you will be able to chat with them once they have accepted your
|
|
||||||
// contact request.
|
|
||||||
// </EmptyContactsHeading>
|
|
||||||
// </EmptyContacts>
|
|
||||||
// )}
|
|
||||||
|
|
||||||
// {!activeChannel && (
|
|
||||||
// <ChatInput
|
|
||||||
// createChat={createChat}
|
|
||||||
// group={groupChatMembers.map(member => member.id)}
|
|
||||||
// />
|
|
||||||
// )}
|
|
||||||
// </Wrapper>
|
|
||||||
// )
|
|
||||||
}
|
|
||||||
|
|
||||||
const Wrapper = styled('div', {
|
|
||||||
flex: 1,
|
|
||||||
position: 'relative',
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'stretch',
|
|
||||||
})
|
|
||||||
|
|
||||||
const NavbarWrapper = styled('div', {
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
// justifyContent: 'space-between',
|
|
||||||
gap: '$4',
|
|
||||||
padding: '10px 16px',
|
|
||||||
})
|
|
||||||
|
|
||||||
// const Wrapper = styled.div`
|
|
||||||
// height: 100%;
|
|
||||||
// display: flex;
|
|
||||||
// flex-direction: column;
|
|
||||||
// justify-content: space-between;
|
|
||||||
// flex: 1;
|
|
||||||
// background-color: ${({ theme }) => theme.bodyBackgroundColor};
|
|
||||||
// padding: 8px 16px;
|
|
||||||
|
|
||||||
// &.narrow {
|
|
||||||
// width: 100%;
|
|
||||||
// max-width: 100%;
|
|
||||||
// }
|
|
||||||
// `
|
|
||||||
|
|
||||||
// const CreationBar = styled.div`
|
|
||||||
// display: flex;
|
|
||||||
// align-items: center;
|
|
||||||
// margin-bottom: 24px;
|
|
||||||
// position: relative;
|
|
||||||
|
|
||||||
// &.limit {
|
|
||||||
// align-items: flex-start;
|
|
||||||
// }
|
|
||||||
// `
|
|
||||||
|
|
||||||
// const Column = styled.div`
|
|
||||||
// display: flex;
|
|
||||||
// flex-direction: column;
|
|
||||||
// align-items: center;
|
|
||||||
// flex: 1;
|
|
||||||
// margin-right: 16px;
|
|
||||||
// overflow-x: hidden;
|
|
||||||
// `
|
|
||||||
|
|
||||||
// const InputBar = styled.div`
|
|
||||||
// display: flex;
|
|
||||||
// align-items: center;
|
|
||||||
// width: 100%;
|
|
||||||
// height: 44px;
|
|
||||||
// background-color: ${({ theme }) => theme.inputColor};
|
|
||||||
// border: 1px solid ${({ theme }) => theme.inputColor};
|
|
||||||
// border-radius: 8px;
|
|
||||||
// padding: 6px 16px;
|
|
||||||
|
|
||||||
// ${textMediumStyles}
|
|
||||||
// `
|
|
||||||
|
|
||||||
// const Input = styled.input`
|
|
||||||
// width: 100%;
|
|
||||||
// min-width: 20px;
|
|
||||||
// background-color: ${({ theme }) => theme.inputColor};
|
|
||||||
// border: 1px solid ${({ theme }) => theme.inputColor};
|
|
||||||
// outline: none;
|
|
||||||
// resize: none;
|
|
||||||
|
|
||||||
// ${textMediumStyles}
|
|
||||||
|
|
||||||
// &:focus {
|
|
||||||
// outline: none;
|
|
||||||
// caret-color: ${({ theme }) => theme.notificationColor};
|
|
||||||
// }
|
|
||||||
// `
|
|
||||||
|
|
||||||
// const InputText = styled.div`
|
|
||||||
// color: ${({ theme }) => theme.secondary};
|
|
||||||
// margin-right: 8px;
|
|
||||||
// `
|
|
||||||
|
|
||||||
// const CreationBtn = styled.button`
|
|
||||||
// padding: 11px 24px;
|
|
||||||
// ${buttonStyles}
|
|
||||||
|
|
||||||
// &:disabled {
|
|
||||||
// background: ${({ theme }) => theme.inputColor};
|
|
||||||
// color: ${({ theme }) => theme.secondary};
|
|
||||||
// }
|
|
||||||
// `
|
|
||||||
|
|
||||||
// const StyledList = styled.div`
|
|
||||||
// display: flex;
|
|
||||||
// overflow-x: scroll;
|
|
||||||
// margin-right: 8px;
|
|
||||||
|
|
||||||
// &::-webkit-scrollbar {
|
|
||||||
// display: none;
|
|
||||||
// }
|
|
||||||
// `
|
|
||||||
|
|
||||||
// const StyledMember = styled.div`
|
|
||||||
// display: flex;
|
|
||||||
// align-items: center;
|
|
||||||
// padding: 4px 4px 4px 8px;
|
|
||||||
// background: ${({ theme }) => theme.tertiary};
|
|
||||||
// color: ${({ theme }) => theme.bodyBackgroundColor};
|
|
||||||
// border-radius: 8px;
|
|
||||||
|
|
||||||
// & + & {
|
|
||||||
// margin-left: 8px;
|
|
||||||
// }
|
|
||||||
// `
|
|
||||||
|
|
||||||
// const StyledName = styled.p`
|
|
||||||
// color: ${({ theme }) => theme.bodyBackgroundColor};
|
|
||||||
|
|
||||||
// ${textMediumStyles}
|
|
||||||
// `
|
|
||||||
|
|
||||||
// const CloseButton = styled.button`
|
|
||||||
// width: 20px;
|
|
||||||
// height: 20px;
|
|
||||||
// `
|
|
||||||
|
|
||||||
// const Contacts = styled.div`
|
|
||||||
// height: calc(100% - 44px);
|
|
||||||
// display: flex;
|
|
||||||
// flex-direction: column;
|
|
||||||
// flex: 1;
|
|
||||||
// overflow: auto;
|
|
||||||
// `
|
|
||||||
|
|
||||||
// const Contact = styled.div`
|
|
||||||
// display: flex;
|
|
||||||
// align-items: center;
|
|
||||||
// padding: 12px 12px 0 16px;
|
|
||||||
// border-radius: 8px;
|
|
||||||
|
|
||||||
// &:hover {
|
|
||||||
// background: ${({ theme }) => theme.inputColor};
|
|
||||||
// }
|
|
||||||
// `
|
|
||||||
|
|
||||||
// const ContactsHeading = styled.p`
|
|
||||||
// color: ${({ theme }) => theme.secondary};
|
|
||||||
|
|
||||||
// ${textMediumStyles}
|
|
||||||
// `
|
|
||||||
|
|
||||||
// const ContactsList = styled.div`
|
|
||||||
// display: flex;
|
|
||||||
// flex-direction: column;
|
|
||||||
// `
|
|
||||||
|
|
||||||
// const EmptyContacts = styled(Contacts)`
|
|
||||||
// justify-content: center;
|
|
||||||
// align-items: center;
|
|
||||||
// `
|
|
||||||
|
|
||||||
// const EmptyContactsHeading = styled(ContactsHeading)`
|
|
||||||
// max-width: 550px;
|
|
||||||
// margin-bottom: 24px;
|
|
||||||
// text-align: center;
|
|
||||||
// `
|
|
||||||
|
|
||||||
// const SearchMembers = styled.div`
|
|
||||||
// position: relative;
|
|
||||||
// flex: 1;
|
|
||||||
// `
|
|
||||||
|
|
||||||
// const LimitAlert = styled.p`
|
|
||||||
// text-transform: uppercase;
|
|
||||||
// margin-left: auto;
|
|
||||||
// color: ${({ theme }) => theme.redColor};
|
|
||||||
// white-space: nowrap;
|
|
||||||
|
|
||||||
// &.narrow {
|
|
||||||
// margin: 8px 0 0;
|
|
||||||
// }
|
|
||||||
// `
|
|
||||||
Loading…
Reference in New Issue