From b19f45729f36813e12f70554ba00455005256dcb Mon Sep 17 00:00:00 2001 From: akmhmgc Date: Tue, 3 Jan 2023 13:42:50 +0900 Subject: [PATCH 1/8] =?UTF-8?q?chore:=20=E4=B8=8D=E8=A6=81=E3=81=AA?= =?UTF-8?q?=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB=E3=82=92=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 16 +--------------- src/App.test.js | 8 -------- src/index.css | 13 ------------- src/index.js | 16 +++++----------- src/logo.svg | 1 - src/reportWebVitals.js | 13 ------------- src/setupTests.js | 5 ----- 7 files changed, 6 insertions(+), 66 deletions(-) delete mode 100644 src/App.test.js delete mode 100644 src/logo.svg delete mode 100644 src/reportWebVitals.js delete mode 100644 src/setupTests.js diff --git a/src/App.js b/src/App.js index 3784575..872ef8e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,9 @@ -import logo from './logo.svg'; import './App.css'; function App() { return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+
); } diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/index.css b/src/index.css index ec2585e..e69de29 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.js b/src/index.js index d563c0f..31508db 100644 --- a/src/index.js +++ b/src/index.js @@ -1,17 +1,11 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import App from "./App"; -const root = ReactDOM.createRoot(document.getElementById('root')); +const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js deleted file mode 100644 index 5253d3a..0000000 --- a/src/reportWebVitals.js +++ /dev/null @@ -1,13 +0,0 @@ -const reportWebVitals = onPerfEntry => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/src/setupTests.js b/src/setupTests.js deleted file mode 100644 index 8f2609b..0000000 --- a/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; From 656aa4a34fa5345676a98138b4435ed7f47754fc Mon Sep 17 00:00:00 2001 From: akmhmgc Date: Tue, 3 Jan 2023 13:50:35 +0900 Subject: [PATCH 2/8] =?UTF-8?q?chore:=20json=E3=82=92=E4=BD=BF=E7=94=A8?= =?UTF-8?q?=E3=81=97=E3=81=9F=E3=82=A8=E3=83=B3=E3=83=89=E3=83=9D=E3=82=A4?= =?UTF-8?q?=E3=83=B3=E3=83=88=E3=81=AE=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- data/db.json | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 data/db.json diff --git a/data/db.json b/data/db.json new file mode 100644 index 0000000..1b59aed --- /dev/null +++ b/data/db.json @@ -0,0 +1,20 @@ +{ + "trips": [ + { + "title": "2 Night Stay in Venice", + "price": "£195" + }, + { + "title": "3 Night Stay in Paris", + "price": "£295" + }, + { + "title": "4 Night Stay in London", + "price": "£345" + }, + { + "title": "3 Night Stay in New York", + "price": "£325" + } + ] +} From f2de7d595acdc86a2874acd46239ed173d27cb5c Mon Sep 17 00:00:00 2001 From: akmhmgc Date: Tue, 3 Jan 2023 14:46:09 +0900 Subject: [PATCH 3/8] =?UTF-8?q?fixup!=20chore:=20=E4=B8=8D=E8=A6=81?= =?UTF-8?q?=E3=81=AA=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB=E3=82=92=E5=89=8A?= =?UTF-8?q?=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.css | 38 -------------------------------------- 1 file changed, 38 deletions(-) diff --git a/src/App.css b/src/App.css index 74b5e05..e69de29 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} From fbf2d5d6d4a71b9f8f81debb3690b3e516ebb9dc Mon Sep 17 00:00:00 2001 From: akmhmgc Date: Tue, 3 Jan 2023 14:46:31 +0900 Subject: [PATCH 4/8] =?UTF-8?q?chore:=20=E3=83=87=E3=83=BC=E3=82=BF?= =?UTF-8?q?=E3=81=ABkey=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- data/db.json | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/data/db.json b/data/db.json index 1b59aed..4b34c01 100644 --- a/data/db.json +++ b/data/db.json @@ -2,19 +2,23 @@ "trips": [ { "title": "2 Night Stay in Venice", - "price": "£195" + "price": "£195", + "id": "1" }, { "title": "3 Night Stay in Paris", - "price": "£295" + "price": "£295", + "id": "2" }, { "title": "4 Night Stay in London", - "price": "£345" + "price": "£345", + "id": "3" }, { "title": "3 Night Stay in New York", - "price": "£325" + "price": "£325", + "id": "4" } ] } From 23c5152c8a61641020bc10da1b1d7dab7ae6f430 Mon Sep 17 00:00:00 2001 From: akmhmgc Date: Tue, 3 Jan 2023 14:48:31 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat:=20API=E3=81=8B=E3=82=89=E3=83=87?= =?UTF-8?q?=E3=83=BC=E3=82=BF=E3=82=92=E5=8F=96=E5=BE=97=E3=81=97=E3=81=A6?= =?UTF-8?q?=E8=A1=A8=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 5 +++-- src/components/TripList.css | 16 ++++++++++++++++ src/components/TripList.js | 25 +++++++++++++++++++++++++ 3 files changed, 44 insertions(+), 2 deletions(-) create mode 100644 src/components/TripList.css create mode 100644 src/components/TripList.js diff --git a/src/App.js b/src/App.js index 872ef8e..cea2091 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,10 @@ -import './App.css'; +import "./App.css"; +import TripList from "./components/TripList"; function App() { return (
- +
); } diff --git a/src/components/TripList.css b/src/components/TripList.css new file mode 100644 index 0000000..6d395f1 --- /dev/null +++ b/src/components/TripList.css @@ -0,0 +1,16 @@ +.trip-list { + width: 480px; + margin: 60px auto; +} +.trip-list ul { + padding: 0; +} +.trip-list li { + border: 1px solid #e4e4e4; + box-sizing: border-box; + padding: 10px; + box-shadow: 4px 4px 6px rgba(0,0,0,0.05); + border-radius: 4px; + list-style-type: none; + margin: 20px 0; +} diff --git a/src/components/TripList.js b/src/components/TripList.js new file mode 100644 index 0000000..4372c5d --- /dev/null +++ b/src/components/TripList.js @@ -0,0 +1,25 @@ +import { useState, useEffect } from "react"; +import "./TripList.css"; + +export default function TripList() { + const [trips, setTrips] = useState([]); + console.log(trips); + useEffect(() => { + fetch("http://localhost:3000/trips") + .then((response) => response.json()) + .then((json) => setTrips(json)); + }); + return ( +
+

Trip list

+
    + {trips.map((trip) => ( +
  • +

    {trip.title}

    +

    {trip.price}

    +
    • + ))} +
+
+ ); +} From 7a2de2a1017e58b1155d4442d6ef319f9163d7dc Mon Sep 17 00:00:00 2001 From: akmhmgc Date: Tue, 3 Jan 2023 15:08:22 +0900 Subject: [PATCH 6/8] =?UTF-8?q?chroe:=20db=E3=81=AE=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- data/db.json | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/data/db.json b/data/db.json index 4b34c01..f0dfd01 100644 --- a/data/db.json +++ b/data/db.json @@ -3,22 +3,26 @@ { "title": "2 Night Stay in Venice", "price": "£195", - "id": "1" + "id": "1", + "loc": "europe" }, { "title": "3 Night Stay in Paris", "price": "£295", - "id": "2" + "id": "2", + "loc": "europe" }, { "title": "4 Night Stay in London", "price": "£345", - "id": "3" + "id": "3", + "loc": "europe" }, { "title": "3 Night Stay in New York", "price": "£325", - "id": "4" + "id": "4", + "loc": "america" } ] } From 5683befbd07e1579aa018abb8239cbc8ef977434 Mon Sep 17 00:00:00 2001 From: akmhmgc Date: Tue, 3 Jan 2023 15:15:12 +0900 Subject: [PATCH 7/8] =?UTF-8?q?feat:=20useEffect=E3=81=AE=E5=BC=95?= =?UTF-8?q?=E6=95=B0=E3=82=92=E6=8C=87=E5=AE=9A=E3=81=97=E3=81=A6=E5=89=AF?= =?UTF-8?q?=E4=BD=9C=E7=94=A8=E3=82=92=E3=82=B9=E3=82=AD=E3=83=83=E3=83=97?= =?UTF-8?q?=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TripList.css | 9 +++++++++ src/components/TripList.js | 10 +++++++--- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/components/TripList.css b/src/components/TripList.css index 6d395f1..9629427 100644 --- a/src/components/TripList.css +++ b/src/components/TripList.css @@ -14,3 +14,12 @@ list-style-type: none; margin: 20px 0; } +.trip-list .filters { + display: flex; + gap: 10px; +} +.trip-list button { + padding: 10px; + font-size: 16px; + flex-grow: 1; +} diff --git a/src/components/TripList.js b/src/components/TripList.js index 4372c5d..6321cea 100644 --- a/src/components/TripList.js +++ b/src/components/TripList.js @@ -3,12 +3,12 @@ import "./TripList.css"; export default function TripList() { const [trips, setTrips] = useState([]); - console.log(trips); + const [url, setUrl] = useState("http://localhost:3000/trips"); useEffect(() => { - fetch("http://localhost:3000/trips") + fetch(url) .then((response) => response.json()) .then((json) => setTrips(json)); - }); + }, [url]); return (

Trip list

@@ -20,6 +20,10 @@ export default function TripList() { ))} +
+ + +
); } From 3cfad3bd3cfe5ddc4bf3e5c69bc9e4f48c871daf Mon Sep 17 00:00:00 2001 From: akmhmgc Date: Tue, 3 Jan 2023 15:31:19 +0900 Subject: [PATCH 8/8] =?UTF-8?q?refactor:=20useEffect=E3=81=AE=E5=BC=95?= =?UTF-8?q?=E6=95=B0=E3=81=AB=E9=96=A2=E6=95=B0=E3=82=92=E6=8C=87=E5=AE=9A?= =?UTF-8?q?=E3=81=99=E3=82=8B=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TripList.js | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/src/components/TripList.js b/src/components/TripList.js index 6321cea..fd4a78a 100644 --- a/src/components/TripList.js +++ b/src/components/TripList.js @@ -1,14 +1,17 @@ -import { useState, useEffect } from "react"; +import { useState, useEffect, useCallback } from "react"; import "./TripList.css"; export default function TripList() { const [trips, setTrips] = useState([]); const [url, setUrl] = useState("http://localhost:3000/trips"); - useEffect(() => { - fetch(url) - .then((response) => response.json()) - .then((json) => setTrips(json)); + const fetchTrips = useCallback(async () => { + const response = await fetch(url); + const json = await response.json(); + setTrips(json); }, [url]); + useEffect(() => { + fetchTrips(); + }, [fetchTrips]); return (

Trip list

@@ -21,8 +24,14 @@ export default function TripList() { ))}
- - + +
);