maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add sanitization to github on chat (#1834)

Browse source 
* add sanitization to github on chat

* formatting
This commit is contained in:
Ali Spittel 2019-02-20 13:08:46 -05:00 • committed by Ben Halpern
parent a6cc688a9b
commit 355d97a94d
2 changed files with 130 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

109
app/javascript/chat/content.jsx
View file

@ -12,60 +12,83 @@ export default class Content extends Component {
activeChannelId: PropTypes.number,
pusherKey: PropTypes.string,
};
render() {
console.log(this.props);
if (!this.props.resource) {
return ""
} else {
return '';
}
return (
<div
className="activechatchannel__activecontent" id="chat_activecontent"
className="activechatchannel__activecontent"
id="chat_activecontent"
onClick={this.props.onTriggerContent}
>
>
<button
class="activechatchannel__activecontentexitbutton"
className="activechatchannel__activecontentexitbutton"
data-content="exit"
>×</button>
{display(this.props)}
>
×
</button>
{display(this.props)}
</div>
);
}
}
}
function display(props) {
if (props.resource.type_of === "loading-user") {
return <div style={{height: "210px",
width: "210px",
margin:" 15px auto",
display: "block",
borderRadius: "500px",
backgroundColor: "#f5f6f7"}}></div>
} else if (props.resource.type_of === "loading-user") {
return <div style={{height: "25px",
width: "96%",
margin:" 8px auto",
display: "block",
backgroundColor: "#f5f6f7"}}></div>
} else if (props.resource.type_of === "user") {
return <UserDetails user={props.resource} />
} else if (props.resource.type_of === "article") {
return <Article resource={props.resource}/>
} else if (props.resource.type_of === "github") {
return <GithubRepo
activeChannelId={props.activeChannelId}
pusherKey={props.pusherKey}
githubToken={props.githubToken}
resource={props.resource}
/>
} else if (props.resource.type_of === "channel-details") {
return <ChannelDetails
channel={props.resource.channel}
activeChannelId={props.activeChannelId}
/>
} else if (props.resource.type_of === "code_editor") {
return <CodeEditor
activeChannelId={props.activeChannelId}
pusherKey={props.pusherKey}
/>
if (props.resource.type_of === 'loading-user') {
return (
<div
style={{
height: '210px',
width: '210px',
margin: ' 15px auto',
display: 'block',
borderRadius: '500px',
backgroundColor: '#f5f6f7',
}}
/>
);
} if (props.resource.type_of === 'loading-user') {
return (
<div
style={{
height: '25px',
width: '96%',
margin: ' 8px auto',
display: 'block',
backgroundColor: '#f5f6f7',
}}
/>
);
} if (props.resource.type_of === 'user') {
return <UserDetails user={props.resource} />;
} if (props.resource.type_of === 'article') {
return <Article resource={props.resource} />;
} if (props.resource.type_of === 'github') {
return (
<GithubRepo
activeChannelId={props.activeChannelId}
pusherKey={props.pusherKey}
githubToken={props.githubToken}
resource={props.resource}
/>
);
} if (props.resource.type_of === 'channel-details') {
return (
<ChannelDetails
channel={props.resource.channel}
activeChannelId={props.activeChannelId}
/>
);
} if (props.resource.type_of === 'code_editor') {
return (
<CodeEditor
activeChannelId={props.activeChannelId}
pusherKey={props.pusherKey}
/>
);
}
}
}

129
app/javascript/chat/githubRepo.jsx
View file

@ -22,14 +22,14 @@ export default class GithubRepo extends Component {
getJSONContents(
`https://api.github.com/repos/${
this.props.resource.args
}/contents?access_token=${ this.state.token}`,
}/contents?access_token=${this.state.token}`,
this.loadContent,
this.loadFailure,
);
getJSONContents(
`https://api.github.com/repos/${
this.props.resource.args
}/readme?access_token=${ this.state.token}`,
}/readme?access_token=${this.state.token}`,
this.loadContent,
this.loadFailure,
);
@ -40,7 +40,7 @@ export default class GithubRepo extends Component {
handleItemClick = e => {
e.preventDefault();
getJSONContents(
`${e.target.dataset.apiUrl}&access_token=${ this.state.token}`,
`${e.target.dataset.apiUrl}&access_token=${this.state.token}`,
this.loadContent,
this.loadFailure,
);
@ -102,7 +102,8 @@ export default class GithubRepo extends Component {
</p>
</div>
);
} if (this.state.content) {
}
if (this.state.content) {
return (
<div className="activecontent__githubrepo">
<div className="activecontent__githubrepoheader">
@ -111,68 +112,66 @@ export default class GithubRepo extends Component {
<pre>{this.state.content}</pre>
</div>
);
}
const directories = this.state.directories.map(item => (
<div className="activecontent__githubrepofilerow">
<a
href={item.html_url}
data-api-url={item.url}
data-path={item.path}
onClick={this.handleItemClick}
>
📁
{' '}
{item.name}
</a>
</div>
));
const files = this.state.files.map(item => (
<div className="activecontent__githubrepofilerow">
<a
href={item.html_url}
data-api-url={item.url}
data-path={item.path}
onClick={this.handleItemClick}
>
{item.name}
</a>
</div>
));
let readme = '';
if (this.state.readme) {
readme = (
<div
dangerouslySetInnerHTML={{ __html: marked(this.state.readme) }}
/>
);
}
if (this.state.root) {
return (
<div className="activecontent__githubrepo">
<div className="activecontent__githubrepoheader">
<a href="/Users/benhalpern/dev/dev.to_core/app" />
{this.state.path}
</div>
<div className="activecontent__githubrepofiles">
{directories}
{files}
</div>
{readme}
}
const directories = this.state.directories.map(item => (
<div className="activecontent__githubrepofilerow">
<a
href={item.html_url}
data-api-url={item.url}
data-path={item.path}
onClick={this.handleItemClick}
>
📁
{' '}
{item.name}
</a>
</div>
));
const files = this.state.files.map(item => (
<div className="activecontent__githubrepofilerow">
<a
href={item.html_url}
data-api-url={item.url}
data-path={item.path}
onClick={this.handleItemClick}
>
{item.name}
</a>
</div>
));
let readme = '';
if (this.state.readme) {
readme = (
<div
dangerouslySetInnerHTML={{
__html: marked(this.state.readme, { sanitize: true }),
}}
/>
);
}
if (this.state.root) {
return (
<div className="activecontent__githubrepo">
<div className="activecontent__githubrepoheader">
<a href="/Users/benhalpern/dev/dev.to_core/app" />
{this.state.path}
</div>
);
}
return (
<div className="activecontent__githubrepo">
<div className="activecontent__githubrepoheader">
{this.state.path}
</div>
<div className="activecontent__githubrepofiles">
{directories}
{files}
</div>
<div className="activecontent__githubrepofiles">
{directories}
{files}
</div>
);
{readme}
</div>
);
}
return (
<div className="activecontent__githubrepo">
<div className="activecontent__githubrepoheader">{this.state.path}</div>
<div className="activecontent__githubrepofiles">
{directories}
{files}
</div>
</div>
);
}
}