For fun here is a simple example using streams, no framework, vanilla JS
You can test it here DEV API
function stream(v) {
let mappers = []
let storedvalue = v
function _stream(v = storedvalue) {
if (v) storedvalue = v;
mappers.map((f) => v && f(v))
return storedvalue;
}
_stream.map = function(f) {
mappers.push(f)
}
return _stream
}
let currentusr = "artydev"
const users = ["artydev", "dailydevtips1"]
// search user from input box
window.searchInput = () => {
user(searchuser.value);
currentusr = searchuser.value
}
// search user from list
window.searchUser = (usr) => {
user(usr);
currentusr = usr
}
// url API
function url(user) {
return `https://dev.to/api/articles?username=${user}&per_page=1000`
}
function listUsers() {
return `
<ul style="text-align:left; margin-left: 10px; margin-top:10px;">
${users.map(u => `<li class="user" onclick="searchUser('${u}')">${u}</li>`).join("")}
</ul>
`
}
async function getPosts(user) {
const response = await fetch(url(user))
const json = await response.json()
return json
}
function inputSearch() {
return `<input id="searchuser" />
`
}
function displayPost(post) {
return `
<li class="post">
<div class="headpost">
<a href="${post.url}">${post.title}</a>
</div>
<div class="description">
<em>${post.description}</em>
</div>
</li>
`
}
function listPosts(posts) {
const view = `
<ul>
${posts.map(displayPost).join('')}
</ul>
`
return view
}
function App(posts) {
document.body.innerHTML = `
<div class="title">
<h3>Dev to Posts - ${currentusr} ${posts.length} articles </h3>
</div>
<div class="searchbar">
<div>
${inputSearch()}
<button onclick="searchInput()">search user posts</button>
</div>
</div>
<div class="container">
<div>${listPosts(posts)}</div>
<div class="users">
<h4>Users</h4>
<div>${listUsers()}</div>
</div>
`
}
const user = stream()
user.map((usr) => {
console.log(usr)
getPosts(usr).then(App)
})
user(currentusr)
Top comments (0)