How to organize state

[pearl crane]

I have a PostFacade, which has state of type

export interface PostsState {
  posts: Post[];
  next: string | null;
  selectedPost: Post | null;
}

I also have a GroupsFacade, with a state of

export interface GroupsState {
  groups: Group[];
  next: string | null;
  selectedGroup: Group | null;
}

Each Post can be part of a Group. I would like to display group posts, what would be ideal place for it? New state? Replace PostsState with group posts?

Basically APIs are as
GET /api/posts
GET /api/groups/:id/posts

All posts have "pagination", I load more when you need them (that's the next property)

[wanton fulcrum]

Hi @pearl crane

Here are my thoughts

1, Create an interface for GroupPostsState:
export interface GroupPostsState {
posts: Post[];
next: string | null;
selectedGroup: Group | null;
}

2. And then initialize and manage the state separately, so that it won't interfere with the regular posts state.

const initialGroupPostsState: GroupPostsState = {
posts: [],
next: null,
selectedGroup: null,
};

Or you can integrate with existing state.

1. Update the "PostsState" interface to include "groupId"

export interface PostsState {
posts: Post[];
next: string | null;
selectedPost: Post | null;
selectedGroupId: string | null; // New property
}

2. And then needs some logic update.

When fetching group posts via /api/groups/:id/posts, set selectedGroupId to the appropriate group ID. And then filter the posts in the posts array by selectedGroupId.

[pearl crane]

It's not complete yet, but I ended up doing #1

[wanton fulcrum]

Good. Did you solve all?

[pearl crane]

I'd say this is solved, yes. Sort of needed second opinion on this

[wanton fulcrum]

Good