Skip to content

Commit

Permalink
fix(mentions): Restore pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
@annelhote
annelhote committed Oct 22, 2024
1 parent c93b2a5 commit a0001ca
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 166 deletions.
2 changes: 1 addition & 1 deletion client/src/pages/filters.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export default function Filters({
useEffect(() => {
const getData = async () => {
if (searchParams.size === 0) {
// default values
// Set default params values
setSearchParams({
affiliations: [],
datasets: false,
Expand Down
183 changes: 54 additions & 129 deletions client/src/pages/mentions.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,37 +12,26 @@ import { DataTable } from 'primereact/datatable';
import { useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';

import { authorsTemplate } from '../utils/templates';
import { affiliations2Template, authorsTemplate } from '../utils/templates';
import { getMentions } from '../utils/works';

const DEFAULT_ROWS = 50;
const DEFAULT_SEARCH = '';
const DEFAULT_SIZE = 50;

export default function Mentions() {
const [searchParams, setSearchParams] = useSearchParams();
const [currentTab, setCurrentTab] = useState(0);
const [affiliation, setAffiliation] = useState('');
const [author, setAuthor] = useState('');
const [doi, setDoi] = useState('');
const [from, setFrom] = useState(0);
const [loading, setLoading] = useState(false);
const [mentions, setMentions] = useState([]);
const [rows, setRows] = useState(DEFAULT_ROWS);
const [search, setSearch] = useState('');
const [search, setSearch] = useState(DEFAULT_SEARCH);
const [totalRecords, setTotalRecords] = useState(0);
const [lazyState, setlazyState] = useState({
first: 0,
page: 1,
rows: DEFAULT_ROWS,
const [urlSearchParams, setUrlSearchParams] = useState({
from: 0,
search: DEFAULT_SEARCH,
size: DEFAULT_SIZE,
type: 'software',
});

// Templates
const affiliationsTemplate = (rowData) => (
<ul>
{rowData.affiliations.slice(0, 3).map((_affiliation) => (
<li>{_affiliation}</li>
))}
</ul>
);
const contextTemplate = (rowData) => (
<span dangerouslySetInnerHTML={{ __html: rowData.context }} />
);
Expand All @@ -53,11 +42,7 @@ export default function Mentions() {
? 'fr-icon-check-line'
: 'fr-icon-close-line'
}`}
style={{ color:
rowData.mention_context.created
? '#8dc572'
: '#be6464',
}}
style={{ color: rowData.mention_context.created ? '#8dc572' : '#be6464' }}
/>
);
const doiTemplate = (rowData) => (
Expand All @@ -70,11 +55,7 @@ export default function Mentions() {
? 'fr-icon-check-line'
: 'fr-icon-close-line'
}`}
style={{ color:
rowData.mention_context.shared
? '#8dc572'
: '#be6464',
}}
style={{ color: rowData.mention_context.shared ? '#8dc572' : '#be6464' }}
/>
);
const usedTemplate = (rowData) => (
Expand All @@ -84,69 +65,60 @@ export default function Mentions() {
? 'fr-icon-check-line'
: 'fr-icon-close-line'
}`}
style={{ color:
rowData.mention_context.used
? '#8dc572'
: '#be6464',
}}
style={{ color: rowData.mention_context.used ? '#8dc572' : '#be6464' }}
/>
);

// Events
const loadLazyData = async () => {
setLoading(true);
const data = await getMentions({
affiliation: searchParams.get('affiliation'),
author: searchParams.get('author'),
doi: searchParams.get('doi'),
from: searchParams.get('from'),
search: searchParams.get('search'),
size: searchParams.get('size'),
type: currentTab === 0 ? 'software' : 'datasets',
});
setMentions(data?.mentions ?? []);
setTotalRecords(data?.count ?? 0);
setLoading(false);
};
const onPage = (event) => {
setFrom(event.first);
setRows(event.rows);
searchParams.set('from', parseInt(event.first, 10));
setSearchParams(searchParams);
};
const onSubmit = () => {
setSearchParams((params) => {
params.set('affiliation', affiliation);
params.set('author', author);
params.set('doi', doi);
params.set('from', from);
params.set('search', search);
params.set('size', rows);
return params;
});
searchParams.set('search', search);
setSearchParams(searchParams);
};

// Effects
useEffect(() => setFrom(0), [currentTab]);
useEffect(() => {
setlazyState({
...lazyState,
first: parseInt(searchParams.get('from'), 10),
rows: searchParams.get('size'),
});
}, [currentTab, searchParams]);
console.log('searchParams changed');
if (searchParams.size === 0) {
setSearchParams({
from: 0,
search: DEFAULT_SEARCH,
size: DEFAULT_SIZE,
type: 'software',
});
} else {
setUrlSearchParams({
from: searchParams.get('from'),
search: searchParams.get('search'),
size: searchParams.get('size'),
type: searchParams.get('type'),
});
}
}, [searchParams]);
useEffect(() => {
loadLazyData();
}, [lazyState]);
const getData = async () => {
setLoading(true);
const data = await getMentions(urlSearchParams);
setMentions(data?.mentions ?? []);
setTotalRecords(data?.count ?? 0);
setLoading(false);
};
getData();
}, [urlSearchParams]);

return (
<Container as="section" className="fr-mt-4w mentions">
<Row>
<Col md={10} xs={12}>
<Row>
<Col className="fr-pr-2w fr-mb-2w" md={3} xs={12}>
<Col className="fr-pr-2w fr-mb-2w" md={2} xs={12}>
<div className="label">Search</div>
<div className="hint">Example "Coq"</div>
<div className="hint">Example "Coq" or "Cern"</div>
</Col>
<Col md={9} xs={12}>
<Col md={10} xs={12}>
<TextInput
disableAutoValidation
// hint="Example: Coq"
Expand All @@ -156,76 +128,29 @@ export default function Mentions() {
/>
</Col>
</Row>
<Row style={{ display: 'none' }}>
<Col className="fr-pr-2w" md={3} xs={12}>
<div className="label">Affiliation</div>
<div className="hint">Example "Cern"</div>
</Col>
<Col md={9} xs={12}>
<TextInput
disableAutoValidation
// hint="Example: Coq"
// label="Search"
onChange={(e) => setAffiliation(e.target.value)}
value={affiliation}
/>
</Col>
</Row>
<Row style={{ display: 'none' }}>
<Col className="fr-pr-2w" md={3} xs={12}>
<div className="label">Author</div>
<div className="hint">Example "Bruno Latour"</div>
</Col>
<Col md={9} xs={12}>
<TextInput
disableAutoValidation
// hint="Example: Coq"
// label="Search"
onChange={(e) => setAuthor(e.target.value)}
value={author}
/>
</Col>
</Row>
<Row className="fr-mb-2w" style={{ display: 'none' }}>
<Col className="fr-pr-2w" md={3} xs={12}>
<div className="label">DOI</div>
<div className="hint">
Example "10.4000/proceedings.elpub.2019.20"
</div>
</Col>
<Col md={9} xs={12}>
<TextInput
disableAutoValidation
// hint="Example: Coq"
// label="Search"
onChange={(e) => setDoi(e.target.value)}
value={doi}
/>
</Col>
</Row>
</Col>
<Col className="fr-pl-2w" md={2} xs={12}>
<Col className="fr-pl-2w fr-mt-1w" md={2} xs={12}>
<Button onClick={onSubmit} style={{ verticalAlign: 'bottom' }}>
Search mentions
</Button>
</Col>
</Row>
<Tabs
defaultActiveIndex={currentTab}
onTabChange={(i) => setCurrentTab(i)}
defaultActiveIndex={0}
onTabChange={(i) => setUrlSearchParams({ ...urlSearchParams, type: i === 0 ? 'software' : 'datasets' })}
>
<Tab label="Software">
<DataTable
currentPageReportTemplate="{first} to {last} of {totalRecords}"
dataKey="id"
first={lazyState.first}
first={parseInt(urlSearchParams.from, 10)}
lazy
loading={loading}
onPage={onPage}
paginator
paginatorPosition="bottom"
paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
rows={rows}
rows={parseInt(urlSearchParams.size, 10)}
rowsPerPageOptions={[20, 50, 100]}
scrollable
size="small"
Expand Down Expand Up @@ -254,7 +179,7 @@ export default function Mentions() {
header="Shared"
/>
<Column
body={affiliationsTemplate}
body={affiliations2Template}
field="affiliations"
header="Affiliations"
/>
Expand All @@ -265,14 +190,14 @@ export default function Mentions() {
<DataTable
currentPageReportTemplate="{first} to {last} of {totalRecords}"
dataKey="id"
first={lazyState.first}
first={parseInt(urlSearchParams.from, 10)}
lazy
loading={loading}
onPage={onPage}
paginator
paginatorPosition="bottom"
paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
rows={rows}
rows={parseInt(urlSearchParams.size, 10)}
rowsPerPageOptions={[20, 50, 100]}
scrollable
size="small"
Expand Down Expand Up @@ -301,7 +226,7 @@ export default function Mentions() {
header="Shared"
/>
<Column
body={affiliationsTemplate}
body={affiliations2Template}
field="affiliations"
header="Affiliations"
/>
Expand Down
32 changes: 13 additions & 19 deletions client/src/styles/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
cursor: pointer;
}

.list-none {
list-style: none;
}

.text-center {
text-align: center;
}
Expand All @@ -20,25 +24,13 @@
vertical-align: middle;
}

.list-none {
list-style: none;
}


/* General */

body {
height: auto;
}

.fr-tags-group > li {
line-height: 0rem;
}

.text-right {
text-align: right;
}

.filters {
background-color: white;
border-bottom: 2px solid #000;
Expand All @@ -47,8 +39,8 @@ body {

.actions-menu {
background-color: #eee;
border-bottom: 2px solid #000;
border-bottom-right-radius: 5px;
border-bottom: 2px solid #000;
border-top-right-radius: 5px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
left: 0;
Expand Down Expand Up @@ -124,18 +116,20 @@ body {
margin: 0;
}


/* Pge Mentions */
.mentions {
.label {
font-size: 1em;
font-weight: bold;
text-align: end;
}

.mentions {
.hint {
color: grey;
font-size: .8em;
font-style: italic;
text-align: end;
}

.label {
font-size: 1em;
font-weight: bold;
text-align: end;
}
}
Loading

0 comments on commit a0001ca

Please sign in to comment.