From 2b2a82828dbed40b5bd7833ff58d5f2acb8d49fa Mon Sep 17 00:00:00 2001
From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com>
Date: Wed, 20 Oct 2021 14:37:19 +0200
Subject: [PATCH] Get user list from community (#86)
---
.../src/components/Channels/Channel.tsx | 2 +-
.../src/components/Channels/Channels.tsx | 2 +-
.../src/components/Channels/EmptyChannel.tsx | 2 +-
packages/react-chat/src/components/Chat.tsx | 8 +--
.../src/components/Chat/ChatBody.tsx | 4 +-
.../src/components/Chat/ChatInput.tsx | 2 +-
.../react-chat/src/components/Community.tsx | 2 +-
.../src/components/Members/Member.tsx | 8 +--
.../src/components/Members/Members.tsx | 2 +-
.../src/components/Members/MembersList.tsx | 28 +++++----
.../components/NarrowMode/NarrowChannels.tsx | 2 +-
.../components/NarrowMode/NarrowMembers.tsx | 2 +-
.../react-chat/src/helpers/channelsMock.ts | 33 -----------
.../react-chat/src/helpers/communityMock.ts | 57 -------------------
packages/react-chat/src/hooks/useMessenger.ts | 2 +-
packages/react-chat/src/index.ts | 3 +-
packages/react-chat/src/models/ChannelData.ts | 7 +++
.../react-chat/src/models/CommunityData.ts | 8 +++
.../src/{helpers => utils}/uintToImgUrl.ts | 0
19 files changed, 48 insertions(+), 126 deletions(-)
delete mode 100644 packages/react-chat/src/helpers/channelsMock.ts
delete mode 100644 packages/react-chat/src/helpers/communityMock.ts
create mode 100644 packages/react-chat/src/models/ChannelData.ts
create mode 100644 packages/react-chat/src/models/CommunityData.ts
rename packages/react-chat/src/{helpers => utils}/uintToImgUrl.ts (100%)
diff --git a/packages/react-chat/src/components/Channels/Channel.tsx b/packages/react-chat/src/components/Channels/Channel.tsx
index f063c05a..a20baaf5 100644
--- a/packages/react-chat/src/components/Channels/Channel.tsx
+++ b/packages/react-chat/src/components/Channels/Channel.tsx
@@ -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";
diff --git a/packages/react-chat/src/components/Channels/Channels.tsx b/packages/react-chat/src/components/Channels/Channels.tsx
index f8968302..30ae81ca 100644
--- a/packages/react-chat/src/components/Channels/Channels.tsx
+++ b/packages/react-chat/src/components/Channels/Channels.tsx
@@ -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";
diff --git a/packages/react-chat/src/components/Channels/EmptyChannel.tsx b/packages/react-chat/src/components/Channels/EmptyChannel.tsx
index f6e16275..60f44b64 100644
--- a/packages/react-chat/src/components/Channels/EmptyChannel.tsx
+++ b/packages/react-chat/src/components/Channels/EmptyChannel.tsx
@@ -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";
diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx
index 4072fa30..86790cee 100644
--- a/packages/react-chat/src/components/Chat.tsx
+++ b/packages/react-chat/src/components/Chat.tsx
@@ -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 {
diff --git a/packages/react-chat/src/components/Chat/ChatBody.tsx b/packages/react-chat/src/components/Chat/ChatBody.tsx
index cfcd26bc..c7508d3c 100644
--- a/packages/react-chat/src/components/Chat/ChatBody.tsx
+++ b/packages/react-chat/src/components/Chat/ChatBody.tsx
@@ -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";
diff --git a/packages/react-chat/src/components/Chat/ChatInput.tsx b/packages/react-chat/src/components/Chat/ChatInput.tsx
index 00e7a752..17535f01 100644
--- a/packages/react-chat/src/components/Chat/ChatInput.tsx
+++ b/packages/react-chat/src/components/Chat/ChatInput.tsx
@@ -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";
diff --git a/packages/react-chat/src/components/Community.tsx b/packages/react-chat/src/components/Community.tsx
index fb9e28ef..22aef94e 100644
--- a/packages/react-chat/src/components/Community.tsx
+++ b/packages/react-chat/src/components/Community.tsx
@@ -1,6 +1,6 @@
import React from "react";
-import { CommunityData } from "../helpers/communityMock";
+import { CommunityData } from "../models/CommunityData";
import { CommunityIdentity } from "./CommunityIdentity";
diff --git a/packages/react-chat/src/components/Members/Member.tsx b/packages/react-chat/src/components/Members/Member.tsx
index 7d11e75a..234a525c 100644
--- a/packages/react-chat/src/components/Members/Member.tsx
+++ b/packages/react-chat/src/components/Members/Member.tsx
@@ -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({
>
- {!member.avatar && }
+
- {member.name}
+ {member}
);
}
diff --git a/packages/react-chat/src/components/Members/Members.tsx b/packages/react-chat/src/components/Members/Members.tsx
index 4fbf5c3e..0c704b31 100644
--- a/packages/react-chat/src/components/Members/Members.tsx
+++ b/packages/react-chat/src/components/Members/Members.tsx
@@ -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";
diff --git a/packages/react-chat/src/components/Members/MembersList.tsx b/packages/react-chat/src/components/Members/MembersList.tsx
index a3cad4ba..78c8b762 100644
--- a/packages/react-chat/src/components/Members/MembersList.tsx
+++ b/packages/react-chat/src/components/Members/MembersList.tsx
@@ -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({
Online
{community.membersList
- .filter((member) => member.isOnline)
+ .filter(() => false)
.map((member) => (
@@ -44,17 +44,15 @@ export function MembersList({
Offline
- {community.membersList
- .filter((member) => !member.isOnline)
- .map((member) => (
-
- ))}
+ {community.membersList.map((member) => (
+
+ ))}
);
diff --git a/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx b/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx
index 5e47732c..3eb9e2af 100644
--- a/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx
+++ b/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx
@@ -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";
diff --git a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx b/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx
index ba46fe6e..4c078740 100644
--- a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx
+++ b/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx
@@ -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";
diff --git a/packages/react-chat/src/helpers/channelsMock.ts b/packages/react-chat/src/helpers/channelsMock.ts
deleted file mode 100644
index afe85504..00000000
--- a/packages/react-chat/src/helpers/channelsMock.ts
+++ /dev/null
@@ -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,
- },
-];
diff --git a/packages/react-chat/src/helpers/communityMock.ts b/packages/react-chat/src/helpers/communityMock.ts
deleted file mode 100644
index 03749b82..00000000
--- a/packages/react-chat/src/helpers/communityMock.ts
+++ /dev/null
@@ -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!",
-};
diff --git a/packages/react-chat/src/hooks/useMessenger.ts b/packages/react-chat/src/hooks/useMessenger.ts
index 0aa9aa18..3a86d259 100644
--- a/packages/react-chat/src/hooks/useMessenger.ts
+++ b/packages/react-chat/src/hooks/useMessenger.ts
@@ -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;
diff --git a/packages/react-chat/src/index.ts b/packages/react-chat/src/index.ts
index 36b9ddfe..f576df09 100644
--- a/packages/react-chat/src/index.ts
+++ b/packages/react-chat/src/index.ts
@@ -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 };
diff --git a/packages/react-chat/src/models/ChannelData.ts b/packages/react-chat/src/models/ChannelData.ts
new file mode 100644
index 00000000..02ce3b73
--- /dev/null
+++ b/packages/react-chat/src/models/ChannelData.ts
@@ -0,0 +1,7 @@
+export type ChannelData = {
+ id: string;
+ name: string;
+ description: string;
+ icon?: string;
+ isMuted?: boolean;
+};
diff --git a/packages/react-chat/src/models/CommunityData.ts b/packages/react-chat/src/models/CommunityData.ts
new file mode 100644
index 00000000..a26fe4cf
--- /dev/null
+++ b/packages/react-chat/src/models/CommunityData.ts
@@ -0,0 +1,8 @@
+export type CommunityData = {
+ id: number;
+ name: string;
+ icon: string;
+ members: number;
+ membersList: string[];
+ description: string;
+};
diff --git a/packages/react-chat/src/helpers/uintToImgUrl.ts b/packages/react-chat/src/utils/uintToImgUrl.ts
similarity index 100%
rename from packages/react-chat/src/helpers/uintToImgUrl.ts
rename to packages/react-chat/src/utils/uintToImgUrl.ts