+${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); + } + console.log(this.user) + console.log(this.latest_post) + } + + /** + * 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` +fox: