Skip to content

Commit

Permalink
[feat] Add loader spinner
Browse files Browse the repository at this point in the history
  • Loading branch information
@georgejkaye
georgejkaye committed Dec 19, 2023
1 parent 3c865e2 commit 0b170ee
Show file tree
Hide file tree
Showing 4 changed files with 127 additions and 16 deletions.
3 changes: 2 additions & 1 deletion client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@
"axios": "^1.6.2",
"next": "14.0.4",
"react": "^18",
"react-dom": "^18"
"react-dom": "^18",
"react-loader-spinner": "^6.1.1-0"
},
"devDependencies": {
"@types/node": "^20",
Expand Down
7 changes: 5 additions & 2 deletions client/src/app/api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,14 @@ const dataToRow = (d: any) => ({
temperature: d.temperature,
})

export const getRows = async (setRows: Dispatch<SetStateAction<Row[]>>) => {
export const getRows = async (
setRows: Dispatch<SetStateAction<Row[]>>,
setLoading: Dispatch<SetStateAction<boolean>>
) => {
let endpoint = `/api/observations`
let response = await axios.get(endpoint)
let data = response.data
let objects = data.map(dataToRow)
console.log(objects)
setRows(objects)
setTimeout(() => setLoading(false), 100)
}
46 changes: 37 additions & 9 deletions client/src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

import { useEffect, useState } from "react"
import Image from "next/image"
import { ColorRing } from "react-loader-spinner"
import {
ColourMap,
Row,
Expand Down Expand Up @@ -36,22 +37,49 @@ const Row = (props: { row: Row; colourMap: ColourMap }) => {
)
}

const Rows = (props: { rows: Row[] }) => {
const [colours, setColours] = useState<ColourMap>(defaultColourMap)
return (
<div className="flex flex-col w-full">
{props.rows.map((r) => (
<Row
key={r.actual_datetime.getTime()}
row={r}
colourMap={colours}
/>
))}
</div>
)
}

const Home = () => {
const [isLoading, setLoading] = useState(true)
const [rows, setRows] = useState<Row[]>([])
const [colours, setColours] = useState<ColourMap>(defaultColourMap)
useEffect(() => {
getRows(setRows)
getRows(setRows, setLoading)
}, [])
return (
<main>
<div className="w-mobileContent tablet:w-tabletContent desktop:w-content m-auto">
{rows.map((r) => (
<Row
key={r.actual_datetime.getTime()}
row={r}
colourMap={colours}
<div className="w-mobileContent tablet:w-tabletContent desktop:w-content m-auto flex justify-center">
{isLoading ? (
<ColorRing
visible={true}
height="80"
width="80"
ariaLabel="blocks-loading"
wrapperStyle={{}}
wrapperClass="blocks-wrapper"
colors={[
"#0000ff",
"#0000ff",
"#0000ff",
"#0000ff",
"#0000ff",
]}
/>
))}
) : (
<Rows rows={rows} />
)}
</div>
</main>
)
Expand Down
87 changes: 83 additions & 4 deletions client/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,23 @@
dependencies:
regenerator-runtime "^0.14.0"

"@emotion/is-prop-valid@^1.2.1":
version "1.2.1"
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
dependencies:
"@emotion/memoize" "^0.8.1"

"@emotion/memoize@^0.8.1":
version "0.8.1"
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==

"@emotion/unitless@^0.8.0":
version "0.8.1"
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==

"@eslint-community/eslint-utils@^4.2.0":
version "4.4.0"
resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
Expand Down Expand Up @@ -230,6 +247,11 @@
resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==

"@types/stylis@^4.0.2":
version "4.2.4"
resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.4.tgz#14b61f022e832d87d442ae1795e0f0f0b7daa879"
integrity sha512-36ZrGJ8fgtBr6nwNnuJ9jXIj+bn/pF6UoqmrQT7+Y99+tFFeHHsoR54+194dHdyhPjgbeoNz3Qru0oRt0l6ASQ==

"@typescript-eslint/parser@^5.4.2 || ^6.0.0":
version "6.15.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.15.0.tgz#1af69741cfa314a13c1434d0bdd5a0c3096699d7"
Expand Down Expand Up @@ -537,6 +559,11 @@ camelcase-css@^2.0.1:
resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==

camelize@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3"
integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==

caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001565:
version "1.0.30001570"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001570.tgz#b4e5c1fa786f733ab78fc70f592df6b3f23244ca"
Expand Down Expand Up @@ -608,12 +635,26 @@ cross-spawn@^7.0.2:
shebang-command "^2.0.0"
which "^2.0.1"

css-color-keywords@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==

css-to-react-native@^3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32"
integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==
dependencies:
camelize "^1.0.0"
css-color-keywords "^1.0.0"
postcss-value-parser "^4.0.2"

cssesc@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==

csstype@^3.0.2:
csstype@^3.0.2, csstype@^3.1.2:
version "3.1.3"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
Expand Down Expand Up @@ -1967,7 +2008,7 @@ postcss-selector-parser@^6.0.11:
cssesc "^3.0.0"
util-deprecate "^1.0.2"

postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
Expand All @@ -1981,7 +2022,7 @@ [email protected]:
picocolors "^1.0.0"
source-map-js "^1.0.2"

postcss@^8, postcss@^8.4.23:
postcss@^8, postcss@^8.4.23, postcss@^8.4.31:
version "8.4.32"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.32.tgz#1dac6ac51ab19adb21b8b34fd2d93a86440ef6c9"
integrity sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==
Expand Down Expand Up @@ -2032,6 +2073,19 @@ react-is@^16.13.1:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==

react-is@^18.2.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==

react-loader-spinner@^6.1.1-0:
version "6.1.1-0"
resolved "https://registry.yarnpkg.com/react-loader-spinner/-/react-loader-spinner-6.1.1-0.tgz#81537df91fd26d7ed1edc89973a630d807380df3"
integrity sha512-Q9Gj5g7WRZHdYyv0rDPqYYjHOS/6PsOB3odqbeR/PqofajYIRJaHoG+UmtxEo+6sg6Pf0semit8/Cbeo3GYqRQ==
dependencies:
react-is "^18.2.0"
styled-components "^6.1.1"

react@^18:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
Expand Down Expand Up @@ -2183,6 +2237,11 @@ set-function-name@^2.0.0, set-function-name@^2.0.1:
functions-have-names "^1.2.3"
has-property-descriptors "^1.0.0"

shallowequal@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==

shebang-command@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
Expand Down Expand Up @@ -2278,13 +2337,33 @@ strip-json-comments@^3.1.1:
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==

styled-components@^6.1.1:
version "6.1.1"
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.1.tgz#a5414ada07fb1c17b96a26a05369daa4e2ad55e5"
integrity sha512-cpZZP5RrKRIClBW5Eby4JM1wElLVP4NQrJbJ0h10TidTyJf4SIIwa3zLXOoPb4gJi8MsJ8mjq5mu2IrEhZIAcQ==
dependencies:
"@emotion/is-prop-valid" "^1.2.1"
"@emotion/unitless" "^0.8.0"
"@types/stylis" "^4.0.2"
css-to-react-native "^3.2.0"
csstype "^3.1.2"
postcss "^8.4.31"
shallowequal "^1.1.0"
stylis "^4.3.0"
tslib "^2.5.0"

[email protected]:
version "5.1.1"
resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.1.tgz#839a1c3aaacc4e735fed0781b8619ea5d0009d1f"
integrity sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==
dependencies:
client-only "0.0.1"

stylis@^4.3.0:
version "4.3.0"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.0.tgz#abe305a669fc3d8777e10eefcfc73ad861c5588c"
integrity sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==

sucrase@^3.32.0:
version "3.34.0"
resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.34.0.tgz#1e0e2d8fcf07f8b9c3569067d92fbd8690fb576f"
Expand Down Expand Up @@ -2389,7 +2468,7 @@ tsconfig-paths@^3.15.0:
minimist "^1.2.6"
strip-bom "^3.0.0"

tslib@^2.4.0:
tslib@^2.4.0, tslib@^2.5.0:
version "2.6.2"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
Expand Down

0 comments on commit 0b170ee

Please sign in to comment.