From 6a15063cff3523a4d7e0d1b8588c4a84c88a8c6e Mon Sep 17 00:00:00 2001 From: Daniele Guido Date: Mon, 12 Feb 2024 15:45:45 +0100 Subject: [PATCH] Feature/issue 605 draft issues (#610) * move _redirects to public folder (netlify) * progressive loading articles page * add number of articles published to issue * remove date in Issue label, add name * add active/disabled class for Issue component * Update ArticlesFacets.js * Update translations.json * add "new" label * increase space see issue #605 --- .gitignore | 1 + _redirects => public/_redirects | 0 src/components/Articles/ArticlesFacets.js | 5 +- src/components/Articles/ArticlesGrid.js | 90 +++++++++++++------ src/components/Facets/Dimension.js | 11 ++- src/components/Facets/Facets.js | 2 + src/components/Issue/Issue.css | 15 ++++ src/components/Issue/Issue.js | 44 ++++++++- src/components/Issue/IssueArticleGridItem.js | 16 +++- src/components/Issue/IssueArticles.js | 4 +- src/components/Issue/IssueLabel.js | 17 +++- src/pages/Articles.js | 12 +-- .../components/IssueArticleGridItem.scss | 26 +++++- src/translations.json | 2 + 14 files changed, 200 insertions(+), 45 deletions(-) rename _redirects => public/_redirects (100%) create mode 100644 src/components/Issue/Issue.css diff --git a/.gitignore b/.gitignore index a294589b..890a205a 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,4 @@ node_modules .vscode/settings.json storybook-static # _redirects +journal-of-digital-history.code-workspace diff --git a/_redirects b/public/_redirects similarity index 100% rename from _redirects rename to public/_redirects diff --git a/src/components/Articles/ArticlesFacets.js b/src/components/Articles/ArticlesFacets.js index 17849418..6cd07dd8 100644 --- a/src/components/Articles/ArticlesFacets.js +++ b/src/components/Articles/ArticlesFacets.js @@ -57,7 +57,7 @@ const IssueListItem = (props) => { const issue = props.items[group.indices[0]].issue return (
- +
 ({group.count})
) @@ -105,7 +105,7 @@ const Dimensions = [ }, ] -const ArticlesFacets = ({ items, onSelect, className }) => { +const ArticlesFacets = ({ items, onSelect, onShowMore, className }) => { return ( { onSelect={onSelect} onInit={(args) => console.debug('[ArticlesFacets] @init', args)} ShowMoreLabel={ShowMoreLabel} + onShowMore={onShowMore} className={className} /> ) diff --git a/src/components/Articles/ArticlesGrid.js b/src/components/Articles/ArticlesGrid.js index 2c06fe77..2be31ce4 100644 --- a/src/components/Articles/ArticlesGrid.js +++ b/src/components/Articles/ArticlesGrid.js @@ -23,12 +23,12 @@ import Article from '../../models/Article' import ArticlesFacets from '../Articles/ArticlesFacets' import Issue from '../Issue' import ArticleFingerprintTooltip from '../ArticleV2/ArticleFingerprintTooltip' - import groupBy from 'lodash/groupBy' import { Container, Row, Col } from 'react-bootstrap' -import { useSpring, config } from 'react-spring' +import { useSpring, config, a } from '@react-spring/web' import { useHistory } from 'react-router' import { useBoundingClientRect } from '../../hooks/graphics' +import { useWindowStore } from '../../store' const ArticlesGrid = ({ items = [], @@ -39,6 +39,8 @@ const ArticlesGrid = ({ // tag ategories to keep categories = ['narrative', 'tool', 'issue'], }) => { + const facetsRef = useRef() + const timerRef = useRef() const { t } = useTranslation() const [{ [OrderByQueryParam]: orderBy }, setQuery] = useQueryParams({ [OrderByQueryParam]: withDefault( @@ -64,6 +66,10 @@ const ArticlesGrid = ({ backgroundColor: 'var(--secondary)', config: config.stiff, })) + // animation properties to slide up and down the articleFacets block + const [facetsAnimatedProps, setFacetsAnimatedProps] = useSpring(() => ({ + height: 0, + })) const data = (items || []).map((d, idx) => new Article({ ...d, idx })) const articles = sort(data, AvailablesOrderByComparators[orderBy]) const { articlesByIssue, showFilters } = useMemo(() => { @@ -78,6 +84,7 @@ const ArticlesGrid = ({ const sortedItems = data.map((item, idx) => ({ ...item, idx, + selected: selected?.includes(idx), })) const articlesByIssue = groupBy(sortedItems, 'issue.pid') @@ -85,7 +92,7 @@ const ArticlesGrid = ({ return acc || d.tags.some((t) => categories.includes(t.category)) }, false) return { articlesByIssue, showFilters } - }, [url, status]) + }, [url, selected, status]) const onArticleMouseMoveHandler = (e, datum, idx, article, bounds) => { if (!isNaN(idx) && animatedRef.current.idx !== idx) { @@ -154,14 +161,24 @@ const ArticlesGrid = ({ useLayoutEffect(() => { setAnimatedProps.start({ opacity: 0 }) }, [selected]) - console.debug( - '[Articles] \n- articles:', - Array.isArray(articles), - articles, - '\n- issueId:', - issueId, - selected, - ) + + useLayoutEffect(() => { + if (status === StatusSuccess) { + setFacetsAnimatedProps.start({ + height: facetsRef.current.firstChild.scrollHeight, + delay: 1000, + }) + return useWindowStore.subscribe(() => { + clearTimeout(timerRef.current) + timerRef.current = setTimeout(() => { + setFacetsAnimatedProps.start({ + height: facetsRef.current.firstChild.scrollHeight, + delay: 0, + }) + }, 0) + }) + } + }, [status]) return ( @@ -183,27 +200,39 @@ const ArticlesGrid = ({ - {showFilters && ( - - - {status === StatusSuccess && ( - - )} - - - )} + + + {status === StatusSuccess && ( + { + console.info('[ArticlesGrid] @showMore') + clearTimeout(timerRef.current) + setTimeout(() => { + setFacetsAnimatedProps.start({ + height: facetsRef.current.firstChild.scrollHeight, + delay: 0, + }) + }, 0) + }} + onSelect={onFacetsSelectHandler} + className="Articles_facets " + /> + )} + + {orderBy === OrderByIssue && issues.map((issue) => { - // const issue = articlesByIssue[id][0].issue + const numArticles = articlesByIssue[issue.pid]?.length + const numSelectedArticles = articlesByIssue[issue.pid]?.filter((d) => d.selected).length return ( -
- + ) diff --git a/src/components/Facets/Dimension.js b/src/components/Facets/Dimension.js index 0739cc8f..b98d8528 100644 --- a/src/components/Facets/Dimension.js +++ b/src/components/Facets/Dimension.js @@ -80,6 +80,7 @@ const Dimension = ({ onInit, onSelect, onMouseEnter, + onShowMore, children, ListItem = DimensionGroupListItem, }) => { @@ -174,7 +175,15 @@ const Dimension = ({ ))} {restGroups.length > 0 && (
  • -