80096f63a7
* Add the preview card to logged out feed initial content * initialise the initial dropdowns added on the logged out feed * minor tweak to selector * flip the follow button and the summary * add minimal preview card to build article HTML * WIP: data fetched an inserted into card on logged out feed * WIP: cards added to logged in feed * create separate profile preview card component * small style tweak, import pack on each page that shows feed cards * rename * tweak some styling issues * make sure follow buttons init in cards * populate all matching metadata placeholders after fetch * don't render full preview card upfront on logged out feed * refactors from PR comments * fix issue in person search results * remove check for article author link that will be superseded by cypress test for preview card * Revert "remove check for article author link that will be superseded by cypress test for preview card" This reverts commit 9b42804ffd0f051891c87293d0b791ed2bb0367f. * Revert "fix issue in person search results" This reverts commit 04941e3520c0895212141193b60f2933faed5ca1. * only show the preview cards on story cards for Posts (not users etc in search results) * correct display on collections view * remove link check that will be replaced by cypress test * tweaks to small issues, add a test for the logged out feed * add tests for logged in home feed, logged out tag index * add search test and tag index logged in test * fixes to preview profile spec * tweak to followauthor spec * add cypress test for preview on series page * use a unique test user for series test * correct the jsdoc comments * tweaks following PR review * allow feed preview cards to reposition * move to separate file from pack
70 lines
2.1 KiB
JavaScript
70 lines
2.1 KiB
JavaScript
import { h, Fragment } from 'preact';
|
|
import { memo } from 'preact/compat';
|
|
|
|
/**
|
|
* Component which renders the user metadata detail in a profile preview card.
|
|
*
|
|
* @param {object} props
|
|
* @param {string} props.email The user's email (if set to be publicly displayed)
|
|
* @param {string} props.location The user's location
|
|
* @param {string} props.created_at The user's join date string
|
|
* @param {string} props.education The user's education detail
|
|
* @param {string} props.work The user's work details
|
|
*/
|
|
export const UserMetadata = memo(
|
|
({ email, location, summary, created_at, education, work }) => {
|
|
const joinedOnDate = new Date(created_at);
|
|
const joinedOnDateString = new Intl.DateTimeFormat(
|
|
navigator.language || 'default',
|
|
{
|
|
day: 'numeric',
|
|
month: 'long',
|
|
year: 'numeric',
|
|
},
|
|
).format(joinedOnDate);
|
|
|
|
return (
|
|
<Fragment>
|
|
{summary && <div className="color-base-70">{summary}</div>}
|
|
<div className="user-metadata-details">
|
|
<ul class="user-metadata-details-inner">
|
|
{email && (
|
|
<li>
|
|
<div class="key">Email</div>
|
|
<div class="value">
|
|
<a href={`mailto:${email}`}>{email}</a>
|
|
</div>
|
|
</li>
|
|
)}
|
|
{work && (
|
|
<li>
|
|
<div className="key">Work</div>
|
|
<div className="value">{work}</div>
|
|
</li>
|
|
)}
|
|
{location && (
|
|
<li>
|
|
<div class="key">Location</div>
|
|
<div class="value">{location}</div>
|
|
</li>
|
|
)}
|
|
{education && (
|
|
<li>
|
|
<div class="key">Education</div>
|
|
<div class="value">{education}</div>
|
|
</li>
|
|
)}
|
|
<li>
|
|
<div class="key">Joined</div>
|
|
<div class="value">
|
|
<time datetime={created_at} class="date">
|
|
{joinedOnDateString}
|
|
</time>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</Fragment>
|
|
);
|
|
},
|
|
);
|