integrate network graph

src/components/pages/memberInteraction/ForceGraphComponent.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Box, Paper, Popover, Typography } from '@mui/material';
+import { Avatar, Box, Popover, Typography } from '@mui/material';
 import clsx from 'clsx';
 import React, { useRef, useState } from 'react';
 import ForceGraph2D, {
@@ -24,7 +24,12 @@ interface CustomNode {
   id?: string;
 }
 
-const ForceGraphComponent = ({ nodes, links, numberOfnodes }: any) => {
+const ForceGraphComponent = ({
+  nodes,
+  links,
+  numberOfnodes,
+  platformType,
+}: any) => {
   const [popOverOpen, setpopOverOpen] = useState<boolean>(false);
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [user, setUser] = useState<IUserProfile>();
@@ -199,7 +204,11 @@ const ForceGraphComponent = ({ nodes, links, numberOfnodes }: any) => {
         <div className='flex flex-col items-start space-y-3 px-3 py-3'>
           <div className='flex flex-row items-center space-x-3'>
             <Avatar
-              src={`${conf.DISCORD_CDN}avatars/${user?.discordId}/${user?.avatar}.png`}
+              src={
+                platformType === 'discourse'
+                  ? user?.avatar
+                  : `${conf.DISCORD_CDN}avatars/${user?.discordId}/${user?.avatar}.png`
+              }
               alt='User Avatar'
             />{' '}
             <div className='flex flex-col items-baseline'>

src/pages/membersInteraction.tsx

@@ -10,7 +10,6 @@ import HintBox from '../components/pages/memberInteraction/HintBox';
 import { useToken } from '../context/TokenContext';
 import { defaultLayout } from '../layouts/defaultLayout';
 import useAppStore from '../store/useStore';
-import { IUser } from '../utils/types';
 import { withRoles } from '../utils/withRoles';
 
 const ForceGraphComponent = dynamic(
@@ -50,7 +49,7 @@ const transformApiResponseToMockData = (apiResponse: any[]) => {
       ngu: from.ngu,
       roles: from.roles,
       radius: from.radius,
-      discordId: from.discordId,
+      discordId: from.id,
       avatar: from.avatar,
     };
     const targetNode = {
@@ -67,7 +66,7 @@ const transformApiResponseToMockData = (apiResponse: any[]) => {
       ngu: to.ngu,
       roles: to.roles,
       radius: to.radius,
-      discordId: to.discordId,
+      discordId: to.id,
       avatar: to.avatar,
     };
     const link = { source: from.id, target: to.id, width };
@@ -89,36 +88,36 @@ const transformApiResponseToMockData = (apiResponse: any[]) => {
 };
 
 function MembersInteraction() {
-  const { community } = useToken();
+  const { community, selectedPlatform } = useToken();
 
   const [nodes, setNodes] = useState<any[]>([]);
   const [links, setLinks] = useState<any[]>([]);
 
   const [nodeSizes, setNodeSizes] = useState<number[]>([]);
 
-  const [user, setUser] = useState<IUser | undefined>();
   const [popoverAnchorEl, setPopoverAnchorEl] = useState<null | HTMLElement>(
     null
   );
 
   const { getMemberInteraction, isLoading } = useAppStore();
 
   useEffect(() => {
-    const platformId = community?.platforms.find(
-      (platform) =>
-        platform.disconnectedAt === null && platform.name === 'discord'
-    )?.id;
-
-    if (platformId) {
-      getMemberInteraction(platformId).then((apiResponse: any[]) => {
-        const { nodes, links } = transformApiResponseToMockData(apiResponse);
-        const nodeSizes = nodes.map((node) => node.size);
-        setNodes(nodes);
-        setLinks(links);
-        setNodeSizes(nodeSizes);
-      });
+    const platform = community?.platforms.find(
+      (platform) => platform.id === selectedPlatform
+    );
+
+    if (platform) {
+      getMemberInteraction(selectedPlatform, platform.name).then(
+        (apiResponse: any[]) => {
+          const { nodes, links } = transformApiResponseToMockData(apiResponse);
+          const nodeSizes = nodes.map((node) => node.size);
+          setNodes(nodes);
+          setLinks(links);
+          setNodeSizes(nodeSizes);
+        }
+      );
     }
-  }, []);
+  }, [selectedPlatform]);
 
   const handlePopoverOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
     setPopoverAnchorEl(event.currentTarget);
@@ -156,12 +155,17 @@ function MembersInteraction() {
           </h3>
           <p>Data from the last 7 days</p>
           <div className='flex flex-col md:flex-row md:items-start md:space-x-5'>
-            <div className='items-center justify-center overflow-hidden lg:w-11/12 bg-gray-hover border border-gray-150 rounded-lg shadow-sm'>
+            <div className='border-gray-150 items-center justify-center overflow-hidden rounded-lg border bg-gray-hover shadow-sm lg:w-11/12'>
               <ForceGraphComponent
                 nodes={nodes}
                 links={links}
                 nodeRelSize={nodeSizes}
                 numberOfnodes={nodes.length}
+                platformType={
+                  community?.platforms.find(
+                    (platform) => platform.id === selectedPlatform
+                  )?.name
+                }
               />
             </div>
             <div className='hidden justify-end md:flex md:w-1/2  lg:flex-1'>

src/store/slices/memberInteractionSlice.ts

@@ -6,12 +6,17 @@ import { axiosInstance } from '../../axiosInstance';
 const createHeatmapSlice: StateCreator<IMemberInteraction> = (set, get) => ({
   isLoading: false,
   memberInteractionRecords: [],
-  getMemberInteraction: async (platformId: string) => {
+  getMemberInteraction: async (
+    platformId: string,
+    platformType: 'discord' | 'discourse'
+  ) => {
     try {
+      const endpoint =
+        platformType === 'discourse'
+          ? `/discourse/member-activity/${platformId}/members-interactions-network-graph`
+          : `/member-activity/${platformId}/members-interactions-network-graph`;
       set(() => ({ isLoading: true }));
-      const { data } = await axiosInstance.post(
-        `/member-activity/${platformId}/members-interactions-network-graph`
-      );
+      const { data } = await axiosInstance.post(endpoint);
       set({ memberInteractionRecords: [...data], isLoading: false });
       return data;
     } catch (error) {

src/store/types/IMemberInteraction.ts

@@ -1,5 +1,8 @@
 export default interface IMemberInteraction {
   isLoading: boolean;
   memberInteractionRecords: any[];
-  getMemberInteraction: (platformId: string) => any;
+  getMemberInteraction: (
+    platformId: string,
+    platformType: 'discord' | 'discourse'
+  ) => any;
 }