Implementing the base component
Because the implementations of the user's profile and the feed's posts components are similar, a substantial amount of code is shared between these components. To avoid reinventing the wheel and adhere to the Don't Repeat Yourself (DRY) principle, we can use TypeScript inheritance with an abstract base class to implement shared functionality and then extend it from both components.
Let's go over how to implement the profile component step by step:
- Create the
shared/types/post.event.tsfile and add the following type:export type PostEvent = { text: string | null; image: File | null; };
Then, create the shared/types/removepost.event.ts file and add the following type:
export type RemovePostEvent = {
id: string;
};
These types are intended for the typing of the custom events that will be used to communicate between the parent, profile, and posts components (that extend the base...