-${joinedSvg} -Joined on - - -
-` : ''; - -/** - * dev.to profile component - * @element dev-user - * @cssprop --devto-color - * @prop {string} username - The username of the user - * @prop {ForemUser} user - Content about a user - * @prop {ForemPost} latest_post - Content about a post - */ -export class DevToProfile extends LitElement { - static properties = { - user: { type: Object }, - username: { type: String }, - latest_post: { type: Object }, - skipFetch: { type: Boolean }, - }; - static styles = css` - ${unsafeCSS(styles)} - `; - - async firstUpdated() { - if (!this.username && this.user?.username) { - this.username = this.user.username; - } - if (this.skipFetch) { - if (!this.username) { - this._generateError( - 'A username is required to skip fetching data', - 'UI requires a name and username at minimum', - ) - return; - } - } else { - if (this.username) { - await this._generateUser(this.username); - } else { - await this._generateUser(null, this.user?.id); - } - } - await this._cleanUserData(); - } - - /** - * Format a date for machine-readability - * @param {string} dt - * @returns {string} - the machine-readable value of the date - */ - _formatDate(dt) { - const x = new Date(dt); - const year = x.getFullYear() - const month = String(x.getMonth() + 1).padStart(2, '0') - const day = String(x.getDate()).padStart(2, '0') - - return `${year}-${month}-${day}` - } - - async _fetchPosts(username) { - const articles = await fetch(`https://dev.to/api/articles/latest?per_page=1000&username=${username?.toLowerCase()}`); - const articlesJson = await articles.json(); - this.user.post_count = this.user.post_count || articlesJson.length; - if (articlesJson.length && !this.latest_post) { - this.latest_post = articlesJson[0]; - } - } - - async _fetchUserResponse(username, id) { - if (!username && id) { - return await fetch(`https://dev.to/api/users/${id}`); - } - return await fetch(`https://dev.to/api/users/by_username?url=${username?.toLowerCase()}`); - } - - async _generateError(msg, status) { - this.user = { - name: msg, - status, - } - } - - async _generateUser(username, id) { - const response = await this._fetchUserResponse(username, id); - const jsonResponse = await response.json(); - if (jsonResponse.error) { - this._generateError( - `User ${username || id} ${jsonResponse.error}`, - jsonResponse.error, - ) - return; - } - this.user = { - ...jsonResponse, - ...this.user, - } - if (typeof this.user.post_count !== 'number' || (this.user.post_count > 0 && !this.latest_post)) { - await this._fetchPosts(this.user.username); - } - } - - /** - * Clean up data to conform to the HTML-expected content model - */ - async _cleanUserData() { - this.user.profile_image = this.user.profile_image || blankPng; - this.user.name = this.user.name || `@${this.user.username}`; - if (this.user.joined_at) { - this.user.joined = this.user.joined || this._formatDate(this.user.joined_at); - } - if (this.user.post_count && Number(this.user.post_count) !== NaN) { - this.user.post_count = Number(this.user.post_count); - } else { - delete this.user?.post_count; - } - this.latest_post.cover_image = this.latest_post.cover_image || blankPng; - } - - render() { - if (this.user?.status) { - return html` -- ${this.user?.name} -
-${this.user?.summary}
`)} - ${when(this.user?.joined_at, () => html`- ${joinedSvg} - Joined on - - -
`)} - ${when(this.user?.post_count > 0, () => html` -- ${postSvg} - ${this.user?.post_count} posts published -
- `)} - ${when(this.latest_post, () => html` -${summary}
` : ''; - -/** - * @function Render a user's joined date - * @param {string} joined_at - date the user joined - */ -export const userJoined = (joined_at) => joined_at ? html`-${joinedSvg} -Joined on - - -
-` : ''; - -/** - * @function Render a user's post count - * @param {number} post_count - number of posts the user has published - */ -export const userPostCount = (post_count) => post_count !== undefined ? html`- ${postSvg} - ${post_count} posts published -
-` : ''; - -/** - * dev.to profile card component - * @element devto-profile-card - * @prop {ForemUser} user - Content about a user - * @prop {ForemPost} [latest_post] - Content about a post - */ -export class DevToProfileCard extends LitElement { - static properties = { - user: { type: Object }, - latest_post: { type: Object }, - }; - static styles = css` - ${unsafeCSS(styles)} - `; - - constructor() { - super(); - this.error = null; - } - - connectedCallback() { - super.connectedCallback(); - this._cleanUserData(); - } - - /** - * Clean up data to conform to the HTML-expected content model - */ - _cleanUserData() { - if (!this.user) { - this.error = 'No user data provided'; - return; - } - if (!this.user?.username) { - this.error = 'Username (user.username) is required'; - return; - } - this.user.profile_image = this.user.profile_image || blankPng; - this.user.name = this.user.name || `@${this.user.username}`; - if (this.user.post_count && Number(this.user.post_count) !== NaN) { - this.user.post_count = Number(this.user.post_count); - } else { - delete this.user?.post_count; - } - if (this.latest_post) { - this.latest_post.cover_image = this.latest_post.cover_image || blankPng; - } - } - - render() { - if (this.error) { - return html` -- ${this.error} -
-