From b6904131656dfcaf2f15f6512f4a3d90b6581b8a Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Fri, 21 Jul 2023 01:27:24 +0800 Subject: [PATCH 1/3] Add SWR --- package-lock.json | 34 ++++++++++++++++++++++++++++++++++ package.json | 1 + 2 files changed, 35 insertions(+) diff --git a/package-lock.json b/package-lock.json index 8a41d50..d7d39cf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "react-dom": "^18.2.0", "react-router-dom": "^6.14.1", "styled-components": "^5.3.11", + "swr": "^2.2.0", "url": "^0.11.1" }, "devDependencies": { @@ -11419,6 +11420,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/swr": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.0.tgz", + "integrity": "sha512-AjqHOv2lAhkuUdIiBu9xbuettzAzWXmCEcLONNKJRba87WAefz8Ca9d6ds/SzrPc235n1IxWYdhJ2zF3MNUaoQ==", + "dependencies": { + "use-sync-external-store": "^1.2.0" + }, + "peerDependencies": { + "react": "^16.11.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", @@ -11978,6 +11990,14 @@ "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz", "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==" }, + "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", @@ -21203,6 +21223,14 @@ "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", "dev": true }, + "swr": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.0.tgz", + "integrity": "sha512-AjqHOv2lAhkuUdIiBu9xbuettzAzWXmCEcLONNKJRba87WAefz8Ca9d6ds/SzrPc235n1IxWYdhJ2zF3MNUaoQ==", + "requires": { + "use-sync-external-store": "^1.2.0" + } + }, "symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", @@ -21609,6 +21637,12 @@ "requires-port": "^1.0.0" } }, + "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==", + "requires": {} + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/package.json b/package.json index 4eb0208..a0d95ae 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "react-dom": "^18.2.0", "react-router-dom": "^6.14.1", "styled-components": "^5.3.11", + "swr": "^2.2.0", "url": "^0.11.1" }, "overrides": { From 7464654fd4f496d9e1d3a3ed8e43870b702501df Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Fri, 21 Jul 2023 01:33:55 +0800 Subject: [PATCH 2/3] SubjectPage: use SWR instead of previous data-fetching pattern --- src/pages/SubjectPage/SubjectPage.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/pages/SubjectPage/SubjectPage.js b/src/pages/SubjectPage/SubjectPage.js index cc33952..ed125b1 100644 --- a/src/pages/SubjectPage/SubjectPage.js +++ b/src/pages/SubjectPage/SubjectPage.js @@ -2,6 +2,7 @@ import { useContext, useEffect, useState } from 'react' import { Box, Grid, Heading, ResponsiveContext } from 'grommet' import { useParams } from 'react-router-dom' import { observer } from 'mobx-react' +import useSWR from 'swr' import SearchResultsList from '@src/components/SearchResultsList' import SubjectActionsPanel from '@src/components/SubjectActionsPanel' @@ -19,15 +20,25 @@ import getQuery from '@src/helpers/getQuery.js' const { READY, FETCHING, ERROR } = ASYNC_STATES function SubjectPage () { + /* const [ subjectData, setSubjectData ] = useState(undefined) const [ status, setStatus ] = useState(READY) - const size = useContext(ResponsiveContext) + */ const { project, showingSensitiveContent, setShowingSensitiveContent } = useStores() const params = useParams() const subjectId = params.subjectId const query = getQuery() + const size = useContext(ResponsiveContext) + + const { data: subjectData, error, isLoading } = useSWR(subjectId, fetchSubject) + const status = (error) ? ERROR : (isLoading) ? FETCHING : READY + + useEffect(function onTargetChange_scrollToTop () { + window.scrollTo(0, 0) // TODO: improve scroll target + }, [ subjectId ]) + /* useEffect(function onTargetChange_resetThenFetchData () { setSubjectData(undefined) setStatus(READY) @@ -48,6 +59,7 @@ function SubjectPage () { console.error('', err) } } + */ const title = (subjectId) ? subjectData?.metadata?.[project?.titleField] // Use the title field of the Subject, if any From 8bf3d465343a51a6aa268061122ac8c68b10183c Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Fri, 21 Jul 2023 01:37:28 +0800 Subject: [PATCH 3/3] SubjectPage: remove unused code --- src/pages/SubjectPage/SubjectPage.js | 28 ---------------------------- 1 file changed, 28 deletions(-) diff --git a/src/pages/SubjectPage/SubjectPage.js b/src/pages/SubjectPage/SubjectPage.js index ed125b1..9844ddd 100644 --- a/src/pages/SubjectPage/SubjectPage.js +++ b/src/pages/SubjectPage/SubjectPage.js @@ -20,11 +20,6 @@ import getQuery from '@src/helpers/getQuery.js' const { READY, FETCHING, ERROR } = ASYNC_STATES function SubjectPage () { - /* - const [ subjectData, setSubjectData ] = useState(undefined) - const [ status, setStatus ] = useState(READY) - */ - const { project, showingSensitiveContent, setShowingSensitiveContent } = useStores() const params = useParams() const subjectId = params.subjectId @@ -38,29 +33,6 @@ function SubjectPage () { window.scrollTo(0, 0) // TODO: improve scroll target }, [ subjectId ]) - /* - useEffect(function onTargetChange_resetThenFetchData () { - setSubjectData(undefined) - setStatus(READY) - doFetchData(subjectId) - - window.scrollTo(0, 0) // TODO: improve scroll target - }, [ subjectId ]) - - async function doFetchData (subjectId) { - if (!subjectId) return - try { - setStatus(FETCHING) - const subject = await fetchSubject(subjectId) - setSubjectData(subject) - setStatus(READY) - } catch (err) { - setStatus(ERROR) - console.error('', err) - } - } - */ - const title = (subjectId) ? subjectData?.metadata?.[project?.titleField] // Use the title field of the Subject, if any || strings.pages.subject_page.title.replace(/{subject_id}/g, subjectId) //