glyph/lykin_tutorial
0
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

change the name of part 6

Browse Source
This commit is contained in:
glyph 2022-09-07 16:58:09 +01:00
parent 40826cfd1c
commit a820ed231c
19 changed files with 1257 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
part_6_ui_layout/Cargo.toml Normal file
View File

@ -0,0 +1,20 @@
[package]
name = "part_6_ui_layout"
version = "0.1.0"
edition = "2021"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies]
async-std = "1.10"
bincode = "1.3"
chrono = "0.4"
futures = "0.3"
golgi = { git = "https://git.coopcloud.tech/golgi-ssb/golgi.git" }
log = "0.4"
rocket = "0.5.0-rc.1"
rocket_dyn_templates = { version = "0.1.0-rc.1", features = ["tera"] }
serde = "1"
serde_json = "1"
sled = "0.34"
xdg = "2.4.1"

312
part_6_ui_layout/README.md Normal file
View File

@ -0,0 +1,312 @@
# lykin tutorial
## Part 6: UI Layout and Peers List
### Introduction
Up to this point in the series we've been primarily focused on backend development; we've created a webserver, setup a key-value store, written functions for interacting with an sbot instance and made a task loop to run background processes. It's time to focus on the UI of our application.
Today we'll write Tera HTML templates and create the layout of our user interface using CSS. We will then begin to populate the templates with data from our key-value store, such as the list of peers we're subscribed to. This is an exciting phase in the development of our application. Let's begin!
### Outline
Here's what we'll tackle in this sixth part of the series:
- Define layout shape
- Download stylesheet and icons
- Mount the fileserver
- Create layout in base template
- Create templates
- Navigation bar
- Peer list
- Post list
- Post content
- Populate peer list with data
### Define Layout Shape
Before getting started with code, it might be helpful to know the shape of the layout we'll be building in this installment.
The layout is composed of a topbar for navigation, a peers column on the left and a column of posts and post content on the right. Here's a diagram to illustrate the basic shape:
```text
┌───────────────────────────────────────────────────┐
│ Navigation │
├──────────────┬────────────────────────────────────┤
│ Peer List │ Post List │
│ │ │
│ │ │
│ ├────────────────────────────────────┤
│ │ Post Content │
│ │ │
│ │ │
│ │ │
│ │ │
└──────────────┴────────────────────────────────────┘
```
### Download Icons and Stylesheet
We are going to use CSS grid to create the layout of our user interface. I am not going to deal with CSS in-detail in this tutorial so you may want to refer to [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/), authored by Chris House on CSS-Tricks, to fill any gaps in your understanding. We will simply download the stylesheet and icons so that we can focus on the rest of the application.
We begin by creating a `static` directory in the root directory of our application. Next, we create subdirectories named `css` and `icons` inside the static directory. Like so:
```text
.
├── static
│ ├── css
│ └── icons
```
Now we can download the assets from the [lykin repo](https://git.coopcloud.tech/glyph/lykin):
```bash
# Ensure you are calling these commands from the root directory.
# You can download the files manually if you do not have wget.
# ...
# Download the CSS stylesheet:
wget -O static/css/lykin.css https://git.coopcloud.tech/glyph/lykin/raw/branch/main/static/css/lykin.css
# Move into the icons subdirectory:
cd static/icons
# Download the icons:
wget https://git.coopcloud.tech/glyph/lykin/raw/branch/main/static/icons/delete_post.png
wget https://git.coopcloud.tech/glyph/lykin/raw/branch/main/static/icons/download.png
wget https://git.coopcloud.tech/glyph/lykin/raw/branch/main/static/icons/read_post.png
wget https://git.coopcloud.tech/glyph/lykin/raw/branch/main/static/icons/unread_post.png
# Move back to the root directory:
cd ../..
```
**Note:** The icons we're using were created by [Kiranshastry](https://www.flaticon.com/authors/kiranshastry) and can be found on Flaticon.
### Mount the Fileserver
In order to be able to serve the CSS and icons, we need to mount a fileserver to our Rocket application and provide the path to the assets:
`src/main.rs`
```rust
use rocket::fs::{FileServer, relative};
#[launch]
async fn rocket() -> _ {
// ...
rocket::build()
.manage(db)
.manage(tx)
.attach(Template::fairing())
.mount("/", routes![home, subscribe_form, unsubscribe_form])
// Mount the fileserver and set a relative path with `static` as root.
.mount("/", FileServer::from(relative!("static")))
.attach(AdHoc::on_shutdown("cancel task loop", |_| {
Box::pin(async move {
tx_clone.send(Task::Cancel).await.unwrap();
})
}))
}
```
### Create Layout in Base Template
Now that the assets and fileserver are in place, we can turn our attention to the templates. Let's begin by modifying the base HTML template we wrote previously. In it, we're going to create a grid container and include (`import`) the templates representing each section of the layout. We will then create the templates for each section of the layout.
`templates/base.html.tera`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>lykin</title>
<meta name="description" content="lykin: an SSB tutorial application">
<meta name="author" content="glyph">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/lykin.css">
</head>
<body class="container">
<h1>
<a href="/">lykin</a>
</h1>
</a>
<div class="grid-container">
{% include "topbar" %}
{% include "peer_list" %}
{% include "post_list" %}
{% include "post_content" %}
</div>
</body>
</html>
```
### Create Navigation Bar Template
With the base layout in place, we can begin to populate the constituent templates. The navigation / topbar consists of a row of four icons followed by a form for subscribing to and unsubscribing from peers. Clicking on each icon will eventually perform an action: download the latest posts, mark a post as 'read', mark a post as 'unread' and delete a post. We'll create the routes and handlers for those actions later in the series. For now, it's enough to have the icons without any associated actions.
You're invited to take a peek at the stylesheet (`lykin.css`) if you're curious about any of the classes used in the template, such as `disabled` or `flex-container`.
`templates/topbar.html.tera`
```html
<div class="nav">
<div class="flex-container">
<a class="disabled icon" title="Download latest posts">
<img src="/icons/download.png">
</a>
<a class="disabled icon" title="Mark as read">
<img src="/icons/read_post.png">
</a>
<a class="disabled icon" title="Mark as unread">
<img src="/icons/unread_post.png">
</a>
<a class="disabled icon" title="Delete post">
<img src="/icons/delete_post.png">
</a>
<form class="flex-container" action="/subscribe" method="post">
<label for="public_key">Public Key</label>
<input type="text" id="public_key" name="public_key" maxlength=53>
<input type="submit" value="Subscribe">
<input type="submit" value="Unsubscribe" formaction="/unsubscribe">
</form>
{% if flash and flash.kind == "error" %}
<p class="flash-message">[ {{ flash.message }} ]</p>
{% endif %}
</div>
</div>
```
The `{% ... %}` syntax in the template code is Tera syntax (inspired by Jinja2 and Django templates). Consult the [documentation](https://tera.netlify.app/docs/) if you wish to know more. We will add similar control-flow syntax later in the tutorial series to selectively set the `href` tags of the anchor elements and to enable or disable the navigation elements.
### Create Peer List Template
This one couldn't be much simpler. We define a `div` element for our list of peers and populate an unordered list. We first try to display the name of the peer and fallback to the public key if the `name` string is empty. Each peer in this template corresponds with an instance of the `Peer` struct defined in our `src/db.rs` file, hence the `name` and `public_key` fields.
`templates/peer_list.html.tera`
```html
<div class="peers">
<ul>
{% for peer in peers -%}
<li>
{% if peer.name %}
{{ peer.name }}
{% else %}
{{ peer.public_key }}
{% endif %}
</li>
{%- endfor %}
</ul>
</div>
```
### Create Post List Template
Now we'll write another simple `for` loop to display a list of posts. Eventually we'll update this template to display the subject of each post authored by the selected peer. Clicking on a peer in the peer list will serve as the trigger to update the selected peer variable, allowing us to define whose posts we should be displaying in this list.
`templates/post_list.html.tera`
```html
<div class="posts">
{% if posts %}
<ul>
{% for post in posts -%}
Subject placeholder
{%- endfor %}
</ul>
{% endif %}
</div>
```
### Create Post Content Template
Finally, we'll write the template to display the content of a selected post.
`templates/post_content.html.tera`
```html
<div class="content">
{% if post %}
{{ post.text }}
{% endif %}
</div>
```
### Populate Peer List with Data
If we run our application at this point and visit `localhost:8000` in a browser we receive a `500: Internal Server Error`. The output in the Rocket application logs points to the problem:
```text
>> Error rendering Tera template 'base'.
>> Failed to render 'base'
>> Variable `peers` not found in context while rendering 'peer_list'
>> Template 'base' failed to render.
>> Outcome: Failure
```
The `peer_list.html.tera` template expects a `peers` variable which has not been provided. In other words, the template has not been provided with the context it requires to render. What we need to do is revisit our `home` route handler and provide the context by querying our key-value store for a list of peers.
`src/routes.rs`
```rust
#[get("/")]
pub async fn home(db: &State<Database>, flash: Option<FlashMessage<'_>>) -> Template {
// Retrieve the list of peers to whom we subscribe.
let peers = db.get_peers();
// Render the template with `peers` and `flash`.
Template::render("base", context! { peers: peers, flash: flash })
}
```
Great, the template will now be hydrated with the data it expects. There's just one more problem: the `db.get_peers()` method doesn't exist yet. Let's write it now:
`src/db.rs`
```rust
impl Database {
// ...
// Get a list of all peers in the peer tree. The byte value for each
// peer entry is deserialized from bincode into an instance of the Peer
// struct.
pub fn get_peers(&self) -> Vec<Peer> {
debug!("Retrieving data for all peers in the 'peers' database tree");
// Define an empty vector to store the list of peers.
let mut peers = Vec::new();
self.peer_tree
.iter()
.map(|peer| peer.unwrap())
.for_each(|peer| {
debug!(
"Deserializing peer data for {} from bincode",
String::from_utf8_lossy(&peer.0).into_owned()
);
// Add a peer to the peers vector.
peers.push(bincode::deserialize(&peer.1).unwrap())
});
peers
}
}
```
The above method is very similar to the `get_peer` method we define previously. However, instead of retrieving a specific peer from the peer database tree, we iterate over all key-value pairs in the tree and push the deserialized value to a vector.
Run the application, visit `localhost:8000` in your browser and you should see a beautiful, colourful layout! After ensuring your instance of go-sbot is running, try to subscribe and unsubscribe to some peers to test things out. Feel free to play around with the styles in `static/css/lykin.css` if you wish to change the colours or other aspects of the design.
### Conclusion
In this installment we took strides in improving the visual aspect of our application. We defined a layout using CSS and HTML templates, added a fileserver to serve assets, updated our `home` route handler to provide the required context data to our templates and added a `get_peers()` method to the database.
Our application has come a long way. We can now subscribe and unsubscribe to the root posts of our peers and display a list of subscribed peers in a neat user interface.
In the next installment we will return to the database and Scuttlebutt-related code in our application, adding the ability to retrieve only the latest posts for each of our peers from the sbot. This will give us an efficient way of keeping our application up to date with the latest happenings in the Scuttleverse. In doing so, we will add a means of tracking the latest sequence number of each of the peers we subscribe to.
## Funding
This work has been funded by a Scuttlebutt Community Grant.
## Contributions
I would love to continue working on the Rust Scuttlebutt ecosystem, writing code and documentation, but I need your help. Please consider contributing to [my Liberapay account](https://liberapay.com/glyph) to support me in my coding and cultivation efforts.

205
part_6_ui_layout/src/db.rs Normal file
View File

@ -0,0 +1,205 @@
use std::path::Path;
use log::{debug, info};
use serde::{Deserialize, Serialize};
use sled::{Batch, Db, IVec, Result, Tree};
/// Scuttlebutt peer data.
#[derive(Debug, Deserialize, Serialize)]
pub struct Peer {
pub public_key: String,
pub name: String,
}
impl Peer {
/// Create a new instance of the Peer struct using the given public
/// key. A default value is set for name.
pub fn new(public_key: &str) -> Peer {
Peer {
public_key: public_key.to_string(),
name: "".to_string(),
}
}
/// Modify the name field of an instance of the Peer struct, leaving
/// the other values unchanged.
pub fn set_name(self, name: &str) -> Peer {
Self {
name: name.to_string(),
..self
}
}
}
/// The text and metadata of a Scuttlebutt root post.
#[derive(Debug, Deserialize, Serialize)]
pub struct Post {
/// The key of the post-type message, also known as a message reference.
pub key: String,
/// The text of the post (may be formatted as markdown).
pub text: String,
/// The date the post was published (e.g. 17 May 2021).
pub date: String,
/// The sequence number of the post-type message.
pub sequence: u64,
/// The read state of the post; true if read, false if unread.
pub read: bool,
/// The timestamp representing the date the post was published.
pub timestamp: i64,
/// The subject of the post, represented as the first 53 characters of
/// the post text.
pub subject: Option<String>,
}
impl Post {
// Create a new instance of the Post struct. A default value of `false` is
// set for `read`.
pub fn new(
key: String,
text: String,
date: String,
sequence: u64,
timestamp: i64,
subject: Option<String>,
) -> Post {
Post {
key,
text,
date,
sequence,
timestamp,
subject,
read: false,
}
}
}
/// An instance of the key-value database and relevant trees.
#[allow(dead_code)]
#[derive(Clone)]
pub struct Database {
/// The sled database instance.
db: Db,
/// A database tree containing Peer struct instances for all the peers
/// we are subscribed to.
peer_tree: Tree,
/// A database tree containing Post struct instances for all of the posts
/// we have downloaded from the peer to whom we subscribe.
pub post_tree: Tree,
}
impl Database {
/// Initialise the database by opening the database file, loading the
/// peers tree and returning an instantiated Database struct.
pub fn init(path: &Path) -> Self {
// Open the database at the given path.
// The database will be created if it does not yet exist.
// This code will panic if an IO error is encountered.
info!("Initialising sled database");
let db = sled::open(path).expect("Failed to open database");
debug!("Opening 'peers' database tree");
let peer_tree = db
.open_tree("peers")
.expect("Failed to open 'peers' database tree");
debug!("Opening 'posts' database tree");
let post_tree = db
.open_tree("posts")
.expect("Failed to open 'posts' database tree");
Database {
db,
peer_tree,
post_tree,
}
}
/// Add a peer to the database by inserting the public key into the peer
/// tree.
pub fn add_peer(&self, peer: Peer) -> Result<Option<IVec>> {
debug!("Serializing peer data for {} to bincode", &peer.public_key);
let peer_bytes = bincode::serialize(&peer).unwrap();
debug!(
"Inserting peer {} into 'peers' database tree",
&peer.public_key
);
self.peer_tree.insert(&peer.public_key, peer_bytes)
}
/// Get a single peer from the peer tree, defined by the given public key.
/// The byte value for the matching entry, if found, is deserialized from
/// bincode into an instance of the Peer struct.
pub fn get_peer(&self, public_key: &str) -> Result<Option<Peer>> {
debug!(
"Retrieving peer data for {} from 'peers' database tree",
&public_key
);
let peer = self
.peer_tree
.get(public_key.as_bytes())
.unwrap()
.map(|peer| {
debug!("Deserializing peer data for {} from bincode", &public_key);
bincode::deserialize(&peer).unwrap()
});
Ok(peer)
}
/// Get a list of all peers in the peer tree. The byte value for each
/// peer entry is deserialized from bincode into an instance of the Peer
/// struct.
pub fn get_peers(&self) -> Vec<Peer> {
debug!("Retrieving data for all peers in the 'peers' database tree");
let mut peers = Vec::new();
self.peer_tree
.iter()
.map(|peer| peer.unwrap())
.for_each(|peer| {
debug!(
"Deserializing peer data for {} from bincode",
String::from_utf8_lossy(&peer.0).into_owned()
);
peers.push(bincode::deserialize(&peer.1).unwrap())
});
peers
}
/// Remove a peer from the database, as represented by the given public
/// key.
pub fn remove_peer(&self, public_key: &str) -> Result<()> {
debug!("Removing peer {} from 'peers' database tree", &public_key);
self.peer_tree.remove(&public_key).map(|_| ())
}
/// Add a post to the database by inserting an instance of the Post struct
/// into the post tree.
pub fn add_post(&self, public_key: &str, post: Post) -> Result<Option<IVec>> {
let post_key = format!("{}_{}", public_key, post.key);
debug!("Serializing post data for {} to bincode", &post_key);
let post_bytes = bincode::serialize(&post).unwrap();
debug!("Inserting post {} into 'posts' database tree", &post_key);
self.post_tree.insert(post_key.as_bytes(), post_bytes)
}
/// Add a batch of posts to the database by inserting a vector of instances
/// of the Post struct into the post tree.
pub fn add_post_batch(&self, public_key: &str, posts: Vec<Post>) -> Result<()> {
let mut post_batch = Batch::default();
for post in posts {
let post_key = format!("{}_{}", public_key, post.key);
debug!("Serializing post data for {} to bincode", &post_key);
let post_bytes = bincode::serialize(&post).unwrap();
debug!("Inserting post {} into 'posts' database tree", &post_key);
post_batch.insert(post_key.as_bytes(), post_bytes)
}
debug!("Applying batch insertion into 'posts' database tree");
self.post_tree.apply_batch(post_batch)
}
}

48
part_6_ui_layout/src/main.rs Normal file
View File

@ -0,0 +1,48 @@
mod db;
mod routes;
mod sbot;
mod task_loop;
mod utils;
use async_std::channel;
use log::info;
use rocket::{
fairing::AdHoc,
fs::{relative, FileServer},
launch, routes,
};
use rocket_dyn_templates::Template;
use xdg::BaseDirectories;
use crate::{db::Database, routes::*, task_loop::Task};
#[launch]
async fn rocket() -> _ {
// Create the key-value database.
let xdg_dirs = BaseDirectories::with_prefix("lykin").unwrap();
let db_path = xdg_dirs
.place_config_file("database")
.expect("cannot create database directory");
let db = Database::init(&db_path);
let db_clone = db.clone();
// Create a message passing channel.
let (tx, rx) = channel::unbounded();
let tx_clone = tx.clone();
// Spawn the task loop, passing in the receiver half of the channel.
info!("Spawning task loop");
task_loop::spawn(db_clone, rx).await;
rocket::build()
.manage(db)
.manage(tx)
.attach(Template::fairing())
.mount("/", routes![home, subscribe_form, unsubscribe_form])
.mount("/", FileServer::from(relative!("static")))
.attach(AdHoc::on_shutdown("cancel task loop", |_| {
Box::pin(async move {
tx_clone.send(Task::Cancel).await.unwrap();
})
}))
}

119
part_6_ui_layout/src/routes.rs Normal file
View File

@ -0,0 +1,119 @@
use async_std::channel::Sender;
use log::{info, warn};
use rocket::{
form::Form,
get, post,
request::FlashMessage,
response::{Flash, Redirect},
uri, FromForm, State,
};
use rocket_dyn_templates::{context, Template};
use crate::{
db::{Database, Peer},
sbot,
task_loop::Task,
utils,
};
#[derive(FromForm)]
pub struct PeerForm {
pub public_key: String,
}
#[get("/")]
pub async fn home(db: &State<Database>, flash: Option<FlashMessage<'_>>) -> Template {
let peers = db.get_peers();
Template::render("base", context! { peers: peers, flash: flash })
}
#[post("/subscribe", data = "<peer>")]
pub async fn subscribe_form(
db: &State<Database>,
tx: &State<Sender<Task>>,
peer: Form<PeerForm>,
) -> Result<Redirect, Flash<Redirect>> {
if let Err(e) = utils::validate_public_key(&peer.public_key) {
let validation_err_msg = format!("Public key {} is invalid: {}", &peer.public_key, e);
warn!("{}", validation_err_msg);
return Err(Flash::error(Redirect::to(uri!(home)), validation_err_msg));
} else {
info!("Public key {} is valid", &peer.public_key);
// Retrieve the name of the peer to which we are subscribing.
let peer_name = match sbot::get_name(&peer.public_key).await {
Ok(name) => name,
Err(e) => {
warn!("Failed to fetch name for peer {}: {}", &peer.public_key, e);
// Return an empty string if an error occurs.
String::from("")
}
};
let peer_info = Peer::new(&peer.public_key).set_name(&peer_name);
match sbot::follow_if_not_following(&peer.public_key).await {
Ok(_) => {
// Add the peer to the database.
if db.add_peer(peer_info).is_ok() {
info!("Added {} to 'peers' database tree", &peer.public_key);
let peer_id = peer.public_key.to_string();
// Fetch all root posts authored by the peer we're subscribing
// to. Posts will be added to the key-value database.
if let Err(e) = tx.send(Task::FetchAllPosts(peer_id)).await {
warn!("Task loop error: {}", e)
}
} else {
let err_msg = format!(
"Failed to add peer {} to 'peers' database tree",
&peer.public_key
);
warn!("{}", err_msg);
return Err(Flash::error(Redirect::to(uri!(home)), err_msg));
}
}
Err(e) => {
warn!("{}", e);
return Err(Flash::error(Redirect::to(uri!(home)), e));
}
}
}
Ok(Redirect::to(uri!(home)))
}
#[post("/unsubscribe", data = "<peer>")]
pub async fn unsubscribe_form(
db: &State<Database>,
peer: Form<PeerForm>,
) -> Result<Redirect, Flash<Redirect>> {
if let Err(e) = utils::validate_public_key(&peer.public_key) {
let validation_err_msg = format!("Public key {} is invalid: {}", &peer.public_key, e);
warn!("{}", validation_err_msg);
return Err(Flash::error(Redirect::to(uri!(home)), validation_err_msg));
} else {
info!("Public key {} is valid", &peer.public_key);
match sbot::unfollow_if_following(&peer.public_key).await {
Ok(_) => {
// Remove the peer from the database.
if db.remove_peer(&peer.public_key).is_ok() {
info!(
"Removed peer {} from 'peers' database tree",
&peer.public_key
);
} else {
warn!(
"Failed to remove peer {} from 'peers' database tree",
&peer.public_key
);
}
}
Err(e) => {
warn!("{}", e);
return Err(Flash::error(Redirect::to(uri!(home)), e));
}
}
}
Ok(Redirect::to(uri!(home)))
}

213
part_6_ui_layout/src/sbot.rs Normal file
View File

@ -0,0 +1,213 @@
use std::env;
use async_std::stream::StreamExt;
use chrono::NaiveDateTime;
use golgi::{
api::{friends::RelationshipQuery, history_stream::CreateHistoryStream},
messages::{SsbMessageContentType, SsbMessageKVT},
sbot::Keystore,
GolgiError, Sbot,
};
use log::{info, warn};
use serde_json::value::Value;
use crate::db::Post;
/// Initialise a connection to a Scuttlebutt server.
pub async fn init_sbot() -> Result<Sbot, String> {
let go_sbot_port = env::var("GO_SBOT_PORT").unwrap_or_else(|_| "8021".to_string());
let keystore = Keystore::GoSbot;
let ip_port = Some(format!("127.0.0.1:{}", go_sbot_port));
let net_id = None;
Sbot::init(keystore, ip_port, net_id)
.await
.map_err(|e| e.to_string())
}
/// Return the public key of the local sbot instance.
pub async fn whoami() -> Result<String, String> {
let mut sbot = init_sbot().await?;
sbot.whoami().await.map_err(|e| e.to_string())
}
/// Check follow status.
///
/// Is peer A (`public_key_a`) following peer B (`public_key_b`)?
pub async fn is_following(public_key_a: &str, public_key_b: &str) -> Result<String, String> {
let mut sbot = init_sbot().await?;
let query = RelationshipQuery {
source: public_key_a.to_string(),
dest: public_key_b.to_string(),
};
sbot.friends_is_following(query)
.await
.map_err(|e| e.to_string())
}
/// Follow a peer.
pub async fn follow_peer(public_key: &str) -> Result<String, String> {
let mut sbot = init_sbot().await?;
sbot.follow(public_key).await.map_err(|e| e.to_string())
}
/// Unfollow a peer.
pub async fn unfollow_peer(public_key: &str) -> Result<String, String> {
let mut sbot = init_sbot().await?;
sbot.unfollow(public_key).await.map_err(|e| e.to_string())
}
/// Return the name (self-identifier) for the peer associated with the given
/// public key.
///
/// The public key of the peer will be returned if a name is not found.
pub async fn get_name(public_key: &str) -> Result<String, String> {
let mut sbot = init_sbot().await?;
sbot.get_name(public_key).await.map_err(|e| e.to_string())
}
/// Check the follow status of a remote peer and follow them if not already
/// following.
pub async fn follow_if_not_following(remote_peer: &str) -> Result<(), String> {
if let Ok(whoami) = whoami().await {
match is_following(&whoami, remote_peer).await {
Ok(status) if status.as_str() == "false" => match follow_peer(remote_peer).await {
Ok(_) => {
info!("Followed peer {}", &remote_peer);
Ok(())
}
Err(e) => {
let err_msg = format!("Failed to follow peer {}: {}", &remote_peer, e);
warn!("{}", err_msg);
Err(err_msg)
}
},
Ok(status) if status.as_str() == "true" => {
info!(
"Already following peer {}. No further action taken",
&remote_peer
);
Ok(())
}
_ => Err(
"Failed to determine follow status: received unrecognised response from local sbot"
.to_string(),
),
}
} else {
let err_msg = String::from("Received an error during `whoami` RPC call. Please ensure the go-sbot is running and try again");
warn!("{}", err_msg);
Err(err_msg)
}
}
/// Check the follow status of a remote peer and unfollow them if already
/// following.
pub async fn unfollow_if_following(remote_peer: &str) -> Result<(), String> {
if let Ok(whoami) = whoami().await {
match is_following(&whoami, remote_peer).await {
Ok(status) if status.as_str() == "true" => {
info!("Unfollowing peer {}", &remote_peer);
match unfollow_peer(remote_peer).await {
Ok(_) => {
info!("Unfollowed peer {}", &remote_peer);
Ok(())
}
Err(e) => {
let err_msg = format!("Failed to unfollow peer {}: {}", &remote_peer, e);
warn!("{}", err_msg);
Err(err_msg)
}
}
}
_ => Err(
"Failed to determine follow status: received unrecognised response from local sbot"
.to_string(),
),
}
} else {
let err_msg = String::from("Received an error during `whoami` RPC call. Please ensure the go-sbot is running and try again");
warn!("{}", err_msg);
Err(err_msg)
}
}
/// Return a stream of messages authored by the given public key.
///
/// This returns all messages regardless of type.
pub async fn get_message_stream(
public_key: &str,
sequence_number: u64,
) -> impl futures::Stream<Item = Result<SsbMessageKVT, GolgiError>> {
let mut sbot = init_sbot().await.unwrap();
let history_stream_args = CreateHistoryStream::new(public_key.to_string())
.keys_values(true, true)
.after_seq(sequence_number);
sbot.create_history_stream(history_stream_args)
.await
.unwrap()
}
/// Filter a stream of messages and return a vector of root posts.
///
/// Each returned vector element includes the key of the post, the content
/// text, the date the post was published, the sequence number of the post
/// and whether it is read or unread.
pub async fn get_root_posts(
history_stream: impl futures::Stream<Item = Result<SsbMessageKVT, GolgiError>>,
) -> (u64, Vec<Post>) {
let mut latest_sequence = 0;
let mut posts = Vec::new();
futures::pin_mut!(history_stream);
while let Some(res) = history_stream.next().await {
match res {
Ok(msg) => {
if msg.value.is_message_type(SsbMessageContentType::Post) {
let content = msg.value.content.to_owned();
if let Value::Object(content_map) = content {
if !content_map.contains_key("root") {
latest_sequence = msg.value.sequence;
let text = match content_map.get_key_value("text") {
Some(value) => value.1.to_string(),
None => String::from(""),
};
let timestamp = msg.value.timestamp.round() as i64 / 1000;
let datetime = NaiveDateTime::from_timestamp(timestamp, 0);
let date = datetime.format("%d %b %Y").to_string();
let subject = text.get(0..52).map(|s| s.to_string());
let post = Post::new(
msg.key.to_owned(),
text,
date,
msg.value.sequence,
timestamp,
subject,
);
posts.push(post)
}
}
}
}
Err(err) => {
// Print the `GolgiError` of this element to `stderr`.
warn!("err: {:?}", err);
}
}
}
(latest_sequence, posts)
}

76
part_6_ui_layout/src/task_loop.rs Normal file
View File

@ -0,0 +1,76 @@
use async_std::{channel::Receiver, task};
use log::{info, warn};
use crate::{sbot, Database};
async fn fetch_posts_and_update_db(db: &Database, peer_id: String, after_sequence: u64) {
let peer_msgs = sbot::get_message_stream(&peer_id, after_sequence).await;
let (_latest_sequence, root_posts) = sbot::get_root_posts(peer_msgs).await;
match db.add_post_batch(&peer_id, root_posts) {
Ok(_) => {
info!(
"Inserted batch of posts into database post tree for peer: {}",
&peer_id
)
}
Err(e) => warn!(
"Failed to insert batch of posts into database post tree for peer: {}: {}",
&peer_id, e
),
}
}
/// Request the name of the peer represented by the given public key (ID)
/// and update the existing entry in the database.
async fn fetch_name_and_update_db(db: &Database, peer_id: String) {
match sbot::get_name(&peer_id).await {
Ok(name) => {
if let Ok(Some(peer)) = db.get_peer(&peer_id) {
let updated_peer = peer.set_name(&name);
match db.add_peer(updated_peer) {
Ok(_) => info!("Updated name for peer: {}", &peer_id),
Err(e) => {
warn!("Failed to update name for peer: {}: {}", &peer_id, e)
}
}
}
}
Err(e) => warn!("Failed to fetch name for {}: {}", &peer_id, e),
}
}
pub enum Task {
Cancel,
FetchAllPosts(String),
FetchLatestName(String),
}
/// Spawn an asynchronous loop which receives tasks over an unbounded channel
/// and invokes task functions accordingly.
pub async fn spawn(db: Database, rx: Receiver<Task>) {
task::spawn(async move {
while let Ok(task) = rx.recv().await {
match task {
// Fetch all messages authored by the given peer, filter
// the root posts and insert them into the posts tree of the
// database.
Task::FetchAllPosts(peer_id) => {
info!("Fetching all posts for peer: {}", peer_id);
fetch_posts_and_update_db(&db, peer_id, 0).await;
}
// Fetch the latest name for the given peer and update the
// peer entry in the peers tree of the database.
Task::FetchLatestName(peer_id) => {
info!("Fetching latest name for peer: {}", peer_id);
fetch_name_and_update_db(&db, peer_id).await;
}
// Break out of the task loop.
Task::Cancel => {
info!("Exiting task loop...");
break;
}
}
}
});
}

32
part_6_ui_layout/src/utils.rs Normal file
View File

@ -0,0 +1,32 @@
//! Public key validation.
/// Ensure that the given public key is a valid ed25519 key.
///
/// Return an error string if the key is invalid.
pub fn validate_public_key(public_key: &str) -> Result<(), String> {
// Ensure the ID starts with the correct sigil link.
if !public_key.starts_with('@') {
return Err("expected '@' sigil as first character".to_string());
}
// Find the dot index denoting the start of the algorithm definition tag.
let dot_index = match public_key.rfind('.') {
Some(index) => index,
None => return Err("no dot index was found".to_string()),
};
// Check the hashing algorithm (must end with ".ed25519").
if !&public_key.ends_with(".ed25519") {
return Err("hashing algorithm must be ed25519".to_string());
}
// Obtain the base64 portion (substring) of the public key.
let base64_str = &public_key[1..dot_index];
// Ensure the length of the base64 encoded ed25519 public key is correct.
if base64_str.len() != 44 {
return Err("base64 data length is incorrect".to_string());
}
Ok(())
}

153
part_6_ui_layout/static/css/lykin.css Normal file
View File

@ -0,0 +1,153 @@
.content {
background-color: lightyellow;
border: 5px solid #ffd700;
border-radius: 1rem;
grid-area: content;
padding: 1.5rem;
overflow-y: scroll;
word-wrap: anywhere;
}
.container {
height: 100%;
width: 100%;
margin: 0;
}
.disabled {
opacity: 0.4;
pointer-events: none;
}
.flash-message {
margin-left: auto;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
color: red;
}
.flex-container {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.flex-container > input {
margin: 0.3rem;
}
.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr 3fr;
grid-template-areas: 'nav' 'peers' 'posts' 'content';
grid-gap: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.2rem;
overflow: hidden;
height: 85vh;
}
@media only screen and (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 3fr 4fr;
grid-template-areas:
'nav nav nav nav nav'
'peers posts posts posts posts'
'peers content content content content';
}
}
.icon {
margin-left: 1rem;
}
.nav {
background-color: lightgreen;
border: 5px solid #19a974;
border-radius: 1rem;
grid-area: nav;
padding: 1rem;
}
.peers {
background-color: lightblue;
border: 5px solid #357edd;
border-radius: 1rem;
grid-area: peers;
text-align: left;
}
.peers > ul {
padding-left: 1rem;
}
.peers > ul > li > a {
justify-content: space-between;
}
.peers > ul > li > a > p {
margin: 0;
font-weight: bold;
padding-right: 1rem;
}
.post > ul {
padding-left: 1rem;
padding-right: 1rem;
}
.posts {
background-color: bisque;
border: 5px solid #ff6300;
border-radius: 1rem;
grid-area: posts;
overflow-y: scroll;
}
.posts > ul {
padding-left: 1rem;
padding-right: 1rem;
}
.posts > ul > li > a {
justify-content: space-between;
}
.posts > ul > li > a > p {
margin: 0;
}
.selected {
background-color: #f9c587;
}
a {
text-decoration: none;
color: black;
}
code {
word-wrap: anywhere;
}
form {
margin-left: auto;
margin-right: 0.5rem;
}
h1 {
margin-left: 1rem;
}
img {
width: 3rem;
}
li {
list-style: none;
font-size: 12px;
}

BIN
part_6_ui_layout/static/icons/delete_post.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
part_6_ui_layout/static/icons/download.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

1
part_6_ui_layout/static/icons/icon_attributions Normal file
View File

@ -0,0 +1 @@
<a href="https://www.flaticon.com/free-icons/download" title="download icons">Download icons created by Kiranshastry - Flaticon</a>

BIN
part_6_ui_layout/static/icons/read_post.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
part_6_ui_layout/static/icons/unread_post.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

23
part_6_ui_layout/templates/base.html.tera Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>lykin</title>
<meta name="description" content="lykin: an SSB tutorial application">
<meta name="author" content="glyph">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/lykin.css">
</head>
<body class="container">
<h1>
<a href="/">lykin</a>
</h1>
</a>
<div class="grid-container">
{% include "topbar" %}
{% include "peer_list" %}
{% include "post_list" %}
{% include "post_content" %}
</div>
</body>
</html>

14
part_6_ui_layout/templates/peer_list.html.tera Normal file
View File

@ -0,0 +1,14 @@
<div class="peers">
<ul>
{% for peer in peers -%}
<li>
{% if peer.name %}
{{ peer.name }}
{% else %}
{{ peer.public_key }}
{% endif %}
</li>
{%- endfor %}
</ul>
</div>

6
part_6_ui_layout/templates/post_content.html.tera Normal file
View File

@ -0,0 +1,6 @@
<div class="content">
{% if post %}
{{ post.text }}
{% endif %}
</div>

10
part_6_ui_layout/templates/post_list.html.tera Normal file
View File

@ -0,0 +1,10 @@
<div class="posts">
{% if posts %}
<ul>
{% for post in posts -%}
Subject placeholder
{%- endfor %}
</ul>
{% endif %}
</div>

25
part_6_ui_layout/templates/topbar.html.tera Normal file
View File

@ -0,0 +1,25 @@
<div class="nav">
<div class="flex-container">
<a class="disabled icon" title="Download latest posts">
<img src="/icons/download.png">
</a>
<a class="disabled icon" title="Mark as read">
<img src="/icons/read_post.png">
</a>
<a class="disabled icon" title="Mark as unread">
<img src="/icons/unread_post.png">
</a>
<a class="disabled icon" title="Delete post">
<img src="/icons/delete_post.png">
</a>
<form class="flex-container" action="/subscribe" method="post">
<label for="public_key">Public Key</label>
<input type="text" id="public_key" name="public_key" maxlength=53>
<input type="submit" value="Subscribe">
<input type="submit" value="Unsubscribe" formaction="/unsubscribe">
</form>
{% if flash and flash.kind == "error" %}
<p class="flash-message">[ {{ flash.message }} ]</p>
{% endif %}
</div>
</div>