Skip to content

Commit 3ba7aaa

Browse files
masudcsesust04masudcsesust04
committed
- Added search action to get matched records based on query parameter
- Added and modified diamond search component - Fixed eslint issues - Added seed to create some initial records
1 parent 5a3ca56 commit 3ba7aaa

File tree

4 files changed

+78
-12
lines changed

4 files changed

+78
-12
lines changed

‎app/controllers/diamonds_controller.rb

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,12 @@ def show
88
end
99

1010
def search
11+
@diamonds = Diamond.where(shape: params[:shape], color: params[:color], clarity: params[:clarity], lab: params[:lab], polish: params[:polish])
12+
render json: {status: :ok, data: @diamonds}
13+
end
14+
15+
private
16+
def diamond_params
17+
params.require(:diamond).permit(:shape, :weight, :color, :clarity, :length, :width, :lab, :price, :polish)
1118
end
1219
end

‎app/javascript/packs/components/DiamondSearch.jsx

Lines changed: 45 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,63 @@ import React from 'react';
33
class DiamondSearch extends React.Component {
44
constructor(props) {
55
super(props);
6-
this.state = { data: [] };
6+
console.log(this.props.match.params);
7+
this.state = { diamonds: [] };
78
}
89
componentDidMount() {
910
console.log(this.props);
10-
fetch('https://facebook.github.io/react-native/movies.json')
11+
const urlParams = `shape=${this.props.match.params.shape}&color=${this.props.match.params.color}&clarity=${this.props.match.params.clarity}&lab=${this.props.match.params.lab}&polish=${this.props.match.params.polish}`;
12+
13+
fetch(`/diamonds/search.json?${urlParams}`, { method: 'GET' })
1114
.then((Response) => Response.json())
1215
.then((response) => {
13-
console.log(response.movies);
16+
console.log(response);
1417
this.setState({
15-
data: response.movies,
18+
diamonds: response.data,
1619
});
1720
});
1821
}
1922
render() {
23+
const rows = this.state.diamonds.map(diamond => (
24+
<tr key={diamond.id}>
25+
<td>{diamond.id}</td>
26+
<td>{diamond.shape}</td>
27+
<td>{diamond.weight}</td>
28+
<td>{diamond.color}</td>
29+
<td>{diamond.clarity}</td>
30+
<td>{diamond.length}</td>
31+
<td>{diamond.width}</td>
32+
<td>{diamond.lab}</td>
33+
<td>{diamond.price}</td>
34+
<td>{diamond.polish}</td>
35+
<td><a href={`/diamonds/${diamond.id}/`}>View</a></td>
36+
</tr>
37+
));
2038
return (
2139
<div>
22-
{
23-
this.state.data.map((movie, index) => (
24-
<div>
25-
<p id={index}>{ movie.title }</p>
26-
</div>
27-
))
28-
}
40+
<h3>List of diamond</h3>
41+
42+
<table className="table">
43+
<thead>
44+
<tr>
45+
<th width="5%">#</th>
46+
<th width="10%">Shape</th>
47+
<th width="10%">Width</th>
48+
<th width="10%">Color</th>
49+
<th width="10%">Clarity</th>
50+
<th width="10%">Length</th>
51+
<th width="10%">Width</th>
52+
<th width="10%">Lab</th>
53+
<th width="10%">Price</th>
54+
<th width="10%">Polish</th>
55+
<th width="5%">Action</th>
56+
</tr>
57+
</thead>
58+
59+
<tbody>
60+
{rows}
61+
</tbody>
62+
</table>
2963
</div>
3064
);
3165
}

‎config/routes.rb

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
Rails.application.routes.draw do
2-
resources :diamonds
2+
resources :diamonds do
3+
collection do
4+
get :search
5+
end
6+
end
37

48
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
59
root 'application#index'

‎db/seeds.rb

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
Diamond.create!([
2+
{ shape: 'RD', weight: 0.90, color: 'F', clarity: 'VS1', length: 6.06, width: 6.06, lab: 'GIA', price: 100, polish: 'VG' },
3+
{ shape: 'RD', weight: 0.80, color: 'R', clarity: 'VS2', length: 5.06, width: 6.06, lab: 'GIA', price: 80, polish: 'VG' },
4+
{ shape: 'RD', weight: 0.70, color: 'G', clarity: 'VS3', length: 6.06, width: 6.06, lab: 'GIA', price: 90, polish: 'VG' },
5+
{ shape: 'RD', weight: 0.60, color: 'B', clarity: 'VS1', length: 6.06, width: 6.06, lab: 'GIA', price: 300, polish: 'VG' },
6+
{ shape: 'AS', weight: 0.90, color: 'F', clarity: 'VS2', length: 6.06, width: 6.06, lab: 'GIA', price: 90, polish: 'VG' },
7+
{ shape: 'AS', weight: 0.80, color: 'G', clarity: 'VS3', length: 6.06, width: 6.06, lab: 'GIA', price: 50, polish: 'VG' },
8+
{ shape: 'AS', weight: 0.70, color: 'B', clarity: 'VS1', length: 6.06, width: 6.06, lab: 'GIA', price: 500, polish: 'VG' },
9+
{ shape: 'PR', weight: 0.90, color: 'F', clarity: 'VS2', length: 6.06, width: 6.06, lab: 'GIA', price: 40, polish: 'VG' },
10+
{ shape: 'PR', weight: 0.80, color: 'R', clarity: 'VS3', length: 6.06, width: 6.06, lab: 'GIA', price: 95, polish: 'VG' },
11+
{ shape: 'PR', weight: 0.70, color: 'G', clarity: 'VS1', length: 6.06, width: 6.06, lab: 'GIA', price: 90, polish: 'VG' },
12+
{ shape: 'CU', weight: 0.90, color: 'R', clarity: 'VS2', length: 6.06, width: 6.06, lab: 'GIA', price: 45, polish: 'VG' },
13+
{ shape: 'CU', weight: 0.80, color: 'G', clarity: 'VS3', length: 6.06, width: 6.06, lab: 'GIA', price: 70, polish: 'VG' },
14+
{ shape: 'CU', weight: 0.70, color: 'B', clarity: 'VS1', length: 6.06, width: 6.06, lab: 'GIA', price: 75, polish: 'VG' },
15+
{ shape: 'OV', weight: 0.90, color: 'F', clarity: 'VS2', length: 6.06, width: 6.06, lab: 'GIA', price: 80, polish: 'VG' },
16+
{ shape: 'OV', weight: 0.80, color: 'R', clarity: 'VS3', length: 6.06, width: 6.06, lab: 'GIA', price: 85, polish: 'VG' },
17+
{ shape: 'OV', weight: 0.70, color: 'G', clarity: 'VS1', length: 6.06, width: 6.06, lab: 'GIA', price: 200, polish: 'VG' },
18+
{ shape: 'ER', weight: 0.90, color: 'F', clarity: 'VS1', length: 6.06, width: 6.06, lab: 'GIA', price: 500, polish: 'VG' }
19+
])
20+
21+
puts "Created #{Diamond.count} diamonds!"

0 commit comments

Comments
 (0)