diff --git a/package.json b/package.json index adb410dbf..893f91fa5 100644 --- a/package.json +++ b/package.json @@ -95,15 +95,15 @@ "collectCoverageFrom": ["./src/**/*.js", "./src/**/*.ts"], "coverageThreshold": { "global": { - "lines": 0 + "lines": 2 }, "./src/components/**/utils/**.ts": { "lines": 100 }, "./src/utils/": { - "lines": 23, - "branches": 29, - "functions": 33 + "lines": 27, + "branches": 37, + "functions": 36 } }, "moduleNameMapper": { diff --git a/src/components/AddContentModal/index.tsx b/src/components/AddContentModal/index.tsx index 4c58581d8..b4fec1893 100644 --- a/src/components/AddContentModal/index.tsx +++ b/src/components/AddContentModal/index.tsx @@ -1,8 +1,6 @@ import { Lsat } from 'lsat-js' import { useEffect, useState } from 'react' import { FieldValues, FormProvider, useForm } from 'react-hook-form' -import { MdCheckCircle, MdWarning } from 'react-icons/md' -import { toast } from 'react-toastify' import * as sphinx from 'sphinx-bridge-kevkevinpal' import { BaseModal } from '~/components/Modal' import { DOCUMENT, LINK, NODE_ADD_ERROR, NODE_ADD_SUCCESS, TWITTER_SOURCE, WEB_PAGE } from '~/constants' @@ -10,8 +8,8 @@ import { api } from '~/network/api' import { useModal } from '~/stores/useModalStore' import { useUserStore } from '~/stores/useUserStore' import { SubmitErrRes } from '~/types' -import { colors, getLSat, payLsat, updateBudget, executeIfProd } from '~/utils' -import { ToastMessage } from '../common/Toast/toastMessage' +import { getLSat, payLsat, updateBudget, executeIfProd } from '~/utils' +import { notify } from '~/components/common/Toast/toastMessage' import { BudgetStep } from './BudgetStep' import { LocationStep } from './LocationStep' import { SourceStep } from './SourceStep' @@ -25,19 +23,6 @@ export type FormData = { latitude: string } -const notify = (message: string) => { - toast(, { - icon: - message === NODE_ADD_SUCCESS ? ( - - ) : ( - - ), - position: toast.POSITION.BOTTOM_CENTER, - type: message === NODE_ADD_SUCCESS ? 'success' : 'error', - }) -} - const handleSubmitForm = async ( data: FieldValues, close: () => void, diff --git a/src/components/AddSourceModal/index.tsx b/src/components/AddSourceModal/index.tsx index 0ac7c770a..677ddaf4e 100644 --- a/src/components/AddSourceModal/index.tsx +++ b/src/components/AddSourceModal/index.tsx @@ -1,37 +1,18 @@ import { Lsat } from 'lsat-js' import { useEffect, useState } from 'react' import { FieldValues, FormProvider, useForm } from 'react-hook-form' -import { MdCheckCircle, MdWarning } from 'react-icons/md' -import { toast } from 'react-toastify' import * as sphinx from 'sphinx-bridge-kevkevinpal' import { BaseModal } from '~/components/Modal' -import { - DOCUMENT, - GITHUB_REPOSITORY, - NODE_ADD_ERROR, - NODE_ADD_SUCCESS, - RSS, - TOPIC, - TWITTER_HANDLE, - YOUTUBE_CHANNEL, -} from '~/constants' +import { NODE_ADD_ERROR, NODE_ADD_SUCCESS, TWITTER_HANDLE } from '~/constants' import { api } from '~/network/api' import { useModal } from '~/stores/useModalStore' import { useUserStore } from '~/stores/useUserStore' import { SubmitErrRes } from '~/types' -import { colors } from '~/utils/colors' -import { getLSat } from '~/utils/getLSat' -import { payLsat } from '~/utils/payLsat' -import { updateBudget } from '~/utils/setBudget' -import { executeIfProd } from '~/utils/tests' -import { ToastMessage } from '../common/Toast/toastMessage' +import { getLSat, payLsat, updateBudget, executeIfProd } from '~/utils' +import { notify } from '~/components/common/Toast/toastMessage' import { BudgetStep } from './BudgetStep' import { SourceStep } from './SourceStep' - -const twitterHandlePattern = /@(\w+)/g -const youtubeChannelPattern = /https?:\/\/(www\.)?youtube\.com\/(@)?([\w-]+)/i -const githubRepoPattern = /https?:\/\/github\.com\/([\w-]+)\/([\w-]+)/i -const genericUrlRegex = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/ +import { getInputType } from './utils' export type FormData = { input: string @@ -39,19 +20,6 @@ export type FormData = { source: string } -const notify = (message: string) => { - toast(, { - icon: - message === NODE_ADD_SUCCESS ? ( - - ) : ( - - ), - position: toast.POSITION.BOTTOM_CENTER, - type: message === NODE_ADD_SUCCESS ? 'success' : 'error', - }) -} - const handleSubmitForm = async ( data: FieldValues, close: () => void, @@ -135,21 +103,7 @@ export const AddSourceModal = () => { const source = watch('source') useEffect(() => { - let inputType = DOCUMENT - - if (youtubeChannelPattern.test(source)) { - inputType = YOUTUBE_CHANNEL - } else if (twitterHandlePattern.test(source)) { - inputType = TWITTER_HANDLE - } else if (githubRepoPattern.test(source)) { - inputType = GITHUB_REPOSITORY - } else if (genericUrlRegex.test(source)) { - inputType = RSS - } else { - inputType = TOPIC - } - - setValue('inputType', inputType) + setValue('inputType', getInputType(source)) }, [source, setValue]) const handleClose = () => { diff --git a/src/components/AddSourceModal/utils/__tests__/index.ts b/src/components/AddSourceModal/utils/__tests__/index.ts new file mode 100644 index 000000000..97a50e131 --- /dev/null +++ b/src/components/AddSourceModal/utils/__tests__/index.ts @@ -0,0 +1,36 @@ +import { getInputType } from '..' +import { YOUTUBE_CHANNEL, RSS, TWITTER_HANDLE, GITHUB_REPOSITORY, TOPIC } from '~/constants' + +describe('youtubeRegex', () => { + it('should assert we can check for youtube clip regex', async () => { + expect(getInputType('https://www.youtube.com/watch?v=83eQ9flwVS0&ab_channel=EthanChlebowski')).toBe(YOUTUBE_CHANNEL) + }) + + it('should assert we can check for twitter spaces regex', async () => { + expect(getInputType('https://twitter.com/i/spaces/1zqKVqwrVzlxB?s=20')).toBe(RSS) + }) + + it('should assert we can check for twitter tweet regex', async () => { + expect(getInputType('https://twitter.com/LarryRuane/status/1720496960489095668')).toBe(RSS) + }) + + it('should assert we can check for mp3 url regex', async () => { + expect(getInputType('https://hahaha.com/i/spaces/1zqKVqwrVzlxB?s=20.mp3')).toBe(RSS) + }) + + it('should assert we can check for generic url regex', async () => { + expect(getInputType('https://idkwhat.com/routeing/tou')).toBe(RSS) + }) + + it('should assert we can check for twitter handle regex', async () => { + expect(getInputType('https://twitter.com/@KevKevPal')).toBe(TWITTER_HANDLE) + }) + + it('should assert we can check for github repo regex', async () => { + expect(getInputType('https://github.com/stakwork/sphinx-relay')).toBe(GITHUB_REPOSITORY) + }) + + it('should assert we can check for topic regex', async () => { + expect(getInputType('Bitcoin')).toBe(TOPIC) + }) +}) diff --git a/src/components/AddSourceModal/utils/index.ts b/src/components/AddSourceModal/utils/index.ts new file mode 100644 index 000000000..cf78f965c --- /dev/null +++ b/src/components/AddSourceModal/utils/index.ts @@ -0,0 +1,24 @@ +import { DOCUMENT, YOUTUBE_CHANNEL, TWITTER_HANDLE, GITHUB_REPOSITORY, RSS, TOPIC } from '~/constants' + +const twitterHandlePattern = /@(\w+)/g +const youtubeChannelPattern = /https?:\/\/(www\.)?youtube\.com\/(@)?([\w-]+)/i +const githubRepoPattern = /https?:\/\/github\.com\/([\w-]+)\/([\w-]+)/i +const genericUrlRegex = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/ + +export function getInputType(source: string) { + let inputType = DOCUMENT + + if (youtubeChannelPattern.test(source)) { + inputType = YOUTUBE_CHANNEL + } else if (twitterHandlePattern.test(source)) { + inputType = TWITTER_HANDLE + } else if (githubRepoPattern.test(source)) { + inputType = GITHUB_REPOSITORY + } else if (genericUrlRegex.test(source)) { + inputType = RSS + } else { + inputType = TOPIC + } + + return inputType +} diff --git a/src/components/common/Toast/toastMessage.tsx b/src/components/common/Toast/toastMessage.tsx index 8a7b564f8..3853d65dc 100644 --- a/src/components/common/Toast/toastMessage.tsx +++ b/src/components/common/Toast/toastMessage.tsx @@ -2,7 +2,8 @@ import { toast, ToastContentProps } from 'react-toastify' import * as sphinx from 'sphinx-bridge-kevkevinpal' import styled from 'styled-components' import { Text } from '~/components/common/Text' -import { BOOST_ERROR_BUDGET } from '~/constants' +import { BOOST_ERROR_BUDGET, NODE_ADD_SUCCESS } from '~/constants' +import { MdCheckCircle, MdWarning } from 'react-icons/md' import { colors } from '~/utils/colors' type Props = ToastContentProps & { @@ -56,6 +57,19 @@ export const ToastMessage = ({ message }: Partial) => { return
{message}
} +export const notify = (message: string) => { + toast(, { + icon: + message === NODE_ADD_SUCCESS ? ( + + ) : ( + + ), + position: toast.POSITION.BOTTOM_CENTER, + type: message === NODE_ADD_SUCCESS ? 'success' : 'error', + }) +} + const ButtonWrapper = styled.button` background: ${colors.gray200}; border: 1px solid ${colors.white};