Add identity provider (#117)
This commit is contained in:
parent
84624011f5
commit
23d3ee01ea
|
@ -1,5 +1,4 @@
|
||||||
import React, { useMemo, useState } from "react";
|
import React, { useMemo, useState } from "react";
|
||||||
import { Identity } from "status-communities/dist/cjs";
|
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
|
|
||||||
import { useMessengerContext } from "../contexts/messengerProvider";
|
import { useMessengerContext } from "../contexts/messengerProvider";
|
||||||
|
@ -15,11 +14,7 @@ import { CommunityModal } from "./Modals/CommunityModal";
|
||||||
import { EditModal } from "./Modals/EditModal";
|
import { EditModal } from "./Modals/EditModal";
|
||||||
import { CommunitySkeleton } from "./Skeleton/CommunitySkeleton";
|
import { CommunitySkeleton } from "./Skeleton/CommunitySkeleton";
|
||||||
|
|
||||||
interface ChatProps {
|
export function Chat() {
|
||||||
identity: Identity;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function Chat({ identity }: ChatProps) {
|
|
||||||
const [showMembers, setShowMembers] = useState(true);
|
const [showMembers, setShowMembers] = useState(true);
|
||||||
const [showChannels, setShowChannels] = useState(true);
|
const [showChannels, setShowChannels] = useState(true);
|
||||||
const [membersList, setMembersList] = useState([]);
|
const [membersList, setMembersList] = useState([]);
|
||||||
|
@ -72,7 +67,6 @@ export function Chat({ identity }: ChatProps) {
|
||||||
|
|
||||||
{!createChat && (
|
{!createChat && (
|
||||||
<ChatBody
|
<ChatBody
|
||||||
identity={identity}
|
|
||||||
onClick={() => setShowMembers(!showMembers)}
|
onClick={() => setShowMembers(!showMembers)}
|
||||||
showMembers={showMembers}
|
showMembers={showMembers}
|
||||||
community={communityData}
|
community={communityData}
|
||||||
|
@ -88,14 +82,12 @@ export function Chat({ identity }: ChatProps) {
|
||||||
)}
|
)}
|
||||||
{showMembers && !narrow && !createChat && (
|
{showMembers && !narrow && !createChat && (
|
||||||
<Members
|
<Members
|
||||||
identity={identity}
|
|
||||||
setShowChannels={setShowChannels}
|
setShowChannels={setShowChannels}
|
||||||
setMembersList={setMembersList}
|
setMembersList={setMembersList}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{createChat && communityData && (
|
{createChat && communityData && (
|
||||||
<ChatCreation
|
<ChatCreation
|
||||||
identity={identity}
|
|
||||||
community={communityData}
|
community={communityData}
|
||||||
setMembersList={setMembersList}
|
setMembersList={setMembersList}
|
||||||
setGroupList={setGroupList}
|
setGroupList={setGroupList}
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
import { Identity } from "status-communities/dist/cjs";
|
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
|
|
||||||
import { useMessengerContext } from "../../contexts/messengerProvider";
|
import { useMessengerContext } from "../../contexts/messengerProvider";
|
||||||
|
@ -21,7 +20,6 @@ import { ChatInput } from "./ChatInput";
|
||||||
import { ChatMessages } from "./ChatMessages";
|
import { ChatMessages } from "./ChatMessages";
|
||||||
|
|
||||||
interface ChatBodyProps {
|
interface ChatBodyProps {
|
||||||
identity: Identity;
|
|
||||||
community: CommunityData | undefined;
|
community: CommunityData | undefined;
|
||||||
onClick: () => void;
|
onClick: () => void;
|
||||||
showMembers: boolean;
|
showMembers: boolean;
|
||||||
|
@ -36,7 +34,6 @@ interface ChatBodyProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ChatBody({
|
export function ChatBody({
|
||||||
identity,
|
|
||||||
community,
|
community,
|
||||||
onClick,
|
onClick,
|
||||||
showMembers,
|
showMembers,
|
||||||
|
@ -78,7 +75,6 @@ export function ChatBody({
|
||||||
<ChatBodyWrapper className={className}>
|
<ChatBodyWrapper className={className}>
|
||||||
{editGroup && community ? (
|
{editGroup && community ? (
|
||||||
<ChatCreation
|
<ChatCreation
|
||||||
identity={identity}
|
|
||||||
community={community}
|
community={community}
|
||||||
setMembersList={setMembersList}
|
setMembersList={setMembersList}
|
||||||
setGroupList={setGroupList}
|
setGroupList={setGroupList}
|
||||||
|
@ -170,7 +166,6 @@ export function ChatBody({
|
||||||
)}
|
)}
|
||||||
{showMembersList && narrow && (
|
{showMembersList && narrow && (
|
||||||
<NarrowMembers
|
<NarrowMembers
|
||||||
identity={identity}
|
|
||||||
community={community}
|
community={community}
|
||||||
setShowChannels={setShowChannelsList}
|
setShowChannels={setShowChannelsList}
|
||||||
setShowMembersList={setShowMembersList}
|
setShowMembersList={setShowMembersList}
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { Identity } from "status-communities/dist/cjs";
|
|
||||||
import { bufToHex } from "status-communities/dist/cjs/utils";
|
import { bufToHex } from "status-communities/dist/cjs/utils";
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
|
|
||||||
|
import { useIdentity } from "../../contexts/identityProvider";
|
||||||
import { useMessengerContext } from "../../contexts/messengerProvider";
|
import { useMessengerContext } from "../../contexts/messengerProvider";
|
||||||
import { CommunityData } from "../../models/CommunityData";
|
import { CommunityData } from "../../models/CommunityData";
|
||||||
import { buttonStyles } from "../Buttons/buttonStyle";
|
import { buttonStyles } from "../Buttons/buttonStyle";
|
||||||
|
@ -11,7 +11,6 @@ import { Member } from "../Members/Member";
|
||||||
import { SearchBlock } from "../SearchBlock";
|
import { SearchBlock } from "../SearchBlock";
|
||||||
import { textMediumStyles } from "../Text";
|
import { textMediumStyles } from "../Text";
|
||||||
interface ChatCreationProps {
|
interface ChatCreationProps {
|
||||||
identity: Identity;
|
|
||||||
community: CommunityData;
|
community: CommunityData;
|
||||||
setMembersList: any;
|
setMembersList: any;
|
||||||
setGroupList: any;
|
setGroupList: any;
|
||||||
|
@ -20,13 +19,13 @@ interface ChatCreationProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ChatCreation({
|
export function ChatCreation({
|
||||||
identity,
|
|
||||||
community,
|
community,
|
||||||
setMembersList,
|
setMembersList,
|
||||||
setGroupList,
|
setGroupList,
|
||||||
setCreateChat,
|
setCreateChat,
|
||||||
editGroup,
|
editGroup,
|
||||||
}: ChatCreationProps) {
|
}: ChatCreationProps) {
|
||||||
|
const identity = useIdentity();
|
||||||
const [query, setQuery] = useState("");
|
const [query, setQuery] = useState("");
|
||||||
const [styledGroup, setStyledGroup] = useState<string[]>([]);
|
const [styledGroup, setStyledGroup] = useState<string[]>([]);
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { Identity } from "status-communities/dist/cjs";
|
import { Identity } from "status-communities/dist/cjs";
|
||||||
|
|
||||||
|
import { IdentityProvider } from "../contexts/identityProvider";
|
||||||
import { MessengerProvider } from "../contexts/messengerProvider";
|
import { MessengerProvider } from "../contexts/messengerProvider";
|
||||||
|
|
||||||
import { Chat } from "./Chat";
|
import { Chat } from "./Chat";
|
||||||
|
@ -15,9 +16,11 @@ export function ChatLoader({ communityKey }: ChatLoaderProps) {
|
||||||
|
|
||||||
if (identity) {
|
if (identity) {
|
||||||
return (
|
return (
|
||||||
|
<IdentityProvider identity={identity}>
|
||||||
<MessengerProvider identity={identity} communityKey={communityKey}>
|
<MessengerProvider identity={identity} communityKey={communityKey}>
|
||||||
<Chat identity={identity} />
|
<Chat />
|
||||||
</MessengerProvider>
|
</MessengerProvider>
|
||||||
|
</IdentityProvider>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
return <IdentityLoader setIdentity={setIdentity} />;
|
return <IdentityLoader setIdentity={setIdentity} />;
|
||||||
|
|
|
@ -1,25 +1,18 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { Identity } from "status-communities/dist/cjs";
|
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
|
|
||||||
import { MembersList } from "./MembersList";
|
import { MembersList } from "./MembersList";
|
||||||
|
|
||||||
interface MembersProps {
|
interface MembersProps {
|
||||||
identity: Identity;
|
|
||||||
setShowChannels: (val: boolean) => void;
|
setShowChannels: (val: boolean) => void;
|
||||||
setMembersList: any;
|
setMembersList: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Members({
|
export function Members({ setShowChannels, setMembersList }: MembersProps) {
|
||||||
identity,
|
|
||||||
setShowChannels,
|
|
||||||
setMembersList,
|
|
||||||
}: MembersProps) {
|
|
||||||
return (
|
return (
|
||||||
<MembersWrapper>
|
<MembersWrapper>
|
||||||
<MemberHeading>Members</MemberHeading>
|
<MemberHeading>Members</MemberHeading>
|
||||||
<MembersList
|
<MembersList
|
||||||
identity={identity}
|
|
||||||
setShowChannels={setShowChannels}
|
setShowChannels={setShowChannels}
|
||||||
setMembersList={setMembersList}
|
setMembersList={setMembersList}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -1,27 +1,27 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { Identity, utils } from "status-communities/dist/cjs";
|
import { utils } from "status-communities/dist/cjs";
|
||||||
import { bufToHex } from "status-communities/dist/cjs/utils";
|
import { bufToHex } from "status-communities/dist/cjs/utils";
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
|
|
||||||
|
import { useIdentity } from "../../contexts/identityProvider";
|
||||||
import { useMessengerContext } from "../../contexts/messengerProvider";
|
import { useMessengerContext } from "../../contexts/messengerProvider";
|
||||||
import { UserIcon } from "../Icons/UserIcon";
|
import { UserIcon } from "../Icons/UserIcon";
|
||||||
|
|
||||||
import { Member, MemberData, MemberIcon } from "./Member";
|
import { Member, MemberData, MemberIcon } from "./Member";
|
||||||
|
|
||||||
interface MembersListProps {
|
interface MembersListProps {
|
||||||
identity: Identity;
|
|
||||||
setShowChannels: (val: boolean) => void;
|
setShowChannels: (val: boolean) => void;
|
||||||
setShowMembers?: (val: boolean) => void;
|
setShowMembers?: (val: boolean) => void;
|
||||||
setMembersList: any;
|
setMembersList: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function MembersList({
|
export function MembersList({
|
||||||
identity,
|
|
||||||
setShowChannels,
|
setShowChannels,
|
||||||
setShowMembers,
|
setShowMembers,
|
||||||
setMembersList,
|
setMembersList,
|
||||||
}: MembersListProps) {
|
}: MembersListProps) {
|
||||||
const { contacts } = useMessengerContext();
|
const { contacts } = useMessengerContext();
|
||||||
|
const identity = useIdentity();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MembersListWrap>
|
<MembersListWrap>
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { Identity } from "status-communities/dist/cjs";
|
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
|
|
||||||
import { CommunityData } from "../../models/CommunityData";
|
import { CommunityData } from "../../models/CommunityData";
|
||||||
|
@ -8,7 +7,6 @@ import { MembersList } from "../Members/MembersList";
|
||||||
import { NarrowTopbar } from "./NarrowTopbar";
|
import { NarrowTopbar } from "./NarrowTopbar";
|
||||||
|
|
||||||
interface NarrowMembersProps {
|
interface NarrowMembersProps {
|
||||||
identity: Identity;
|
|
||||||
community: CommunityData;
|
community: CommunityData;
|
||||||
setShowChannels: (val: boolean) => void;
|
setShowChannels: (val: boolean) => void;
|
||||||
setShowMembersList: (val: boolean) => void;
|
setShowMembersList: (val: boolean) => void;
|
||||||
|
@ -16,7 +14,6 @@ interface NarrowMembersProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function NarrowMembers({
|
export function NarrowMembers({
|
||||||
identity,
|
|
||||||
community,
|
community,
|
||||||
setShowChannels,
|
setShowChannels,
|
||||||
setShowMembersList,
|
setShowMembersList,
|
||||||
|
@ -26,7 +23,6 @@ export function NarrowMembers({
|
||||||
<ListWrapper>
|
<ListWrapper>
|
||||||
<NarrowTopbar list="Community members" community={community.name} />
|
<NarrowTopbar list="Community members" community={community.name} />
|
||||||
<MembersList
|
<MembersList
|
||||||
identity={identity}
|
|
||||||
setShowChannels={setShowChannels}
|
setShowChannels={setShowChannels}
|
||||||
setShowMembers={setShowMembersList}
|
setShowMembers={setShowMembersList}
|
||||||
setMembersList={setMembersList}
|
setMembersList={setMembersList}
|
||||||
|
|
|
@ -0,0 +1,20 @@
|
||||||
|
import React, { createContext, useContext } from "react";
|
||||||
|
import { Identity } from "status-communities/dist/cjs";
|
||||||
|
|
||||||
|
const IdentityContext = createContext(new Identity(new Uint8Array()));
|
||||||
|
|
||||||
|
export function useIdentity() {
|
||||||
|
return useContext(IdentityContext);
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IdentityProviderProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
identity: Identity;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function IdentityProvider({
|
||||||
|
children,
|
||||||
|
identity,
|
||||||
|
}: IdentityProviderProps) {
|
||||||
|
return <IdentityContext.Provider value={identity} children={children} />;
|
||||||
|
}
|
Loading…
Reference in New Issue