Skip to content

Commit

Permalink
fix: formatting of URL, closes #1256
Browse files Browse the repository at this point in the history
  • Loading branch information
thisislawatts committed Nov 10, 2021
1 parent 3ced957 commit 7b03e88
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 25 deletions.
29 changes: 4 additions & 25 deletions src/pages/Settings/content/formSections/Fields/Link.field.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component } from 'react';
import { Component } from 'react'
import { COM_TYPE_MOCKS } from 'src/mocks/Selectors'
import { Field } from 'react-final-form'
import { InputField } from 'src/components/Form/Fields'
Expand All @@ -7,12 +7,8 @@ import { Modal } from 'src/components/Modal/Modal'
import Text from 'src/components/Text'
import Flex from 'src/components/Flex'
import { SelectField } from 'src/components/Form/Select.field'
import {
validateUrl,
validateEmail,
required,
ensureExternalUrl,
} from 'src/utils/validators'
import { validateUrl, validateEmail, required } from 'src/utils/validators'
import { formatLink } from 'src/utils/formatters'

interface IProps {
name: string
Expand Down Expand Up @@ -44,23 +40,6 @@ export class ProfileLinkField extends Component<IProps, IState> {
this.toggleDeleteModal()
this.props.onDelete()
}
// TODO - we might want to add more formatting for cases where,
// e.g. only a username is given for a bazar link
public formatLink(link: string) {
link = link && link.toLowerCase()
switch (this.state.linkType) {
case 'forum':
return ensureExternalUrl(link)
case 'website':
return ensureExternalUrl(link)
case 'social media':
return ensureExternalUrl(link)
case 'bazar':
return ensureExternalUrl(link)
default:
return link
}
}

public validateDependingOnType(e) {
switch (this.state.linkType) {
Expand Down Expand Up @@ -119,7 +98,7 @@ export class ProfileLinkField extends Component<IProps, IState> {
validateFields={[]}
component={InputField}
placeholder="Link"
format={v => this.formatLink(v)}
format={v => formatLink(v, this.state.linkType)}
formatOnBlur={true}
/>
<DeleteButton
Expand Down
19 changes: 19 additions & 0 deletions src/utils/formatters.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { formatLink } from './formatters'

describe('formatLink', () => {
it('preserves casing of original string', () => {
expect(formatLink('ABC')).toBe('ABC')
})

describe.each([
['forum', 'https://example.com'],
['website', 'https://example.com'],
['social media', 'https://example.com'],
['bazar', 'https://example.com'],
[undefined, 'example.com'],
])('adds protocal to an external link', (scene, expectation) => {
it(`${scene}`, () => {
expect(formatLink('example.com', scene)).toBe(expectation)
})
})
})
13 changes: 13 additions & 0 deletions src/utils/formatters.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { ensureExternalUrl } from './validators'

// TODO - we might want to add more formatting for cases where,
// e.g. only a username is given for a bazar link
export function formatLink(unformattedLinkString: string, linkType?: string) {
const link = unformattedLinkString

if (['forum', 'website', 'social media', 'bazar'].includes(linkType || '')) {
return ensureExternalUrl(link)
}

return link
}

0 comments on commit 7b03e88

Please sign in to comment.