[@portaljs/ckan] - add loading state

This commit is contained in:
Luccas Mateus de Medeiros Gomes 2023-05-23 20:14:55 -03:00
parent b8f0a9e432
commit 5a6cf37c9e
6 changed files with 128 additions and 29 deletions

View File

@ -1,15 +1,15 @@
{
"name": "my-portal",
"name": "ckan",
"version": "0.1.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "my-portal",
"name": "ckan",
"version": "0.1.0",
"dependencies": {
"@heroicons/react": "^2.0.18",
"@portaljs/ckan": "file:portaljs-ckan-0.1.2.tgz",
"@portaljs/ckan": "file:portaljs-ckan-0.1.4.tgz",
"@types/node": "20.2.3",
"@types/react": "18.2.6",
"@types/react-dom": "18.2.4",
@ -384,9 +384,14 @@
}
},
"node_modules/@portaljs/ckan": {
"version": "0.1.2",
"resolved": "file:portaljs-ckan-0.1.2.tgz",
"integrity": "sha512-A03c8Rp6zxVLu/nXVLO98CvKqxCnS3R5B3DkXWe9H2JQThKihIFK83cNN+verzot+9nHjJytVbVO5VUytbYoPw==",
"version": "0.1.4",
"resolved": "file:portaljs-ckan-0.1.4.tgz",
"integrity": "sha512-95ro38GlSNGC2cedVpu2NvrjM0WOUH5d7zLCbqg27/gOP3ASKNLrM9T39IvFejxbcOsvF2DdNlY7nhWZI9wPAw==",
"dependencies": {
"formik": "^2.2.9",
"swr": "^2.1.5",
"timeago.js": "^4.0.2"
},
"peerDependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
@ -1098,6 +1103,14 @@
"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
"integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="
},
"node_modules/deepmerge": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
"integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/default-browser": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/default-browser/-/default-browser-4.0.0.tgz",
@ -1887,6 +1900,34 @@
"is-callable": "^1.1.3"
}
},
"node_modules/formik": {
"version": "2.2.9",
"resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
"integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==",
"funding": [
{
"type": "individual",
"url": "https://opencollective.com/formik"
}
],
"dependencies": {
"deepmerge": "^2.1.1",
"hoist-non-react-statics": "^3.3.0",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"react-fast-compare": "^2.0.1",
"tiny-warning": "^1.0.2",
"tslib": "^1.10.0"
},
"peerDependencies": {
"react": ">=16.8.0"
}
},
"node_modules/formik/node_modules/tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
},
"node_modules/fraction.js": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
@ -2167,6 +2208,14 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"dependencies": {
"react-is": "^16.7.0"
}
},
"node_modules/human-signals": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
@ -2699,6 +2748,16 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"node_modules/lodash-es": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
},
"node_modules/lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@ -3416,6 +3475,11 @@
"react": "^18.2.0"
}
},
"node_modules/react-fast-compare": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -3918,6 +3982,17 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/swr": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/swr/-/swr-2.1.5.tgz",
"integrity": "sha512-/OhfZMcEpuz77KavXST5q6XE9nrOBOVcBLWjMT+oAE/kQHyE3PASrevXCtQDZ8aamntOfFkbVJp7Il9tNBQWrw==",
"dependencies": {
"use-sync-external-store": "^1.2.0"
},
"peerDependencies": {
"react": "^16.11.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/synckit": {
"version": "0.8.5",
"resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.5.tgz",
@ -4002,6 +4077,16 @@
"node": ">=0.8"
}
},
"node_modules/timeago.js": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/timeago.js/-/timeago.js-4.0.2.tgz",
"integrity": "sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w=="
},
"node_modules/tiny-warning": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
},
"node_modules/titleize": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz",
@ -4170,6 +4255,14 @@
"punycode": "^2.1.0"
}
},
"node_modules/use-sync-external-store": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
"integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

View File

@ -10,7 +10,7 @@
},
"dependencies": {
"@heroicons/react": "^2.0.18",
"@portaljs/ckan": "*",
"@portaljs/ckan": "file:portaljs-ckan-0.1.4.tgz",
"@types/node": "20.2.3",
"@types/react": "18.2.6",
"@types/react-dom": "18.2.4",

View File

@ -37,7 +37,7 @@ export default function Home({
});
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24 bg-zinc-900">
<main className="flex min-h-screen flex-col items-center p-24 bg-zinc-900">
<DatasetSearchForm
options={options}
setOptions={setOptions}

View File

@ -1,6 +1,6 @@
{
"name": "@portaljs/ckan",
"version": "0.1.2",
"version": "0.1.4",
"type": "module",
"description": "https://portaljs.org",
"keywords": [

View File

@ -70,7 +70,7 @@ function ListItems({
setOptions: Dispatch<SetStateAction<PackageSearchOptions>>;
urlPrefix?: string;
}) {
const { data } = useSWR(['package_search', options], async () =>
const { data, isLoading } = useSWR(['package_search', options], async () =>
ckan.packageSearch({ ...options })
);
//Define which page buttons are going to be displayed in the pagination list
@ -78,25 +78,31 @@ function ListItems({
return (
<>
<h2 className="text-4xl capitalize font-bold text-zinc-900">
{data?.count} Datasets
</h2>
{data?.datasets?.map((dataset) => (
<DatasetCard
key={dataset.id}
dataset={dataset}
showOrg={true}
urlPrefix={urlPrefix}
/>
))}
{data?.count && (
<Pagination
options={options}
subsetOfPages={subsetOfPages}
setSubsetOfPages={setSubsetOfPages}
setOptions={setOptions}
count={data.count}
/>
{isLoading ? (
<div className="loader mb-4 h-12 w-12 rounded-full border-4 border-t-4 border-gray-200 ease-linear"></div>
) : (
<>
<h2 className="text-4xl capitalize font-bold text-zinc-900">
{data?.count} Datasets
</h2>
{data?.datasets?.map((dataset) => (
<DatasetCard
key={dataset.id}
dataset={dataset}
showOrg={true}
urlPrefix={urlPrefix}
/>
))}
{data?.count && (
<Pagination
options={options}
subsetOfPages={subsetOfPages}
setSubsetOfPages={setSubsetOfPages}
setOptions={setOptions}
count={data.count}
/>
)}
</>
)}
</>
);