Load and Store Friend Schedules from Firebase

[samarth52]

Summary

Resolves #171 and #172

We now have a feature that allows users to share schedules with friends. This PR uses the list of friends and their respective versions for a particular term from the friends collection to fetch the friend schedules using a firebase cloud function (gt-scheduler/firebase-conf#1). Stages have been added to load this data and extract friend info to prepare data. This PR also creates a context FriendContext that holds the friend schedule data as well as relevant setters.

Note

• This PR includes changes from the PR of Load and Store Friend Data from Firebase #171 to integrate all the friend schedules stages in AppLoader and to build the FriendContext

Checklist

Type:

• A new type is created to for friend schedules data. This type should follow closely the existing ScheduleData type.

Context:

• A new context FriendScheduleContext (used FriendContext instead) is created with appropriate variables and setter functions (similar to ScheduleContext).
• Data within the context should be immutable.

Hooks:

• A new hook is created for fetching the cloud function to obtain friend schedules (similar to useRawScheduleDataFromFirebase).
• (Did not implement since not required) A new hook is created for producing Immer object from raw friends schedules setters (similar to useScheduleDataProducer).

Stages:

• Stages only attempt to load from Firebase if the user is signed in.
• At least these two following stages must be created in src/components/AppDataLoader/stages.tsx:
  • StageLoadRawFriendScheduleDataFromFirebase - load data from Firebase using the right hook and pass the variables and setter functions to the producer stage load below (similar to StageLoadRawScheduleDataFromFirebase)
  • (Did not implement since not required) StageLoadFriendScheduleDataProducer - receive the variables and setter functions, pass them into the Immer producer hook, then pass the results along to ContextProvider (similar to StageLoadScheduleDataProducer).

Feel free to create more (such as a group load like GroupLoadScheduleData) to organize your code better.

• Stages have loading screens and display appropriate errors.
• Stages are incorporated into src/components/AppDataLoader/index.tsx correctly.

How to Test

• Add friends and schedule version in the friends collection
• Comment line 36 of functions/src/fetch_friend_schedules.ts in the gt-scheduler/firebase-config repo and run the emulator
• Change the cloud function link in \src\data\hooks\useRawFriendScheduleDataFromFirebaseFunction.ts to the emulator function link in the gt-scheduler/website repo
• Run GT Scheduler app
• View or use the values and setters of FriendContext anywhere in the code

[github-actions]

PR Preview Action 9866808
🚀 Deployed preview to https://gt-scheduler.github.io/website/pr-preview/pr-187/
on branch gh-pages at 2023-04-21 20:16 UTC

[yatharth-b]

This would be a big change to all stages, but it is recommended to not use Effects to transform data.
Read more here - https://react.dev/learn/you-might-not-need-an-effect#how-to-remove-unnecessary-effects

[yatharth-b]

I think this hook and the equivalent of this hook for schedules can be deleted if we use the use-immer package. I think it would be a lot better for readability.

https://immerjs.github.io/immer/example-setstate

[yatharth-b]

The code definitely works, but we need to do more investigation to re-evaluate the stage structure. There's definitely some useEffects which don't need to be there in both the friend stages and the schedule stages, but exactly pin pointing the inefficiencies will take more research in my opinion.

[nhatnghiho]

Addressed in gt-scheduler/firebase-conf/pull/4, but commenting here for more visibility.

For every request we're making to fetchFriendSchedule, the cloud function is triggered twice. It's because when we send data with application/json, it would trigger a CORS pre-flight request that checks to see if the CORS protocol is understood and a server is aware using specific methods and headers. To bypass this extra middle step, we need to decorate our request with the header Content-Type: application/x-www-form-urlencoded.