seperation of concerns

src/apis/comment.ts

@@ -1,11 +1,11 @@
-import { RootStore } from "../stores/root";
 import { RootApi } from "./root";
 
 export class CommentApi {
-  constructor(private api: RootApi, private store: RootStore) {}
+  constructor(private api: RootApi) {}
 
   async getByPostId(postId: number) {
     const res = await this.api.client.get(`/posts/${postId}/comments`);
-    this.store.comment.load(res.data);
+
+    return res.data;
   }
 }

src/apis/post.ts

@@ -1,21 +1,23 @@
-import { RootStore } from "../stores/root";
 import { RootApi } from "./root";
 
 export class PostApi {
-  constructor(private api: RootApi, private store: RootStore) {}
+  constructor(private api: RootApi) {}
 
   async getAll() {
     const res = await this.api.client.get(`/posts`);
-    this.store.post.load(res.data);
+
+    return res.data;
   }
 
   async getById(id: number) {
     const res = await this.api.client.get(`/posts/${id}`);
-    this.store.post.load([res.data]);
+
+    return res.data;
   }
 
   async getByUserId(userId: number) {
     const res = await this.api.client.get(`/posts?userId=${userId}`);
-    this.store.post.load(res.data);
+
+    return res.data;
   }
 }

src/apis/root.ts

@@ -1,5 +1,4 @@
 import axios from "axios";
-import { RootStore } from "../stores/root";
 import { CommentApi } from "./comment";
 import { PostApi } from "./post";
 import { UserApi } from "./user";
