From 1081868ce0c2c28cd16c4f4a04bf3d847b289909 Mon Sep 17 00:00:00 2001 From: Lucas Malta Date: Tue, 15 Oct 2019 17:52:11 -0300 Subject: [PATCH] Add loader when list is being fetched --- package-lock.json | 104 ++++++++++++++++++++++++++++++++- package.json | 1 + src/components/Ticketmaster.js | 102 +++++++++++++++++++------------- 3 files changed, 165 insertions(+), 42 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3934e37..e099925 100644 --- a/package-lock.json +++ b/package-lock.json @@ -926,6 +926,45 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-9.0.1.tgz", "integrity": "sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA==" }, + "@emotion/cache": { + "version": "10.0.19", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.19.tgz", + "integrity": "sha512-BoiLlk4vEsGBg2dAqGSJu0vJl/PgVtCYLBFJaEO8RmQzPugXewQCXZJNXTDFaRlfCs0W+quesayav4fvaif5WQ==", + "requires": { + "@emotion/sheet": "0.9.3", + "@emotion/stylis": "0.8.4", + "@emotion/utils": "0.11.2", + "@emotion/weak-memoize": "0.2.4" + } + }, + "@emotion/core": { + "version": "10.0.21", + "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.21.tgz", + "integrity": "sha512-U9zbc7ovZ2ceIwbLXYZPJy6wPgnOdTNT4jENZ31ee6v2lojetV5bTbCVk6ciT8G3wQRyVaTTfUCH9WCrMzpRIw==", + "requires": { + "@babel/runtime": "^7.5.5", + "@emotion/cache": "^10.0.17", + "@emotion/css": "^10.0.14", + "@emotion/serialize": "^0.11.10", + "@emotion/sheet": "0.9.3", + "@emotion/utils": "0.11.2" + } + }, + "@emotion/css": { + "version": "10.0.14", + "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.14.tgz", + "integrity": "sha512-MozgPkBEWvorcdpqHZE5x1D/PLEHUitALQCQYt2wayf4UNhpgQs2tN0UwHYS4FMy5ROBH+0ALyCFVYJ/ywmwlg==", + "requires": { + "@emotion/serialize": "^0.11.8", + "@emotion/utils": "0.11.2", + "babel-plugin-emotion": "^10.0.14" + } + }, + "@emotion/hash": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.3.tgz", + "integrity": "sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw==" + }, "@emotion/is-prop-valid": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.3.tgz", @@ -939,11 +978,43 @@ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.3.tgz", "integrity": "sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow==" }, + "@emotion/serialize": { + "version": "0.11.11", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.11.tgz", + "integrity": "sha512-YG8wdCqoWtuoMxhHZCTA+egL0RSGdHEc+YCsmiSBPBEDNuVeMWtjEWtGrhUterSChxzwnWBXvzSxIFQI/3sHLw==", + "requires": { + "@emotion/hash": "0.7.3", + "@emotion/memoize": "0.7.3", + "@emotion/unitless": "0.7.4", + "@emotion/utils": "0.11.2", + "csstype": "^2.5.7" + } + }, + "@emotion/sheet": { + "version": "0.9.3", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.3.tgz", + "integrity": "sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A==" + }, + "@emotion/stylis": { + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.4.tgz", + "integrity": "sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ==" + }, "@emotion/unitless": { "version": "0.7.4", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.4.tgz", "integrity": "sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==" }, + "@emotion/utils": { + "version": "0.11.2", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.2.tgz", + "integrity": "sha512-UHX2XklLl3sIaP6oiMmlVzT0J+2ATTVpf0dHQVyPJHTkOITvXfaSqnRk6mdDhV9pR8T/tHc3cex78IKXssmzrA==" + }, + "@emotion/weak-memoize": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.4.tgz", + "integrity": "sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA==" + }, "@hapi/address": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.1.tgz", @@ -2180,6 +2251,23 @@ "object.assign": "^4.1.0" } }, + "babel-plugin-emotion": { + "version": "10.0.21", + "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.21.tgz", + "integrity": "sha512-03o+T6sfVAJhNDcSdLapgv4IeewcFPzxlvBUVdSf7o5PI57ZSxoDvmy+ZulVWSu+rOWAWkEejNcsb29TuzJHbg==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@emotion/hash": "0.7.3", + "@emotion/memoize": "0.7.3", + "@emotion/serialize": "^0.11.11", + "babel-plugin-macros": "^2.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^1.0.5", + "find-root": "^1.1.0", + "source-map": "^0.5.7" + } + }, "babel-plugin-istanbul": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz", @@ -4286,8 +4374,7 @@ "csstype": { "version": "2.6.6", "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.6.tgz", - "integrity": "sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==", - "dev": true + "integrity": "sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==" }, "cyclist": { "version": "1.0.1", @@ -6001,6 +6088,11 @@ "pkg-dir": "^3.0.0" } }, + "find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "find-up": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", @@ -11565,6 +11657,14 @@ } } }, + "react-spinners": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.6.1.tgz", + "integrity": "sha512-bMCOvwAlzuIDC6Zh69E1EbyKUbvWSl4sMzLXOgnsF4Q/kkAnCNaonWyskMFytbaJSYxBCCOiaeCH2moDJ5y5Pg==", + "requires": { + "@emotion/core": "^10.0.15" + } + }, "react-syntax-highlighter": { "version": "10.3.5", "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-10.3.5.tgz", diff --git a/package.json b/package.json index 20dc8b5..15c26ee 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "react": "^16.9.0", "react-dom": "^16.9.0", "react-scripts": "3.1.1", + "react-spinners": "^0.6.1", "styled-components": "^4.4.0" }, "scripts": { diff --git a/src/components/Ticketmaster.js b/src/components/Ticketmaster.js index d951406..2336fd1 100644 --- a/src/components/Ticketmaster.js +++ b/src/components/Ticketmaster.js @@ -1,4 +1,5 @@ import React, { useState, useEffect, useRef, useCallback } from 'react'; +import ClipLoader from 'react-spinners/ClipLoader'; import Styled from 'styled-components'; const api_key = '7elxdku9GGG5k8j0Xm8KWdANDgecHMV0'; @@ -131,6 +132,11 @@ const TopBtn = Styled.button` } `; +const LoaderContainer = Styled.div` +text-align: center; +margin-top: 30px; +`; + const initialData = { _embedded: { events: [] }, page: {} }; const Ticketmaster = function() { @@ -138,10 +144,12 @@ const Ticketmaster = function() { const [data, setData] = useState(initialData); const [search, setSearch] = useState(''); const [page, setPage] = useState(0); + const [loading, setLoading] = useState(false); const topBtnEl = useRef(); useEffect(() => { const fetchData = async () => { + setLoading(true); try { const query_url = full_url + '&keyword=' + search + '&page=' + page; const response = await fetch(query_url); @@ -152,18 +160,16 @@ const Ticketmaster = function() { : { ...result, _embedded: { - events: [ - ...data._embedded.events, - ...result._embedded.events, - ], - }, + events: [...data._embedded.events, ...result._embedded.events] + } } ); + setLoading(false); } catch (error) { + setLoading(false); console.log(error); } }; - fetchData(); }, [search, page]); @@ -245,42 +251,58 @@ const Ticketmaster = function() { Search - - - {data._embedded.events.map(tmevent => ( - - {tmevent.name} - - {createDateLocation( - tmevent.dates.start.localDate, - tmevent._embedded.venues[0].name - )} - - {createCityState(tmevent)} - + + + + {loading ? null : ( +
+ + + {data._embedded.events.map(tmevent => ( + + {tmevent.name} + + {createDateLocation( + tmevent.dates.start.localDate, + tmevent._embedded.venues[0].name + )} + + {createCityState(tmevent)} + + + Buy Tickets + + + + ))} + + + + {data._embedded.events.map(tmevent => ( +
  • - Buy Tickets + {tmevent.name} - - - ))} - - - - {data._embedded.events.map(tmevent => ( -
  • - - {tmevent.name} - -
    • - ))} -     - {page < totalPages - 1 && ( - - - + + ))} + + {page < totalPages - 1 && ( + + + + )} +
    )} Top