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

Get user list from community (#86)

This commit is contained in:
Szymon Szlachtowicz 2021-10-20 14:37:19 +02:00 committed by GitHub
parent ea10e1f335
commit 2b2a82828d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 48 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react-chat/src/components/Channels/Channel.tsx
View File

@ -2,7 +2,7 @@ import React, { useMemo } from "react";
import styled from "styled-components";
import { useNarrow } from "../../contexts/narrowProvider";
import { ChannelData } from "../../helpers/channelsMock";
import { ChannelData } from "../../models/ChannelData";
import { MutedIcon } from "../Icons/MutedIcon";
import { textMediumStyles } from "../Text";

2
packages/react-chat/src/components/Channels/Channels.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect } from "react";
import styled from "styled-components";
import { ChannelData } from "../../helpers/channelsMock";
import { ChannelData } from "../../models/ChannelData";
import { Channel } from "./Channel";

2
packages/react-chat/src/components/Channels/EmptyChannel.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import styled from "styled-components";
import { ChannelData } from "../../helpers/channelsMock";
import { ChannelData } from "../../models/ChannelData";
import { textMediumStyles } from "../Text";
import { ChannelInfo, ChannelLogo, ChannelName } from "./Channel";

8
packages/react-chat/src/components/Chat.tsx
View File

