import { decorate, observable } from "refstore";
import { Post } from "../../domain/Post/Post";
 
export class PostService {
  async get(id = "") {
    const _ = encodeURIComponent;
 
    /** @type {{ [id: string]?: Post }?} */
    this.posts = {
      ...(this.posts || {}),
      [id]: await fetch(`/api/posts/${_(id)}`).then(x => x.json())
    };
 
    // Note: Only tracks reference. Don't mutate; replace.
  }
}
 
decorate(PostService, { posts: observable.ref });

import { Component } from "inferno";
import { inject, observer } from "refstore";
 
/**
 * @typedef IProps
 * @property {{ params: { id: string } }} match
 * @property {LocaleService} localeService
 * @property {PostService} postService
 *
 * @extends Component<IProps>
 */
export class PostScreenView extends Component {
  componentDidMount() {
    this.props.postService.get(this.props.match.params.id);
  }
 
  render() {
    const { formatTime } = this.props.localeService;
    const { params } = this.props.match;
    const { posts } = this.props.postService;
 
    const post = (posts || {})[params.id] || new Post();
 
    return (
      <blockquote id={params.id}>
        <small>
          {post.name} {formatTime(post.createdAt)}
        </small>
 
        {post.text || "..."}
      </blockquote>
    );
  }
}
 
export const PostScreen = inject("localeService", "postService")(
  observer(PostScreenView)
);

import { Route, Switch } from "refstore";
 
export class App extends Component {
  static routes = [
    { component: HomeScreen, exact: true, path: "/" },
    { component: PostScreen, "/posts/:id" }
  ];
 
  render() {
    return (
      <Switch>
        {App.routes.map(route => (
          <Route {...route} />
        ))}
      </Switch>
    );
  }
}