Getting Started

1//==> config/hosby.config.ts (file name)
2import HosbyClient from "hosby-ts";
3
4let hosby: HosbyClient;
5
6//config Hosby client
7hosby = new HosbyClient({
8    baseURL: process.env.BASE_URL, // https://api.hosby.io
9    privateKey: process.env.PRIVATE_KEY,
10    apiKeyId: process.env.API_KEY_ID,
11    projectId: process.env.PROJECT_ID,
12    userId: process.env.USER_ID,
13    projectName: process.env.PROJECT_NAME
14});
15
16// Initialize Hosby client
17const initializeHosbyClient = async () => {
18    try {
19        await hosby.init();
20        console.log('Hosby client initialized successfully');
21    } catch (error) {
22        console.error('Failed to initialize Hosby client:', error);
23        throw error;
24    }
25};
26
27// Immediately invoke the initialization function
28initializeHosbyClient();
29
30// Export Hosby client
31export default hosby;

1//==> UserList.tsx NextJS (Example)
2'use client';
3import hosby from '../config/hosby.config';
4import { useState, useEffect } from 'react';
5
6interface User {
7  id: string;
8  name: string;
9  email: string;
10  role?: string;
11  active?: boolean;
12  createdAt?: Date;
13  updatedAt?: Date
14}
15
16const UserList = () => {
17  const [users, setUsers] = useState<User[]>([]);
18  const [isLoading, setIsLoading] = useState(false);
19  const [error, setError] = useState<Error | null>(null);
20
21  useEffect(() => {
22    const fetchUsers = async () => {
23      setIsLoading(true);
24      setError(null);
25      
26      try {
27        const response = await hosby.find<User[]>('users');
28        
29        if (response.success) {
30          setUsers(response.data);
31        } else {
32          throw new Error('Failed to fetch users');
33        }
34      } catch (err) {
35        setError(err instanceof Error ? err : new Error('Unknown error occurred'));
36        console.error('Error fetching users:', err);
37      } finally {
38        setIsLoading(false);
39      }
40    };
41
42    fetchUsers();
43  }, []);
44  
45  return (
46    <div>
47    {isLoading ? (
48      <div className="flex items-center justify-center p-4">
49        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
50      </div>
51    ) : error ? (
52      <div className="p-4 text-red-500">
53        <p>Error: {error.message}</p>
54      </div>
55    ) : (
56      <div className="space-y-4 p-4">
57        <h2 className="text-xl font-semibold">Users</h2>
58        <div className="grid gap-4">
59          {users.map((user) => (
60            <div 
61              key={user.id}
62              className="p-4 border rounded-lg shadow-sm hover:shadow-md transition-shadow"
63            >
64              <div className="flex justify-between items-start">
65                <div>
66                  <h3 className="font-medium">{user.name}</h3>
67                  <p className="text-sm text-gray-500">{user.email}</p>
68                </div>
69                {user.role && (
70                  <span className="px-2 py-1 text-xs rounded-full bg-primary/10 text-primary">
71                    {user.role}
72                  </span>
73                )}
74              </div>
75              <div className="mt-2 text-sm text-gray-500">
76                {user.active !== undefined && (
77                  <span className="inline-flex items-center">
78                    {user.active ? 'Active' : 'Inactive'}
79                  </span>
80                )}
81              </div>
82            </div>
83          ))}
84        </div>
85      </div>
86    )}
87    </div>
88  )
89}
90
91export default UserList