Skip to content

Commit 2aaf84a

Browse files
dvidsilvadvidsilva
authored
Merge pull request #125 from corgicode/feature/103-valid-url
Closes #103 - Creates utilities to verify valid urls on dynamic inputs
2 parents 2a77129 + 46d9fe1 commit 2aaf84a

File tree

5 files changed

+55
-17
lines changed

5 files changed

+55
-17
lines changed

‎src/components/challenges/single.js

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import Tags from '../misc/tags';
66
import Moment from '../misc/moment';
77
import ReactMarkdown from 'react-markdown';
88
import { Link } from 'react-router-dom';
9+
import { ensureUrl } from '../../constants/utils';
10+
import linkRenderer from '../misc/linkRenderer';
911

1012
class SingleChallenge extends Component {
1113
static propTypes = {
@@ -67,7 +69,7 @@ class SingleChallenge extends Component {
6769
<div className="grey-box">
6870
<h2>Description</h2>
6971
<div className="description">
70-
<ReactMarkdown source={ challenge.body.description } />
72+
<ReactMarkdown source={ challenge.body.description } renderers={{ link: linkRenderer }} />
7173
</div>
7274
<a className="anchor" id="attachments" />
7375
<h2>Attachments</h2>
@@ -76,13 +78,14 @@ class SingleChallenge extends Component {
7678
{challenge.body.attachments.map((a, key) => (
7779
<li key={ key }>
7880
<i className="icon-install" />
79-
<a href="{{url}}" title="{{name}}" target="_blank">
80-
{{name}}
81+
<a href={ ensureUrl(a.url) } title={ a.name } target="_blank">
82+
{ a.name }
8183
</a>
8284
</li>
8385
))}
8486
{(!challenge.body.attachments || challenge.body.attachments.length < 1 ) &&
85-
<li>This challenge does not have any attachments.</li>}
87+
<li>This challenge does not have any attachments.</li>
88+
}
8689
</ul>
8790
</div>
8891
</div>
@@ -95,7 +98,7 @@ class SingleChallenge extends Component {
9598
<div className="extra-points">
9699
<a className="anchor" id="extra-points" />
97100
{challenge.body.extra_points &&
98-
<ReactMarkdown source={challenge.body.extra_points} />
101+
<ReactMarkdown source={challenge.body.extra_points} renderers={{ link: linkRenderer }} />
99102
}
100103
{!challenge.body.extra_points &&
101104
<p>The requirements are complete as is.</p>
@@ -104,7 +107,7 @@ class SingleChallenge extends Component {
104107
<a className="anchor" id="technical" />
105108
<h2>Technical Notes</h2>
106109
<div className="technical-notes">
107-
<ReactMarkdown source={challenge.technical_notes} />
110+
<ReactMarkdown source={challenge.technical_notes} renderers={{ link: linkRenderer }} />
108111
<p>When you're done, push to your repo and submit your answer.</p>
109112
</div>
110113
<a className="anchor" id="source" />
@@ -113,31 +116,31 @@ class SingleChallenge extends Component {
113116
{challenge.source.map((s, key) => (
114117
<p key={ key }>
115118
<strong>{s.name}:&nbsp;</strong>
116-
<a href={s.url}>{ s.url }</a>
119+
<a href={ ensureUrl(s.url)} title={ `${challenge.title} - ${s.name}`} target="_blank">{ s.url }</a>
117120
</p>
118121
))}
119122
</div>
120123
<a className="anchor" id="procedure" />
121124
<h2>Procedure:</h2>
122125
<div className="procedure">
123-
<ReactMarkdown source={ challenge.procedure } />
126+
<ReactMarkdown source={ challenge.procedure } renderers={{ link: linkRenderer }} />
124127
<p>Look at our <Link to="/learning">help</Link> section for more information about this.</p>
125128
</div>
126129
<a className="anchor" id="coding" />
127130
<h2>Coding</h2>
128131
<div className="coding">
129-
{challenge.coding && <ReactMarkdown source={ challenge.coding } />}
132+
{challenge.coding && <ReactMarkdown source={ challenge.coding } renderers={{ link: linkRenderer }} />}
130133
{!challenge.coding &&
131134
<div>
132135
<p>To create your answer follow this steps:</p>
133136
<ol>
134-
<li><a href="https://help.github.com/articles/fork-a-repo/">Fork</a>
137+
<li><a href="https://help.github.com/articles/fork-a-repo/" target="_blank">Fork</a>
135138
the repo to your account, or download the zip file</li>
136139
<li>Solve the ticket</li>
137140
<li>Commit your code</li>
138141
<li>Push your changes</li>
139-
<li>Publish your version in <a href="https://pages.github.com/">Github Pages</a> or
140-
<a href="https://firebase.google.com/docs/hosting/">Firebase Hosting</a></li>
142+
<li>Publish your version in <a href="https://pages.github.com/" target="_blank">Github Pages</a> or
143+
<a href="https://firebase.google.com/docs/hosting/" target="_blank">Firebase Hosting</a></li>
141144
<li>Submit your response</li>
142145
</ol>
143146
</div>

‎src/components/misc/linkRenderer.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
3+
import { ensureUrl } from '../../constants/utils';
4+
5+
class linkRenderer extends Component {
6+
static propTypes = {
7+
href: PropTypes.string,
8+
children: PropTypes.oneOfType([
9+
PropTypes.node,
10+
PropTypes.arrayOf(PropTypes.node),
11+
]),
12+
}
13+
14+
render() {
15+
const url = ensureUrl(this.props.href);
16+
return(
17+
<a href={ url } target={ url.startsWith('/') ? '' : '_blank' }>
18+
{ this.props.children }
19+
</a>
20+
);
21+
}
22+
}
23+
24+
export default linkRenderer;

‎src/components/profile/index.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import { PROD_URL, BACKEND_URL } from '../../constants';
99
import ReactMarkdown from 'react-markdown';
1010
import SubmitList from '../submit/list';
1111
import _get from 'lodash/get';
12+
import linkRenderer from '../misc/linkRenderer';
13+
import { ensureUrl } from '../../constants/utils';
1214

1315
class ProfileComponent extends React.Component {
1416
static propTypes = {
@@ -56,7 +58,7 @@ class ProfileComponent extends React.Component {
5658
<section className="container profile-body" style={{ margin: '30px auto' }}>
5759
<div className="row">
5860
<div className="col-xs-12">
59-
<ReactMarkdown source={ _get(profile, 'profile.bio', '') } />
61+
<ReactMarkdown source={ _get(profile, 'profile.bio', '') } renderers={{ link: linkRenderer }} />
6062
</div>
6163
</div>
6264
{submits && submits.length > 0 &&
@@ -73,7 +75,7 @@ class ProfileComponent extends React.Component {
7375
<div className="col-xs-12">
7476
{profile.projects.map((p, index) => (
7577
<div className="project" key={ index }>
76-
<p><Link to={p.url} target="_blank">{ p.name }</Link></p>
78+
<p><Link to={ ensureUrl(p.url) } target="_blank">{ p.name }</Link></p>
7779
<p>{ p.description }</p>
7880
</div>
7981
))}

‎src/components/submit/single.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import ReactMarkdown from 'react-markdown';
33
import TintedHeader from '../../components/misc/TintedHeader';
44
import { SubmitType, ShortUserType, ChallengeType } from '../../types';
55
import { Link } from 'react-router-dom';
6+
import linkRenderer from '../misc/linkRenderer';
67

78
class SubmitDetails extends Component {
89
static propTypes = {
@@ -22,11 +23,11 @@ class SubmitDetails extends Component {
2223
{submission.repo && <p><strong>Repo</strong> : <Link to={ submission.repo }>{submission.repo}</Link></p>}
2324
{submission.demo && <p><strong>Demo URL</strong>: <Link to={ submission.demo }>{submission.demo}</Link></p>}
2425
<p><strong>Description</strong></p>
25-
<ReactMarkdown source={ submission.description } />
26+
<ReactMarkdown source={ submission.description } renderers={{ link: linkRenderer }} />
2627
<p><strong>Advantage</strong></p>
27-
<ReactMarkdown source={ submission.advantage } />
28+
<ReactMarkdown source={ submission.advantage } renderers={{ link: linkRenderer }}/>
2829
<p><strong>Struggle</strong></p>
29-
<ReactMarkdown source={ submission.struggle } />
30+
<ReactMarkdown source={ submission.struggle } renderers={{ link: linkRenderer }}/>
3031
</div>
3132
<div className="container">
3233
<h3>Comments</h3>

‎src/constants/utils.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,9 @@
11
export const noop = () => {};
2+
3+
export const ensureUrl = (uri) => {
4+
if (!uri || typeof uri !== 'string') return '';
5+
const url = uri.trim();
6+
if (url.startsWith === '/') return url;
7+
if (url.match(/^http(s)?:\/\//) !== null) return url;
8+
return 'http://' + url;
9+
};

0 commit comments

Comments
 (0)