Option 1: Getting started with a Social Feed

The Orbis SDK can allow you to create any type of social application, in this example we are going to create a contextual social feed which could be used as a decentralized commenting system for an NFT marketplace for example.

Step 1: Create a post

Once users are connected to their Ceramic did, they can start sharing content on the network. The post function from our SDK allows users to share a post from their did while following our schemas.

We are starting from our previous example to connect the user to Ceramic:

/** Import Orbis SDK */
import { Orbis } from "@orbisclub/orbis-sdk";

/**
 * Initialize the Orbis class object:
 * - You can make this object available on other components by passing it as
 * a prop or by using a context.
 */
let orbis = new Orbis();

export default function App() {

	/** The user object returned by the connect function can be stored in state */
	const [user, setUser] = useState();

	/** Calls the Orbis SDK and handle the results */
	async function connect() {
    let res = await orbis.connect();

		/** Check if connection is successful or not */
		if(res.status == 200) {
			console.log("Connected to Ceramic with: ", res.did);
			setUser(res.did);
		} else {
			console.log("Error connecting to Ceramic: ", res);
			alert("Error connecting to Ceramic.");
		}
	}

	return(
		<div>
			{user ?
				<>
					<p>Connected with: {user}</p>
					<Share orbis={orbis}  />
				</>
			:
				<button onClick={() => connect()}>Connect</button>
			}
		</div>
	);
}

/**
 * If the user is connected we show a textarea and submit button
 * to allow users to share content on Orbis.
 * The 'orbis' object must be passed as a parameter to maintain the connection.
 */
function Share({orbis}) {
const [loading, setLoading] = useState(false);
const [text, setText] = useState();

/** We are calling the Orbis SDK to share a new post from this user */
async function share() {
	setLoading(true);

	/**
	 * The createPost() function accept a JSON object that must contain a body
	 * which is the actual content of the post being shared.
     */
	let res = await orbis.createPost({body: text});

	/** Check if post was shared with success or not */
	if(res.status == 200) {
		console.log("Shared post with stream_id: ", res.doc);
	} else {
		console.log("Error sharing post: ", res);
		alert("Error sharing post.");
	}

	setLoading(false);
}

return(
	<div>
		<textarea placeholder="Share your post here..." value={text} onChange={(e) => setText(e.target.value)} />
		{loading ?
			<button>Loading...</button>
		:
			<button onClick={() => share()}>Share</button>
		}
	</div>
);
}

This post would have been shared in what we call the global feed but you could also get users to share content in a specific context by sharing this informations in the object passed to the orbis.createPost() function like this:

/** This example would share a post in the "testing" channel of our Orbis group. */
let res = await orbis.createPost({
	body: text,
	context: "kjzl6cwe1jw146uz3jnbu4s0rhyhbakr4nkd1u68qxx6fyzba3w616b2tojr143"
});

/**
 * The context can also be a random string such as a URL (for commenting purposes for example)
 * In this example, the user would be sharing a post in the context of the webpage that he/she is
 * currently visting which can be used for commenting purposes for example.
 */
let res = await orbis.createPost({
	body: text,
	context: "https://nftmarketplace/collections/azuki/5060"
});

Step 2: Retrieving posts

Now that we started sharing posts on Orbis we need to be able to retrieve them. Posts can be queried by context by using the orbis.getPosts() function.

Again, we will be starting from the example we were working on before with users sharing posts in the context of an imaginary NFT marketplace. Here is how it works:

import React, { useState, useEffect } from 'react';

/** Import Orbis SDK */
import { Orbis } from "@orbisclub/orbis-sdk";

/** Initialize the Orbis class object */
let orbis = new Orbis();

export default function App() {
  /** The user object returned by the connect function can be stored in state */
	const [user, setUser] = useState();

	/** Calls the Orbis SDK and handle the results */
	async function connect() {
    let res = await orbis.connect();

		/** Check if connection is successful or not */
		if(res.status == 200) {
			setUser(res.did);
		} else {
			console.log("Error connecting to Ceramic: ", res);
			alert("Error connecting to Ceramic.");
		}
	}

	return(
    <>
			<div>
				{user ?
					<>
						<p>Connected with: {user}</p>
						<Share orbis={orbis}  />
					</>
				:
					<button onClick={() => connect()}>Connect</button>
				}
			</div>
			<div>
        <h2>Posts shared</h2>
				<Posts orbis={orbis} />
			</div>
		</>
  );
}

/**
 * If the user is connected we show a textarea and submit button
 * to allow users to share content on Orbis.
 * The 'orbis' object must be passed as a parameter to maintain the connection.
 */
function Share({orbis}) {
	const [loading, setLoading] = useState(false);
	const [text, setText] = useState();

	/** We are calling the Orbis SDK to share a new post from this user */
	async function share() {
		setLoading(true);

		/**
		 * The createPost() function accept a JSON object that must contain a body
		 * which is the actual content of the post being shared.
     */
     let res = await orbis.createPost({
     	body: text,
     	context: "https://nftmarketplace/collections/azuki/5060"
     });


		/** Check if post was shared with success or not */
		if(res.status == 200) {
			console.log("Shared post with stream_id: ", res.doc);
      alert("Post shared with stream id: " + res.doc);
      setText();
		} else {
			console.log("Error sharing post: ", res);
			alert("Error sharing post, look at the logs.");
		}

		setLoading(false);
	}

	return(
		<div>
			<textarea value={text} onChange={(e) => setText(e.target.value)} placeholder="Share your post here..." />
			{loading ?
				<button>Loading...</button>
			:
				<button onClick={() => share()}>Share</button>
			}
		</div>
	);
}

/**
 * We will use this component to display the posts shared in the context of this specific
 * webpage url: "https://nftmarketplace/collections/azuki/5060".
 * This example could be used to build a decentralized commenting system for example.
 */
function Posts({orbis}) {
	const [loading, setLoading] = useState(false);
	const [posts, setPosts] = useState([]);

	/** When the component mounts we start loading the posts from this context. */
	useEffect(() => {
		loadPosts();
	}, [])

	/** Use the Orbis SDK to retrieve the posts shared in this context */
	async function loadPosts() {
		setLoading(true);
		let { data, error, status } = await orbis.getPosts({context: "https://nftmarketplace/collections/azuki/5060"});

		if(data) {
			/** If the query is successful we save the results returned in our posts array. */
			setPosts(data);
			setLoading(false);
		}
	}

	if(loading) {
		return <p>Loading posts...</p>
	}

	/** Display the results returned from query */
	if(posts && posts.length > 0) {
		return posts.map((post, key) => {
      return(
        <div key={key}>
					<p><b>Shared by: {post.creator}</b></p>
					<p>{post.content?.body}</p>
				</div>
      )
    });
	} else {
		return <p>No posts shared in this context.</p>
	}
}

If instead of loading posts from a specific context (in our example it’s https://nftmarketplace/collections/azuki/5060) you want to load posts from the global feed, you can simply use this:

let { data, error, status } = await orbis.getPosts();