Skip to content

Commit c2bc0ae

Browse files
authored
Merge pull request #23 from xsnippet/snippet
Make Snippet work
2 parents e81a209 + 927465a commit c2bc0ae

File tree

10 files changed

+81
-15
lines changed

10 files changed

+81
-15
lines changed

src/actions/index.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,14 @@ export const fetchRecentSnippets = dispatch => (
88
.then(response => response.json())
99
.then(json => dispatch(setRecentSnippets(json)))
1010
);
11+
12+
export const setSnippet = snippet => ({
13+
type: 'SET_SNIPPET',
14+
snippet,
15+
});
16+
17+
export const fetchSnippet = id => dispatch => (
18+
fetch(`http://api.xsnippet.org/snippets/${id}`)
19+
.then(response => response.json())
20+
.then(json => dispatch(setSnippet(json)))
21+
);

src/assets/ripple.svg

Lines changed: 10 additions & 0 deletions
Loading

src/components/Snippet.jsx

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,50 @@
1-
import React, { Component } from 'react';
1+
import React from 'react';
2+
import { connect } from 'react-redux';
23
import { Controlled as CodeMirror } from 'react-codemirror2';
34

45
import 'codemirror/lib/codemirror.css';
56

67
import Title from './common/Title';
78
import Input from './common/Input';
9+
import Spinner from './common/Spinner';
10+
import * as actions from '../actions';
811

912
import '../styles/Snippet.styl';
1013

11-
class Snippet extends Component {
12-
constructor() {
13-
super();
14+
class Snippet extends React.Component {
15+
constructor(props) {
16+
super(props);
1417
this.state = { isShowEmbed: false };
1518
this.toggleEmbed = this.toggleEmbed.bind(this);
1619
}
1720

21+
componentDidMount() {
22+
const { dispatch } = this.props;
23+
const { id } = this.props.match.params;
24+
25+
dispatch(actions.fetchSnippet(Number(id)));
26+
}
27+
1828
toggleEmbed() {
19-
this.setState({ isShowEmbed: !this.state.isShowEmbed });
29+
this.setState(prevState => ({ isShowEmbed: !prevState.isShowEmbed }));
2030
}
2131

2232
render() {
33+
const { snippet } = this.props;
34+
35+
if (!snippet) return <Spinner />;
36+
37+
const snippetTitle = snippet.get('title') ? snippet.get('title') : `#${snippet.get('id')}, Untitled`;
38+
2339
return (
2440
[
25-
<Title title="Snippet" key="snippet" />,
26-
<div className="snippet">
41+
<Title title="Snippet" key="Snippet title" />,
42+
<div className="snippet" key="Snippet">
2743
<div className="snippet-header">
2844
<div className="snippet-data">
2945
<div>
30-
<span className="snippet-data-title">#235435, Untitled</span>
31-
<span className="snippet-data-lang">[ Java ]</span>
46+
<span className="snippet-data-title">{snippetTitle}</span>
47+
<span className="snippet-data-lang">[ {snippet.get('syntax', 'Text')} ]</span>
3248
</div>
3349
<span className="snippet-data-author">By Guest</span>
3450
</div>
@@ -46,11 +62,11 @@ class Snippet extends Component {
4662
In order to embed this content into your website or blog,
4763
simply copy and paste code provided below:
4864
</p>
49-
<Input value="<script src='http://xsnippet.org/363686/embed/'></script>" />
65+
<Input value={`<script src='http://xsnippet.org/${snippet.get('id')}/embed/'></script>`} />
5066
</div>
5167
<div className="snippet-code">
5268
<CodeMirror
53-
value="console.log('All hail XSnippet')"
69+
value={`${snippet.get('content')}`}
5470
options={{ lineNumbers: true, readOnly: 'nocursor' }}
5571
/>
5672
<div className="snippet-code-bottom-bar">
@@ -64,4 +80,6 @@ class Snippet extends Component {
6480
}
6581
}
6682

67-
export default Snippet;
83+
export default connect((state, ownProps) => ({
84+
snippet: state.snippets.get(Number(ownProps.match.params.id)),
85+
}))(Snippet);

src/components/common/Spinner.jsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
import SpinnerImg from '../../assets/ripple.svg';
3+
4+
import '../../styles/common/Spinner.styl';
5+
6+
const Spinner = () => (
7+
<div className="spinner">
8+
<img src={SpinnerImg} alt="Loading..." />
9+
</div>
10+
);
11+
12+
export default Spinner;

src/reducers/index.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1-
import { List, Map } from 'immutable';
1+
import { List, Map, fromJS } from 'immutable';
22
import { combineReducers } from 'redux';
33

44
const snippets = (state = Map(), action) => {
55
switch (action.type) {
66
case 'SET_RECENT_SNIPPETS':
77
return state.merge(action.snippets.map(snippet => [snippet.id, snippet]));
88

9+
case 'SET_SNIPPET':
10+
return state.set(action.snippet.id, fromJS(action.snippet));
11+
912
default:
1013
return state;
1114
}

src/styles/Header.styl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
justify-content: flex-start
1212
align-items: center
1313
height: offset
14-
z-index: 2
14+
z-index: 5
1515
box-shadow: 0 2px 2px 0 border-dark
1616
&-inner
1717
display: flex

src/styles/Main.styl

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@
66
min-height: 100%
77
margin-top: offset
88
margin-left: offset
9+
overflow-y: auto
910
background-color: site-bg
1011
font-family: font-quicksand

src/styles/Snippet.styl

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
.snippet
44
display: flex
55
flex-flow: column nowrap
6-
height: 75vh
76
background-color: snippet-content-light
87
box-shadow: 0 2px 2px 0 border-dark
98
&-header
@@ -18,6 +17,8 @@
1817
padding: 15px 20px
1918

2019
&-data
20+
& > div
21+
display: flex
2122
&-title
2223
font-size: 20px
2324
margin-right: 20px
@@ -68,6 +69,7 @@
6869
text-align: right
6970
padding: 10px 20px
7071
border-top: 1px solid border-light
72+
background-color: snippet-content-light
7173
&-button
7274
color: text-light
7375
border: none

src/styles/common/Spinner.styl

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.spinner
2+
display: flex
3+
height: 100%
4+
justify-content: center
5+
& > img
6+
width: 30%

src/styles/common/overwrite.styl

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,6 @@
1515

1616
.CodeMirror-gutters
1717
border-right: none
18+
19+
.CodeMirror-line
20+
padding-left: 20px !important

0 commit comments

Comments
 (0)