Reactive Data Client

import { Entity, createResource } from '@data-client/rest';

export class Post extends Entity {
  id = 0;
  userId = 0;
  title = '';
  body = '';
  pk() {
    return `${this.id}`;
  }
}
export const PostResource = createResource({
  urlPrefix: 'https://jsonplaceholder.typicode.com',
  path: '/posts/:id',
  schema: Post,
  searchParams: {} as { userId?: string | number } | undefined,
  optimistic: true,
});

export class User extends Entity {
  id = 0;
  name = '';
  username = '';
  email = '';
  phone = '';
  website = '';

  get profileImage() {
    return `https://i.pravatar.cc/64?img=${this.id + 4}`;
  }

  pk() {
    return `${this.id}`;
  }
}
export const UserResource = createResource({
  urlPrefix: 'https://jsonplaceholder.typicode.com',
  path: '/users/:id',
  schema: User,
  optimistic: true,
});

import { UserResource, type Post } from './resources';

export default function PostItem({ post }: { post: Post }) {
  const author = useSuspense(UserResource.get, { id: post.userId });
  return (
    <div className="listItem spaced">
      <Avatar src={author.profileImage} />
      <div>
        <h4>{post.title}</h4>
        <small>by {author.name}</small>
      </div>
    </div>
  );
}

import PostItem from './PostItem';
import ProfileEdit from './ProfileEdit';
import { PostResource } from './resources';

function PostList() {
  const userId = 1;
  const posts = useSuspense(PostResource.getList, { userId });
  return (
    <div>
      <ProfileEdit userId={userId} />
      <br />
      {posts.map(post => (
        <PostItem key={post.pk()} post={post} />
      ))}
    </div>
  );
}
render(<PostList />);

import { Entity, schema, createResource } from '@data-client/rest';

export class Todo extends Entity {
  id = 0;
  userId = 0;
  title = '';
  completed = false;
  pk() {
    return `${this.id}`;
  }
}
export const TodoResource = createResource({
  urlPrefix: 'https://jsonplaceholder.typicode.com',
  path: '/todos/:id',
  searchParams: {} as { userId?: string | number } | undefined,
  schema: Todo,
  optimistic: true,
});

export class User extends Entity {
  id = 0;
  name = '';
  username = '';
  email = '';
  website = '';
  todos: Todo[] = [];

  get profileImage() {
    return `https://i.pravatar.cc/64?img=${this.id + 4}`;
  }

  pk() {
    return `${this.id}`;
  }

  static schema = {
    todos: new schema.Collection([Todo], {
      nestKey: (parent, key) => ({
        userId: parent.id,
      }),
    }),
  };
}
export const UserResource = createResource({
  urlPrefix: 'https://jsonplaceholder.typicode.com',
  path: '/users/:id',
  schema: User,
  optimistic: true,
});

import { TodoResource, type Todo } from './resources';

export default function TodoItem({ todo }: { todo: Todo }) {
  const controller = useController();
  const handleChange = e =>
    controller.fetch(
      TodoResource.partialUpdate,
      { id: todo.id },
      { completed: e.currentTarget.checked },
    );
  const handleDelete = () =>
    controller.fetch(TodoResource.delete, {
      id: todo.id,
    });
  return (
    <div className="listItem nogap">
      <label>
        <input
          type="checkbox"
          checked={todo.completed}
          onChange={handleChange}
        />
        {todo.completed ? <strike>{todo.title}</strike> : todo.title}
      </label>
      <CancelButton onClick={handleDelete} />
    </div>
  );
}

import NewTodo from './NewTodo';
import { type Todo } from './resources';
import TodoItem from './TodoItem';

export default function TodoList({ todos, userId }: Props) {
  return (
    <div>
      {todos.map(todo => (
        <TodoItem key={todo.pk()} todo={todo} />
      ))}
      <NewTodo userId={userId} />
    </div>
  );
}
interface Props {
  todos: Todo[];
  userId: number;
}

import { UserResource } from './resources';
import TodoList from './TodoList';

function UserList() {
  const users = useSuspense(UserResource.getList);
  return (
    <div>
      {users.map(user => (
        <section key={user.pk()}>
          <h4>{user.name}&apos;s tasks</h4>
          <TodoList todos={user.todos} userId={user.id} />
        </section>
      ))}
    </div>
  );
}
render(<UserList />);

import { Entity, schema, RestEndpoint } from '@data-client/rest';

export class ExchangeRates extends Entity {
  currency = 'USD';
  rates: Record<string, number> = {};

  pk(): string {
    return this.currency;
  }

  static schema = {
    rates: new schema.Values(FloatSerializer),
  };
}

export const getExchangeRates = new RestEndpoint({
  urlPrefix: 'https://www.coinbase.com/api/v2',
  path: '/exchange-rates',
  searchParams: {} as { currency: string },
  schema: { data: ExchangeRates },
  // in ms; this api does not update the value at a faster rate
  pollFrequency: 15000,
});

export default function AssetPrice({ symbol, value }: Props) {
  return (
    <tr key={symbol}>
      <th>{symbol}</th>
      <td>
        <Formatted value={value} formatter="currency" />
      </td>
    </tr>
  );
}

interface Props {
  symbol: string;
  value: number;
}