Skip to content

Commit 8119d10

Browse files
aofleejayaofleejay
committed
Add workplaces gallery
1 parent ff9f116 commit 8119d10

File tree

17 files changed

+583
-119
lines changed

17 files changed

+583
-119
lines changed

‎client/.env.example‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
SERVICE_ENDPOINT=

‎client/.eslintrc.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"extends": "airbnb",
3+
"rules": {
4+
"import/prefer-default-export": 0,
5+
"react/jsx-filename-extension": 0,
6+
"object-curly-newline": 0
7+
},
8+
"env": {
9+
"browser": true
10+
}
11+
}

‎client/package.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
{
22
"name": "try-graphql-apollo-react-client",
33
"version": "0.1.0",
4-
"main": "index.js",
4+
"main": "src/index.js",
55
"scripts": {
66
"dev": "webpack-dev-server --mode development --open",
77
"build": "webpack --mode production"
88
},
99
"license": "MIT",
1010
"dependencies": {
1111
"apollo-boost": "0.1.4",
12+
"dotenv": "5.0.1",
13+
"graphql": "0.13.2",
1214
"graphql-tag": "2.9.2",
1315
"react": "16.3.2",
1416
"react-apollo": "2.1.3",
@@ -21,6 +23,11 @@
2123
"babel-preset-env": "1.6.1",
2224
"babel-preset-react": "6.24.1",
2325
"clean-webpack-plugin": "0.1.19",
26+
"eslint": "4.19.1",
27+
"eslint-config-airbnb": "16.1.0",
28+
"eslint-plugin-import": "2.11.0",
29+
"eslint-plugin-jsx-a11y": "6.0.3",
30+
"eslint-plugin-react": "7.7.0",
2431
"html-loader": "0.5.5",
2532
"html-webpack-plugin": "3.2.0",
2633
"path": "0.12.7",

‎client/src/Home.js‎

Lines changed: 52 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,56 @@
1-
import React, { Component } from 'react'
1+
import React from 'react';
2+
import { Query } from 'react-apollo';
3+
import gql from 'graphql-tag';
24

3-
const workplaces = [
4-
{
5-
id: '1',
6-
name: 'To Fast To Sleep',
7-
coverImage: 'https://images.unsplash.com/photo-1514371879740-2e7d2068f502?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2c8b4f34e0f1761ddb4fa0543fce2a0a&auto=format&fit=crop&w=1334&q=80',
8-
description: 'Coffee Shop in Bangkok, Thailand',
9-
phone: '086 300 9955',
10-
rating: 4,
11-
},
12-
{
13-
id: '2',
14-
name: 'To Fast To Sleep',
15-
coverImage: 'https://images.unsplash.com/photo-1514371879740-2e7d2068f502?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2c8b4f34e0f1761ddb4fa0543fce2a0a&auto=format&fit=crop&w=1334&q=80',
16-
description: 'Coffee Shop in Bangkok, Thailand',
17-
phone: '086 300 9955',
18-
rating: 4,
19-
},
20-
{
21-
id: '3',
22-
name: 'To Fast To Sleep',
23-
coverImage: 'https://images.unsplash.com/photo-1514371879740-2e7d2068f502?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2c8b4f34e0f1761ddb4fa0543fce2a0a&auto=format&fit=crop&w=1334&q=80',
24-
description: 'Coffee Shop in Bangkok, Thailand',
25-
phone: '086 300 9955',
26-
rating: 4,
27-
},
28-
{
29-
id: '4',
30-
name: 'To Fast To Sleep',
31-
coverImage: 'https://images.unsplash.com/photo-1514371879740-2e7d2068f502?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2c8b4f34e0f1761ddb4fa0543fce2a0a&auto=format&fit=crop&w=1334&q=80',
32-
description: 'Coffee Shop in Bangkok, Thailand',
33-
phone: '086 300 9955',
34-
rating: 4,
35-
},
36-
{
37-
id: '5',
38-
name: 'To Fast To Sleep',
39-
coverImage: 'https://images.unsplash.com/photo-1514371879740-2e7d2068f502?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2c8b4f34e0f1761ddb4fa0543fce2a0a&auto=format&fit=crop&w=1334&q=80',
40-
description: 'Coffee Shop in Bangkok, Thailand',
41-
phone: '086 300 9955',
42-
rating: 4,
43-
},
44-
]
5+
const Home = () => (
6+
<Query
7+
query={gql`
8+
query workplaces {
9+
workplaces {
10+
id
11+
name
12+
description
13+
coverImage
14+
}
15+
}
16+
`}
17+
>
18+
{({ loading, error, data }) => {
19+
if (loading) return <p>Loading...</p>;
20+
else if (error) return <p>whoops!! somthing wrong.</p>;
4521

46-
class Home extends Component {
47-
render() {
48-
return (
49-
<div>
50-
<div style={{ display: 'flex', flexWrap: 'wrap' }}>
51-
{ workplaces.map(({ id, name, description, coverImage, phone, rating }) => (
52-
<div key={id} style={{ width: 'calc(33.3333% - 2rem - 2px)', margin: '1rem', border: '1px solid #eee', borderRadius: 5 }}>
53-
<img src={coverImage} style={{ width: '100%' }} />
54-
<div style={{ padding: 50 }}>
55-
<h2>{name}</h2>
56-
<p>{description}</p>
57-
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
58-
<p>contact: {phone}</p>
59-
<p>rating: {rating}/5</p>
60-
</div>
61-
</div>
62-
</div>
63-
))}
22+
return (
23+
<div>
24+
<div style={{ display: 'flex', flexWrap: 'wrap' }}>
25+
{ data.workplaces &&
26+
data.workplaces.map(({ id, name, description, coverImage }) => (
27+
<div
28+
key={id}
29+
style={{
30+
width: 'calc(33.3333% - 2rem - 2px)',
31+
margin: '1rem',
32+
border: '1px solid #eee',
33+
overflow: 'hidden',
34+
borderRadius: 5,
35+
}}
36+
>
37+
<img
38+
src={coverImage}
39+
alt={name}
40+
style={{ width: '100%' }}
41+
/>
42+
<div style={{ padding: 50 }}>
43+
<h2>{name}</h2>
44+
<p>{description}</p>
45+
</div>
46+
</div>
47+
))
48+
}
49+
</div>
6450
</div>
65-
</div>
66-
)
67-
}
68-
}
51+
);
52+
}}
53+
</Query>
54+
);
6955

70-
export default Home
56+
export default Home;

‎client/src/Routes.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import React from 'react'
1+
import React from 'react';
22
import {
33
BrowserRouter,
44
Route,
5-
} from 'react-router-dom'
6-
import Home from './Home'
5+
} from 'react-router-dom';
6+
import Home from './Home';
77

88
const Routes = () => (
99
<BrowserRouter>
1010
<Route exect path="/" component={Home} />
1111
</BrowserRouter>
12-
)
12+
);
1313

