Component Design for CYOAG

This document describes the ReactJS component hierarchy for CYOAG. This includes a description of the component state, on which the React component structure depends. In other words, depending on the state of the top-most parent component, it will be decided which descendents will be rendered and what their content will be. This can be thought of, in some sense, as a state tree, and that is how this component documentation will be structured. Each node in this tree represents a component, and each branch from that node represents a potential data state.

Using the top-most node as an example, we render the CyoagMain component. If there is a session cookie on the page to begin with, then the CyoagMain component's children will be a story component and its children. Otherwise, the CyoagMain component's children will represent login UI elements so that the user can log in and obtain a session ID, at which point the state will update so that the CyoagMain component will re-render with different children.

Component Hierarchy

A brief overview of components and their relationships

State and Prop Design

Preliminary design for state and prop management on components