feat: add fetch for trending results (#428)

Co-authored-by: Расул <[email protected]>
stakwork · Sep 25, 2023 · 29b6caf · 29b6caf
1 parent 7a31cf2
commit 29b6caf
Show file tree

Hide file tree

Showing 7 changed files with 167 additions and 102 deletions.
diff --git a/src/components/AddNodeModal/Location/index.tsx b/src/components/AddNodeModal/Location/index.tsx
@@ -10,17 +10,12 @@ const latitudeReg = /^(-?\d{1,2}(\.\d+)?|90(\.0+)?)$/
 const longitudeReg = /^(-?\d{1,3}(\.\d+)?|180(\.0+)?)$/
 
 type Props = {
-  latitude?: string
-  longitude?: string
   setValue?: (field: string, value: boolean) => void
 }
 
-export const Location: FC<Props> = ({ setValue, latitude, longitude }) => {
+export const Location: FC<Props> = ({ setValue }) => {
   const [enableLocation, setEnableLocation] = useState(false)
 
-  console.log(latitude)
-  console.log(longitude)
-
   const showLocation = () => {
     if (setValue) {
       setValue('withLocation', !enableLocation)

diff --git a/src/components/AddNodeModal/SourceUrl/index.tsx b/src/components/AddNodeModal/SourceUrl/index.tsx
@@ -11,8 +11,6 @@ import { requiredRule } from '../index'
 
 type Props = {
   startTime?: string
-  latitude?: string
-  longitude?: string
   setValue?: (field: string, value: boolean) => void
 }
 
@@ -28,7 +26,7 @@ const timeRegex = /^\d{2}:\d{2}:\d{2}$/
 const twitterOrYoutubeRegexOrMp3 =
   /^(?:(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)[\w-]{11}(?:\S*)?|(?:https?:\/\/)?(?:www\.)?twitter\.com\/i\/spaces\/\d+.*$|.+\.mp3)$/i
 
-export const SourceUrl: FC<Props> = ({ setValue, startTime, latitude, longitude }) => {
+export const SourceUrl: FC<Props> = ({ setValue, startTime }) => {
   const [enableTimestamps, setEnableTimestamps] = useState(false)
 
   const handleTimestamps = () => {
@@ -136,7 +134,7 @@ export const SourceUrl: FC<Props> = ({ setValue, startTime, latitude, longitude
           </>
         )}
 
-        <Location latitude={latitude} longitude={longitude} setValue={setValue} />
+        <Location setValue={setValue} />
       </Flex>
     </>
   )

diff --git a/src/components/AddNodeModal/TweetId/index.tsx b/src/components/AddNodeModal/TweetId/index.tsx
@@ -5,12 +5,10 @@ import { TextInput } from '../TextInput'
 import { requiredRule } from '../index'
 
 type Props = {
-  latitude?: string
-  longitude?: string
   setValue?: (field: string, value: boolean) => void
 }
 
-export const TwitId: FC<Props> = ({ setValue, latitude, longitude }) => (
+export const TwitId: FC<Props> = ({ setValue }) => (
   <Flex>
     <TextInput
       id="tweet-id"
@@ -23,6 +21,6 @@ export const TwitId: FC<Props> = ({ setValue, latitude, longitude }) => (
       }}
     />
 
-    <Location latitude={latitude} longitude={longitude} setValue={setValue} />
+    <Location setValue={setValue} />
   </Flex>
 )
diff --git a/src/components/AddNodeModal/index.tsx b/src/components/AddNodeModal/index.tsx
@@ -304,98 +304,97 @@ export const AddNodeModal = () => {
     : []
 
   const startTime = watch('startTime')
-  const longitude = watch('longitude')
-  const latitude = watch('latitude')
 
   const FormValues = activeType && resolvedContentOptions ? resolvedContentOptions[activeType].component : () => null
-  const formProps = { setValue, startTime, longitude, latitude }
+  const formProps = { setValue, startTime }
 
   return (
     resolvedContentOptions && (
       <BaseModal id="addNode" preventOutsideClose>
         <FormProvider {...form}>
           <form id="add-node-form" onSubmit={onSubmit}>
-            <Flex align="center" direction="row" justify="space-between" pb={32}>
-              <Flex align="center" direction="row">
+            <Wrapper>
+              <Flex align="center" direction="row" justify="space-between" pb={32}>
                 <Flex align="center" direction="row">
-                  {activeType && (
-                    <BackButton onClick={() => setActiveType('')}>
-                      <MdKeyboardBackspace color={colors.white} size={24} />
-                    </BackButton>
-                  )}
-                  <Text kind="bigHeadingBold">Add {addNodeModalData}</Text>
-                </Flex>
-                <InfoIcon role="tooltip" tabIndex={0}>
-                  <MdInfo />
-                  <div className="tooltip">{resolveInfoMessage}</div>
-                </InfoIcon>
-              </Flex>
-
-              <CloseButton
-                id="add-node-close-button"
-                onClick={handleClose}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' || e.key === 'Space') {
-                    handleClose()
-                  }
-                }}
-                role="button"
-                tabIndex={0}
-              >
-                <MdClose color="white" />
-              </CloseButton>
-            </Flex>
-
-            {!activeType ? (
-              <Stack
-                alignItems={{ xs: 'stretch', sm: 'flex-start', minHeight: '160px' }}
-                component="div"
-                direction={{ xs: 'column', sm: 'row' }}
-                justifyContent="space-between"
-                spacing={2}
-              >
-                <Flex>
-                  <Text kind="mediumBold">What do you want to add?</Text>
-                </Flex>
-                <Flex grow={1}>
-                  <StyledSelect
-                    className={clsx(selectedValue.length && 'hasSelected', 'cy-select-content-type')}
-                    clearable
-                    onChange={(values) => {
-                      setActiveType(values.length ? (values[0] as Option).value : '')
-                    }}
-                    options={options}
-                    placeholder={`Select ${addNodeModalData} type`}
-                    searchable={false}
-                    values={selectedValue}
-                  />
-                </Flex>
-              </Stack>
-            ) : (
-              <>
-                <Flex>
-                  <FormValues {...formProps} />
+                  <Flex align="center" direction="row">
+                    {activeType && (
+                      <BackButton onClick={() => setActiveType('')}>
+                        <MdKeyboardBackspace color={colors.white} size={24} />
+                      </BackButton>
+                    )}
+                    <Text kind="bigHeadingBold">Add {addNodeModalData}</Text>
+                  </Flex>
+                  <InfoIcon role="tooltip" tabIndex={0}>
+                    <MdInfo />
+                    <div className="tooltip">{resolveInfoMessage}</div>
+                  </InfoIcon>
                 </Flex>
 
-                <Flex pt={16} px={4} tabIndex={0}>
-                  <Text color="lightGray" kind="tinyBold">
-                    Your pubkey will be submitted with your input, so you can receive sats that your content earns.
-                  </Text>
-                </Flex>
-
-                <Flex pt={8}>
-                  {isSubmitting ? (
-                    <SubmitLoader>
-                      <ClipLoader color={colors.white} size={20} />
-                    </SubmitLoader>
-                  ) : (
-                    <Button disabled={isSubmitting} id="add-node-submit-cta" kind="big" type="submit">
-                      {`Add ${addNodeModalData}`}
-                    </Button>
-                  )}
-                </Flex>
-              </>
-            )}
+                <CloseButton
+                  id="add-node-close-button"
+                  onClick={handleClose}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === 'Space') {
+                      handleClose()
+                    }
+                  }}
+                  role="button"
+                  tabIndex={0}
+                >
+                  <MdClose color="white" />
+                </CloseButton>
+              </Flex>
+              {!activeType ? (
+                <Stack
+                  alignItems={{ xs: 'stretch', sm: 'flex-start', minHeight: '160px' }}
+                  component="div"
+                  direction={{ xs: 'column', sm: 'row' }}
+                  justifyContent="space-between"
+                  spacing={2}
+                >
+                  <Flex>
+                    <Text kind="mediumBold">What do you want to add?</Text>
+                  </Flex>
+                  <Flex grow={1}>
+                    <StyledSelect
+                      className={clsx(selectedValue.length && 'hasSelected', 'cy-select-content-type')}
+                      clearable
+                      onChange={(values) => {
+                        setActiveType(values.length ? (values[0] as Option).value : '')
+                      }}
+                      options={options}
+                      placeholder={`Select ${addNodeModalData} type`}
+                      searchable={false}
+                      values={selectedValue}
+                    />
+                  </Flex>
+                </Stack>
+              ) : (
+                <>
+                  <Flex>
+                    <FormValues {...formProps} />
+                  </Flex>
+
+                  <Flex pt={16} px={4} tabIndex={0}>
+                    <Text color="lightGray" kind="tinyBold">
+                      Your pubkey will be submitted with your input, so you can receive sats that your content earns.
+                    </Text>
+                  </Flex>
+
+                  <Flex pt={8}>
+                    {isSubmitting ? (
+                      <SubmitLoader>
+                        <ClipLoader color={colors.white} size={20} />
+                      </SubmitLoader>
+                    ) : (
+                      <Button disabled={isSubmitting} id="add-node-submit-cta" kind="big" type="submit">
+                        {`Add ${addNodeModalData}`}
+                      </Button>
+                    )}
+                  </Flex>
+                </>
+              )}
+            </Wrapper>
           </form>
         </FormProvider>
       </BaseModal>
@@ -461,3 +460,7 @@ const SubmitLoader = styled(Flex).attrs({
   padding: 16px 24px;
   opacity: 0.5;
 `
+
+const Wrapper = styled(Flex)`
+  min-height: 600px;
+`
diff --git a/src/components/App/SideBar/Trending/index.tsx b/src/components/App/SideBar/Trending/index.tsx
@@ -1,7 +1,12 @@
+import { Skeleton } from '@mui/material'
+import { useEffect, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
+import { ClipLoader } from 'react-spinners'
 import styled from 'styled-components'
 import SentimentDataIcon from '~/components/Icons/SentimentDataIcon'
 import { Flex } from '~/components/common/Flex'
+import { getTrends } from '~/network/fetchGraphData'
+import { Trending as TrendingType } from '~/types'
 import { colors } from '~/utils/colors'
 
 const TRENDING_TOPICS = ['Drivechain', 'Ordinals', 'L402', 'Nostr', 'AI']
@@ -11,8 +16,31 @@ type Props = {
 }
 
 export const Trending = ({ onSubmit }: Props) => {
+  const [trendingTopics, setTrendingTopics] = useState<Array<string>>([])
+  const [loading, setLoading] = useState(false)
+
   const { setValue } = useFormContext()
 
+  useEffect(() => {
+    const init = async () => {
+      setLoading(true)
+
+      try {
+        const res = await getTrends()
+
+        if (res.length) {
+          setTrendingTopics(res.map((i: TrendingType) => i.topic))
+        }
+      } catch (err) {
+        setTrendingTopics(TRENDING_TOPICS)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    init()
+  }, [])
+
   const selectTrending = (val: string) => {
     setValue('search', val)
     onSubmit?.()
@@ -23,15 +51,27 @@ export const Trending = ({ onSubmit }: Props) => {
       <div className="heading">
         <span className="heading__title">Trending Topics</span>
         <span className="heading__icon">
-          <SentimentDataIcon />
+          {loading ? <ClipLoader color={colors.PRIMARY_BLUE} size={16} /> : <SentimentDataIcon />}
         </span>
       </div>
       <ul className="list">
-        {TRENDING_TOPICS.map((i) => (
-          <Flex key={i} className="list-item" onClick={() => selectTrending(i)}>
-            #{i}
-          </Flex>
-        ))}
+        {loading ? (
+          <>
+            <StyledSkeleton animation="wave" height={47} variant="rectangular" width={382} />
+            <StyledSkeleton animation="wave" height={47} variant="rectangular" width={382} />
+            <StyledSkeleton animation="wave" height={47} variant="rectangular" width={382} />
+            <StyledSkeleton animation="wave" height={47} variant="rectangular" width={382} />
+            <StyledSkeleton animation="wave" height={47} variant="rectangular" width={382} />
+          </>
+        ) : (
+          <>
+            {trendingTopics.map((i) => (
+              <Flex key={i} className="list-item" onClick={() => selectTrending(i)}>
+                #{i}
+              </Flex>
+            ))}
+          </>
+        )}
       </ul>
     </Wrapper>
   )
@@ -86,3 +126,9 @@ const Wrapper = styled(Flex)`
     }
   }
 `
+
+const StyledSkeleton = styled(Skeleton)`
+  && {
+    background: rgba(0, 0, 0, 0.15);
+  }
+`
diff --git a/src/network/fetchGraphData/index.ts b/src/network/fetchGraphData/index.ts
@@ -11,7 +11,16 @@ import {
 import { mock } from '~/mocks/getMockGraphData/mockResponse'
 import { api } from '~/network/api'
 import { useDataStore } from '~/stores/useDataStore'
-import { FetchDataResponse, FetchSentimentResponse, GraphData, Guests, Link, Node, NodeExtended } from '~/types'
+import {
+  FetchDataResponse,
+  FetchSentimentResponse,
+  FetchTrendingResponse,
+  GraphData,
+  Guests,
+  Link,
+  Node,
+  NodeExtended,
+} from '~/types'
 import { getLSat } from '~/utils/getLSat'
 import { getMaxSuperficialWeightPerNodeType, getSuperficialNodeWeight } from '~/utils/getSuperficialNodeWeight'
 import { getGraphDataPositions } from './const'
@@ -89,13 +98,22 @@ const fetchNodes = async (search: string) => {
   })
 }
 
+export const getTrends = async () => {
+  const endpoint = `/get_trends`
+
+  const response = await api.get<FetchTrendingResponse>(endpoint)
+
+  return response
+}
+
 /**
  *
  * {
  *  cutoff_date: string // String(moment.unix()),
  *  topic: string // search topic
  *  }
  */
+
 export const getSentimentData = async (args?: { topic: string; cutoff_date: string }) => {
   const search = args && new URLSearchParams(args)