14-
export default Routes
14+
export default Routes;

‎client/src/config/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
const { SERVICE_ENDPOINT } = process.env;
2+
3+
export { SERVICE_ENDPOINT };

‎client/src/index.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
1-
import React from 'react'
2-
import ReactDOM from 'react-dom'
3-
import Routes from './Routes'
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import { ApolloProvider } from 'react-apollo';
4+
import Routes from './Routes';
5+
import { client } from './lib/apollo';
46

5-
ReactDOM.render(<Routes />, document.getElementById('root'))
7+
ReactDOM.render(
8+
<ApolloProvider client={client}>
9+
<Routes />
10+
</ApolloProvider>
11+
, document.getElementById('root'),
12+
);

‎client/src/lib/apollo.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import ApolloClient from 'apollo-boost';
2+
import { SERVICE_ENDPOINT } from '../config';
3+
4+
const client = new ApolloClient({
5+
uri: SERVICE_ENDPOINT,
6+
});
7+
8+
export { client };

‎client/webpack.config.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
const path = require('path')
2-
const webpack = require('webpack')
3-
const CleanWebpackPlugin = require('clean-webpack-plugin')
4-
const HtmlWebpackPlugin = require('html-webpack-plugin')
1+
const path = require('path');
2+
const webpack = require('webpack');
3+
const CleanWebpackPlugin = require('clean-webpack-plugin');
4+
const HtmlWebpackPlugin = require('html-webpack-plugin');
5+
require('dotenv').config();
56

67
module.exports = {
78
entry: './src/index.js',
@@ -63,11 +64,14 @@ module.exports = {
6364
hot: true,
6465
},
6566
plugins: [
67+
new webpack.DefinePlugin({
68+
'process.env.SERVICE_ENDPOINT': JSON.stringify(process.env.SERVICE_ENDPOINT),
69+
}),
6670
new CleanWebpackPlugin(['dist']),
6771
new webpack.HotModuleReplacementPlugin(),
6872
new HtmlWebpackPlugin({
6973
title: 'My App',
7074
template: 'public/index.html',
7175
}),
7276
],
73-
}
77+
};

0 commit comments

Comments
 (0)