State Management

State Management Overview

In the Rekindle Learning Admin Portal 2, we manage the global state using React’s context API. This allows us to share state across various components of the application efficiently.

Accessing the Global State

To access the global state from anywhere in the application, use the useAuthContext hook. This hook provides access to the sharedState object and the sharedStateUpdater function.

const { sharedState, sharedStateUpdater } = useAuthContext();

The sharedState object carries the global state, which is structured as follows (as of 10/2024):

export type ID = string;
export type URL = string;
export type Email = string;
export type CellNumber = string;
export type Name = string;

export type sharedStateObject = {
  all_enrollments?: Enrollment[];
  all_organisations: Organisation[];
  selected_enrollment?: Enrollment;
  selected_group?: UsersGroups[];
  selected_organisation?: Organisation;
  selected_user?: UserDetails;
  logged_in_user: {
    avatar: Avatar;
    cell_number: CellNumber;
    email: Email;
    first_name: Name;
    id: ID;
    last_name: Name;
    organisation: Organisation;
    organisation_id: ID;
    organisation_number: string;
    user_role: UserRole;
  };
} | null;

Example: Accessing the State

To access a specific part of the state for example, to get the id of the selected organization:

const orgId = sharedState?.selected_organisation?.id;

Updating the Global State

To update the global state, use the sharedStateUpdater function. This function updates the state and triggers re-renders of all components that depend on the updated state. It also ensures local state persistence, so the state is refreshed from local storage if the session is lost.

Here is an example of how to update the first_name global state object:

sharedStateUpdater({
  logged_in_user.first_name: Luke,
});

In this example, the sharedStateUpdater function updates the first_name field in the global state. This update will automatically cause all screens that use first_name to re-render.

Simple Example

Here is a simple example demonstrating how to use the global state and updater in a React component:

import React, { useState } from 'react';
import { useAuthContext } from './AuthContext';

const StateExample = () => {
  const { sharedStateUpdater, sharedState } = useAuthContext();
  const [name, setName] = useState('');

  const handleChange = (e) => {
    setName(e.target.value);
  };

  const handleClick = () => {
    sharedStateUpdater({ first_name: name });
  };

  return (
    <div>
      <input type="text" value={name} onChange={handleChange} placeholder="Enter first name" />
      <button onClick={handleClick}>Save Name</button>
      <p>Global State First Name: {sharedState?.first_name}</p>
    </div>
  );
};

export default StateExample;

Controller-View Pattern

The state management in Rekindle Learning Admin Portal 2 follows the controller-view pattern. In this pattern:

• Controller: The sharedStateUpdater acts as the controller, managing and updating the global state.
• View: The various components that consume the global state represent the view. They react to state changes and re-render accordingly.

This pattern ensures a clear separation of concerns, making the application more modular, maintainable, and scalable.

Summary

• Use useAuthContext to access sharedState and sharedStateUpdater.
• sharedState contains the global state, which includes user details, organization details, and other relevant information.
• Use sharedStateUpdater to update the global state and trigger re-renders of dependent components.
• The state management follows the controller-view pattern for better separation of concerns.

By following these guidelines, you can efficiently manage and update the global state in the Rekindle Learning Admin Portal 2, ensuring a seamless and responsive user experience.