Conditional Rendering in Volto

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> &nbsp; </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

content is showing for all users logged in when it should only show up for the currently logged in user.

All users are "that user". Assuming I understand correctly your problem, what you actually want is to make sure that the results of that query have the Creator (or whatever criteria you use) as the currently logged in user. You can get the userid of the currently logged in user by decoding his auth token, see this bit of code:

      userId: state.userSession.token
        ? jwtDecode(state.userSession.token).sub
        : '',

Plone Foundation Code of Conduct