feat: added Topics in popup to mute unrelated topics (#502)

package.json

@@ -83,7 +83,7 @@
     "prettier": "npx prettier --config prettier.config.js --check ./src",
     "postinstall": "husky install",
     "typecheck": "tsc --noEmit",
-    "lint": "eslint src --max-warnings 22"
+    "lint": "eslint src --max-warnings 24"
   },
   "eslintConfig": {
     "extends": [

src/components/SourcesTableModal/SourcesView/QueuedSources/Table/index.tsx

@@ -30,7 +30,7 @@ const Table: React.FC<Props> = ({ data }) => {
 
         await approveRadarData(id, enable.pubkey)
 
-        setSources(data.filter((i) => i.ref_id !== id))
+        setSources(data.filter((i: Sources) => i.ref_id !== id))
       } catch (error) {
         console.warn(error)
       }

src/components/SourcesTableModal/SourcesView/Sources/Table/index.tsx

@@ -52,7 +52,7 @@ const Table: React.FC<Props> = ({ data, canEdit = false }) => {
 
     try {
       await deleteRadarData(id)
-      setSources(data?.filter((i) => i.ref_id !== id))
+      setSources(data?.filter((i: Sources) => i.ref_id !== id))
     } catch (error) {
       console.warn(error)
     } finally {

src/components/SourcesTableModal/SourcesView/Sources/index.tsx

@@ -13,7 +13,7 @@ import { ToastMessage } from '~/components/common/Toast/toastMessage'
 import { getRadarData, triggerRadarJob } from '~/network/fetchSourcesData'
 import { useDataStore } from '~/stores/useDataStore'
 import { useUserStore } from '~/stores/useUserStore'
-import { FetchRadarResponse, SubmitErrRes } from '~/types'
+import { FetchRadarResponse, SubmitErrRes, Sources as TSources } from '~/types'
 import { colors } from '~/utils/colors'
 import { executeIfProd } from '~/utils/tests'
 import { Heading, StyledPill } from '../common'
@@ -134,7 +134,7 @@ export const Sources = () => {
     return <Text>You are not admin</Text>
   }
 
-  const tableValues = sources?.filter((val) => !typeFilter || val.source_type === typeFilter)
+  const tableValues = sources?.filter((val: TSources) => !typeFilter || val.source_type === typeFilter)
 
   return (
     <Wrapper align="stretch" direction="column" justify="flex-end">

src/components/SourcesTableModal/SourcesView/Topics/Table/index.tsx

@@ -0,0 +1,91 @@
+import { Table as MaterialTable, TableRow } from '@mui/material'
+import React from 'react'
+import { MdCheckCircle, MdCancel } from 'react-icons/md'
+import styled from 'styled-components'
+import FilterOffIcon from '~/components/Icons/FilterOffIcon'
+import { Flex } from '~/components/common/Flex'
+import { Text } from '~/components/common/Text'
+import { putNodeData } from '~/network/fetchSourcesData'
+// import { useDataStore } from '~/stores/useDataStore'
+import { Topic } from '~/types'
+import { colors } from '~/utils/colors'
+import { StyledTableCell, StyledTableHead, StyledTableRow } from '../../common'
+import { TopicTableProps } from '../../types'
+
+const Table: React.FC<TopicTableProps> = ({ data, showMuted }) => {
+  // const setSources = useDataStore((s) => s.setQueuedSources)
+
+  const handleMute = async (refId: string, shouldMute: boolean) => {
+    if (data?.length) {
+      try {
+        await putNodeData({ ref_id: refId, node_name: 'muted_topic', node_value: shouldMute })
+
+        // setSources(data.filter((i) => i.ref_id !== id))
+      } catch (error) {
+        console.warn(error)
+      }
+    }
+  }
+
+  return !data?.length ? (
+    <Flex>
+      <Text>There is not any results for selected filters</Text>
+      <FilterOffIcon />
+    </Flex>
+  ) : (
+    <MaterialTable component="table">
+      <StyledTableHead>
+        <TableRow component="tr">
+          <StyledTableCell className="empty" />
+          <StyledTableCell>Type</StyledTableCell>
+          <StyledTableCell>{showMuted ? 'Unmute' : 'Mute'}</StyledTableCell>
+        </TableRow>
+      </StyledTableHead>
+      {data?.length && (
+        <tbody>
+          {data?.map((i: Topic) => (
+            <StyledTableRow key={i.topic}>
+              <StyledTableCell className="empty" />
+              <StyledTableCell>{i.topic}</StyledTableCell>
+
+              <StyledTableCell className="cell-center">
+                <Flex direction="row" justify="space-between">
+                  <div className="approve-wrapper">
+                    {i.muted_topic ? (
+                      <IconWrapper className="centered" onClick={() => handleMute(i.ref_id, false)}>
+                        <MdCheckCircle color={colors.primaryGreen} fontSize={24} />
+                      </IconWrapper>
+                    ) : (
+                      <IconWrapper className="centered" onClick={() => handleMute(i.ref_id, true)}>
+                        <MdCancel color={colors.primaryRed} fontSize={24} />
+                      </IconWrapper>
+                    )}
+                  </div>
+                </Flex>
+              </StyledTableCell>
+              <StyledTableCell className="empty" />
+            </StyledTableRow>
+          ))}
+        </tbody>
+      )}
+    </MaterialTable>
+  )
+}
+
+export default Table
+
+const IconWrapper = styled(Flex)`
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  cursor: pointer;
+  background: transparent;
+  color: ${colors.lightBlue500};
+  &.centered {
+    margin: 0 auto;
+  }
+
+  & + & {
+    margin-left: 4px;
+  }
+`

src/components/SourcesTableModal/SourcesView/Topics/index.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useState } from 'react'
+import { ClipLoader } from 'react-spinners'
+import styled from 'styled-components'
+import { Flex } from '~/components/common/Flex'
+import { Text } from '~/components/common/Text'
+import { Pill } from '~/components/common/Pill'
+import { getTopicsData } from '~/network/fetchSourcesData'
+import { useDataStore } from '~/stores/useDataStore'
+import { FetchTopicResponse } from '~/types'
+import { colors } from '~/utils/colors'
+import { Heading } from '../common'
+import Table from './Table'
+
+export const TopicSources = () => {
+  const [loading, setLoading] = useState(true)
+  const [showMuted, setShowMuted] = useState(false)
+  const [topics, setTopics] = useDataStore((s) => [s.topics, s.setTopics])
+
+  useEffect(() => {
+    const init = async () => {
+      setLoading(true)
+
+      try {
+        const mutedParam = showMuted ? 'True' : 'False'
+        const data: FetchTopicResponse = await getTopicsData({ muted: mutedParam })
+
+        setTopics(data.data)
+      } catch (error) {
+        console.warn(error)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    init()
+  }, [setTopics, showMuted])
+
+  return (
+    <Wrapper align="stretch" direction="column" justify="flex-end">
+      <Heading align="flex-start" justify="space-between">
+        <Text className="title">Topics</Text>
+      </Heading>
+      <Pill
+        className="booster__pill"
+        onClick={() => setShowMuted(!showMuted)}
+        style={{ marginLeft: '30px', marginBottom: '10px', padding: '5px 10px 5px 10px', width: 'fit-content' }}
+      >
+        {loading ? (
+          <ClipLoader color={colors.white} />
+        ) : (
+          <Flex align="center" direction="row" justify="center">
+            <div style={{ fontSize: 10 }}>Show {showMuted ? 'Unmuted' : 'Muted'}</div>
+          </Flex>
+        )}
+      </Pill>
+
+      <TableWrapper align="center" justify={loading ? 'center' : 'flex-start'}>
+        {loading ? <ClipLoader color={colors.white} /> : <Table data={topics} showMuted={showMuted} />}
+      </TableWrapper>
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled(Flex)`
+  flex: 1;
+
+  .title {
+    margin-bottom: 32px;
+    font-size: 20px;
+    color: ${colors.white};
+    font-family: Barlow;
+    font-size: 22px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+  }
+
+  .subtitle {
+    color: ${colors.GRAY3};
+    font-family: Barlow;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+
+  & .filters {
+    overflow-x: auto;
+  }
+`
+
+const TableWrapper = styled(Flex)`
+  min-height: 0;
+  overflow: auto;
+  flex: 1;
+  width: 100%;
+`

src/components/SourcesTableModal/SourcesView/index.tsx

@@ -6,6 +6,7 @@ import { Flex } from '~/components/common/Flex'
 import { colors } from '~/utils/colors'
 import { QueuedSources } from './QueuedSources'
 import { Sources } from './Sources'
+import { TopicSources } from './Topics'
 
 interface TabPanelProps {
   children?: React.ReactNode
@@ -48,13 +49,17 @@ export const SourcesView = () => {
       <StyledTabs aria-label="basic tabs example" onChange={handleChange} value={value}>
         <StyledTab disableRipple label="Sources table" {...a11yProps(0)} />
         <StyledTab color={colors.white} disableRipple label="Queued sources" {...a11yProps(1)} />
+        <StyledTab color={colors.white} disableRipple label="Topics" {...a11yProps(1)} />
       </StyledTabs>
       <TabPanel index={0} value={value}>
         <Sources />
       </TabPanel>
       <TabPanel index={1} value={value}>
         <QueuedSources />
       </TabPanel>
+      <TabPanel index={2} value={value}>
+        <TopicSources />
+      </TabPanel>
     </Wrapper>
   )
 }

src/components/SourcesTableModal/SourcesView/types.ts

@@ -1,9 +1,14 @@
-import { Sources } from '~/types'
+import { Sources, Topic } from '~/types'
 
 export type Props = {
   data: Sources[] | undefined
 }
 
+export type TopicTableProps = {
+  data: Topic[] | null
+  showMuted?: boolean
+}
+
 export type TdProps = {
   width?: string
 }

src/network/fetchSourcesData/index.ts

@@ -1,4 +1,4 @@
-import { FetchRadarResponse, RadarRequest, SubmitErrRes } from '~/types'
+import { FetchRadarResponse, FetchTopicResponse, RadarRequest, SubmitErrRes, NodeRequest } from '~/types'
 import { api } from '../api'
 
 type TradarParams = {
@@ -15,10 +15,15 @@ export type TAboutParams = {
   search_term?: string
 }
 
+type TtopicsParams = {
+  muted?: string
+  skip?: string
+  limit?: string
+}
+
 const defaultParams = {
   skip: '0',
   limit: '500',
-  approved: 'True',
 }
 
 export const getRadarData = async (queryParams: TradarParams = defaultParams) => {
@@ -29,6 +34,14 @@ export const getRadarData = async (queryParams: TradarParams = defaultParams) =>
   return response
 }
 
+export const getTopicsData = async (queryParams: TtopicsParams = defaultParams) => {
+  const response = await api.get<FetchTopicResponse>(
+    `/topics?${new URLSearchParams({ ...defaultParams, ...queryParams }).toString()}`,
+  )
+
+  return response
+}
+
 export const getAboutData = async () => {
   const response = await api.get<TAboutParams>('/about')
 
@@ -49,6 +62,12 @@ export const putRadarData = async (id: string, data: RadarRequest) => {
   return response
 }
 
+export const putNodeData = async (data: NodeRequest) => {
+  const response = await api.put(`/node`, JSON.stringify(data))
+
+  return response
+}
+
 export const approveRadarData = async (id: string, pubkey: string) => {
   const response = await api.put(`/radar/${id}/approve`, JSON.stringify({ approve: 'True', pubkey }))
 

src/stores/useDataStore/index.ts

@@ -2,7 +2,7 @@ import create from 'zustand'
 import { nodesAreRelatives } from '~/components/Universe/constants'
 import { isChileGraph } from '~/constants'
 import { fetchGraphData } from '~/network/fetchGraphData'
-import { GraphData, NodeExtended, NodeType, Sources } from '~/types'
+import { GraphData, NodeExtended, NodeType, Sources, Topic } from '~/types'
 import { saveSearchTerm } from '~/utils/relayHelper/index'
 
 export type GraphStyle = 'split' | 'force' | 'sphere' | 'earth'
@@ -24,6 +24,7 @@ type DataStore = {
   selectedTimestamp: NodeExtended | null
   sources: Sources[] | null
   queuedSources: Sources[] | null
+  topics: Topic[] | null
   sphinxModalIsOpen: boolean
   cameraFocusTrigger: boolean
   selectedNodeRelativeIds: string[]
@@ -44,6 +45,7 @@ type DataStore = {
   setSelectedTimestamp: (selectedTimestamp: NodeExtended | null) => void
   setSources: (sources: Sources[] | null) => void
   setQueuedSources: (sources: Sources[] | null) => void
+  setTopics: (topics: Topic[] | null) => void
   setSphinxModalOpen: (_: boolean) => void
   setCameraFocusTrigger: (_: boolean) => void
   setIsFetching: (_: boolean) => void
@@ -70,6 +72,7 @@ const defaultData: Omit<
   | 'setCameraFocusTrigger'
   | 'setSources'
   | 'setQueuedSources'
+  | 'setTopics'
   | 'setGraphRadius'
   | 'setGraphStyle'
   | 'setNearbyNodeIds'
@@ -88,6 +91,7 @@ const defaultData: Omit<
   isFetching: false,
   isTimestampLoaded: false,
   queuedSources: null,
+  topics: null,
   hoveredNode: null,
   selectedNode: null,
   selectedTimestamp: null,
@@ -136,6 +140,7 @@ export const useDataStore = create<DataStore>((set, get) => ({
   setGraphRadius: (graphRadius) => set({ graphRadius }),
   setGraphStyle: (graphStyle) => set({ graphStyle }),
   setQueuedSources: (queuedSources) => set({ queuedSources }),
+  setTopics: (topics) => set({ topics }),
   setHoveredNode: (hoveredNode) => set({ hoveredNode }),
   setSelectedNode: (selectedNode) => {
     const stateSelectedNode = get().selectedNode