feat: add latitude longitude for add source modal (#424)

* feat: add latitude longitude for add source modal * feat: fix height * feat: update location for tweet and source --------- Co-authored-by: Расул <[email protected]>
stakwork · Sep 22, 2023 · 495b766 · 495b766
1 parent 05654e1
commit 495b766
Show file tree

Hide file tree

Showing 5 changed files with 173 additions and 18 deletions.
diff --git a/src/components/AddNodeModal/Location/index.tsx 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<Props> = ({ 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 (
+    <>
+      <Flex direction="row" pt={12}>
+        <CheckBoxWrapper>
+          Add location
+          <button className="checkbox" id="add-node-location-checkbox" onClick={showLocation} type="button">
+            {enableLocation && <FaCheck color={colors.lightBlue500} />}
+          </button>
+        </CheckBoxWrapper>
+      </Flex>
+
+      {enableLocation && (
+        <>
+          <Flex direction="row" pt={12}>
+            <Flex basis="50%" pr={16}>
+              <TextInput
+                id="add-node-latitude"
+                label="Latitude"
+                message="Enter latitude coordinates"
+                name="latitude"
+                placeholder="Enter latitude (-90 to 90)"
+                rules={{
+                  ...requiredRule,
+                  pattern: {
+                    message: 'Incorrect longitude format',
+                    value: latitudeReg,
+                  },
+                  validate: {
+                    latitude: validateLatitude,
+                  },
+                }}
+              />
+            </Flex>
+
+            <Flex basis="50%" pl={16}>
+              <TextInput
+                id="add-node-location-longitude"
+                label="Longitude"
+                message="Enter longitude coordinates"
+                name="longitude"
+                placeholder="Enter longitude (-180 to 180)"
+                rules={{
+                  ...requiredRule,
+                  pattern: {
+                    message: 'Incorrect longitude format',
+                    value: longitudeReg,
+                  },
+                  validate: {
+                    longitude: validateLongitude,
+                  },
+                }}
+              />
+            </Flex>
+          </Flex>
+        </>
+      )}
+    </>
+  )
+}
diff --git a/src/components/AddNodeModal/SourceUrl/index.tsx b/src/components/AddNodeModal/SourceUrl/index.tsx
@@ -3,13 +3,16 @@ 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'
 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<Props> = ({ setValue, startTime }) => {
+export const SourceUrl: FC<Props> = ({ setValue, startTime, latitude, longitude }) => {
   const [enableTimestamps, setEnableTimestamps] = useState(false)
 
   const handleTimestamps = () => {
@@ -132,12 +135,14 @@ export const SourceUrl: FC<Props> = ({ setValue, startTime }) => {
             </Flex>
           </>
         )}
+
+        <Location latitude={latitude} longitude={longitude} setValue={setValue} />
       </Flex>
     </>
   )
 }
 
-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
@@ -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<Props> = ({ setValue, latitude, longitude }) => (
   <Flex>
     <TextInput
       id="tweet-id"
@@ -14,5 +22,7 @@ export const TwitId = () => (
         ...requiredRule,
       }}
     />
+
+    <Location latitude={latitude} longitude={longitude} setValue={setValue} />
   </Flex>
 )
diff --git 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 ? (
               <Stack
-                alignItems={{ xs: 'stretch', sm: 'center' }}
+                alignItems={{ xs: 'stretch', sm: 'flex-start', minHeight: '160px' }}
                 component="div"
                 direction={{ xs: 'column', sm: 'row' }}
                 justifyContent="space-between"

diff --git a/src/components/App/SideBar/TwitData/index.tsx b/src/components/App/SideBar/TwitData/index.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@mui/material'
 import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
@@ -9,26 +10,39 @@ export const TwitData = () => {
 
   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 && (
       <Flex direction="column" px={24} py={16}>
         <Flex align="center" direction="row" justify="flex-start" p={10}>
           <Text color="primaryText1">{selectedNode?.label}</Text>
         </Flex>
         {twitId && (
-          <TweetContainer>
-            <Flex direction="row">
-              <ProfilePicture>
-                <img alt="Profile" src={selectedNode.profile_picture || 'twitter_placeholder.png'} />
-              </ProfilePicture>
+          <>
+            <TweetContainer>
+              <Flex direction="row">
+                <ProfilePicture>
+                  <img alt="Profile" src={selectedNode.profile_picture || 'twitter_placeholder.png'} />
+                </ProfilePicture>
 
-              <AuthorInfo>
-                <AuthorName>{selectedNode.name}</AuthorName>
-                <TwitterHandle>{selectedNode.twitter_handle || '@unknown_handle'}</TwitterHandle>
-              </AuthorInfo>
+                <AuthorInfo>
+                  <AuthorName>{selectedNode.name}</AuthorName>
+                  <TwitterHandle>{selectedNode.twitter_handle || '@unknown_handle'}</TwitterHandle>
+                </AuthorInfo>
+              </Flex>
+              <TweetText>{selectedNode.text}</TweetText>
+            </TweetContainer>
+            <Flex>
+              <Button onClick={openLinkInNewWindow}>View more</Button>
             </Flex>
-            <TweetText>{selectedNode.text}</TweetText>
-          </TweetContainer>
+          </>
         )}
       </Flex>
     )