Good morning, Plone Community!
How would I use react js to conditionally render content on a Volto view? The code I am currently using to render the content conditionally is below:
const UserGreeting = () => {
const content = useSelector((store) => store.content.data);
const results = useSelector(
(state) => state.search.subrequests.content?.items,
);
const dispatch = useDispatch();
React.useEffect(() => {
dispatch(
searchContent(
content['@id'],
{
fullobjects: true,
},
'content',
),
);
}, [content, dispatch]);
return (
<div>
<Table padded celled striped sortable id="myTable" className="listing">
<Table.Header>
<Table.Row>
<Table.HeaderCell>
<FormattedMessage id="Created" defaultMessage="Created" />
</Table.HeaderCell>
<Table.HeaderCell>
<FormattedMessage id="Type" defaultMessage="Type" />
</Table.HeaderCell>
<Table.HeaderCell>
<FormattedMessage id="Documents" defaultMessage="Documents" />
</Table.HeaderCell>
<Table.HeaderCell>
<FormattedMessage id="State" defaultMessage="State" />
</Table.HeaderCell>
<Table.HeaderCell>
<FormattedMessage id="Action" defaultMessage="Action" />
</Table.HeaderCell>
<Table.HeaderCell>
<FormattedMessage
id="Last Modified"
defaultMessage="Last Modified"
/>
</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{results &&
results.map((item) => (
<Table.Row key={item.id}>
<Table.Cell>{moment(item.created).format('ll')}</Table.Cell>
<Table.Cell>
<a href={item['@id']}>{item['@type']}</a>
</Table.Cell>
<Table.Cell>
<ol>
{item.attachment_file && (
<li>
<Modal
trigger={<Link>{item?.attachment_type?.title}</Link>}
scrolling
closeIcon
>
<Modal.Header>
{item?.attachment_type?.title}
</Modal.Header>
<Modal.Content>
<PDFViews file={item?.attachment_file?.download} />
</Modal.Content>
</Modal>
</li>
)}
{item.attachment_file1 && (
<li>
<Modal
trigger={<Link>{item?.attachment_type1?.title}</Link>}
scrolling
closeIcon
>
<Modal.Header>
{item?.attachment_type1?.title}
</Modal.Header>
<Modal.Content>
<PDFViews file={item?.attachment_file1?.download} />
</Modal.Content>
</Modal>
</li>
)}
{item.attachment_file2 && (
<li>
<Modal
trigger={<Link>{item?.attachment_type2?.title}</Link>}
scrolling
closeIcon
>
<Modal.Header>
{item?.attachment_type2?.title}
</Modal.Header>
<Modal.Content>
<PDFViews file={item?.attachment_file2?.download} />
</Modal.Content>
</Modal>
</li>
)}
{item.attachment_file3 && (
<li>
<Modal
trigger={<Link>{item?.attachment_type3?.title}</Link>}
scrolling
closeIcon
>
<Modal.Header>
{item?.attachment_type3?.title}
</Modal.Header>
<Modal.Content>
<PDFViews file={item?.attachment_file3?.download} />
</Modal.Content>
</Modal>
</li>
)}
{item.attachment_file4 && (
<li>
<Modal
trigger={<Link>{item?.attachment_type4?.title}</Link>}
scrolling
closeIcon
>
<Modal.Header>
{item?.attachment_type4?.title}
</Modal.Header>
<Modal.Content>
<PDFViews file={item?.attachment_file4?.download} />
</Modal.Content>
</Modal>
</li>
)}
{item.letter_recommendation && (
<li>
<Modal
trigger={<Link>Letter of Recommendation</Link>}
scrolling
closeIcon
>
<Modal.Header>Letter of Recommendation</Modal.Header>
<Modal.Content>
<PDFViews
file={item?.letter_recommendation?.download}
/>
</Modal.Content>
</Modal>
</li>
)}
{item.resume && (
<li>
<Modal
trigger={<Link>Resume</Link>}
scrolling
closeIcon
>
<Modal.Header>Resume</Modal.Header>
<Modal.Content>
<PDFViews file={item?.resume?.download} />
</Modal.Content>
</Modal>
</li>
)}
{item.statement && (
<li>
<Modal
trigger={<Link>Statement</Link>}
scrolling
closeIcon
>
<Modal.Header>Statement</Modal.Header>
<Modal.Content>
<PDFViews file={item?.statement?.download} />
</Modal.Content>
</Modal>
</li>
)}
{item.score && (
<li>
<Modal trigger={<Link>Score</Link>} scrolling closeIcon>
<Modal.Header>Score</Modal.Header>
<Modal.Content>
<PDFViews file={item?.score?.download} />
</Modal.Content>
</Modal>
</li>
)}
{item.transcript && (
<li>
<Modal
trigger={<Link>Transcript 1</Link>}
scrolling
closeIcon
>
<Modal.Header>Transcript 1</Modal.Header>
<Modal.Content>
<PDFViews file={item?.transcript?.download} />
</Modal.Content>
</Modal>
</li>
)}
{item.transcript1 && (
<li>
<Modal
trigger={<Link>Transcript 2</Link>}
scrolling
closeIcon
>
<Modal.Header>Transcript 2</Modal.Header>
<Modal.Content>
<PDFViews file={item?.transcript1?.download} />
</Modal.Content>
</Modal>
</li>
)}
{item.transcript2 && (
<li>
<Modal
trigger={<Link>Transcript 3</Link>}
scrolling
closeIcon
>
<Modal.Header>Transcript 3</Modal.Header>
<Modal.Content>
<PDFViews file={item?.transcript2?.download} />
</Modal.Content>
</Modal>
</li>
)}
{item.transcript3 && (
<li>
<Modal
trigger={<Link>Transcript 4</Link>}
scrolling
closeIcon
>
<Modal.Header>Transcript 4</Modal.Header>
<Modal.Content>
<PDFViews file={item?.transcript3?.download} />
</Modal.Content>
</Modal>
</li>
)}
{item.transcript4 && (
<li>
<Modal
trigger={<Link>Transcript 5</Link>}
scrolling
closeIcon
>
<Modal.Header>Transcript 5</Modal.Header>
<Modal.Content>
<PDFViews file={item?.transcript4?.download} />
</Modal.Content>
</Modal>
</li>
)}
{item.grade_equivalent && (
<li>
<Modal
trigger={<Link>Grade Equivalent</Link>}
scrolling
closeIcon
>
<Modal.Header>Grade Equivalent</Modal.Header>
<Modal.Content>
<PDFViews file={item?.grade_equivalent?.download} />
</Modal.Content>
</Modal>
</li>
)}
{item.english_translation && (
<li>
<Modal
trigger={<Link>English Translation</Link>}
scrolling
closeIcon
>
<Modal.Header>English Translation</Modal.Header>
<Modal.Content>
<PDFViews
file={item?.english_translation?.download}
/>
</Modal.Content>
</Modal>
</li>
)}
</ol>
</Table.Cell>
<Table.Cell>{item.review_state}</Table.Cell>
<Table.Cell>
<div>
<div>
<div>
<span>
<Modal
closeIcon
trigger={
<Link>
<FontAwesomeIcon icon={faCheckCircle} />
</Link>
}
scrolling
>
<Modal.Content>
<ContentStatusHistory {...item} />
</Modal.Content>
</Modal>
</span>
<span> </span>
<span>
<Modal
closeIcon
trigger={
<Link>
<FontAwesomeIcon icon={faClock} />
</Link>
}
scrolling
>
<Modal.Header>
<h1 className="documentFirstHeading">
{item.title || item['@type']}
</h1>
<p>
<em>
<span> last modified </span>
<span>
{' '}
{moment(item.modified).fromNow('ll')}
</span>
<span> ago </span>{' '}
</em>
</p>
</Modal.Header>
<Modal.Content>
<div>
<History
location={{
pathname: item['@id'] + '/history',
}}
/>
</div>
</Modal.Content>
<br />
</Modal>
</span>
</div>
</div>
</div>
</Table.Cell>
<Table.Cell>{moment(item.modified).format('ll')}</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table>
</div>
);
};
const GuestGreeting = () => {
return 'Please log in to see your content.';
};
const UserCheck = () => {
const [correctUser] = React.useState(true);
if (correctUser) {
return <UserGreeting />;
}
return <GuestGreeting />;
};
The reason I am inquiring about this is because content is showing for all users logged in when it should only show up for the currently logged in user. What needs to be changed here?
I thank you kindly.
Sincerely,
rbrown12