Merge pull request #1205 from stakwork/feature/topic-curation-to-node

Feature/topic curation to node
stakwork · Apr 15, 2024 · b9ce462 · b9ce462
2 parents 262a79c + dac4cbb
commit b9ce462
Show file tree

Hide file tree

Showing 29 changed files with 83 additions and 78 deletions.
diff --git a/src/components/App/SideBar/Trending/BriefDescriptionModal/index.tsx b/src/components/App/SideBar/Trending/BriefDescriptionModal/index.tsx
@@ -24,7 +24,7 @@ export const BriefDescription: FC<Props> = ({ trend, onClose, selectTrending })
   const audioRef = useRef<HTMLVideoElement | null>(null)
 
   const handleLearnMore = () => {
-    selectTrending(trend.topic)
+    selectTrending(trend.name)
   }
 
   const handleClose = useCallback(() => {
@@ -78,7 +78,7 @@ export const BriefDescription: FC<Props> = ({ trend, onClose, selectTrending })
           </StyledAudio>
         </>
       ) : null}
-      <Title>{trend.tldr_topic ?? trend.topic}</Title>
+      <Title>{trend.tldr_topic ?? trend.name}</Title>
       <ScrollableContent>
         <Flex>
           <StyledText>{trend.tldr && <Markdown>{trend.tldr}</Markdown>}</StyledText>

