diff --git a/packages/react-chat/src/components/Channels/Channel.tsx b/packages/react-chat/src/components/Channels/Channel.tsx
index f063c05..a20baaf 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 f896830..30ae81c 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 f6e1627..60f44b6 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 4072fa3..86790ce 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 cfcd26b..c7508d3 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 00e7a75..17535f0 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 fb9e28e..22aef94 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 7d11e75..234a525 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 4fbf5c3..0c704b3 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 a3cad4b..78c8b76 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 5e47732..3eb9e2a 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 ba46fe6..4c07874 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 afe8550..0000000
--- 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 03749b8..0000000
--- 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 0aa9aa1..3a86d25 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 36b9ddf..f576df0 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 0000000..02ce3b7
--- /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 0000000..a26fe4c
--- /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