Skip to content

Commit 569a259

Browse files
makingmaking
committedDec 30, 2020
Restructure folders
gh-18
1 parent 67d9582 commit 569a259

File tree

6 files changed

+160
-141
lines changed

6 files changed

+160
-141
lines changed
 

‎shop-ui/ui/src/App.js

+6-141
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1-
import React, {useEffect, useState} from 'react';
2-
import {BrowserRouter as Router, Link, Route, Switch, useParams} from "react-router-dom";
1+
import React from 'react';
2+
import {BrowserRouter as Router, Link, Route, Switch} from "react-router-dom";
3+
import {Cart} from "./routes/Cart";
4+
import {Sock} from "./routes/Sock";
5+
import {Tag} from "./routes/Tag";
6+
import {Home} from "./routes/Home";
37

48
export default function App() {
59
return (
@@ -35,142 +39,3 @@ export default function App() {
3539
);
3640
}
3741

38-
function Home() {
39-
const [socks, setSocks] = useState([]);
40-
useEffect(() => {
41-
fetchSocks('featured', 1, 6).then(setSocks);
42-
}, []);
43-
return <div>
44-
<h2>Spring Socks</h2>
45-
<ul>
46-
{socks.map(sock => <li key={sock.id}><Link
47-
to={`/details/${sock.id}`}>{sock.name}</Link></li>)}
48-
</ul>
49-
<Tags/>
50-
</div>;
51-
}
52-
53-
function Cart() {
54-
const [cart, setCart] = useState({
55-
items: []
56-
});
57-
useEffect(() => {
58-
fetchCart().then(setCart);
59-
}, []);
60-
return <div>
61-
<h2>Cart</h2>
62-
<table>
63-
<tr>
64-
<th>Product</th>
65-
<th>Price</th>
66-
<th>Quantity</th>
67-
<th>Total</th>
68-
</tr>
69-
{cart.items.map(item => <tr key={item.itemId}>
70-
<td><img src={item.imageUrl} alt={item.name} width={'100px'}/> <Link
71-
to={`/details/${item.itemId}`}>{item.name}</Link></td>
72-
<td>${item.unitPrice}</td>
73-
<td>{item.quantity}</td>
74-
<td>${item.total}</td>
75-
</tr>)}
76-
</table>
77-
<p>
78-
Total: ${cart.total}
79-
</p>
80-
</div>;
81-
}
82-
83-
function Sock() {
84-
const {id} = useParams();
85-
const [sock, setSock] = useState({});
86-
const [relatedProducts, setRelatedProducts] = useState([]);
87-
88-
useEffect(() => {
89-
fetchSock(id).then(body => {
90-
setSock(body.sock);
91-
setRelatedProducts(body.relatedProducts)
92-
});
93-
}, [id]);
94-
return <div>
95-
<h2>{sock.name}</h2>
96-
<img alt={sock.name} src={sock.imageUrl && sock.imageUrl[0]} width={'450px'}/>
97-
<p>${sock.price}</p>
98-
<p>{sock.description}</p>
99-
<h3>Related Products</h3>
100-
<ul>
101-
{relatedProducts.map(sock => <li key={sock.id}><Link
102-
to={`/details/${sock.id}`}>{sock.name}</Link></li>)}
103-
</ul>
104-
<Tags/>
105-
</div>;
106-
}
107-
108-
function Tag() {
109-
const {tag} = useParams();
110-
const [socks, setSocks] = useState([]);
111-
useEffect(() => {
112-
fetchSocks(tag).then(setSocks);
113-
}, [tag]);
114-
return <div>
115-
<h2>Tag: {tag}</h2>
116-
<ul>
117-
{socks.map(sock => <li key={sock.id}><Link
118-
to={`/details/${sock.id}`}>{sock.name}</Link></li>)}
119-
</ul>
120-
<Tags/>
121-
</div>;
122-
}
123-
124-
function Tags() {
125-
const [tags, setTags] = useState({tags: []});
126-
useEffect(() => {
127-
fetchTags().then(setTags);
128-
}, []);
129-
return <div>
130-
<h3>Tags</h3>
131-
<ul>
132-
{tags.tags.map(tag => <li key={tag}><Link
133-
to={`/tags/${tag}`}>{tag}</Link></li>)}
134-
</ul>
135-
</div>;
136-
}
137-
138-
function fetchSock(id) {
139-
return fetch(`/details/${id}`, {
140-
method: 'GET',
141-
headers: {
142-
'Accept': 'application/json'
143-
},
144-
})
145-
.then(res => res.json());
146-
}
147-
148-
function fetchSocks(tag, page, size) {
149-
return fetch(`/tags/${tag}?page=${page || 1}&size=${size || 10}`, {
150-
method: 'GET',
151-
headers: {
152-
'Accept': 'application/json'
153-
},
154-
})
155-
.then(res => res.json());
156-
}
157-
158-
function fetchTags() {
159-
return fetch('/tags', {
160-
method: 'GET',
161-
headers: {
162-
'Accept': 'application/json'
163-
},
164-
})
165-
.then(res => res.json());
166-
}
167-
168-
function fetchCart() {
169-
return fetch('/cart?latest', {
170-
method: 'GET',
171-
headers: {
172-
'Accept': 'application/json'
173-
},
174-
})
175-
.then(res => res.json());
176-
}

‎shop-ui/ui/src/components/Tags.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React, {useEffect, useState} from "react";
2+
import {Link} from "react-router-dom";
3+
4+
export function Tags() {
5+
const [tags, setTags] = useState({tags: []});
6+
useEffect(() => {
7+
fetchTags().then(setTags);
8+
}, []);
9+
return <div>
10+
<h3>Tags</h3>
11+
<ul>
12+
{tags.tags.map(tag => <li key={tag}><Link
13+
to={`/tags/${tag}`}>{tag}</Link></li>)}
14+
</ul>
15+
</div>;
16+
}
17+
18+
function fetchTags() {
19+
return fetch('/tags', {
20+
method: 'GET',
21+
headers: {
22+
'Accept': 'application/json'
23+
},
24+
})
25+
.then(res => res.json());
26+
}

‎shop-ui/ui/src/routes/Cart.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React, {useEffect, useState} from "react";
2+
import {Link} from "react-router-dom";
3+
4+
export function Cart() {
5+
const [cart, setCart] = useState({
6+
items: []
7+
});
8+
useEffect(() => {
9+
fetchCart().then(setCart);
10+
}, []);
11+
return <div>
12+
<h2>Cart</h2>
13+
<table>
14+
<tr>
15+
<th>Product</th>
16+
<th>Price</th>
17+
<th>Quantity</th>
18+
<th>Total</th>
19+
</tr>
20+
{cart.items.map(item => <tr key={item.itemId}>
21+
<td><img src={item.imageUrl} alt={item.name} width={'100px'}/> <Link
22+
to={`/details/${item.itemId}`}>{item.name}</Link></td>
23+
<td>${item.unitPrice}</td>
24+
<td>{item.quantity}</td>
25+
<td>${item.total}</td>
26+
</tr>)}
27+
</table>
28+
<p>
29+
Total: ${cart.total}
30+
</p>
31+
</div>;
32+
}
33+
34+
function fetchCart() {
35+
return fetch('/cart?latest', {
36+
method: 'GET',
37+
headers: {
38+
'Accept': 'application/json'
39+
},
40+
})
41+
.then(res => res.json());
42+
}

‎shop-ui/ui/src/routes/Home.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React, {useEffect, useState} from "react";
2+
import {fetchSocksByTag} from "./Tag";
3+
import {Link} from "react-router-dom";
4+
import {Tags} from "../components/Tags";
5+
6+
export function Home() {
7+
const [socks, setSocks] = useState([]);
8+
useEffect(() => {
9+
fetchSocksByTag('featured', 1, 6).then(setSocks);
10+
}, []);
11+
return <div>
12+
<h2>Spring Socks</h2>
13+
<ul>
14+
{socks.map(sock => <li key={sock.id}><Link
15+
to={`/details/${sock.id}`}>{sock.name}</Link></li>)}
16+
</ul>
17+
<Tags/>
18+
</div>;
19+
}

‎shop-ui/ui/src/routes/Sock.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import {Link, useParams} from "react-router-dom";
2+
import React, {useEffect, useState} from "react";
3+
import {Tags} from "../components/Tags";
4+
5+
export function Sock() {
6+
const {id} = useParams();
7+
const [sock, setSock] = useState({});
8+
const [relatedProducts, setRelatedProducts] = useState([]);
9+
10+
useEffect(() => {
11+
fetchSock(id).then(body => {
12+
setSock(body.sock);
13+
setRelatedProducts(body.relatedProducts)
14+
});
15+
}, [id]);
16+
return <div>
17+
<h2>{sock.name}</h2>
18+
<img alt={sock.name} src={sock.imageUrl && sock.imageUrl[0]} width={'450px'}/>
19+
<p>${sock.price}</p>
20+
<p>{sock.description}</p>
21+
<h3>Related Products</h3>
22+
<ul>
23+
{relatedProducts.map(sock => <li key={sock.id}><Link
24+
to={`/details/${sock.id}`}>{sock.name}</Link></li>)}
25+
</ul>
26+
<Tags/>
27+
</div>;
28+
}
29+
30+
function fetchSock(id) {
31+
return fetch(`/details/${id}`, {
32+
method: 'GET',
33+
headers: {
34+
'Accept': 'application/json'
35+
},
36+
})
37+
.then(res => res.json());
38+
}

‎shop-ui/ui/src/routes/Tag.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import {Link, useParams} from "react-router-dom";
2+
import React, {useEffect, useState} from "react";
3+
import {Tags} from "../components/Tags";
4+
5+
export function Tag() {
6+
const {tag} = useParams();
7+
const [socks, setSocks] = useState([]);
8+
useEffect(() => {
9+
fetchSocksByTag(tag).then(setSocks);
10+
}, [tag]);
11+
return <div>
12+
<h2>Tag: {tag}</h2>
13+
<ul>
14+
{socks.map(sock => <li key={sock.id}><Link
15+
to={`/details/${sock.id}`}>{sock.name}</Link></li>)}
16+
</ul>
17+
<Tags/>
18+
</div>;
19+
}
20+
21+
export function fetchSocksByTag(tag, page, size) {
22+
return fetch(`/tags/${tag}?page=${page || 1}&size=${size || 10}`, {
23+
method: 'GET',
24+
headers: {
25+
'Accept': 'application/json'
26+
},
27+
})
28+
.then(res => res.json());
29+
}

0 commit comments

Comments
 (0)
Please sign in to comment.