Skip to content

Commit ee53d15

Browse files
mattJurzmattJurz
committed
basic frontend structure
0 parents  commit ee53d15

38 files changed

+12219
-0
lines changed

‎.eslintrc

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
{
2+
"extends": ["airbnb", "prettier", "prettier/react"],
3+
"parser": "babel-eslint",
4+
"parserOptions": {
5+
"ecmaVersion": 8,
6+
"ecmaFeatures": {
7+
"experimentalObjectRestSpread": true,
8+
"impliedStrict": true,
9+
"classes": true
10+
}
11+
},
12+
"env": {
13+
"browser": true,
14+
"node": true,
15+
"jquery": true,
16+
"jest": true
17+
},
18+
"rules": {
19+
"no-debugger": 0,
20+
"no-alert": 0,
21+
"no-await-in-loop": 0,
22+
"no-return-assign": ["error", "except-parens"],
23+
"no-restricted-syntax": [
24+
2,
25+
"ForInStatement",
26+
"LabeledStatement",
27+
"WithStatement"
28+
],
29+
"no-unused-vars": [
30+
1,
31+
{
32+
"ignoreSiblings": true,
33+
"argsIgnorePattern": "res|next|^err"
34+
}
35+
],
36+
"prefer-const": [
37+
"error",
38+
{
39+
"destructuring": "all"
40+
}
41+
],
42+
"arrow-body-style": [2, "as-needed"],
43+
"no-unused-expressions": [
44+
2,
45+
{
46+
"allowTaggedTemplates": true
47+
}
48+
],
49+
"no-param-reassign": [
50+
2,
51+
{
52+
"props": false
53+
}
54+
],
55+
"no-console": 0,
56+
"import/prefer-default-export": 0,
57+
"import": 0,
58+
"func-names": 0,
59+
"space-before-function-paren": 0,
60+
"comma-dangle": 0,
61+
"max-len": 0,
62+
"import/extensions": 0,
63+
"no-underscore-dangle": 0,
64+
"consistent-return": 0,
65+
"react/display-name": 1,
66+
"react/no-array-index-key": 0,
67+
"react/react-in-jsx-scope": 0,
68+
"react/prefer-stateless-function": 0,
69+
"react/forbid-prop-types": 0,
70+
"react/no-unescaped-entities": 0,
71+
"jsx-a11y/accessible-emoji": 0,
72+
"react/require-default-props": 0,
73+
"react/jsx-filename-extension": [
74+
1,
75+
{
76+
"extensions": [".js", ".jsx"]
77+
}
78+
],
79+
"radix": 0,
80+
"no-shadow": [
81+
2,
82+
{
83+
"hoist": "all",
84+
"allow": ["resolve", "reject", "done", "next", "err", "error"]
85+
}
86+
],
87+
"quotes": [
88+
2,
89+
"single",
90+
{
91+
"avoidEscape": true,
92+
"allowTemplateLiterals": true
93+
}
94+
],
95+
"prettier/prettier": [
96+
"error",
97+
{
98+
"trailingComma": "es5",
99+
"singleQuote": true,
100+
"printWidth": 80
101+
}
102+
],
103+
"jsx-a11y/href-no-hash": "off",
104+
"jsx-a11y/anchor-is-valid": [
105+
"warn",
106+
{
107+
"aspects": ["invalidHref"]
108+
}
109+
]
110+
},
111+
"plugins": [
112+
// "html",
113+
"prettier"
114+
]
115+
}

‎.gitignore

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/node_modules
2+
/generated
3+
/.vscode
4+
/.next
5+
6+
variables.env
7+
# misc
8+
.DS_Store
9+
.env.local
10+
.env.development.local
11+
.env.test.local
12+
.env.production.local
13+
14+
npm-debug.log*
15+
yarn-debug.log*
16+
yarn-error.log*
17+
/backup
18+
/src/services/config/base-config.js
19+
/.idea/workspace.xml
20+
/.idea
21+

‎README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Advanced-React
2+
3+
frontend

‎components/ErrorMessage.js

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import styled from 'styled-components';
2+
import React from 'react';
3+
4+
import PropTypes from 'prop-types';
5+
6+
const ErrorStyles = styled.div`
7+
padding: 2rem;
8+
background: white;
9+
margin: 2rem 0;
10+
border: 1px solid rgba(0, 0, 0, 0.05);
11+
border-left: 5px solid red;
12+
p {
13+
margin: 0;
14+
font-weight: 100;
15+
}
16+
strong {
17+
margin-right: 1rem;
18+
}
19+
`;
20+
21+
const DisplayError = ({ error }) => {
22+
if (!error || !error.message) return null;
23+
if (error.networkError && error.networkError.result && error.networkError.result.errors.length) {
24+
return error.networkError.result.errors.map((error, i) => (
25+
<ErrorStyles key={i}>
26+
<p data-test="graphql-error">
27+
<strong>Shoot!</strong>
28+
{error.message.replace('GraphQL error: ', '')}
29+
</p>
30+
</ErrorStyles>
31+
));
32+
}
33+
return (
34+
<ErrorStyles>
35+
<p data-test="graphql-error">
36+
<strong>Shoot!</strong>
37+
{error.message.replace('GraphQL error: ', '')}
38+
</p>
39+
</ErrorStyles>
40+
);
41+
};
42+
43+
DisplayError.defaultProps = {
44+
error: {},
45+
};
46+
47+
DisplayError.propTypes = {
48+
error: PropTypes.object,
49+
};
50+
51+
export default DisplayError;

‎components/Header.js

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import Link from 'next/link';
2+
import styled from 'styled-components';
3+
import Router from 'next/router';
4+
import NProgress from 'nprogress';
5+
import Nav from './Nav';
6+
7+
Router.events.on('routeChangeStart', () => {
8+
NProgress.start();
9+
console.log('routeChangeStart');
10+
});
11+
12+
Router.events.on('routeChangeComplete', () => {
13+
NProgress.done();
14+
console.log('routeChangeComplete');
15+
});
16+
17+
Router.events.on('routeChangeError', () => {
18+
NProgress.done();
19+
});
20+
21+
const Logo = styled.h1`
22+
font-size: 4rem;
23+
margin-left: 2rem;
24+
position: relative;
25+
z-index: 2;
26+
transform: skew(-7deg);
27+
a {
28+
padding: 0.5rem 1rem;
29+
background: ${props => props.theme.red};
30+
color: white;
31+
text-transform: uppercase;
32+
text-decoration: none;
33+
}
34+
@media (max-width: 1300px) {
35+
margin: 0;
36+
text-align: center;
37+
}
38+
`;
39+
40+
const StyledHeader = styled.header`
41+
.bar {
42+
border-bottom: 10px solid ${props => props.theme.black};
43+
display: grid;
44+
grid-template-columns: auto 1fr;
45+
justify-content: space-between;
46+
align-items: stretch;
47+
@media (max-width: 1300px) {
48+
grid-template-columns: 1fr;
49+
justify-content: center;
50+
}
51+
}
52+
.sub-bar {
53+
display: grid;
54+
grid-template-columns: 1fr auto;
55+
border-bottom: 1px solid ${props => props.theme.lightgrey};
56+
}
57+
`;
58+
59+
const Header = () => (
60+
<StyledHeader>
61+
<div className="bar">
62+
<Logo>
63+
<Link href="/">
64+
<a>Sick Fits</a>
65+
</Link>
66+
</Logo>
67+
<Nav />
68+
</div>
69+
<div className="sub-bar">
70+
<p>Search</p>
71+
</div>
72+
<div>Cart</div>
73+
</StyledHeader>
74+
);
75+
76+
export default Header;

‎components/Meta.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Head from "next/head";
2+
3+
const Meta = () => (
4+
<Head>
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta charSet="utf-8" />
7+
<link rel="shortcut icon" href="/static/favicon.png" />
8+
<link rel="stylesheet" type="text/css" href="/static/nprogress.css" />
9+
<title>Sick Fits!</title>
10+
</Head>
11+
);
12+
13+
export default Meta;

‎components/Nav.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Link from "next/link";
2+
import NavStyles from './styles/NavStyles';
3+
4+
const Nav = () => (
5+
<NavStyles>
6+
<Link href='/items'><a>items</a></Link>
7+
<Link href='/sell'><a>sell</a></Link>
8+
<Link href='/signup'><a>signup</a></Link>
9+
<Link href='/orders'><a>orders</a></Link>
10+
<Link href='/me'><a>me</a></Link>
11+
</NavStyles>
12+
);
13+
14+
export default Nav;

‎components/Page.js

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React, { Component } from 'react';
2+
import styled, { ThemeProvider, injectGlobal } from 'styled-components';
3+
import Header from './Header';
4+
import Meta from './Meta';
5+
6+
const theme = {
7+
red: '#FF0000',
8+
black: '#393939',
9+
grey: '#3A3A3A',
10+
lightgrey: '#E1E1E1',
11+
offWhite: '#EDEDED',
12+
maxWidth: '1000px',
13+
bs: '0 12px 24px 0 rgba(0, 0, 0, 0.09)'
14+
};
15+
16+
const StyledPage = styled.div`
17+
background: white;
18+
color: ${props => props.theme.black};
19+
`;
20+
21+
const Inner = styled.div`
22+
max-width: ${props => props.theme.maxWidth};
23+
margin: 0 auto;
24+
padding: 2rem;
25+
`;
26+
27+
injectGlobal`
28+
@font-face {
29+
font-family: 'radnika_next';
30+
src: url('/static/radnikanext-medium-webfont.woff2')
31+
format('woff2');
32+
font-weight: normal;
33+
font-style: normal;
34+
}
35+
html {
36+
box-sizing: border-box;
37+
font-size: 10px;
38+
}
39+
*, *:before, *:after{
40+
box-sizing: inherit;
41+
}
42+
body{
43+
padding: 0;
44+
margin: 0;
45+
font-size: 1.5rem;
46+
font-family: 'radnika_next';
47+
}
48+
a{
49+
text-decoration: none;
50+
color: ${theme.black};
51+
}
52+
`;
53+
export default class Page extends Component {
54+
render() {
55+
return (
56+
<ThemeProvider theme={theme}>
57+
<StyledPage>
58+
<Header/>
59+
<Meta/>
60+
<Inner>{this.props.children}</Inner>
61+
</StyledPage>
62+
</ThemeProvider>
63+
);
64+
}
65+
}

0 commit comments

Comments
 (0)