Beespeed Client SDK

The Beespeed Client SDK provides a simple interface to interact with the Beespeed blog API. It allows you to perform CRUD operations on blog posts.

Installation

To install the Beespeed Client SDK, you can use npm:

npm install beespeed-client

Usage

The SDK is compiled to JavaScript and can be used in both JavaScript and TypeScript projects. It uses ES6 modules, so make sure your environment supports ES6 import/export syntax.

Initialize the client

First, import and initialize the Beespeed client:

import { buildBeespeedClient } from 'beespeed-client';

const client = buildBeespeedClient({
  baseUrl: 'https://www.beespeed.dev/api' 
});

Get all blogs

To retrieve all blog posts:

try {
  const blogs = await client.getBlogs();
  console.log('All blogs:', blogs);
} catch (error) {
  console.error('Error fetching blogs:', error);
}

Get blog by ID

To get a specific blog post by its ID:

try {
  const blogId = 'your-blog-id';
  const blog = await client.getBlog(blogId);
  console.log('Blog:', blog);
} catch (error) {
  console.error('Error fetching blog:', error);
}

Create a blog

Remember to wrap your content in HTML. To create a new blog post:

try {
  const newBlog = {
    title: 'My New Blog Post',
    authorName: 'John Doe',
    content: '<p>This is the content of my new blog post.</p>',
    userEmail: '[email protected]'
  };
  const createdBlogId = await client.createBlog(newBlog);
  console.log('Created blog ID:', createdBlogId);
} catch (error) {
  console.error('Error creating blog:', error);
}

Rendering Blog Content and Images

Blog content returned from the API may include HTML tags such as <p> and <img>. When rendering the blog content in your application, use the following method to safely insert the HTML in React:

<div dangerouslySetInnerHTML={{ __html: blog.content }} />

Additionally, author images are provided as URLs, which can be displayed with standard tags

<img src={blog.authorImage} alt={blog.authorName} style={{ width: '50px', borderRadius: '50%' }} />

Update a blog

To update an existing blog post: Your content is wrapped in HTML

try {
  const blogId = 'existing-blog-id';
  const updatedBlog = {
    title: 'Updated Blog Title',
    content: '<p>This is the updated content of my blog post.</p>' // Wrap content in HTML tags
  };
  const updatedBlogId = await client.updateBlog(blogId, updatedBlog);
  console.log('Updated blog ID:', updatedBlogId);
} catch (error) {
  console.error('Error updating blog:', error);
}

Delete a blog

To delete a blog post:

try {
  const blogId = 'blog-id-to-delete';
  await client.deleteBlog(blogId);
  console.log('Blog deleted successfully');
} catch (error) {
  console.error('Error deleting blog:', error); 
}

For detailed overview here is an exammple in React.js

import React, { useEffect, useState } from 'react';
import { buildBeespeedClient, BlogClient } from 'beespeed-client';

const client = buildBeespeedClient({
  baseUrl: 'https://www.beespeed.dev/api', // Use the correct base URL  
});

const BeeBlogs = () => {
  const [blog, setBlog] = useState<BlogClient | null>(null);
  const [error, setError] = useState<string | null>(null);
  const blogId = 'Your ID'; // Your specific blog ID. Each Blog you create and publish has a unique I.D 

  useEffect(() => {
    const fetchBlog = async () => {
      try {
        const fetchedBlog = await client.getBlog(blogId);
        setBlog(fetchedBlog);
      } catch (err) {
        console.error('Error fetching blog:', err);
        setError('Failed to fetch blog.');
      }
    };

    fetchBlog();
  }, []);

  // Function to format the Firebase timestamp
  const formatDate = (timestamp: string) => {
    const date = new Date(timestamp);
    return date.toLocaleString(); // Adjust formatting as needed 
  };

  return (
    <div style={{ textAlign: 'center', padding: '20px' }}>
      <h1>Blog Details</h1>
      {error && <p className="error">{error}</p>}
      {blog ? (
        <div style={{ position: 'relative', border: '1px solid #ccc', borderRadius: '5px', padding: '10px', background: '#f9f9f9' }}>
          {/* Author Image in Top Right */}
          {blog.authorImage && (
            <img 
              src={blog.authorImage} 
              alt={blog.authorName}
              style={{
                position: 'absolute',
                top: '10px',
                right: '10px',
                width: '50px',
                height: '50px',
                borderRadius: '50%',
              }}
            />
          )}
          <h3>{blog.title}</h3>
          <p><strong>Author:</strong> {blog.authorName}</p>
          {/* Render content safely, handling images and HTML */}
          <div dangerouslySetInnerHTML={{ __html: blog.content }} />
          <p><em>Created at: {formatDate(blog.createdAt)}</em></p>
        </div>
      ) : (
        <p>No blog found.</p>
      )}
    </div>
  );
};

export default BeeBlogs; 

Error Handling

All methods in the Beespeed Client SDK throw errors if the API request fails. It's recommended to wrap your calls in try-catch blocks to handle these errors gracefully.

TypeScript Support

While the SDK is compiled to JavaScript, it includes TypeScript declaration files (.d.ts) for better development experience in TypeScript projects. The types are automatically available when you import the SDK in a TypeScript project.

Contributing

Contributions are welcome! Please feel free to email me at [email protected].

Building the SDK

If you want to build the SDK from source:

1. Clone the repository
2. Run npm install to install dependencies
3. Run npm run build to compile the TypeScript code to JavaScript

The compiled output will be in the dist/lib directory.

License

This project is licensed under the MIT License.

Author

Warren Chisasa