Get user list from community (#86)

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";
 

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";
 

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";

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 {

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 { ChannelData } from "../../models/ChannelData";
-import { CommunityData } from "../../helpers/communityMock";
 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";

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";

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";
 

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({
     >
       <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>
   );
 }

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";
 

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({
       <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
+        {community.membersList.map((member) => (
-          .filter((member) => !member.isOnline)
-          .map((member) => (
           <Member
-              key={member.id}
+            key={member}
             member={member}
-              isOnline={member.isOnline}
+            isOnline={false}
             setShowChannels={setShowChannels}
             setShowMembers={setShowMembers}
           />

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";

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";

packages/react-chat/src/helpers/channelsMock.ts

@@ -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,
-  },
-];

packages/react-chat/src/helpers/communityMock.ts

@@ -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!",
-};

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;
 

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 };

packages/react-chat/src/models/ChannelData.ts

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

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;
+};