Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 08470f9

Browse files
author
Raymon S
authored
Merge pull request #12 from DevByRayRay/create-product-detail-page
Added product detail page
2 parents 8aa1459 + 4d41c77 commit 08470f9

19 files changed

+333
-96
lines changed

‎.netlify/functions/hello.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.netlify/functions/product-by-id.js

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.netlify/functions/products.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎functions/product-by-id.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { ProductService } from '../lib/product-service.js'
2+
import { client, headers } from '../lib/config.js'
3+
4+
const service = new ProductService({ client })
5+
6+
exports.handler = async (event, context) => {
7+
console.log('Function `products` invoked')
8+
9+
const { path } = event
10+
const productId = path.substr(path.lastIndexOf('/') + 1)
11+
12+
if (!productId) {
13+
return {
14+
statusCode: 400,
15+
headers,
16+
body: JSON.stringify({ message: 'Product ID is missing' }),
17+
}
18+
}
19+
20+
if (event.httpMethod !== 'GET') {
21+
return { statusCode: 405, headers, body: 'Method Not Allowed' }
22+
}
23+
24+
try {
25+
const product = await service.getProductById(productId)
26+
return {
27+
statusCode: 200,
28+
headers,
29+
body: JSON.stringify(product),
30+
}
31+
} catch (error) {
32+
console.log('error', error)
33+
34+
return {
35+
statusCode: 400,
36+
headers,
37+
body: JSON.stringify(error),
38+
}
39+
}
40+
}

‎lib/product-service.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,23 @@ export class ProductService {
2525
})
2626
})
2727
}
28+
29+
async getProductById(id) {
30+
return new Promise((resolve, reject) => {
31+
if (!id) {
32+
reject('No ID provided')
33+
}
34+
this.client
35+
.query(q.Get(q.Ref(q.Collection('products'), id)))
36+
.then((response) => {
37+
console.log('response', response)
38+
resolve(response)
39+
})
40+
.catch((error) => {
41+
console.log('error', error)
42+
43+
reject(error)
44+
})
45+
})
46+
}
2847
}

‎src/app/app-routing.module.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
import { NgModule } from '@angular/core'
22
import { Routes, RouterModule } from '@angular/router'
33
import { ProductListComponent } from './products/components/product-list/product-list.component'
4+
import { ProductItemComponent } from './products/components/product-item/product-item.component'
45

56
const routes: Routes = [
67
{
78
path: '',
89
component: ProductListComponent,
910
},
11+
{
12+
path: 'product/:id',
13+
component: ProductItemComponent,
14+
},
1015
]
1116

1217
@NgModule({

‎src/app/app.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<div class="toolbar" role="banner">
2-
<span class="name">FaunaDB Webshop</span>
2+
<h1 class="name">FaunaDB Webshop</h1>
3+
<button [routerLink]="['/']" mat-flat-button>Home</button>
34
</div>
45

56
<div class="content" role="main">
6-
<h1>Products</h1>
77
<router-outlet></router-outlet>
88
</div>

‎src/app/app.component.scss

Lines changed: 16 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -33,44 +33,33 @@ p {
3333
top: 0;
3434
left: 0;
3535
right: 0;
36-
height: 60px;
36+
height: 120px;
3737
display: flex;
38+
flex-direction: column;
3839
align-items: center;
3940
justify-content: center;
40-
background-color: #1976d2;
41-
color: white;
41+
background-color: #b1d8ff;
42+
color: #267fd8;
4243
font-weight: 600;
43-
}
44-
45-
.toolbar img {
46-
margin: 0 16px;
47-
}
48-
49-
.toolbar #twitter-logo {
50-
height: 40px;
51-
margin: 0 16px;
52-
}
44+
padding: 0 1rem;
45+
h1 {
46+
font-size: 2rem;
47+
}
48+
h1,
49+
button {
50+
margin: 0.5rem;
51+
}
5352

54-
.toolbar #twitter-logo:hover {
55-
opacity: 0.8;
53+
button {
54+
background-color: #267fd8;
55+
}
5656
}
5757

5858
.content {
5959
display: flex;
60-
margin: 82px auto 32px;
60+
margin: 160px auto 32px;
6161
padding: 0 16px;
6262
max-width: 960px;
6363
flex-direction: column;
6464
align-items: center;
6565
}
66-
67-
a,
68-
a:visited,
69-
a:hover {
70-
color: #1976d2;
71-
text-decoration: none;
72-
}
73-
74-
a:hover {
75-
color: #125699;
76-
}

‎src/app/app.module.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@ import { NgModule } from '@angular/core'
44
import { AppRoutingModule } from './app-routing.module'
55
import { AppComponent } from './app.component'
66
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
7+
import { MatButtonModule } from '@angular/material/button'
78

89
import { HttpClientModule } from '@angular/common/http'
910
import { ProductListComponent } from './products/components/product-list/product-list.component'
10-
import { MatGridListModule } from '@angular/material/grid-list'
11+
import { ProductItemComponent } from './products/components/product-item/product-item.component'
1112
@NgModule({
12-
declarations: [AppComponent, ProductListComponent],
13-
imports: [BrowserModule, HttpClientModule, AppRoutingModule, BrowserAnimationsModule, MatGridListModule],
13+
declarations: [AppComponent, ProductListComponent,ProductItemComponent,ProductItemComponent],
14+
imports: [BrowserModule, HttpClientModule, AppRoutingModule, BrowserAnimationsModule, MatButtonModule],
1415
providers: [],
1516
bootstrap: [AppComponent],
1617
})
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<ng-container *ngIf="productItem">
2+
<section class="product__item">
3+
<h1 class="product__title">{{ productItem.name }}</h1>
4+
<ng-container *ngIf="productItem.image">
5+
<figure class="product__figure">
6+
<img loading="lazy" *ngIf="productItem.image" width="640px" class="product__image" [src]="productItem.image" alt="" />
7+
</figure>
8+
</ng-container>
9+
<div class="product__content">
10+
<p class="product__description">{{ productItem.description }}</p>
11+
</div>
12+
<footer class="product__footer">
13+
<em class="product__price">{{ productItem.price | currency: 'EUR' }}</em>
14+
<button class="product__card-btn" mat-flat-button>Add to cart</button>
15+
</footer>
16+
</section>
17+
</ng-container>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /