feat: integrate Google Calendar sync for assignments #3

[Mustansir-06]

Overview
This PR implements the requested Google Calendar integration for Issue #3. It allows users to sync their tasks/assignments directly to their Google Calendar and view them in real-time within the Daily Scheduler tab.

Changes Made
Authentication Update: Modified src/firebase.js to include the https://www.googleapis.com/auth/calendar.events scope, allowing the app to manage calendar events.

Google API Initialization: Integrated gapi-script in App.js to initialize the Google API client on application startup.

Task Syncing:

Updated TaskManager.js with a datetime-local input field.

Implemented addToGoogleCalendar logic to automatically push new tasks to the user's primary Google Calendar.

Live Scheduler: Refactored DailyScheduler.js to fetch today's events directly from the Google Calendar API instead of relying on localStorage.

Dependency Management: Added gapi-script to package.json.

Note to Maintainer
To enable this feature in production, you will need to:

Enable the Google Calendar API in your Google Cloud Console.

Set up OAuth 2.0 credentials.

Add REACT_APP_GOOGLE_CLIENT_ID and REACT_APP_GOOGLE_API_KEY to your environment variables.

[ElijahFeldman7]

Hi, did you mean to create a gapi-script file, because you import it but never write it

[Mustansir-06]

Actually, gapi-script is an external npm dependency I added to package.json. It's a lightweight wrapper used to load the Google API (gapi) dynamically in a React environment, which is more reliable than using a static <script> tag in index.html. You can see it listed in the dependencies in the package.json file in this PR.

[ElijahFeldman7]

Hi, a few things.

• Could you keep the title of the page the same, and keep the button just add.

• pull from upstream as someone has prd the scheduler page

• Could you add a state variable showDateAddOn that is intialized as false, toggled via a settings cog. could you make this settings cog a component as we use it for other pages too. wrap the date input in a conditional. also, remove the required attribute from the date input

• Currently, you require the user to fill out the time for it, could you just make it reliant on date for now. instead of type="datetime-local" try type="date". Make them assignments on the day for google calendar, rather than events.

• Can you add a dedicated utility module like googleCalendar.js that has the google calendar funcs so they are reusable

• Can you fix the codacy warnings. You use brackets on objects with dynamic calls from the API, use object.field instead. Line 42 should use Object.prototype.hasOwnProperty.call(obj, key) or key in obj

• in handleEventChange, you are calling setEvents twice. you only need the one update

[Mustansir-06]

Hi! I have refactored the code based on your feedback. Here is what's updated:

Refactoring: Created a dedicated googleCalendar.js utility and a reusable SettingsCog component.

UI/UX: Kept the page titles and buttons consistent. Added a showDateAddOn state toggled by the new Settings Cog.

Functionality: Changed the calendar integration to "all-day" assignments using type="date" and removed the required attribute from the date input.

Clean Code: Fixed Codacy warnings by using the in operator for dynamic object checks and optimized setEvents calls in the Scheduler to avoid double-renders.

Sync: Pulled the latest upstream changes to ensure compatibility with recent Scheduler PRs.

Let me know if there is anything else you'd like me to adjust!

[ElijahFeldman7]

Hi,
could you remove the ai generated comments please.

Thanks,
Eli