@ -2,11 +2,11 @@ import React, { useEffect, useMemo, useState } from "react";
import styled from "styled-components";
import { useNarrow } from "../contexts/narrowProvider";
import { ChannelData } from "../helpers/channelsMock";
import { uintToImgUrl } from "../helpers/uintToImgUrl";
import { useMessenger } from "../hooks/useMessenger";
import { ChannelData } from "../models/ChannelData";
import { Metadata } from "../models/Metadata";
import { Theme } from "../styles/themes";
import { uintToImgUrl } from "../utils/uintToImgUrl";
import { Channels } from "./Channels/Channels";
import { ChatBody } from "./Chat/ChatBody";
@ -46,6 +46,7 @@ export function Chat({ theme, communityKey, fetchMetadata }: ChatProps) {
const communityData = useMemo(() => {
if (community?.description) {
console.log(Object.keys(community.description.proto.members));
return {
id: 1,
name: community.description.identity?.displayName ?? "",
@ -54,7 +55,7 @@ export function Chat({ theme, communityKey, fetchMetadata }: ChatProps) {
new Uint8Array()
),
members: 0,
membersList: [],
membersList: Object.keys(community.description.proto.members),
description: community.description.identity?.description ?? "",
};
} else {
@ -70,7 +71,6 @@ export function Chat({ theme, communityKey, fetchMetadata }: ChatProps) {
}, [community]);
const channels = useMemo(() => {
console.log(community?.chats);
if (community?.chats) {
return Array.from(community.chats.values()).map((chat) => {
return {

4
packages/react-chat/src/components/Chat/ChatBody.tsx
View File

@ -2,9 +2,9 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
import styled from "styled-components";
import { useNarrow } from "../../contexts/narrowProvider";
import { ChannelData } from "../../helpers/channelsMock";
import { CommunityData } from "../../helpers/communityMock";
import { ChannelData } from "../../models/ChannelData";
import { ChatMessage } from "../../models/ChatMessage";
import { CommunityData } from "../../models/CommunityData";
import { Metadata } from "../../models/Metadata";
import { Theme } from "../../styles/themes";
import { Channel } from "../Channels/Channel";

2
packages/react-chat/src/components/Chat/ChatInput.tsx
View File

@ -3,8 +3,8 @@ import React, { useCallback, useMemo, useState } from "react";
import styled from "styled-components";
import { useLow } from "../../contexts/narrowProvider";
import { uintToImgUrl } from "../../helpers/uintToImgUrl";
import { lightTheme, Theme } from "../../styles/themes";
import { uintToImgUrl } from "../../utils/uintToImgUrl";
import { EmojiIcon } from "../Icons/EmojiIcon";
import { GifIcon } from "../Icons/GifIcon";
import { PictureIcon } from "../Icons/PictureIcon";

2
packages/react-chat/src/components/Community.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import { CommunityData } from "../helpers/communityMock";
import { CommunityData } from "../models/CommunityData";
import { CommunityIdentity } from "./CommunityIdentity";

8
packages/react-chat/src/components/Members/Member.tsx
View File

@ -6,7 +6,7 @@ import { Icon } from "../Chat/ChatMessages";
import { UserIcon } from "../Icons/UserIcon";
interface MemberProps {
member: any;
member: string;
isOnline: boolean;
setShowChannels: (val: boolean) => void;
setShowMembers?: (val: boolean) => void;
@ -33,13 +33,13 @@ export function Member({
>
<MemberIcon
style={{
backgroundImage: member.avatar ? `url(${member.avatar})` : "unset",
backgroundImage: "unset",
}}
className={isOnline ? "online" : "offline"}
>
{!member.avatar && <UserIcon memberView={true} />}
<UserIcon memberView={true} />
</MemberIcon>
<MemberName>{member.name}</MemberName>
<MemberName>{member}</MemberName>
</MemberData>
);
}

2
packages/react-chat/src/components/Members/Members.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import styled from "styled-components";
import { CommunityData } from "../../helpers/communityMock";
import { CommunityData } from "../../models/CommunityData";
import { MembersList } from "./MembersList";

16
packages/react-chat/src/components/Members/MembersList.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import styled from "styled-components";
import { CommunityData } from "../../helpers/communityMock";
import { CommunityData } from "../../models/CommunityData";
import { UserIcon } from "../Icons/UserIcon";
import { Member, MemberData, MemberIcon } from "./Member";
@ -31,12 +31,12 @@ export function MembersList({
<MemberCategory>
<MemberCategoryName>Online</MemberCategoryName>
{community.membersList
.filter((member) => member.isOnline)
.filter(() => false)
.map((member) => (
<Member
key={member.id}
key={member}
member={member}
isOnline={member.isOnline}
isOnline={false}
setShowChannels={setShowChannels}
setShowMembers={setShowMembers}
/>
@ -44,13 +44,11 @@ export function MembersList({
</MemberCategory>
<MemberCategory>
<MemberCategoryName>Offline</MemberCategoryName>
{community.membersList
.filter((member) => !member.isOnline)
.map((member) => (
{community.membersList.map((member) => (
<Member
key={member.id}
key={member}
member={member}
isOnline={member.isOnline}
isOnline={false}
setShowChannels={setShowChannels}
setShowMembers={setShowMembers}
/>

2
packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import styled from "styled-components";
import { ChannelData } from "../../helpers/channelsMock";
import { ChannelData } from "../../models/ChannelData";
import { Channels } from "../Channels/Channels";
import { NarrowTopbar } from "./NarrowTopbar";

2
packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import styled from "styled-components";
import { CommunityData } from "../../helpers/communityMock";
import { CommunityData } from "../../models/CommunityData";
import { MembersList } from "../Members/MembersList";
import { NarrowTopbar } from "./NarrowTopbar";

33
packages/react-chat/src/helpers/channelsMock.ts
View File

@ -1,33 +0,0 @@
export type ChannelData = {
id: string;
name: string;
description: string;
icon?: string;
isMuted?: boolean;
};
export const channels = [
{
id: 1,
name: "welcome",
description: "Welcome to CryptoKitties community!",
icon: "https://www.cryptokitties.co/icons/logo.svg",
},
{
id: 2,
name: "general",
description: "General discussions about CryptoKitties",
},
{
id: 3,
name: "beginners",
description: "How to start",
notifications: 1,
},
{
id: 4,
name: "random",
description: "Whatever you want to talk",
isMuted: true,
},
];

57
packages/react-chat/src/helpers/communityMock.ts
View File

@ -1,57 +0,0 @@
export type CommunityData = {
id: number;
name: string;
icon: string;
members: number;
membersList: any[];
description: string;
};
export const community = {
id: 1,
name: "CryptoKitties",
icon: "https://www.cryptokitties.co/icons/logo.svg",
members: 186,
membersList: [
{
id: 1,
name: "jason.eth",
avatar:
"https://images.unsplash.com/photo-1613329150701-f8cecb3900e0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=928&q=80",
isOnline: true,
},
{
id: 2,
name: "viola.stateofus.eth",
avatar:
"https://images.unsplash.com/photo-1603924885283-b6674696b114?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=774&q=80",
isOnline: false,
},
{
id: 3,
name: "GuestFest",
isOnline: true,
},
{
id: 4,
name: "Guest33334",
isOnline: true,
},
{
id: 5,
name: "Guest333",
isOnline: true,
},
{
id: 6,
name: "Guest33",
isOnline: false,
},
{
id: 7,
name: "Guest9283",
isOnline: true,
},
],
description: "A community of cat lovers, meow!",
};

2
packages/react-chat/src/hooks/useMessenger.ts
View File

@ -4,9 +4,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Community, Identity, Messenger } from "status-communities/dist/cjs";
import { ApplicationMetadataMessage } from "status-communities/dist/cjs";
import { uintToImgUrl } from "../helpers/uintToImgUrl";
import { ChatMessage } from "../models/ChatMessage";
import { loadIdentity, saveIdentity } from "../utils/identityStorage";
import { uintToImgUrl } from "../utils/uintToImgUrl";
const _MS_PER_DAY = 1000 * 60 * 60 * 24;

3
packages/react-chat/src/index.ts
View File

@ -1,5 +1,4 @@
import { ReactChat } from "./components/ReactChat";
import { community } from "./helpers/communityMock";
import { darkTheme, lightTheme } from "./styles/themes";
export { ReactChat, lightTheme, darkTheme, community };
export { ReactChat, lightTheme, darkTheme };

7
packages/react-chat/src/models/ChannelData.ts Normal file
View File

@ -0,0 +1,7 @@
export type ChannelData = {
id: string;
name: string;
description: string;
icon?: string;
isMuted?: boolean;
};

8
packages/react-chat/src/models/CommunityData.ts Normal file
View File

@ -0,0 +1,8 @@
export type CommunityData = {
id: number;
name: string;
icon: string;
members: number;
membersList: string[];
description: string;
};

0
packages/react-chat/src/helpers/uintToImgUrl.ts → packages/react-chat/src/utils/uintToImgUrl.ts
View File