diff --git a/src/components/AddNodeModal/Location/index.tsx b/src/components/AddNodeModal/Location/index.tsx index 03a1ff0eb..741fd5809 100644 --- 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 = ({ setValue, latitude, longitude }) => { +export const Location: FC = ({ 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 index 1e34b5048..7d8b1252b 100644 --- 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 = ({ setValue, startTime, latitude, longitude }) => { +export const SourceUrl: FC = ({ setValue, startTime }) => { const [enableTimestamps, setEnableTimestamps] = useState(false) const handleTimestamps = () => { @@ -136,7 +134,7 @@ export const SourceUrl: FC = ({ setValue, startTime, latitude, longitude )} - + ) diff --git a/src/components/AddNodeModal/TweetId/index.tsx b/src/components/AddNodeModal/TweetId/index.tsx index a73177d4a..a79abe84b 100644 --- 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 = ({ setValue, latitude, longitude }) => ( +export const TwitId: FC = ({ setValue }) => ( = ({ setValue, latitude, longitude }) => ( }} /> - + ) diff --git a/src/components/AddNodeModal/index.tsx b/src/components/AddNodeModal/index.tsx index af7d165d5..4d8e09da9 100644 --- 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 && (
- - + + - {activeType && ( - setActiveType('')}> - - - )} - Add {addNodeModalData} - - - -
{resolveInfoMessage}
-
-
- - { - if (e.key === 'Enter' || e.key === 'Space') { - handleClose() - } - }} - role="button" - tabIndex={0} - > - - -
- - {!activeType ? ( - - - What do you want to add? - - - { - setActiveType(values.length ? (values[0] as Option).value : '') - }} - options={options} - placeholder={`Select ${addNodeModalData} type`} - searchable={false} - values={selectedValue} - /> - - - ) : ( - <> - - + + {activeType && ( + setActiveType('')}> + + + )} + Add {addNodeModalData} + + + +
{resolveInfoMessage}
+
- - - Your pubkey will be submitted with your input, so you can receive sats that your content earns. - - - - - {isSubmitting ? ( - - - - ) : ( - - )} - - - )} + { + if (e.key === 'Enter' || e.key === 'Space') { + handleClose() + } + }} + role="button" + tabIndex={0} + > + + +
+ {!activeType ? ( + + + What do you want to add? + + + { + setActiveType(values.length ? (values[0] as Option).value : '') + }} + options={options} + placeholder={`Select ${addNodeModalData} type`} + searchable={false} + values={selectedValue} + /> + + + ) : ( + <> + + + + + + + Your pubkey will be submitted with your input, so you can receive sats that your content earns. + + + + + {isSubmitting ? ( + + + + ) : ( + + )} + + + )} +
@@ -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 index 22c73f6b9..c7064d6f3 100644 --- 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>([]) + 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) => {
Trending Topics - + {loading ? : }
    - {TRENDING_TOPICS.map((i) => ( - selectTrending(i)}> - #{i} - - ))} + {loading ? ( + <> + + + + + + + ) : ( + <> + {trendingTopics.map((i) => ( + selectTrending(i)}> + #{i} + + ))} + + )}
) @@ -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 index 72ce533e6..522528844 100644 --- 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,6 +98,14 @@ const fetchNodes = async (search: string) => { }) } +export const getTrends = async () => { + const endpoint = `/get_trends` + + const response = await api.get(endpoint) + + return response +} + /** * * { @@ -96,6 +113,7 @@ const fetchNodes = async (search: string) => { * topic: string // search topic * } */ + export const getSentimentData = async (args?: { topic: string; cutoff_date: string }) => { const search = args && new URLSearchParams(args) diff --git a/src/types/index.ts b/src/types/index.ts index 40cc8014a..3e5e74d0c 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -7,6 +7,8 @@ export type FetchDataResponse = { related: Node[] } +export type FetchTrendingResponse = Trending[] + export type FetchSentimentResponse = { data: Sentiment[] } @@ -127,6 +129,11 @@ export type Sentiment = { sentiment_score: number } +export type Trending = { + count: number + topic: string +} + export type Sources = { source_type: string source: string