Infinite routing loop on Darien classroom edit page

[srallen]

React Router 4's declarative routing strikes again. This time I don't quite understand why it's broken or how to fix it.

Discovered while working on #80, if you navigate directly to the edit page of a classroom belonging to the Darien program, then the router ends up in an infinite loop and crashes the site. This is bad, heh. It works fine if you navigate via the links from the classrooms list. I'm not sure why this is broken for Darien classrooms because this doesn't happen for I2A.

While trying to work on this I realized that Darien wouldn't want that same classroom edit page design because it's still hard coded for the I2A uses. I think I was overly ambitious with trying to make some of these components shared between the two. The programs have distinct view and routing needs, so I think we have a few options:

• Darien gets its own edit classroom page design and we determine which to use similar to what I did in Darien classrooms table #74. I never really liked this solution
• Or we completely separate the shared components into I2A components and Darien components. This would result in some repetition, but that's not necessarily a bad thing.
• Or we separate the view components entirely and use HOC container components to inject in the class methods we want to share between the functional view components.
• And/or abstract out shared API calls and methods into the appropriate ducks into async actions managed by jumpstate.

@shaunanoordin I'd appreciate your thoughts since this affects a lot of the direction of the Darien development.

[shaunanoordin]

Infinite looping, whaaa? 😱 Righto, I'll look into this and return with further comments.

So to be clear, if I access e.g. http://localhost:3998/#/wildcam-darien-lab/educators/classrooms/321 directly as zootester1, the site will crash?

[srallen]

Yep, and your laptop won't be happy about it.

[shaunanoordin]

My current guess is that the infinite loop is less about the React router, and more to do with ClassroomEditorContainer.jsx triggering endless updates to the data store.

Observe this code:

ClassroomEditorContainer.jsx.componentDidMount() {
  ...

  console.log('x'.repeat(80), '\nselectedProgram:', this.props.selectedProgram, '\nprograms:', this.props.programs);

  if (!this.props.selectedProgram && this.props.programs) {
    Actions.getProgram({ programs: this.props.programs, param: this.props.match.params.program });
  }
}

In Scenario A, I am at the Classroom listing, and then I click (navigate to) Edit Classroom.
Result: this.props.selectedProgram and this.props.programs both have values.

In Scenario B, I access the Edit Classroom link directly
Result: the values are always undefined and []

This seems to ignite Actions.getProgram() on a nigh perpetual basis.

I'm still investigating this though, as - if my guess is correct - I'm not sure how this would be fixed.

Side note: The infinite loop has also been detected on the Edit Classroom (I2A), but on a very rare basis.