Lets say I want to build a calendar app and want to build a parent service that manages the state of the whole calendar, but can communicate with a child service that manages a single day. Is there a proper way to do this?

A work flow would be:

Load calendar page (single month) > utilize CalendarService to store calendar state

Edit single day fetch data from CalendarService calendar state > update day information to render in edit page > update day information back into CalendarService calendar state > rerender with updated day info

Save calendar state > post into database with calendar state

So I'm thinking...

Main component

const myCalendarApp = () => {   
    const [calendarData, setCalendarData] = useState([]);

    useEffect(() =>{
        const data = fetchMyData();
        setCalendarData(data);
        CalendarService.setCalendarData(data);       
    }

    render() {
    return <CalenderComponent data={calendarData}>;
}
}

Calendar Component

const CalendarComponent = () => {   
const [calendarData, setCalendarData] = useState([]);

    const modifyDay = (dayId) => {
        // pop open EditDayComponent
        // pass dayId to editDayComponent
    }

    const updateCalendar = () => {
        // not sure how to do this call back 
    }

    const saveCalendarToDatabase = () => {
        CalendarService.saveCalendarDatatoDatabase();    
    }

render() {
    return (
            <div>
                <button onClick={saveCalendarToDatabase }/>
                <ul>
                    <li><button onClick={modifyDay(dayId)}>title1</button></li>
                    <li><button onClick={modifyDay(dayId)}>title2</button></li>
                </ul>
            </div>
        )
}

}

Edit Day Component

const EditDayComponent= (dayId) => {   
const [dayData, setDayData] = useState([]);

useEffect(() => {
        setDayData(CalendarService.getCalendarDataById(dayId))
    })

const updateCalendar = () => {
    // not sure how to do this call back to CalendarService
}

const saveDayEdits = () => {
    CalendarService.saveCalendarDatatoDatabase();
        // kill this instance of EditDayComponent 
}

render() {
    return (
        <div>
            <button onClick={saveDayEdits}/>
                // Assume input fields for time, title, color, etc...
        </div>
    )
}

}

CalendarService

// Service to manage the state of a months calendar
export default class CalendarService{
    static calendarData;


    static getCalendarDataById(dayId){
        return this.calendarData.get(dayId); 
        // assume we have a get function for retrieving by dayId
        // and this would get the specific day
    }

    static updateCalenderDayData(dayData){
        // do work to update this.calendarData with the dayData
        // rerender the page with new values
    }


    static saveCalendarDataToDatabase(){
        myApiCall.post(this.calendarData);    
    }
}

DayService

// Service to manage state of a single day
export default class DayService{
    static calendarDayData;

    static setDayToEdit(data){
    this.calendarData = CalendarService.getCalendarDataById(dayId);
}

    static updateDayInfo(someData) {
        let newDayData = formatDataToCalendarDayData(someData);
        this.calendarDayData = newDayData;
        // rerender
    }

    static saveDayInfo () {
        CalendarService.updateCalenderDayData(this.calenderDayData);
    }

}

Questions:

1. Is this the right approach to this problem or is there a better way to have a service like this?
2. Once I kill EditDayComponent, will it kill the DayService instance? Would it know to reference an existing CalendarService instance?
3. Once I kill CalendarComponent, will it kill CalendarService instance?
4. If I call DayService.saveDayInfo(), how is that the proper way to call CalendarService and update the CalendarData?

​