Refactor Session and Session_iba template

[eleanorreem]

Overview

We created a duplicate but slightly different template for our IBA course. There is now a large amount of shared loginc between the regular session template and the session_iba template.

The IBA session page can be found in pages/courses/image-based-abuse/[sessionSlug].tsx and the regular session page can be found in pages/courses/[slug]/[sessionSlug].tsx

This ticket is to pull out duplicated logic / code between the two pages into either separate components or functions that can then be shared by the two pages.

Action Items

Here are some suggestions for possible refactors. These are suggestions and you may take a different route:

• Extract logic which determines chat access into separate function
• Extract logic which determines session completion into separate function
• Create SessionHeader component which wraps around the Header component and its children
• Create SessionVideo component to wrap around current implementation with SessionContentCard which contains Video and transcript as children
  • callStartSession can move into this component
  • the useEffect to open transcript modal can also be moved to this component
• to handle Create Activity component to wrap around current implementation with SessionContentCard
• Create Chat component to wrap around the current implementation of the Chat card

Testing

• Once your refactor is complete, please compare your pages to the live pages.
• Ensure you have run cypress tests and everything still works

It may make sense to split this ticket out into separate PRs as there could be a lot of changes.

Resources/Instructions

[anmol-fzr]

@eleanorreem I would like to contribute on this issue please assign me this issue

[kyleecodes]

Hey @anmol-fzr thank you for your interest!
I can assign you after this PR is either closed or completed.
As per our Issue Limit policies sometimes we have to limit the number of issues assigned to help keep a sustainable flow of issues for all contributors. Thank you!

[MarosBaran]

@kyleecodes Hi, I am a student of Technical University of Kosice (Slovakia) and i would like to contribute on this issue as part of a task i was given on one of my subjects (i can provide details about this task in dm/pm). Can u assign me this issue if its still available?

[github-actions]

Thank you @MarosBaran you have been assigned this issue!
Please follow the directions in our Contributing Guide. We look forward to reviewing your pull request shortly ✨

---

Support Chayn's mission? ⭐ Please star this repo to help us find more contributors like you!
Learn more about Chayn here and explore our projects. 🌸

[MarosBaran]

Hi @kyleecodes , im already working on this Issue, ive added the SessionVideo/SessionHeader components, extracted the logic for session completion, but now i have 1 question. In StoryBlokSessionPage and StoryBlokSessionIbaPage, there's a different logic for liveChatAccess, in StoryBlokSessionPage it takes into account the liveCourseAccess as well, but it doesnt in StoryBlokSessionIbaPage. Now my question is if thats intended or that it should be fixed to so that both pages share the same logic. I provide screenshots of mentioned code, thank you for your answer.

[kyleecodes]

@eleanorreem

In StoryBlokSessionPage and StoryBlokSessionIbaPage, there's a different logic for liveChatAccess, in StoryBlokSessionPage it takes into account the liveCourseAccess as well, but it doesnt in StoryBlokSessionIbaPage. Now my question is if thats intended or that it should be fixed

Pinging @eleanorreem !

[annarhughes]

Hey @MarosBaran thanks for checking in on this liveAccess issue! Coincidentally I had edited this logic so that both files use the same logic. The changes are here and will be merged next week, so we may have a slight but please do continue refactoring, with both files using the same logic as you had intended to. We'll replace my change with your refactors later 👍