diff --git a/src/components/AddNodeModal/Location/index.tsx b/src/components/AddNodeModal/Location/index.tsx new file mode 100644 index 000000000..03a1ff0eb --- /dev/null +++ b/src/components/AddNodeModal/Location/index.tsx @@ -0,0 +1,116 @@ +import { FC, useState } from 'react' +import { FaCheck } from 'react-icons/fa' +import { Flex } from '~/components/common/Flex' +import { colors } from '~/utils/colors' +import { requiredRule } from '..' +import { CheckBoxWrapper } from '../SourceUrl' +import { TextInput } from '../TextInput' + +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 }) => { + const [enableLocation, setEnableLocation] = useState(false) + + console.log(latitude) + console.log(longitude) + + const showLocation = () => { + if (setValue) { + setValue('withLocation', !enableLocation) + } + + setEnableLocation(!enableLocation) + } + + const validateLatitude = (valueString: string) => { + const value = Number(valueString) + + if (value < -90 || value > 90) { + return 'Latitude must be between -90 and 90.' + } + + if (!value && value !== 0) { + return 'Latitude is required.' + } + + return true + } + + const validateLongitude = (value: number) => { + if (value < -180 || value > 180) { + return 'Longitude must be between -180 and 180.' + } + + if (!value && value !== 0) { + return 'Longitude is required.' + } + + return true + } + + return ( + <> + + + Add location + + + + + {enableLocation && ( + <> + + + + + + + + + + + )} + + ) +} diff --git a/src/components/AddNodeModal/SourceUrl/index.tsx b/src/components/AddNodeModal/SourceUrl/index.tsx index 6a233df3e..1e34b5048 100644 --- a/src/components/AddNodeModal/SourceUrl/index.tsx +++ b/src/components/AddNodeModal/SourceUrl/index.tsx @@ -3,6 +3,7 @@ import { FaCheck } from 'react-icons/fa' import styled from 'styled-components' import { Flex } from '~/components/common/Flex' import { colors } from '~/utils/colors' +import { Location } from '../Location' import { TagInput } from '../TagInput' import { TextArea } from '../TextArea' import { TextInput } from '../TextInput' @@ -10,6 +11,8 @@ import { requiredRule } from '../index' type Props = { startTime?: string + latitude?: string + longitude?: string setValue?: (field: string, value: boolean) => void } @@ -25,7 +28,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 }) => { +export const SourceUrl: FC = ({ setValue, startTime, latitude, longitude }) => { const [enableTimestamps, setEnableTimestamps] = useState(false) const handleTimestamps = () => { @@ -132,12 +135,14 @@ export const SourceUrl: FC = ({ setValue, startTime }) => { )} + + ) } -const CheckBoxWrapper = styled.div` +export const CheckBoxWrapper = styled.div` color: ${colors.lightGray}; font-size: 14px; font-weight: 600; diff --git a/src/components/AddNodeModal/TweetId/index.tsx b/src/components/AddNodeModal/TweetId/index.tsx index aefbe0858..a73177d4a 100644 --- a/src/components/AddNodeModal/TweetId/index.tsx +++ b/src/components/AddNodeModal/TweetId/index.tsx @@ -1,8 +1,16 @@ +import { FC } from 'react' import { Flex } from '~/components/common/Flex' +import { Location } from '../Location' import { TextInput } from '../TextInput' import { requiredRule } from '../index' -export const TwitId = () => ( +type Props = { + latitude?: string + longitude?: string + setValue?: (field: string, value: boolean) => void +} + +export const TwitId: FC = ({ setValue, latitude, longitude }) => ( ( ...requiredRule, }} /> + + ) diff --git a/src/components/AddNodeModal/index.tsx b/src/components/AddNodeModal/index.tsx index a38a93368..af7d165d5 100644 --- a/src/components/AddNodeModal/index.tsx +++ b/src/components/AddNodeModal/index.tsx @@ -8,9 +8,9 @@ import { toast } from 'react-toastify' import * as sphinx from 'sphinx-bridge-kevkevinpal' import styled from 'styled-components' import { Button } from '~/components/Button' +import { BaseModal } from '~/components/Modal' import { Flex } from '~/components/common/Flex' import { Text } from '~/components/common/Text' -import { BaseModal } from '~/components/Modal' import { DOCUMENT, GITHUB_REPOSITORY, @@ -33,8 +33,8 @@ import { getLSat } from '~/utils/getLSat' import { executeIfProd } from '~/utils/tests' import { timeToMilliseconds } from '~/utils/timeToMilliseconds' import { useDataStore } from '../../stores/useDataStore/index' -import { ToastMessage } from '../common/Toast/toastMessage' import StyledSelect from '../Select' +import { ToastMessage } from '../common/Toast/toastMessage' import { Document } from './Document' import { GithubRepository } from './GithubRepository' import { RSSFeed } from './RSSFeed' @@ -95,6 +95,9 @@ const handleSubmit = async (data: FieldValues, close: () => void, sourceType: st }, ], } + } else if (data.withLocation) { + body.latitude = data.latitude + body.longitude = data.longitude } else { body.content_type === 'audio_video' } @@ -120,6 +123,11 @@ const handleSubmit = async (data: FieldValues, close: () => void, sourceType: st return } + if (data.withLocation) { + body.latitude = data.latitude + body.longitude = data.longitude + } + body.content_type = 'tweet' } else if (sourceType === WEB_PAGE) { body.content_type = 'webpage' @@ -296,9 +304,11 @@ 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 } + const formProps = { setValue, startTime, longitude, latitude } return ( resolvedContentOptions && ( @@ -338,7 +348,7 @@ export const AddNodeModal = () => { {!activeType ? ( { const twitId: string = selectedNode?.tweet_id || '' + const openLinkInNewWindow = () => { + // Replace 'linkUrl' with the URL you want to open in a new window + const linkUrl = 'https://example.com' + + // Use window.open() to open the link in a new window + window.open(linkUrl, '_blank') + } + return ( selectedNode && ( @@ -16,19 +25,24 @@ export const TwitData = () => { {selectedNode?.label} {twitId && ( - - - - Profile - + <> + + + + Profile + - - {selectedNode.name} - {selectedNode.twitter_handle || '@unknown_handle'} - + + {selectedNode.name} + {selectedNode.twitter_handle || '@unknown_handle'} + + + {selectedNode.text} + + + - {selectedNode.text} - + )} )