Data Flow and Layout

Unilateral Data Flow

In the Rekindle Learning Admin Portal 2, we follow a unilateral data flow pattern to maintain clarity and ease of development. This approach ensures that data flows in a single direction, making it easier to trace and manage.

Example of Data Flow

Data flows from the top-level page to its relevant components and then to subcomponents. The global state (sharedState) supplements this flow and is updated as needed.

For instance, consider the Enrollments page:

• Enrollments Page: The top-level page passes data to the Enrollments component.
• Enrollments Component: This component then passes data to its subcomponents, such as EnrollmentDetails.

Here is an actual code snippet from the Details tab in Organization Settings:

const DetailsTab: React.FC = () => {
  const { sharedState } = useAuthContext();
  const selected_organisation = sharedState ? sharedState.selected_organisation : null;

  return (
    <>
      {selected_organisation && (
        <>
          <DetailsCard {...selected_organisation} />
          <CoursesCard {...selected_organisation} />
          <GroupTypesCard {...selected_organisation} />
        </>
      )}
    </>
  );
};

export default DetailsTab;

In this example, each card within the DetailsTab receives the same state ...selected_organisation.

Within the DetailsCard, various dialogs get the state they need from their parent component:

const DetailsCard = ({
  title,
  slug,
  student_limit,
  private_subdomain,
  demo_org,
  support_email,
  apple_app_link,
  google_app_link,
  huawei_app_link,
  id: orgId,
  disabled,
}: Organisation) => {
  return (
    <Styled.Card>

      Removed none relevant code for this example...

      {/* Dialogs */}
      <DisableOrganisationDialog
        isOpen={disableOrgDialogOpen}
        handleClose={setDisableOrgDialogOpen}
        slug={slug}
        orgId={orgId}
      />
      <EditOrganisationDialog isOpen={editOrgDialogOpen} handleClose={setEditOrgDialogOpen} />
    </Styled.Card>
  );
};

export default DetailsCard;

Here, each dialog (DisableOrganisationDialog, EditOrganisationDialog) receives the necessary state from the DetailsCard component, this is unilateral inheritance.

Directory Structure and Patterns

To maintain a clean and organized codebase, we adhere to specific directory structures and patterns:

• Components Directory: All reusable components are located here.
• Hooks Directory: All reusable hooks are stored in this directory.
• Hook Forms Directory: All used React hook forms are in this directory.
• Services Directory: All API calls are made from the services folder, matching the Postman collection created during development.

Summary

• Unilateral Data Flow: Data flows from the top-level page to components and subcomponents in a single direction.
• Global State (sharedState): Supplemented and updated as needed throughout the data flow.
• Component Structure: Components receive and pass down state, ensuring clarity and ease of management.

By following these guidelines, you can maintain a clear and efficient data flow and layout in the Rekindle Learning Admin Portal 2, ensuring ease of development and maintenance.