diff --git a/src/components/App/SideBar/Trending/__tests__/index.tsx b/src/components/App/SideBar/Trending/__tests__/index.tsx
@@ -36,8 +36,8 @@ const mockedUseModal = useModal as jest.MockedFunction<typeof useModal>
 const availableModal = ['briefDescription', 'addContent']
 
 const mockTrends = [
-  { topic: 'Drivechain', count: 10, audio_EN: 'drivechain.mp3', tldr: 'Drivechain TLDR' },
-  { topic: 'Ordinals', count: 10, audio_EN: 'ordinals.mp3', tldr: 'Ordinals TLDR' },
+  { name: 'Drivechain', count: 10, audio_EN: 'drivechain.mp3', tldr: 'Drivechain TLDR' },
+  { name: 'Ordinals', count: 10, audio_EN: 'ordinals.mp3', tldr: 'Ordinals TLDR' },
 ]
 
 describe('Trending Component', () => {
@@ -73,8 +73,8 @@ describe('Trending Component', () => {
 
     const { getByText } = render(<Trending />)
 
-    mockTrends.forEach(({ topic }) => {
-      expect(getByText(`#${topic}`)).toBeInTheDocument()
+    mockTrends.forEach(({ name }) => {
+      expect(getByText(`#${name}`)).toBeInTheDocument()
     })
   })
 
@@ -140,7 +140,7 @@ describe('Trending Component', () => {
 
     const { getByText } = render(<Trending />)
 
-    fireEvent.click(getByText(`#${mockTrends[0].topic}`))
+    fireEvent.click(getByText(`#${mockTrends[0].name}`))
     ;(async () => {
       await waitFor(() => expect(mockedSelectTrendingTopic).toHaveBeenCalled())
     })()
@@ -153,7 +153,7 @@ describe('Trending Component', () => {
 
     const { getByText } = render(<Trending />)
 
-    fireEvent.click(getByText(`#${mockTrends[0].topic}`))
+    fireEvent.click(getByText(`#${mockTrends[0].name}`))
     ;(async () => {
       await waitFor(() => {
         const searchInput = screen.getByPlaceholderText('Search') as HTMLInputElement

diff --git a/src/components/App/SideBar/Trending/index.tsx b/src/components/App/SideBar/Trending/index.tsx
@@ -3,12 +3,12 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
 import { ClipLoader } from 'react-spinners'
 import styled from 'styled-components'
-import { Flex } from '~/components/common/Flex'
 import PauseIcon from '~/components/Icons/PauseIcon'
 import PlayIcon from '~/components/Icons/PlayIcon'
 import PlusIcon from '~/components/Icons/PlusIcon'
 import ReloadIcon from '~/components/Icons/ReloadIcon'
 import SentimentDataIcon from '~/components/Icons/SentimentDataIcon'
+import { Flex } from '~/components/common/Flex'
 import { getTrends } from '~/network/fetchGraphData'
 import { useDataStore } from '~/stores/useDataStore'
 import { useModal } from '~/stores/useModalStore'
@@ -49,7 +49,7 @@ export const Trending = ({ onSubmit }: Props) => {
         setTrendingTopics(res)
       }
     } catch (err) {
-      setTrendingTopics(TRENDING_TOPICS.map((i) => ({ topic: i, count: 0 })))
+      setTrendingTopics(TRENDING_TOPICS.map((i) => ({ name: i, count: 0 })))
     } finally {
       setLoading(false)
     }
@@ -179,12 +179,12 @@ export const Trending = ({ onSubmit }: Props) => {
           <ul className="list">
             {trendingTopics.map((i) => (
               <Flex
-                key={i.topic}
+                key={i.name}
                 align="center"
                 className="list-item"
                 direction="row"
                 justify="space-between"
-                onClick={() => selectTrending(i.topic)}
+                onClick={() => selectTrending(i.name)}
               >
                 <Paragraph> #{getTrendingTopic(i)}</Paragraph>
 

diff --git a/src/components/AppNew/ModalsContainer/EditNodeNameModal/Body/index.tsx b/src/components/AppNew/ModalsContainer/EditNodeNameModal/Body/index.tsx
@@ -12,7 +12,7 @@ import { colors } from '~/utils/colors'
 import { TitleEditor } from '../Title'
 
 export type FormData = {
-  topic: string
+  name: string
 }
 
 export const Body = () => {
@@ -30,7 +30,7 @@ export const Body = () => {
 
   useEffect(() => {
     if (actualNode) {
-      setValue('topic', actualNode?.topic)
+      setValue('name', actualNode?.name)
     }
 
     return () => {
@@ -49,7 +49,7 @@ export const Body = () => {
       try {
         const { data: topicData } = await getTopicsData({ search: selectedNode?.name })
 
-        const node = topicData.find((i) => i.topic === selectedNode.name)
+        const node = topicData.find((i) => i.name === selectedNode.name)
 
         setActualNode(node)
       } catch (error) {
@@ -62,7 +62,7 @@ export const Body = () => {
     init()
   }, [selectedNode])
 
-  const topicValue = watch('topic')
+  const topicValue = watch('name')
 
   const closeHandler = () => {
     close()
@@ -72,7 +72,7 @@ export const Body = () => {
     setLoading(true)
 
     try {
-      await putNodeData(actualNode?.ref_id || '', { topic: topicValue.trim() })
+      await putNodeData(actualNode?.ref_id || '', { name: topicValue.trim() })
 
       if (data) {
         // const newData = { ...data }

diff --git a/src/components/AppNew/ModalsContainer/RemoveNodeModal/Body/index.tsx b/src/components/AppNew/ModalsContainer/RemoveNodeModal/Body/index.tsx
@@ -38,7 +38,7 @@ export const Body = () => {
       try {
         const { data } = await getTopicsData({ search: selectedNode?.name })
 
-        const node = data.find((i) => i.topic === selectedNode.name)
+        const node = data.find((i) => i.name === selectedNode.name)
 
         setActualNode(node)
       } catch (error) {

diff --git a/...ainer/SourcesTableModal/SourcesView/Topics/AddEdgeTopicModal/Title/Autocomplete/index.tsx b/...ainer/SourcesTableModal/SourcesView/Topics/AddEdgeTopicModal/Title/Autocomplete/index.tsx
@@ -70,7 +70,7 @@ export const DropdownSearch: React.FC<Props> = ({ onSelect, selectedTopic }) =>
 
   return selectedTopic ? (
     <SelectedValue>
-      <div className="value">{selectedTopic.topic}</div>
+      <div className="value">{selectedTopic.name}</div>
       <Flex className="icon" onClick={() => onSelect(null)}>
         <ClearIcon />
       </Flex>
@@ -113,7 +113,7 @@ export const DropdownSearch: React.FC<Props> = ({ onSelect, selectedTopic }) =>
                 className={clsx({ active: selectedTopic === option.ref_id })}
                 onClick={() => handleSelectChange(option)}
               >
-                {option.topic}
+                {option.name}
               </MenuItem>
             ))}
           </>

diff --git a/...s/AppNew/ModalsContainer/SourcesTableModal/SourcesView/Topics/AddEdgeTopicModal/index.tsx b/...s/AppNew/ModalsContainer/SourcesTableModal/SourcesView/Topics/AddEdgeTopicModal/index.tsx
@@ -71,7 +71,7 @@ export const AddEdgeModal: FC<Props> = ({ topic, onClose }) => {
     <BaseModal id="addEdge" kind="large" onClose={closeHandler} preventOutsideClose>
       <FormProvider {...form}>
         <TitleEditor
-          from={topic.topic}
+          from={topic.name}
           onSelect={setSelectedTopic}
           selectedTopic={selectedTopic}
           selectedType={selectedType}

diff --git a/...ents/AppNew/ModalsContainer/SourcesTableModal/SourcesView/Topics/EditTopicModal/index.tsx b/...ents/AppNew/ModalsContainer/SourcesTableModal/SourcesView/Topics/EditTopicModal/index.tsx
@@ -16,7 +16,7 @@ type Props = {
 }
 
 export type FormData = {
-  topic: string
+  name: string
 }
 
 export const EditTopicModal: FC<Props> = ({ topic, onClose }) => {
@@ -28,15 +28,15 @@ export const EditTopicModal: FC<Props> = ({ topic, onClose }) => {
 
   useEffect(() => {
     if (topic) {
-      setValue('topic', topic?.topic)
+      setValue('name', topic?.name)
     }
 
     return () => {
       reset()
     }
   }, [topic, setValue, reset])
 
-  const topicValue = watch('topic')
+  const topicValue = watch('name')
 
   const closeHandler = () => {
     onClose()
@@ -52,7 +52,7 @@ export const EditTopicModal: FC<Props> = ({ topic, onClose }) => {
       if (data) {
         const newData = { ...data }
 
-        newData[topic?.ref_id].topic = topicValue.trim()
+        newData[topic?.ref_id].name = topicValue.trim()
 
         useTopicsStore.setState({ data: newData })
       }

diff --git a/...ntainer/SourcesTableModal/SourcesView/Topics/MergeTopicModal/Title/Autocomplete/index.tsx b/...ntainer/SourcesTableModal/SourcesView/Topics/MergeTopicModal/Title/Autocomplete/index.tsx
@@ -70,7 +70,7 @@ export const DropdownSearch: React.FC<Props> = ({ onSelect, selectedTopic }) =>
 
   return selectedTopic ? (
     <SelectedValue>
-      <div className="value">{selectedTopic.topic}</div>
+      <div className="value">{selectedTopic.name}</div>
       <Flex className="icon" onClick={() => onSelect(null)}>
         <ClearIcon />
       </Flex>
@@ -113,7 +113,7 @@ export const DropdownSearch: React.FC<Props> = ({ onSelect, selectedTopic }) =>
                 className={clsx({ active: selectedTopic === option.ref_id })}
                 onClick={() => handleSelectChange(option)}
               >
-                {option.topic}
+                {option.name}
               </MenuItem>
             ))}
           </>

diff --git a/...nts/AppNew/ModalsContainer/SourcesTableModal/SourcesView/Topics/MergeTopicModal/index.tsx b/...nts/AppNew/ModalsContainer/SourcesTableModal/SourcesView/Topics/MergeTopicModal/index.tsx
@@ -17,7 +17,7 @@ type Props = {
 }
 
 export type FormData = {
-  topic: string
+  name: string
 }
 
 export const MergeTopicModal: FC<Props> = ({ topic, onClose }) => {
@@ -30,15 +30,15 @@ export const MergeTopicModal: FC<Props> = ({ topic, onClose }) => {
 
   useEffect(() => {
     if (topic) {
-      setValue('topic', topic?.topic)
+      setValue('name', topic?.name)
     }
 
     return () => {
       reset()
     }
   }, [topic, setValue, reset])
 
-  const topicValue = watch('topic')
+  const topicValue = watch('name')
 
   const closeHandler = () => {
     onClose()
@@ -64,7 +64,7 @@ export const MergeTopicModal: FC<Props> = ({ topic, onClose }) => {
       if (data) {
         const newData = { ...data }
 
-        newData[topic?.ref_id].topic = topicValue.trim()
+        newData[topic?.ref_id].name = topicValue.trim()
 
         useTopicsStore.setState({ data: newData })
       }
@@ -80,7 +80,7 @@ export const MergeTopicModal: FC<Props> = ({ topic, onClose }) => {
   return (
     <BaseModal id="mergeTopic" kind="regular" onClose={closeHandler} preventOutsideClose>
       <FormProvider {...form}>
-        <TitleEditor from={topic.topic} onSelect={setSelectedTopic} selectedTopic={selectedTopic} />
+        <TitleEditor from={topic.name} onSelect={setSelectedTopic} selectedTopic={selectedTopic} />
         <Button color="secondary" disabled={loading} onClick={handleSave} size="large" variant="contained">
           Merge topics
           {loading && <ClipLoader color={colors.BLUE_PRESS_STATE} size={10} />}

diff --git a/...components/AppNew/ModalsContainer/SourcesTableModal/SourcesView/Topics/Table/TableRow.tsx b/...components/AppNew/ModalsContainer/SourcesTableModal/SourcesView/Topics/Table/TableRow.tsx
@@ -34,9 +34,9 @@ const TableRowComponent: FC<TTableRaw> = ({ topic, onClick }) => {
   }
 
   return (
-    <StyledTableRow key={topic.topic}>
+    <StyledTableRow key={topic.name}>
       <StyledTableCell className="empty" />
-      <StyledTableCell>{topic.topic}</StyledTableCell>
+      <StyledTableCell>{topic.name}</StyledTableCell>
       <StyledTableCell>{topic.edgeCount}</StyledTableCell>
       <StyledTableCell>{topic.edgeList.join(', ')}</StyledTableCell>
       <StyledTableCell>

diff --git a/src/components/AppNew/SideBar/Trending/BriefDescriptionModal/index.tsx b/src/components/AppNew/SideBar/Trending/BriefDescriptionModal/index.tsx
@@ -24,7 +24,7 @@ export const BriefDescription: FC<Props> = ({ trend, onClose, selectTrending })
   const audioRef = useRef<HTMLVideoElement | null>(null)
 
   const handleLearnMore = () => {
-    selectTrending(trend.topic)
+    selectTrending(trend.name)
   }
 
   const handleClose = useCallback(() => {
@@ -78,7 +78,7 @@ export const BriefDescription: FC<Props> = ({ trend, onClose, selectTrending })
           </StyledAudio>
         </>
       ) : null}
-      <Title>{trend.tldr_topic ?? trend.topic}</Title>
+      <Title>{trend.tldr_topic ?? trend.name}</Title>
       <ScrollableContent>
         <Flex>
           <StyledText>{trend.tldr && <Markdown>{trend.tldr}</Markdown>}</StyledText>

diff --git a/src/components/AppNew/SideBar/Trending/index.tsx b/src/components/AppNew/SideBar/Trending/index.tsx
@@ -3,11 +3,11 @@ import { useEffect, useRef, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
 import { ClipLoader } from 'react-spinners'
 import styled from 'styled-components'
-import { Flex } from '~/components/common/Flex'
 import PauseIcon from '~/components/Icons/PauseIcon'
 import PlayIcon from '~/components/Icons/PlayIcon'
 import PlusIcon from '~/components/Icons/PlusIcon'
 import SentimentDataIcon from '~/components/Icons/SentimentDataIcon'
+import { Flex } from '~/components/common/Flex'
 import { getTrends } from '~/network/fetchGraphData'
 import { useDataStore } from '~/stores/useDataStore'
 import { useModal } from '~/stores/useModalStore'
@@ -47,7 +47,7 @@ export const Trending = ({ onSubmit }: Props) => {
           setTrendingTopics(res)
         }
       } catch (err) {
-        setTrendingTopics(TRENDING_TOPICS.map((i) => ({ topic: i, count: 0 })))
+        setTrendingTopics(TRENDING_TOPICS.map((i) => ({ name: i, count: 0 })))
       } finally {
         setLoading(false)
       }
@@ -172,12 +172,12 @@ export const Trending = ({ onSubmit }: Props) => {
               <>
                 {trendingTopics.map((i) => (
                   <Flex
-                    key={i.topic}
+                    key={i.name}
                     align="center"
                     className="list-item"
                     direction="row"
                     justify="space-between"
-                    onClick={() => selectTrending(i.topic)}
+                    onClick={() => selectTrending(i.name)}
                   >
                     <Paragraph> #{getTrendingTopic(i)}</Paragraph>