@@ -11,9 +10,9 @@ export class RootApi {
   post: PostApi;
   comment: CommentApi;
 
-  constructor(store: RootStore) {
-    this.user = new UserApi(this, store);
-    this.post = new PostApi(this, store);
-    this.comment = new CommentApi(this, store);
+  constructor() {
+    this.user = new UserApi(this);
+    this.post = new PostApi(this);
+    this.comment = new CommentApi(this);
   }
 }

src/apis/user.ts

@@ -1,16 +1,17 @@
-import { RootStore } from "../stores/root";
 import { RootApi } from "./root";
 
 export class UserApi {
-  constructor(private api: RootApi, private store: RootStore) {}
+  constructor(private api: RootApi) {}
 
   async getAll() {
     const res = await this.api.client.get(`/users`);
-    this.store.user.load(res.data);
+
+    return res.data;
   }
 
   async getById(id: number) {
     const res = await this.api.client.get(`/users/${id}`);
-    this.store.user.load([res.data]);
+
+    return res.data;
   }
 }

src/app.tsx

@@ -6,8 +6,8 @@ import { HomePage } from "./pages/home";
 import { PostPage } from "./pages/post";
 import { UserPage } from "./pages/user";
 
-const store = new RootStore();
-const api = new RootApi(store);
+const api = new RootApi();
+const store = new RootStore(api);
 
 function App() {
   return (

src/models/comment.ts

@@ -1,6 +1,6 @@
 import { computed, makeObservable } from "mobx";
 import { RootStore } from "../stores/root";
-import { IComment } from "../types/comment";
+import { IComment } from "../entities/comment";
 
 export class Comment implements IComment {
   id: number;

src/models/post.ts

@@ -1,6 +1,6 @@
 import { computed, makeObservable } from "mobx";
 import { RootStore } from "../stores/root";
-import { IPost } from "../types/post";
+import { IPost } from "../entities/post";
 
 export class Post implements IPost {
   id: number;

src/models/user.ts

@@ -1,6 +1,6 @@
 import { computed, makeObservable } from "mobx";
 import { RootStore } from "../stores/root";
-import { IUser } from "../types/user";
+import { IUser } from "../entities/user";
 
 export class User implements IUser {
   id: number;

src/pages/home.tsx

@@ -1,17 +1,18 @@
 import { observer } from "mobx-react";
 import { useEffect, useState } from "react";
-import { useRootContext } from "../root-context";
+import { useRootStore } from "../root-context";
 import { Post } from "../components/post";
 
 export const HomePage = observer(() => {
-  const { api, store } = useRootContext();
+  const rootStore = useRootStore();
+
   const [loading, setLoading] = useState(false);
 
   const load = async () => {
     try {
       setLoading(true);
-      await api.post.getAll();
-      await api.user.getAll();
+      await rootStore.post.loadAll();
+      await rootStore.user.loadAll();
     } finally {
       setLoading(false);
     }
@@ -30,7 +31,7 @@ export const HomePage = observer(() => {
     <div>
       <h1>Posts</h1>
 
-      {store.post.all.map((post) => (
+      {rootStore.post.all.map((post) => (
         <Post key={post.id} post={post} />
       ))}
     </div>

src/pages/post.tsx

@@ -1,12 +1,12 @@
 import { observer } from "mobx-react";
 import { useEffect, useState } from "react";
 import { useParams } from "react-router";
-import { useRootContext } from "../root-context";
+import { useRootStore } from "../root-context";
 import { Comment } from "../components/comment";
 import { Post } from "../components/post";
 
 export const PostPage = observer(() => {
-  const { api, store } = useRootContext();
+  const rootStore = useRootStore();
   const [loading, setLoading] = useState(false);
 
   const params = useParams<{ postId: string }>();
@@ -16,8 +16,8 @@ export const PostPage = observer(() => {
   const load = async () => {
     try {
       setLoading(true);
-      await api.post.getById(postId);
-      await api.comment.getByPostId(postId);
+      await rootStore.post.loadById(postId);
+      await rootStore.comment.loadByPostId(postId);
     } finally {
       setLoading(false);
     }
@@ -32,7 +32,7 @@ export const PostPage = observer(() => {
     return <div>loading...</div>;
   }
 
-  const post = store.post.byId.get(Number(params.postId));
+  const post = rootStore.post.byId.get(Number(params.postId));
 
   if (!post) {
     return <div>Post not found</div>;

src/pages/user.tsx

@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
 import { useEffect, useState } from "react";
 import { useParams } from "react-router";
-import { useRootContext } from "../root-context";
+import { useRootStore } from "../root-context";
 import { Post } from "../components/post";
 
 export const UserPage = observer(() => {
@@ -11,13 +11,13 @@ export const UserPage = observer(() => {
 
   const userId = Number(params.userId);
 
-  const { api, store } = useRootContext();
+  const rootStore = useRootStore();
 
   const load = async () => {
     try {
       setLoading(true);
-      await api.user.getById(userId);
-      await api.post.getByUserId(userId);
+      await rootStore.user.loadById(userId);
+      await rootStore.post.loadByUserId(userId);
     } finally {
       setLoading(false);
     }
@@ -32,7 +32,9 @@ export const UserPage = observer(() => {
     return <div>loading...</div>;
   }
 
-  const user = store.user.byId.get(userId);
+  const user = rootStore.user.byId.get(userId);
+
+  console.log(user);
 
   if (!user) {
     return <div>User not found</div>;

src/root-context.ts

@@ -13,3 +13,7 @@ export const useRootContext = () => {
   const context = useContext(RootContext);
   return context as RootContextObject;
 };
+
+export const useRootStore = () => useRootContext().store;
+
+export const useRootApi = () => useRootContext().api;

src/stores/comment.ts

@@ -1,12 +1,13 @@
 import { action, computed, makeObservable, observable } from "mobx";
-import { IComment } from "../types/comment";
+import { IComment } from "../entities/comment";
 import { Comment } from "../models/comment";
 import { RootStore } from "./root";
+import { RootApi } from "../apis/root";
 
 export class CommentStore {
   byId = observable.map<number, Comment>();
 
-  constructor(private store: RootStore) {
+  constructor(private store: RootStore, private api: RootApi) {
     makeObservable(this);
   }
 
@@ -17,4 +18,10 @@ export class CommentStore {
   @computed get all() {
     return Array.from(this.byId.values());
   }
+
+  async loadByPostId(postId: number) {
+    const comments = await this.api.comment.getByPostId(postId);
+
+    this.load(comments);
+  }
 }

src/stores/post.ts

@@ -1,12 +1,13 @@
 import { action, computed, makeObservable, observable } from "mobx";
 import { Post } from "../models/post";
-import { IPost } from "../types/post";
+import { IPost } from "../entities/post";
 import { RootStore } from "./root";
+import { RootApi } from "../apis/root";
 
 export class PostStore {
   byId = observable.map<number, Post>();
 
-  constructor(private store: RootStore) {
+  constructor(private store: RootStore, private api: RootApi) {
     makeObservable(this);
   }
 
@@ -17,4 +18,19 @@ export class PostStore {
   @computed get all() {
     return Array.from(this.byId.values());
   }
+
+  async loadAll() {
+    const posts = await this.api.post.getAll();
+    this.load(posts);
+  }
+
+  async loadById(id: number) {
+    const data = await this.api.post.getById(id);
+    this.load([data]);
+  }
+
+  async loadByUserId(userId: number) {
+    const data = await this.api.post.getByUserId(userId);
+    this.load(data);
+  }
 }

src/stores/root.ts

@@ -1,9 +1,12 @@
+import { RootApi } from "../apis/root";
 import { CommentStore } from "./comment";
 import { PostStore } from "./post";
 import { UserStore } from "./user";
 
 export class RootStore {
-  user = new UserStore(this);
-  post = new PostStore(this);
-  comment = new CommentStore(this);
+  constructor(private api: RootApi) {}
+
+  user = new UserStore(this, this.api);
+  post = new PostStore(this, this.api);
+  comment = new CommentStore(this, this.api);
 }

src/stores/user.ts

@@ -1,12 +1,13 @@
 import { action, computed, makeObservable, observable } from "mobx";
 import { User } from "../models/user";
-import { IUser } from "../types/user";
+import { IUser } from "../entities/user";
 import { RootStore } from "./root";
+import { RootApi } from "../apis/root";
 
 export class UserStore {
   byId = observable.map<number, User>();
 
-  constructor(private store: RootStore) {
+  constructor(private store: RootStore, private api: RootApi) {
     makeObservable(this);
   }
 
@@ -17,4 +18,15 @@ export class UserStore {
   @computed get all() {
     return Array.from(this.byId.values());
   }
+
+  async loadAll() {
+    const data = await this.api.user.getAll();
+
+    this.load(data);
+  }
+
+  async loadById(id: number) {
+    const data = await this.api.user.getById(id);
+    this.load([data]);
+  }
 }