Skip to content

Commit 4565c9a

Browse files
zoltantothcomzoltantothcom
committed
Style Patterns List and individual Pattern component
1 parent f69c4fc commit 4565c9a

7 files changed

Lines changed: 95 additions & 21 deletions

File tree

‎src/components/Code.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ const Code = props => {
1313
return (
1414
<Fragment>
1515
{js === 'es5' && (
16-
<SyntaxHighlighter language="javascript" style={style}>
16+
<SyntaxHighlighter language="javascript" style={style} className="fixed">
1717
{current.codeES5}
1818
</SyntaxHighlighter>
1919
)}
2020

2121
{js === 'es6' && (
22-
<SyntaxHighlighter language="javascript" style={style}>
22+
<SyntaxHighlighter language="javascript" style={style} className="fixed">
2323
{current.codeES6}
2424
</SyntaxHighlighter>
2525
)}

‎src/components/Header.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,12 +59,12 @@ const Header = props => {
5959
page: 'Game'
6060
},
6161
{
62-
path: '/about',
63-
page: 'About'
62+
path: '/patterns',
63+
page: 'Pattern Reference'
6464
},
6565
{
66-
path: '/patterns',
67-
page: 'Patterns'
66+
path: '/about',
67+
page: 'About'
6868
}
6969
];
7070

‎src/components/Pattern.jsx‎

Lines changed: 77 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,88 @@
11
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { connect } from 'react-redux';
24
import styled from 'styled-components';
35
import { Link } from 'react-router-dom';
6+
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
7+
import js from 'react-syntax-highlighter/dist/languages/hljs/javascript';
8+
import styleLight from '../styles/hljs/hljs.light';
9+
import styleDark from '../styles/hljs/hljs.dark';
10+
import { patterns } from '../static/patterns';
11+
import { getMode } from '../selectors';
412

5-
const StyledPattern = styled.div``;
13+
SyntaxHighlighter.registerLanguage('javascript', js);
14+
15+
const StyledPattern = styled.div`
16+
color: ${props => props.theme.text};
17+
18+
h2,
19+
h3 {
20+
color: ${props => props.theme.header};
21+
margin-top: 2.5rem;
22+
}
23+
`;
24+
25+
const Memo = styled.span`
26+
color: ${props => props.theme.ATLANTIS};
27+
display: block;
28+
`;
29+
30+
const StyledLink = styled(Link)`
31+
border-bottom: 1px solid ${props => props.theme.CRIMSON};
32+
color: ${props => props.theme.CRIMSON};
33+
display: inline-block;
34+
margin-top: 2rem;
35+
text-decoration: none;
36+
37+
&:hover {
38+
border-bottom: 1px solid transparent;
39+
}
40+
`;
41+
42+
const Pattern = ({ match, mode }) => {
43+
const {
44+
params: { id }
45+
} = match;
46+
47+
const pattern = patterns.filter(item => item.id === id)[0];
48+
49+
const style = mode === 'dark' ? styleDark : styleLight;
650

7-
const Pattern = props => {
851
return (
952
<StyledPattern>
10-
<Link to="/patterns">Back to Patterns List</Link>
11-
<h1>{props.match.params.id}</h1>
53+
<StyledLink to="/patterns">&larr; Back to Patterns List</StyledLink>
54+
{pattern && (
55+
<React.Fragment>
56+
<h2>{pattern.name}</h2>
57+
<p>
58+
<Memo>Type:</Memo>
59+
{pattern.type} pattern
60+
</p>
61+
<p>
62+
<Memo>Description:</Memo>
63+
{`This pattern ${pattern.hint}.`}
64+
</p>
65+
66+
<h3>ES5</h3>
67+
<SyntaxHighlighter language="javascript" style={style}>
68+
{pattern.codeES5}
69+
</SyntaxHighlighter>
70+
71+
<h3>ES6</h3>
72+
<SyntaxHighlighter language="javascript" style={style}>
73+
{pattern.codeES6}
74+
</SyntaxHighlighter>
75+
</React.Fragment>
76+
)}
1277
</StyledPattern>
1378
);
1479
};
1580

16-
export default Pattern;
81+
Pattern.propTypes = {
82+
match: PropTypes.object.isRequired,
83+
mode: PropTypes.string.isRequired
84+
};
85+
86+
export default connect(state => ({
87+
mode: getMode(state)
88+
}))(Pattern);

‎src/components/PatternsList.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ const StyledPatterns = styled.div`
1616
}
1717
}
1818
19-
h1,
20-
h2 {
19+
h2,
20+
h3 {
2121
color: ${props => props.theme.header};
2222
margin-top: 2.5rem;
2323
}
@@ -40,14 +40,14 @@ const PatternsList = () => {
4040

4141
return (
4242
<StyledPatterns>
43-
<h1>DESIGN PATTERNS</h1>
43+
<h2>Design Patterns</h2>
4444

4545
<p>
4646
In software engineering, a design pattern is a general repeatable solution to a commonly
4747
occurring problem in software design.
4848
</p>
4949

50-
<h2>Creational Design Patterns</h2>
50+
<h3>Creational Design Patterns</h3>
5151
<p>
5252
These design patterns are all about class instantiation. This pattern can be further divided
5353
into class-creation patterns and object-creational patterns. While class-creation patterns
@@ -56,15 +56,15 @@ const PatternsList = () => {
5656
</p>
5757
{lister('creational')}
5858

59-
<h2>Structural Design Patterns</h2>
59+
<h3>Structural Design Patterns</h3>
6060
<p>
6161
These design patterns are all about Class and Object composition. Structural class-creation
6262
patterns use inheritance to compose interfaces. Structural object-patterns define ways to
6363
compose objects to obtain new functionality.
6464
</p>
6565
{lister('structural')}
6666

67-
<h2>Behavioral Design Patterns</h2>
67+
<h3>Behavioral Design Patterns</h3>
6868
<p>
6969
These design patterns are all about Class's objects communication. Behavioral patterns are
7070
those patterns that are most specifically concerned with communication between objects.

‎src/styles/global.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ const GlobalStyle = createGlobalStyle`
1919
padding: 0 0 3rem;
2020
}
2121
}
22+
23+
.fixed {
24+
height: 375px
25+
}
2226
`;
2327

2428
export default GlobalStyle;

‎src/styles/hljs/hljs.dark.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ const styles = {
55
overflowX: 'auto',
66
padding: '1em',
77
background: '#282828',
8-
color: '#ebdbb2',
9-
height: 375
8+
color: '#ebdbb2'
109
},
1110
'hljs-subst': {
1211
color: '#ebdbb2'

‎src/styles/hljs/hljs.light.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ const styles = {
55
overflowX: 'auto',
66
padding: '1em',
77
color: '#383a42',
8-
background: '#fafafa',
9-
height: 375
8+
background: '#fafafa'
109
},
1110
'hljs-comment': {
1211
color: '#a0a1a7',

0 commit comments

Comments
 (0)