Published
Edited
Jun 12, 2019
md`# Slack viewer`
axios = require('https://bundle.run/axios@0.19.0')
slack_zip = axios.get("https://gist.githubusercontent.com/stevekrouse/fd2e70db41849946d5077a494f04349f/raw/f6f92551de6ffe4743e40f29f987258279487cc6/foc-slack-export.zip", {responseType: 'blob'})
jszip = require("jszip@3.1.5/dist/jszip.min.js")
archive = jszip.loadAsync(slack_zip.data)
channelFiles = Object.keys(archive.files).filter(name => name.endsWith(".json"))
parse = file => {
return archive.file(file).async("text").then(JSON.parse).then(json => json.map(obj => ({...obj, channelName: file.split("/")[0]})))
}
parsedChannelFiles = Promise.all(channelFiles.map(parse))
messages = parsedChannelFiles.reduce((a,b) => a.concat(b), [])
users = archive.file("users.json").async("text").then(JSON.parse)
viewof searchText = html`<input type="text" value="eve">`
searchResult = messages.filter(message => message.text && message.text.includes(searchText))
html`<div>
${searchResult.map(message => renderMessage(message))}
</div>`
renderMessage = message => {
return html`
<div>
<div><img src="${findUser(message.user).profile.image_24}"></img>${findUser(message.user).real_name}</div>
<div>${message.text}</div> <!--TODO find and replace <@UDRKY9D3R> with users highlighted in blue-->
</div>`
}
findUser = userID => {
return users.find(user => user.id == userID)
}
users
md`
# Todo
- way that replacing the beginning of Slack URL sends us here to a message
- organize this page: search, list of channels
- nested messages
- render markdown
- render emojis
- render reactions
- render message date, link to message ID here as permalink
- find a way to generate and upload slack export regularly
- OR: use the Slack search API to do it all based on search
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
