status-im
/
status-web
mirror of https://github.com/status-im/status-web.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update @status-im/react exports (#235) 

* Move Community to modules folder

* Move Channel to modules folder

* Remove fetch metadata provider

* Update index file extension
This commit is contained in:
Pavel 2022-03-03 16:20:23 +01:00 committed by GitHub
parent 933b3d83db
commit 5d3926779f
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
17 changed files with 212 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/channel/index.tsx
View File

@ -1,12 +1,12 @@
import React, { StrictMode } from 'react'
import { render } from 'react-dom'
import { GroupChat, lightTheme } from '@status-im/react'
import { Channel, lightTheme } from '@status-im/react'
const App = () => {
return (
<div>
<GroupChat
<Channel
theme={lightTheme}
communityKey="<YOUR_COMMUNITY_KEY>"
config={{

4
examples/community/index.tsx
View File

@ -1,12 +1,12 @@
import React, { StrictMode } from 'react'
import { render } from 'react-dom'
import { CommunityChat, lightTheme } from '@status-im/react'
import { Community, lightTheme } from '@status-im/react'
const App = () => {
return (
<div>
<CommunityChat
<Community
theme={lightTheme}
communityKey="<YOUR_COMMUNITY_KEY>"
config={{

2
packages/status-react/package.json
View File

@ -11,7 +11,7 @@
"bugs": {
"url": "https://github.com/status-im/status-web/issues"
},
"source": "src/index.ts",
"source": "src/index.tsx",
"main": "dist/index.js",
"module": "dist/index.esm.js",
"types": "dist/types.d.ts",

34
packages/status-react/src/components/Chat/ChatMessageContent.tsx
View File

@ -3,7 +3,6 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'
import { decode } from 'html-entities'
import styled from 'styled-components'
import { useFetchMetadata } from '../../contexts/fetchMetadataProvider'
import { useUserPublicKey } from '../../contexts/identityProvider'
import { useMessengerContext } from '../../contexts/messengerProvider'
import { useClickOutside } from '../../hooks/useClickOutside'
@ -61,13 +60,12 @@ export function ChatMessageContent({
setLinkOpen,
setMentioned,
}: ChatMessageContentProps) {
const fetchMetadata = useFetchMetadata()
const { content, image } = useMemo(() => message, [message])
const [elements, setElements] = useState<(string | React.ReactElement)[]>([
content,
])
const [link, setLink] = useState<string | undefined>(undefined)
const [openGraph, setOpenGraph] = useState<Metadata | undefined>(undefined)
const [openGraph] = useState<Metadata | undefined>(undefined)
useEffect(() => {
let link
@ -95,21 +93,21 @@ export function ChatMessageContent({
setElements(newSplit)
}, [content, setLink, setMentioned, setElements, setLinkOpen])
useEffect(() => {
const updatePreview = async () => {
if (link && fetchMetadata) {
try {
const metadata = await fetchMetadata(link)
if (metadata) {
setOpenGraph(metadata)
}
} catch {
return
}
}
}
updatePreview()
}, [link, fetchMetadata])
// useEffect(() => {
// const updatePreview = async () => {
// if (link && fetchMetadata) {
// try {
// const metadata = await fetchMetadata(link)
// if (metadata) {
// setOpenGraph(metadata)
// }
// } catch {
// return
// }
// }
// }
// updatePreview()
// }, [link, fetchMetadata])
return (
<ContentWrapper>

4
packages/status-react/src/components/Chat/ChatTopbar.tsx
View File

@ -5,12 +5,12 @@ import styled from 'styled-components'
import { useMessengerContext } from '../../contexts/messengerProvider'
import { useNarrow } from '../../contexts/narrowProvider'
import { useClickOutside } from '../../hooks/useClickOutside'
import { CommunitySidebar } from '../../modules/community/CommunitySidebar'
import {
ActivityButton,
ActivityWrapper,
} from '../ActivityCenter/ActivityButton'
import { Channel } from '../Channels/Channel'
import { Community } from '../Community'
import { ChannelMenu } from '../Form/ChannelMenu'
import { ActivityIcon } from '../Icons/ActivityIcon'
import { MembersIcon } from '../Icons/MembersIcon'
@ -85,7 +85,7 @@ export function ChatTopbar({
<>
{narrow && (
<CommunityWrap className={narrow ? 'narrow' : ''}>
<Community />
<CommunitySidebar />
</CommunityWrap>
)}

67
packages/status-react/src/components/CommunityChat.tsx
View File

@ -1,67 +0,0 @@
import React, { useRef } from 'react'
import styled, { ThemeProvider } from 'styled-components'
import { ChatStateProvider } from '../contexts/chatStateProvider'
import { ConfigProvider } from '../contexts/configProvider'
import { FetchMetadataProvider } from '../contexts/fetchMetadataProvider'
import { IdentityProvider } from '../contexts/identityProvider'
import { MessengerProvider } from '../contexts/messengerProvider'
import { ModalProvider } from '../contexts/modalProvider'
import { NarrowProvider } from '../contexts/narrowProvider'
import { ScrollProvider } from '../contexts/scrollProvider'
import { ToastProvider } from '../contexts/toastProvider'
import { GlobalStyle } from '../styles/GlobalStyle'
import { CommunityChatRoom } from './CommunityChatRoom'
import type { ConfigType } from '..'
import type { Metadata } from '../models/Metadata'
import type { Theme } from '../styles/themes'
interface CommunityChatProps {
theme: Theme
communityKey: string
config: ConfigType
fetchMetadata?: (url: string) => Promise<Metadata | undefined>
}
export function CommunityChat({
theme,
config,
fetchMetadata,
communityKey,
}: CommunityChatProps) {
const ref = useRef<HTMLHeadingElement>(null)
return (
<ConfigProvider config={config}>
<ThemeProvider theme={theme}>
<NarrowProvider myRef={ref}>
<FetchMetadataProvider fetchMetadata={fetchMetadata}>
<ModalProvider>
<ToastProvider>
<Wrapper ref={ref}>
<GlobalStyle />
<IdentityProvider>
<MessengerProvider communityKey={communityKey}>
<ChatStateProvider>
<ScrollProvider>
<CommunityChatRoom />
<div id="modal-root" />
</ScrollProvider>
</ChatStateProvider>
</MessengerProvider>
</IdentityProvider>
</Wrapper>
</ToastProvider>
</ModalProvider>
</FetchMetadataProvider>
</NarrowProvider>
</ThemeProvider>
</ConfigProvider>
)
}
const Wrapper = styled.div`
height: 100%;
overflow: hidden;
`

27
packages/status-react/src/contexts/fetchMetadataProvider.tsx
View File

@ -1,27 +0,0 @@
import React, { createContext, useContext } from 'react'
type Metadata = Record<string, string>
const FetchMetadataContext = createContext<
((link: string) => Promise<Metadata>) | undefined
>(undefined)
export function useFetchMetadata() {
return useContext(FetchMetadataContext)
}
interface FetchMetadataProviderProps {
children: React.ReactNode
fetchMetadata?: (link: string) => Promise<Metadata>
}
export function FetchMetadataProvider({
children,
fetchMetadata,
}: FetchMetadataProviderProps) {
return (
<FetchMetadataContext.Provider value={fetchMetadata}>
{children}
</FetchMetadataContext.Provider>
)
}

58
packages/status-react/src/groupChatComponents/GroupChat.tsx
View File

@ -1,58 +0,0 @@
import React, { useRef } from 'react'
import styled, { ThemeProvider } from 'styled-components'
import { ChatStateProvider } from '../contexts/chatStateProvider'
import { ConfigProvider } from '../contexts/configProvider'
import { FetchMetadataProvider } from '../contexts/fetchMetadataProvider'
import { IdentityProvider } from '../contexts/identityProvider'
import { MessengerProvider } from '../contexts/messengerProvider'
import { ModalProvider } from '../contexts/modalProvider'
import { NarrowProvider } from '../contexts/narrowProvider'
import { ToastProvider } from '../contexts/toastProvider'
import { GlobalStyle } from '../styles/GlobalStyle'
import { GroupChatRoom } from './GroupChatRoom'
import type { ConfigType } from '..'
import type { Metadata } from '../models/Metadata'
import type { Theme } from '../styles/themes'
interface GroupChatProps {
theme: Theme
config: ConfigType
fetchMetadata?: (url: string) => Promise<Metadata | undefined>
}
export function GroupChat({ theme, config, fetchMetadata }: GroupChatProps) {
const ref = useRef<HTMLHeadingElement>(null)
return (
<ConfigProvider config={config}>
<ThemeProvider theme={theme}>
<NarrowProvider myRef={ref}>
<FetchMetadataProvider fetchMetadata={fetchMetadata}>
<ModalProvider>
<ToastProvider>
<Wrapper ref={ref}>
<GlobalStyle />
<IdentityProvider>
<MessengerProvider communityKey={undefined}>
<ChatStateProvider>
<GroupChatRoom />
<div id="modal-root" />
</ChatStateProvider>
</MessengerProvider>
</IdentityProvider>
</Wrapper>
</ToastProvider>
</ModalProvider>
</FetchMetadataProvider>
</NarrowProvider>
</ThemeProvider>
</ConfigProvider>
)
}
const Wrapper = styled.div`
height: 100%;
overflow: hidden;
`

4
packages/status-react/src/index.ts
View File

@ -1,4 +0,0 @@
export { CommunityChat } from './components/CommunityChat'
export type { ConfigType } from './contexts/configProvider'
export { GroupChat } from './groupChatComponents/GroupChat'
export { darkTheme, lightTheme } from './styles/themes'

4
packages/status-react/src/index.tsx Normal file
View File

@ -0,0 +1,4 @@
export type { ConfigType } from './contexts/configProvider'
export { type ChannelProps, Channel } from './modules/channel'
export { type CommunityProps, Community } from './modules/community'
export { darkTheme, lightTheme } from './styles/themes'

24
packages/status-react/src/groupChatComponents/GroupChat/GroupChatBody.tsx → packages/status-react/src/modules/channel/GroupChat/GroupChatBody.tsx
View File

@ -2,19 +2,19 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styled from 'styled-components'
import { ChatCreation } from '../../components/Chat/ChatCreation'
import { ChatInput } from '../../components/Chat/ChatInput'
import { ChatTopbar, ChatTopbarLoading } from '../../components/Chat/ChatTopbar'
import { TokenRequirement } from '../../components/Form/TokenRequirement'
import { MessagesList } from '../../components/Messages/MessagesList'
import { NarrowChannels } from '../../components/NarrowMode/NarrowChannels'
import { NarrowMembers } from '../../components/NarrowMode/NarrowMembers'
import { LoadingSkeleton } from '../../components/Skeleton/LoadingSkeleton'
import { useMessengerContext } from '../../contexts/messengerProvider'
import { useNarrow } from '../../contexts/narrowProvider'
import { ChatCreation } from '~/src/components/Chat/ChatCreation'
import { ChatInput } from '~/src/components/Chat/ChatInput'
import { ChatTopbar, ChatTopbarLoading } from '~/src/components/Chat/ChatTopbar'
import { TokenRequirement } from '~/src/components/Form/TokenRequirement'
import { MessagesList } from '~/src/components/Messages/MessagesList'
import { NarrowChannels } from '~/src/components/NarrowMode/NarrowChannels'
import { NarrowMembers } from '~/src/components/NarrowMode/NarrowMembers'
import { LoadingSkeleton } from '~/src/components/Skeleton/LoadingSkeleton'
import { useMessengerContext } from '~/src/contexts/messengerProvider'
import { useNarrow } from '~/src/contexts/narrowProvider'
import type { Reply } from '../../hooks/useReply'
import type { ChannelData } from '../../models/ChannelData'
import type { Reply } from '~/src/hooks/useReply'
import type { ChannelData } from '~/src/models/ChannelData'
export enum ChatBodyState {
Chat,

35
packages/status-react/src/groupChatComponents/GroupChatRoom.tsx → packages/status-react/src/modules/channel/GroupChatRoom.tsx
View File

@ -2,23 +2,24 @@ import React, { useState } from 'react'
import styled from 'styled-components'
import { Channels } from '../components/Channels/Channels'
import { ChatCreation } from '../components/Chat/ChatCreation'
import { AgreementModal } from '../components/Modals/AgreementModal'
import { CoinbaseModal } from '../components/Modals/CoinbaseModal'
import { EditModal } from '../components/Modals/EditModal'
import { LeavingModal } from '../components/Modals/LeavingModal'
import { LogoutModal } from '../components/Modals/LogoutModal'
import { ProfileFoundModal } from '../components/Modals/ProfileFoundModal'
import { ProfileModal } from '../components/Modals/ProfileModal'
import { StatusModal } from '../components/Modals/StatusModal'
import { UserCreationModal } from '../components/Modals/UserCreationModal'
import { UserCreationStartModal } from '../components/Modals/UserCreationStartModal'
import { WalletConnectModal } from '../components/Modals/WalletConnectModal'
import { WalletModal } from '../components/Modals/WalletModal'
import { ToastMessageList } from '../components/ToastMessages/ToastMessageList'
import { ChatState, useChatState } from '../contexts/chatStateProvider'
import { useNarrow } from '../contexts/narrowProvider'
import { Channels } from '~/src/components/Channels/Channels'
import { ChatCreation } from '~/src/components/Chat/ChatCreation'
import { AgreementModal } from '~/src/components/Modals/AgreementModal'
import { CoinbaseModal } from '~/src/components/Modals/CoinbaseModal'
import { EditModal } from '~/src/components/Modals/EditModal'
import { LeavingModal } from '~/src/components/Modals/LeavingModal'
import { LogoutModal } from '~/src/components/Modals/LogoutModal'
import { ProfileFoundModal } from '~/src/components/Modals/ProfileFoundModal'
import { ProfileModal } from '~/src/components/Modals/ProfileModal'
import { StatusModal } from '~/src/components/Modals/StatusModal'
import { UserCreationModal } from '~/src/components/Modals/UserCreationModal'
import { UserCreationStartModal } from '~/src/components/Modals/UserCreationStartModal'
import { WalletConnectModal } from '~/src/components/Modals/WalletConnectModal'
import { WalletModal } from '~/src/components/Modals/WalletModal'
import { ToastMessageList } from '~/src/components/ToastMessages/ToastMessageList'
import { ChatState, useChatState } from '~/src/contexts/chatStateProvider'
import { useNarrow } from '~/src/contexts/narrowProvider'
import { GroupChatBody } from './GroupChat/GroupChatBody'
import { GroupMembers } from './GroupMembers/GroupMembers'

4
packages/status-react/src/groupChatComponents/GroupMembers/GroupMembers.tsx → packages/status-react/src/modules/channel/GroupMembers/GroupMembers.tsx
View File

@ -2,8 +2,8 @@ import React, { useMemo, useState } from 'react'
import styled from 'styled-components'
import { MembersList } from '../../components/Members/MembersList'
import { useMessengerContext } from '../../contexts/messengerProvider'
import { MembersList } from '~/src/components/Members/MembersList'
import { useMessengerContext } from '~/src/contexts/messengerProvider'
export function GroupMembers() {
const { addContact, activeChannel } = useMessengerContext()

60
packages/status-react/src/modules/channel/index.tsx Normal file
View File

@ -0,0 +1,60 @@
import React, { useRef } from 'react'
import styled, { ThemeProvider } from 'styled-components'
import { ChatStateProvider } from '~/src/contexts/chatStateProvider'
import { ConfigProvider } from '~/src/contexts/configProvider'
import { IdentityProvider } from '~/src/contexts/identityProvider'
import { MessengerProvider } from '~/src/contexts/messengerProvider'
import { ModalProvider } from '~/src/contexts/modalProvider'
import { NarrowProvider } from '~/src/contexts/narrowProvider'
import { ToastProvider } from '~/src/contexts/toastProvider'
import { GlobalStyle } from '~/src/styles/GlobalStyle'
import { GroupChatRoom } from './GroupChatRoom'
import type { ConfigType } from '~/src/contexts/configProvider'
import type { Theme } from '~/src/styles/themes'
interface Props {
communityKey: string
theme: Theme
config: ConfigType
}
export const Channel = (props: Props) => {
const { communityKey, theme, config } = props
const ref = useRef<HTMLHeadingElement>(null)
return (
<ConfigProvider config={config}>
<ThemeProvider theme={theme}>
<NarrowProvider myRef={ref}>
<ModalProvider>
<ToastProvider>
<Wrapper ref={ref}>
<GlobalStyle />
<IdentityProvider>
<MessengerProvider communityKey={communityKey}>
<ChatStateProvider>
<GroupChatRoom />
<div id="modal-root" />
</ChatStateProvider>
</MessengerProvider>
</IdentityProvider>
</Wrapper>
</ToastProvider>
</ModalProvider>
</NarrowProvider>
</ThemeProvider>
</ConfigProvider>
)
}
export type { Props as ChannelProps }
const Wrapper = styled.div`
height: 100%;
overflow: hidden;
`

47
packages/status-react/src/components/CommunityChatRoom.tsx → packages/status-react/src/modules/community/CommunityChatRoom.tsx
View File

@ -2,28 +2,29 @@ import React, { useState } from 'react'
import styled from 'styled-components'
import { ChatState, useChatState } from '../contexts/chatStateProvider'
import { useMessengerContext } from '../contexts/messengerProvider'
import { useNarrow } from '../contexts/narrowProvider'
import { Channels } from './Channels/Channels'
import { ChatBody } from './Chat/ChatBody'
import { ChatCreation } from './Chat/ChatCreation'
import { Community } from './Community'
import { Members } from './Members/Members'
import { AgreementModal } from './Modals/AgreementModal'
import { CoinbaseModal } from './Modals/CoinbaseModal'
import { CommunityModal } from './Modals/CommunityModal'
import { EditModal } from './Modals/EditModal'
import { LeavingModal } from './Modals/LeavingModal'
import { LogoutModal } from './Modals/LogoutModal'
import { ProfileFoundModal } from './Modals/ProfileFoundModal'
import { ProfileModal } from './Modals/ProfileModal'
import { StatusModal } from './Modals/StatusModal'
import { UserCreationModal } from './Modals/UserCreationModal'
import { UserCreationStartModal } from './Modals/UserCreationStartModal'
import { WalletConnectModal } from './Modals/WalletConnectModal'
import { WalletModal } from './Modals/WalletModal'
import { ToastMessageList } from './ToastMessages/ToastMessageList'
import { Channels } from '~/src/components/Channels/Channels'
import { ChatBody } from '~/src/components/Chat/ChatBody'
import { ChatCreation } from '~/src/components/Chat/ChatCreation'
import { Members } from '~/src/components/Members/Members'
import { AgreementModal } from '~/src/components/Modals/AgreementModal'
import { CoinbaseModal } from '~/src/components/Modals/CoinbaseModal'
import { CommunityModal } from '~/src/components/Modals/CommunityModal'
import { EditModal } from '~/src/components/Modals/EditModal'
import { LeavingModal } from '~/src/components/Modals/LeavingModal'
import { LogoutModal } from '~/src/components/Modals/LogoutModal'
import { ProfileFoundModal } from '~/src/components/Modals/ProfileFoundModal'
import { ProfileModal } from '~/src/components/Modals/ProfileModal'
import { StatusModal } from '~/src/components/Modals/StatusModal'
import { UserCreationModal } from '~/src/components/Modals/UserCreationModal'
import { UserCreationStartModal } from '~/src/components/Modals/UserCreationStartModal'
import { WalletConnectModal } from '~/src/components/Modals/WalletConnectModal'
import { WalletModal } from '~/src/components/Modals/WalletModal'
import { ToastMessageList } from '~/src/components/ToastMessages/ToastMessageList'
import { ChatState, useChatState } from '~/src/contexts/chatStateProvider'
import { useMessengerContext } from '~/src/contexts/messengerProvider'
import { useNarrow } from '~/src/contexts/narrowProvider'
import { CommunitySidebar } from './CommunitySidebar'
function Modals() {
return (
@ -98,7 +99,7 @@ const ChannelsWrapper = styled.div`
flex-direction: column;
`
const StyledCommunity = styled(Community)`
const StyledCommunity = styled(CommunitySidebar)`
padding: 0 0 0 8px;
margin: 0 0 16px;
`

12
packages/status-react/src/components/Community.tsx → packages/status-react/src/modules/community/CommunitySidebar.tsx
View File

@ -2,17 +2,17 @@ import React from 'react'
import styled from 'styled-components'
import { useMessengerContext } from '../contexts/messengerProvider'
import { useModal } from '../contexts/modalProvider'
import { CommunityIdentity } from './CommunityIdentity'
import { CommunityModalName } from './Modals/CommunityModal'
import { CommunitySkeleton } from './Skeleton/CommunitySkeleton'
import { CommunityIdentity } from '../../components/CommunityIdentity'
import { CommunityModalName } from '../../components/Modals/CommunityModal'
import { CommunitySkeleton } from '../../components/Skeleton/CommunitySkeleton'
import { useMessengerContext } from '../../contexts/messengerProvider'
import { useModal } from '../../contexts/modalProvider'
interface CommunityProps {
className?: string
}
export function Community({ className }: CommunityProps) {
export function CommunitySidebar({ className }: CommunityProps) {
const { communityData } = useMessengerContext()
const { setModal } = useModal(CommunityModalName)

63
packages/status-react/src/modules/community/index.tsx Normal file
View File

@ -0,0 +1,63 @@
import React, { useRef } from 'react'
import styled, { ThemeProvider } from 'styled-components'
import { ChatStateProvider } from '~/src/contexts/chatStateProvider'
import { ConfigProvider } from '~/src/contexts/configProvider'
import { IdentityProvider } from '~/src/contexts/identityProvider'
import { MessengerProvider } from '~/src/contexts/messengerProvider'
import { ModalProvider } from '~/src/contexts/modalProvider'
import { NarrowProvider } from '~/src/contexts/narrowProvider'
import { ScrollProvider } from '~/src/contexts/scrollProvider'
import { ToastProvider } from '~/src/contexts/toastProvider'
import { GlobalStyle } from '~/src/styles/GlobalStyle'
import { CommunityChatRoom } from './CommunityChatRoom'
import type { ConfigType } from '~/src/contexts/configProvider'
import type { Theme } from '~/src/styles/themes'
interface Props {
theme: Theme
communityKey: string
config: ConfigType
}
export const Community = (props: Props) => {
const { theme, config, communityKey } = props
const ref = useRef<HTMLHeadingElement>(null)
return (
<ConfigProvider config={config}>
<ThemeProvider theme={theme}>
<NarrowProvider myRef={ref}>
<ModalProvider>
<ToastProvider>
<Wrapper ref={ref}>
<GlobalStyle />
<IdentityProvider>
<MessengerProvider communityKey={communityKey}>
<ChatStateProvider>
<ScrollProvider>
<CommunityChatRoom />
<div id="modal-root" />
</ScrollProvider>
</ChatStateProvider>
</MessengerProvider>
</IdentityProvider>
</Wrapper>
</ToastProvider>
</ModalProvider>
</NarrowProvider>
</ThemeProvider>
</ConfigProvider>
)
}
export type { Props as CommunityProps }
const Wrapper = styled.div`
height: 100%;
overflow: hidden;
`