diff --git a/src/modules/lists/components/CitationAction/index.js b/src/modules/lists/components/CitationAction/index.js index 598dc41b6..1c01884ef 100644 --- a/src/modules/lists/components/CitationAction/index.js +++ b/src/modules/lists/components/CitationAction/index.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React, { useState, useEffect } from 'react'; import { Button, Tabs, TabList, Tab, TabPanel } from '../../../reusable'; import { cite } from '../../../citations'; import PropTypes from 'prop-types'; @@ -30,133 +30,123 @@ const citationOptions = [ } ]; -class CitationAction extends Component { - state = { +function CitationAction (props) { + const stateObject = { status: undefined }; + citationOptions.forEach((citationOption) => { + stateObject[citationOption.id] = ''; + }); + const [state, setState] = useState(stateObject); - handleCitationsData = (chosenStyleID, data) => { - this.setState({ - ...this.state, - [chosenStyleID]: data - }); - }; - - generateCitations = (records) => { - citationOptions.forEach((co) => { - return cite(records, co.id, this.handleCitationsData); - }); - }; - - componentDidMount () { - const { - datastore, - record, - viewType, - list - } = this.props; - - if (viewType === 'Full') { + useEffect(() => { + const generateCitations = (records) => { + citationOptions.forEach((citationOption) => { + return cite( + records, + citationOption.id, + (chosenStyleID, data) => { + setState((prevState) => { + return { ...prevState, [chosenStyleID]: data }; + }); + }); + }); + }; + if (props.viewType === 'Full') { const records = [ { - recordUid: record.uid, - datastoreUid: datastore.uid + recordUid: props.record.uid, + datastoreUid: props.datastore.uid } ]; - this.generateCitations(records); - } else if (viewType === 'List' && list && list.length > 0) { - const records = list.map((r) => { + generateCitations(records); + } + if (props.viewType === 'List' && props.list?.length > 0) { + const records = props.list.map((record) => { return { - recordUid: r.uid, - datastoreUid: datastore.uid + recordUid: record.uid, + datastoreUid: props.datastore.uid }; }); - this.generateCitations(records); + generateCitations(records); } - } - - handleSubmitCallback = (data) => { - this.setState({ status: data }); - }; - - handleSubmit = (event) => { - event.preventDefault(); - navigator.clipboard.writeText(document.querySelector('.copy-citation').innerText); - this.props.setAlert({ - intent: 'success', - text: 'Citation copied to clipboard!' - }); - this.props.setActive(''); - this.setState({ status: undefined }); - }; + }, [props]); - render () { - if (this.state.status?.status_code === 'action.response.success') return null; - return ( -
+ ); } CitationAction.propTypes = {