switchbacktech/compass

🧭 Monorepo for Compass, a weekly calendar for minimalists

compass's Issues

Adjust Preview Event When Changing Times in Form

Prerequisites

• Using an up-to-date main branch

Expected Behavior

As a user, when changing an event's time in the event form, I should see the preview event rectangle size and time values change immediately

Current Behavior

• Notice: The form's start time is different from the rectangle's start time

When changing an event's time from the form, the preview rectangle and time values don't change until after submitting the event

Steps to Reproduce

1. Create new event

2. Edit event by clicking it to open the form

3. Change start/end dates using the form's input picker

4. Notice: The form's time values are different from the preview event's

Possible Solution (Not obligatory)

Coordinate state between EventForm.tsx and useDraftUtil.ts in a similar way as the title and priority states

• The title and priority values are updating in the preview correctly, so try using that same approach for the start and end time values

Context

Fix 403 Sync Error When User Requires Full Resync

Prerequisites

• Using an up-to-date main branch

Expected Behavior

Given that a user has an expired sync connected, when running sync maintenance, the user's google data should be re-initialized, so that the user can maintain active data across Google Calendar and Compass.

Current Behavior

The user's data isn't refreshed, resulting in the data going stale.

Steps to Reproduce

1. Wait for a Compass user's sync to expire (currently 5 days), without running sync maintenance

2. Run sync maintenance

3. Notice: User's sync not refreshed.

Possible Solution (Not obligatory)

Catch 403 Google error and autorefresh during sync maintenance

Context

Command Pallete

That maps the existing shortcuts and common actions and provides a description. Includes
c - Create event
j - Go to previous week
k - Go to next week
[ - Toggle left sidebar
] - Toggle right sidebar
z - Logout
w - Add to week list
m - Add to month list

Context

About command palettes Resource page (mangy)

Possible libraries:

• react-cmdk

Improve Build CLI Output

As a developer, I want to use the Compass cli to build backend and frontend artifacts, so I can easily deploy my changes.

Current Behavior:

• The build command will attempt to run even when there is a missing .env file, which is required for the app to work. As a result, users think the build is ready to deploy when it's not.
• The build steps are opaque, leaving users unsure of what's going on during the script
• MongoDB warning when starting script: [MONGODB DRIVER] Warning: Warning: no saslprep library specified. Passwords will not be sanitized

Expected

• Doesn't attempt to compile if missing .env file
• Includes clear logging messages while the script is running
• Removes MongoDB sasl warning
• Docs are updated with any usages changes

Context

• StackOverflow about MongoDB warning | link (stackoverflow.com)

---

Manual Testing

• Doesn't break the delete command
• Can still build web and nodePckgs in same command

Update Event Watch Calls Based On Google API Changes

Below comes from the email I got from our friends at Google. We should update our event calls accordingly.

---

The Google Calendar API v3 will now include the eventType parameter to subscribe to specific event types when using Events.Watch. Additionally, starting March 11, 2024, the following changes will be introduced:

Default event type filters alignment for both Events.list and Events.watch.
Error handling for operations not supported for special event types, such as WorkingLocation, Out of Office, and FocusTime events.

What Should Be Changed

Events.watch: Specify the event types you need for your application as a parameter to reduce your infrastructure costs. In case you want to request a quota increase, please make sure you have implemented event type filters appropriately. This factor will be considered when we are evaluating quota increase requests.

Events.list: Specify the event types you need for your application as a parameter. Without making this change, working location events will start to be returned.

Explore the updated documentation and resources to learn more about Google Calendar API v3:

Manage focus time, out of office, and working location events documentation
Manage quotas

Remove Electron Package

I originally built Compass as an Electron app. However, I quickly shifted to distributing it as a web app, because I found that easier to deploy and test.

The code in packages/electron comes from those early desktop days. I haven't touched it in a while, so it's probably broken. I wanted to have it tracked in GitHub so contributors can reference how to structure the code in this monorepo if you'd like to pick up where I left off. The structure is based on this template.

Now that it's here, it's more of a distraction than anything. The Electron packages change, it makes the codebase more initiating to read, and I have no plans of packaging the app with Electron again.

So, let's remove it

Prompt user to refresh page upon new version

As a user, I want to be prompted to refresh the page after a new version is available, so that I can use the new version.

Setup Redirect Rules and 404 Component

Expected Behavior

When visiting a route, such as https://app.compasscalendar.com/login, it should redirect to the index page due to being a SPA (Single Page App).

Current Behavior

Shows a 404 page.

Steps to Reproduce

1. Open https://app.compasscalendar.com/login

Possible Solution (Not obligatory)

Redirect all pages to index * -> /

Context

Loading a route or refreshing a page will cause a 404.

Cleanup root file commits

As a neurotic open-source maintainer, I want to see an appropriate emoji next to the commit messages for the files in the root project, so that I can sleep at night.

Use 'dependencies' branch as Dependabot target

As a developer, I want Dependabot to propose dependency updates to dependencies, so that I can have a cleaner PR queue and commit history, while still keeping packages updated.

Update Google OAuth Flow to New Version

As a user, I want to sign up/ sign in to Compass with as much confidence and as little work as possible, so I can spend less time worrying or clicking and more time in the app

Currently prompts user to confirm using legacy OAuth in Brave.

Is this the case for other browsers, too?

Implementation:

• Figure out what needs to be updated (probably the library / usage of the library)
• Update code
• Update any relevant tests

Initialize Web Sockets

Story

As a user, I want my data to accurately reflect the state of my calendar in Compass's / Google's Database.

---

Implementing

Establishing a bi-directional connection between client and server will make it possible for the client to respond to server changes, like calendar events or server errors

• Pick websocket library
• Install
• Validate connection logic in tests
• Establish bi-directional connection to each client
• Prove connection works by logging a simple message, 'Connected to client: {clientId}'

How relevant messages are handled will be followed-up in a future PR

Upgrade MongoDB Driver

As a system, I should use the latest MongoDB Node driver, so that Compass will be compatible with the latest version of Mongo Atlas (which is upgrading to v7 soon).

Implementation: upgrade backend node package and any call signatures that changed

---

Context:

Full recommendation from MongoDB:

What’s in the update?

MongoDB 7.0 introduces new features and improvements such as:

Compound wildcard indexes
New aggregation operators such as $median and $percentile
Queryable Encryption (now Generally Available)
What do I need to do?

To ensure a seamless transition, we recommend updating your driver version to ensure continued compatibility with your applications. If your applications are compatible with MongoDB version 7.0, no downtime is expected for your applications. Visit our Docs to see compatibility changes in 7.0, determine which driver versions are compatible with 7.0, and download the latest version.

While most upgrades do not require any application changes, if you are concerned about compatibility we recommend exploring the Stable API."

Update Google API Calls with new `event_type` param

Well well well, look who decided to update their API (Google did).

Update functions that call events.watch, events.list, along with any tests and utils. This is to remain up-to-date with the lates Google Calendar API changes. See below for all details:

---

We are writing to inform you about upcoming changes to the Google Calendar API v3 that may impact your applications and notification handling, starting March 11, 2024.

What does this mean for your organization?
The Google Calendar API v3 will now include the eventType parameter to subscribe to specific event types when using Events.Watch. Additionally, starting March 11, 2024, the following changes will be introduced:

Default event type filters alignment for both Events.list and Events.watch.
Error handling for operations not supported for special event types, such as WorkingLocation, Out of Office, and FocusTime events.
What do you need to do?
To prevent any direct impact in your applications, we strongly encourage you to review your usage of the applications listed below and take the following actions:

Events.watch: Specify the event types you need for your application as a parameter to reduce your infrastructure costs. In case you want to request a quota increase, please make sure you have implemented event type filters appropriately. This factor will be considered when we are evaluating quota increase requests.
Events.list: Specify the event types you need for your application as a parameter. Without making this change, working location events will start to be returned.
Event type: If your code is performing operations on special events, it is important to review it to ensure that your code does not attempt to perform operations not supported for special event types.
We’re here to help
Explore the updated documentation and resources to learn more about Google Calendar API v3:

Manage focus time, out of office, and working location events documentation
Manage quotas
If you have additional questions, please refer to get help from Google and the developer community.

Thanks for choosing Google Workspace.

– The Google Developer Team

Refresh Redux after receiving 601 error from backend

Prerequisites

• Using an up-to-date main branch

Expected Behavior

Upon needed refresh between client & server, both coordinate autonomously without needing user input or displaying errors or alerts

Current Behavior

Steps to Reproduce

Method 1: Accurate Flow

1. Sign up for Compass
2. Don't use Compass for a while (4 days?)
3. Re-sign into Compass
4. Delete / Edit an existing event
5. Check logs for 601 error

Method 2: Forced Error

1. Sign up for Compass
2. Update edit event service to throw 601 Error (throw error(NoMatchingEvent))
3. Check Network tab and backend logs

Possible Solution (Not obligatory)

Establish connection between client & server via WebSockets

• just refresh window -- handle websockets in another PR

Context

Memoize Event Selectors to Improve Performance

Prerequisites

• Using an up-to-date main branch

Expected Behavior

Rendering the app and performing redux selections shouldn't trigger performance warnings in the console

Current Behavior

The following warning appears when rendering the app, which is indicative of sub-optimal usage of Redux selectors

MainGrid.tsx:46 Selector selectDraftId returned a different result when called with the same parameters. This can lead to unnecessary rerenders.
Selectors that return a new reference (such as an object or an array) should be memoized: https://redux.js.org/usage/deriving-data-selectors#optimizing-selectors-with-memoization 
{state: {…}, selected: {…}, selected2: {…}, stack: 'Error\n    at selectDraftId (http://localhost:9080/…f28fc7913aafae5.js?a0e1cb40c5d5eac67f27:70493:18)'}

Steps to Reproduce

1. Open app in dev mode

2. Open console

3. Refresh page

4. See console warnings

Possible Solution (Not obligatory)

Memoize event selectors, per: https://redux.js.org/usage/deriving-data-selectors#optimizing-selectors-with-memoization

Context

Update Heading During Month Changes

Prerequisites

• Using an up-to-date main branch

Expected Behavior

When on a week that spans multiple months, the label heading label should display both months in the following format:
'ShortenedMonth 1 - ShortenedMonth 2 YYYY'

• For example: "Jun - Jul 2024"

When the week spans multiple years (Dec-Jan), the label should change to:
'Dec YYYY - Jan YYYY'

Current Behavior

• Notice: It says "December 2023", when the current day is actually January 2024, which is misleading for people like me who forget what year it is

Steps to Reproduce

1. Hard-code the today value to in useToday.ts to 2024-01-04: const today = dayjs("2024-01-04");

2. Notice: Month label is December 2023. It should be 'Dec 23 - Jan 24'

3. Repeat process for other month changes (eg set today to 2024-02-01)

Possible Solution (Not obligatory)

• Compare the month's of start and end of view date objects
• When, use the new format

Context

• Required: Please write unit tests to confirm the new label logic works as expected

Handle Token Expired/Revoked Error (Invalid Grant)

Delayed Sign In Prompt After Returning to app

To reproduce:

• Sign in to Compass
• Don't use it for a while (or somehow force session to expire)
• Go back to Compass in browser
• Notice: you can access app (no sign in)
• Create an event in compass
• Notice: Prompted to login and getting this error (Login Requited)
• Notice: this error on backend:

401 error

"error":"invalid_grant","error_description":"Token has been expired or revoked."}

Expected: automatic redirect to login

• How: check for session every time window is focused (not waiting until user does an operation)

Opaque error message

Hmm, something's off. message appears when a request fails, often due to a session expiring and needing to re-login.

• Users can click out of it, but it keeps re-appearing for 3-5 times (because of the multiple event requests). Most users just give up at that point

🎨 Improve the UX for the right navbar

Prerequisites

• Using an up-to-date main branch .

Expected Behavior

As a user I want when I click the hamburger menu it marks the difference when it is open and when it is closed . When closed it should display the ☰ and when open it should display X .

Current Behavior

It displays ☰ both when open and closed.

Steps to reproduce

1. Open and close month picker by typing ] or clicking the hamburger menu on the right section.
2. Notice how it is the same ☰ being displayed.

When closed

When open

Possible Solution (Not obligatory)

Update the icon rendering logic to dynamically switch between ☰ and X based on the open or closed state of the hamburger menu.

Context

To replicate this error locally, follow the Getting Started guide up to the Start in Dev Mode section.

Configure prettier auto-formatting upon push

As a developer, I want prettier to update my code whenever pushing to this repo, so that the codebase can maintain consistent formatting and I have to worry less about it.

Implementation details:

• setup a husky pre-push script, so prettier writes changes before making it to this remote repo.

Unable to Sign In with Google in Local Compass Instance

Prerequisites

• Using an up-to-date main branch
• Fork and clone the repository onto your local machine.

Expected Behavior

When signing in to Compass locally using Google, it should successfully capture the user ID from MongoDB and identify the Compass user based on the provided Google ID.

Current Behavior

1. Missing user id.
2. Mismatch user id.
3. Timeout Mongo database connection timeout , reason being (ReplicaSetNoPrimary).
4. Invalid domain name.

Possible Solution (Not obligatory)

I have aligned each solution with its current behavior above.

1. When you encounter a missing user id , it is because compass is not connected to your mongo database and there are no records of any user stored. The reason is because you are not connected to the mongo database. Sometimes the mongo db is successfully connected when you run yarn dev:backend but still a missing user id! Why that? I found out that I was missing Mongo db in my machine so I had to install and run mongod --version to see if you have mongo db in your machine.

2. When you encounter a mismatch user id , probably is because the user id that was set in your mongo db is not the one being captured maybe because you have store many users in your database. In order to fix this you need to clear your user data using this documentation

3. When you encounter Mongo database timeout of reason ReplicaSetNoPrimary, this is because you haven't whitelisted your IP address , in short , it's just a way of saying only devices with my IP address can connect to my Mongo database. In order to fix this go to Mongodb where you created a cluster and under "ipwhitelist" click on the edit IP address button and then choose "Add current IP address".

4. When encoutering invalid domain name , this is because the url you provided in the supertoken_url in your .env file is incorrect. This maybe because you prematurely finished setting up your supertokens. Please make sure to completely set up your supertokens , then copy your assigned api key and url.

Context

To recreate this error, please follow the steps outlined in the project setup documentation. This issue may impact users attempting to sign in locally, hindering their ability to seamlessly integrate Google sign-in functionality with Compass.

Configure React Testing Library to Avoid Warning

Prerequisites

• Using an up-to-date main branch

Expected Behavior

React Testing Library tests run without any warnings

Current Behavior

act() warnings appear during tests, even when tests pass.

Steps to Reproduce

1. Setup your dev environment. Follow the Setup Guide up to the Start in Dev Mode section

2. Run a single React Testing Library:

# from `/compass` root
yarn jest eventform.test -t 'Event Form closes when clicking outside'

# or yarn test:web to run all the web-related tests

3. Notice the act() warnings

console.error
    Warning: An update to SomedaySection inside a test was not wrapped in act(...).
    
    When testing, code that causes React state updates should be wrapped into act(...):
    
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */
    
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
        at dateCalcs (/Users/ty/src/switchback/compass/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedaySection.tsx:27:3)
        at div
        at displayName (/Users/ty/src/switchback/compass/node_modules/styled-components/src/models/StyledComponent.js:247:14)
        at prefs (/Users/ty/src/switchback/compass/packages/web/src/views/Calendar/components/LeftSidebar/LeftSidebar.tsx:21:11)
        at div
        at displayName (/Users/ty/src/switchback/compass/node_modules/styled-components/src/models/StyledComponent.js:247:14)
        at CalendarView (/Users/ty/src/switchback/compass/packages/web/src/views/Calendar/Calendar.tsx:40:31)
        at Provider (/Users/ty/src/switchback/compass/node_modules/react-redux/lib/components/Provider.js:19:3)
        at basenameProp (/Users/ty/src/switchback/compass/node_modules/react-router/lib/components.tsx:311:13)
        at basename (/Users/ty/src/switchback/compass/node_modules/react-router-dom/index.tsx:292:3)
        at GoogleOAuthProvider (/Users/ty/src/switchback/compass/node_modules/@react-oauth/google/dist/index.js:42:32)
        at children (/Users/ty/src/switchback/compass/node_modules/react-dnd/src/core/DndProvider.tsx:28:25)
        at children (/Users/ty/src/switchback/compass/packages/web/src/__tests__/__mocks__/mock.render.tsx:29:30)

      54 |   const onSectionClick = () => {
      55 |     if (isDrafting) {
    > 56 |       dispatch(draftSlice.actions.discard());
         |       ^
      57 |       return;
      58 |     }
      59 |   };

Possible Solution (Not obligatory)

• React Testing Library dependency updates

Context

Avoid the workaround of wrapping parts of the test in act(). This makes the test much harder to read, maintain, and debug. It's also a worse developer experience than the verbose logs.

I have a feeling the solution will be related to updating RTL dependencies or configs. I'd like to avoid any scenario where Compass's RTL individual tests have to be modified.

Here are some relevant links about this issue:

• testing-library/react-testing-library#1051
• https://github.com/testing-library/react-hooks-testing-library/blob/chore/migration-guide/MIGRATION_GUIDE.md

User Forced to Go Through Login Flow Twice After Session Expired

Prerequisites

• Using an up-to-date main branch

Expected Behavior

1. User tries to access Compass after an extended time (after their session expired)
2. User redirected to login screen
3. User presses login button, prompting Oauth dialog
4. User confirms Oauth dialog
5. User's sync is initialized
6. Compass redirects to home page
7. User can access and edit events like normal

Current Behavior

1-6: same
7: Compass redirects to home page, which triggers requests for /api/event....
8. The request fail with 401 unauthorized from SuperTokens
9. User is redirect to login page
10. User clicks through sign in button and dialog AGAIN
11. User is redirected to home page
12. User can finally access and edit events like normal

Steps to Reproduce

Here are the logs that accompany the above scenario:

# tries to access events, 401 correctly return (session expired)
68|backend  | 401 GET /api/event?start=2024-03-03T00:00:00-06:00&end=2024-03-09T23:59:59-06:00 154.687ms Sat, 09 Mar 2024 21:01:24 GMT
68|backend  | 401 GET /api/event?someday=true&start=2024-03-01&end=2024-03-31 148.039ms Sat, 09 Mar 2024 21:01:24 GMT
68|backend  | 401 GET /api/event?start=2024-03-03T00:00:00-06:00&end=2024-03-09T23:59:59-06:00 1.188ms Sat, 09 Mar 2024 21:01:24 GMT
68|backend  | 401 GET /api/event?someday=true&start=2024-03-01&end=2024-03-31 1.079ms Sat, 09 Mar 2024 21:01:24 GMT
68|backend  | 401 GET /api/event?start=2024-03-03T00:00:00-06:00&end=2024-03-09T23:59:59-06:00 1.112ms Sat, 09 Mar 2024 21:01:24 GMT
68|backend  | 401 GET /api/event?someday=true&start=2024-03-01&end=2024-03-31 0.927ms Sat, 09 Mar 2024 21:01:24 GMT
68|backend  | 401 GET /api/event?start=2024-03-03T00:00:00-06:00&end=2024-03-09T23:59:59-06:00 0.744ms Sat, 09 Mar 2024 21:01:25 GMT
68|backend  | 401 GET /api/event?someday=true&start=2024-03-01&end=2024-03-31 0.681ms Sat, 09 Mar 2024 21:01:25 GMT
68|backend  | 401 GET /api/event?start=2024-03-03T00:00:00-06:00&end=2024-03-09T23:59:59-06:00 0.708ms Sat, 09 Mar 2024 21:01:25 GMT
68|backend  | 401 GET /api/event?someday=true&start=2024-03-01&end=2024-03-31 0.650ms Sat, 09 Mar 2024 21:01:25 GMT

# after going through oauth dialog box
68|backend  | 24-03-09 21:01:41 [debug] app:sync.helpers: REMINDER: Channel will expire in 7200 minutes (5 days)
68|backend  | 24-03-09 21:01:41 [warn] app:user.service: Re-syncing google data for user: 651488733aa260d5183921c1
68|backend  | 24-03-09 21:01:41 [debug] app:sync.service: Stopping all gcal event watches for user: 651488733aa260d5183921c1
68|backend  | 24-03-09 21:01:41 [debug] app:sync.service: Skipped stop for calendarId: [email protected] due to missing field(s):
68|backend  |             channelId: undefined
68|backend  |             resourceid: eRqPWi.....
68|backend  | 24-03-09 21:01:42 [debug] app:sync.helpers: REMINDER: Channel will expire in 7200 minutes (5 days)
68|backend  | 24-03-09 21:01:42 [info] app:sync.service: Sync initialized for channelId: a4c00712-85d1-......
68|backend  | 200 POST /api/sync/gcal/notifications 0.829ms Sat, 09 Mar 2024 21:01:42 GMT
68|backend  | 200 POST /api/oauth/google 1814.245ms Sat, 09 Mar 2024 21:01:43 GMT

# but the next request still fails with the same 401 error (why???)
68|backend  | 401 GET /api/event?start=2024-03-03T00:00:00-06:00&end=2024-03-09T23:59:59-06:00 0.862ms Sat, 09 Mar 2024 21:01:43 GMT
68|backend  | 401 GET /api/event?someday=true&start=2024-03-01&end=2024-03-31 0.620ms Sat, 09 Mar 2024 21:01:43 GMT
68|backend  | 401 GET /api/event?start=2024-03-03T00:00:00-06:00&end=2024-03-09T23:59:59-06:00 0.634ms Sat, 09 Mar 2024 21:01:43 GMT
68|backend  | 401 GET /api/event?someday=true&start=2024-03-01&end=2024-03-31 0.584ms Sat, 09 Mar 2024 21:01:43 GMT
68|backend  | 401 GET /api/event?start=2024-03-03T00:00:00-06:00&end=2024-03-09T23:59:59-06:00 0.683ms Sat, 09 Mar 2024 21:02:10 GMT
68|backend  | 401 GET /api/event?start=2024-03-03T00:00:00-06:00&end=2024-03-09T23:59:59-06:00 0.781ms Sat, 09 Mar 2024 21:02:10 GMT
68|backend  | 401 GET /api/event?someday=true&start=2024-03-01&end=2024-03-31 0.587ms Sat, 09 Mar 2024 21:02:10 GMT
68|backend  | 401 GET /api/event?someday=true&start=2024-03-01&end=2024-03-31 0.600ms Sat, 09 Mar 2024 21:02:10 GMT

# creating an event in Google Calendar is triggered (ie, the sync is setup correctly)
68|backend  | 24-03-09 21:02:24 [debug] app:sync.service.helpers: updating: "synced?"  | eRq......
68|backend  | 200 POST /api/sync/gcal/notifications 248.032ms Sat, 09 Mar 2024 21:02:24 GMT

# user goes through Oauth again
68|backend  | 200 POST /api/oauth/google 743.598ms Sat, 09 Mar 2024 21:07:03 GMT

# now it works
68|backend  | 200 GET /api/event?start=2024-03-03T00:00:00-06:00&end=2024-03-09T23:59:59-06:00 111.797ms Sat, 09 Mar 2024 21:07:03 GMT
68|backend  | 200 GET /api/event?start=2024-03-03T00:00:00-06:00&end=2024-03-09T23:59:59-06:00 42.320ms Sat, 09 Mar 2024 21:07:03 GMT
68|backend  | 200 GET /api/event?someday=true&start=2024-03-01&end=2024-03-31 36.655ms Sat, 09 Mar 2024 21:07:03 GMT
68|backend  | 200 GET /api/event?someday=true&start=2024-03-01&end=2024-03-31 33.446ms Sat, 09 Mar 2024 21:07:03 GMT
68|backend  | 200 GET /api/event?start=2024-03-03T00:00:00-06:00&end=2024-03-09T23:59:59-06:00 16.417ms Sat, 09 Mar 2024 21:07:03 GMT
68|backend  | 200 GET /api/event?someday=true&start=2024-03-01&end=2024-03-31 12.486ms Sat, 09 Mar 2024 21:07:03 GMT

Possible Solution (Not obligatory)

• It seems like Supertokens isn't creating a new session the first time. Perhaps we need to call their API differently when signing in for the first time.

Context

This affects users by giving them the impression that the sign in is broken (it kinda is), which causes them to give up before trying again a second time.

Fix Month Picker Width For Current Month

Prerequisites

• Using an up-to-date main branch

Expected Behavior

When viewing the month picker on the right sidebar, it should be the same width when moving to the next/previous month

Current Behavior

The current month picker is narrower than the next/previous

Steps to Reproduce

1. Open month picker by typing ] or clicking the hamburger menu on the right section
2. Notice width of current month
3. Go to next month
4. Notice how width is wider

Above shows how the sidebar width is excessively narrow when viewing the current month (December)

This shows the expected sidebar width when viewing a next/previous month. This width should be the same when on the current month.

Possible Solution (Not obligatory)

I think this is because the 'Today' button is only rendering when on next/previous months.

One way to fix this is to always show the Today button but just hide it (setting opacity to 0) when it's the current month

Context

To replicate this error locally, follow the Getting Started guide up to the Start in Dev Mode section.

Fix Login Error After Revoking Access

Prerequisites

• Using an up-to-date main branch

Expected Behavior

• User signs up for Compass
• User revokes access to Compass through their Google account's security center
  • (User's data is deleted)
• User decides to try Compass again
• User goes back to Compass's website
  • (Original user session still exists in browser)
• User is able to sign in
  • (New User is created, old session is removed)

Current Behavior

Unhandled error when re-signing up for Compass after previously revoking Google access.

Full Error

65|backend  | 24-01-14 01:54:17 [debug] app:sync.helpers: REMINDER: Channel will expire in 7200 minutes (5 days)

{
    "response": {
        "config": {
            "url": "https://www.googleapis.com/calendar/v3/calendars/REDACTED/events/watch?syncToken=REDACTED",
            "method": "POST",
            "userAgentDirectives": [
                {
                    "product": "google-api-nodejs-client",
                    "version": "6.0.4",
                    "comment": "gzip"
                }
            ],
            "data": {
                "address": "https://app.compasscalendar.com/api/sync/gcal/notifications",
                "expiration": "1705629257218",
                "id": "REDACTED",
                "token": "REDACTED",
                "type": "web_hook"
            },
            "headers": {
                "x-goog-api-client": "gdcl/6.0.4 gl-node/16.17.0",
                "Accept-Encoding": "gzip",
                "User-Agent": "google-api-nodejs-client/6.0.4 (gzip)",
                "Authorization": "Bearer ya29.REDACTED",
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
            "params": {
                "syncToken": "REDACTED="
            },
            "retry": true,
            "body": "{\"address\":\"https://app.compasscalendar.com/api/sync/gcal/notifications\",\"expiration\":\"1705629257218\",\"id\":\"REDACTED\",\"token\":\"REDACTED\",\"type\":\"web_hook\"}",
            "responseType": "json",
            "retryConfig": {
                "currentRetryAttempt": 0,
                "retry": 3,
                "httpMethodsToRetry": [
                    "GET",
                    "HEAD",
                    "PUT",
                    "OPTIONS",
                    "DELETE"
                ],
                "noResponseRetries": 2,
                "statusCodesToRetry": [
                    [
                        100,
                        199
                    ],
                    [
                        429,
                        429
                    ],
                    [
                        500,
                        599
                    ]
                ]
            }
        },
        "data": {
            "error": {
                "errors": [
                    {
                        "domain": "calendar",
                        "reason": "fullSyncRequired",
                        "message": "Sync token is no longer valid, a full sync is required.",
                        "locationType": "parameter",
                        "location": "syncToken"
                    }
                ],
                "code": 410,
                "message": "Sync token is no longer valid, a full sync is required."
            }
        },
        "headers": {
            "cache-control": "no-cache, no-store, max-age=0, must-revalidate",
            "connection": "close",
            "content-encoding": "gzip",
            "content-type": "application/json; charset=UTF-8",
            "date": "Sun, 14 Jan 2024 01:54:17 GMT",
            "expires": "Mon, 01 Jan 1990 00:00:00 GMT",
            "pragma": "no-cache",
            "server": "ESF",
            "transfer-encoding": "chunked",
            "vary": "Origin, X-Origin, Referer",
            "x-content-type-options": "nosniff",
            "x-frame-options": "SAMEORIGIN",
            "x-xss-protection": "0"
        },
        "status": 410,
        "statusText": "Gone",
        "request": {
            "responseURL": "https://www.googleapis.com/calendar/v3/calendars/REDACTED/events/watch?syncToken=REDACTED%3D"
        }
    },
    "config": {
        "url": "https://www.googleapis.com/calendar/v3/calendars/REDACTEDevents/watch?syncToken=REDACTED%3D",
        "method": "POST",
        "userAgentDirectives": [
            {
                "product": "google-api-nodejs-client",
                "version": "6.0.4",
                "comment": "gzip"
            }
        ],
        "data": {
            "address": "https://app.compasscalendar.com/api/sync/gcal/notifications",
            "expiration": "1705629257218",
            "id": "REDACTED",
            "token": "REDACTED",
            "type": "web_hook"
        },
        "headers": {
            "x-goog-api-client": "gdcl/6.0.4 gl-node/16.17.0",
            "Accept-Encoding": "gzip",
            "User-Agent": "google-api-nodejs-client/6.0.4 (gzip)",
            "Authorization": "Bearer ya29.a0AfB_byD-jXy-REDACTED-REDACTED",
            "Content-Type": "application/json",
            "Accept": "application/json"
        },
        "params": {
            "syncToken": "REDACTED="
        },
        "retry": true,
        "body": "{\"address\":\"https://app.compasscalendar.com/api/sync/gcal/notifications\",\"expiration\":\"1705629257218\",\"id\":\"REDACTED\",\"token\":\"REDACTED\",\"type\":\"web_hook\"}",
        "responseType": "json",
        "retryConfig": {
            "currentRetryAttempt": 0,
            "retry": 3,
            "httpMethodsToRetry": [
                "GET",
                "HEAD",
                "PUT",
                "OPTIONS",
                "DELETE"
            ],
            "noResponseRetries": 2,
            "statusCodesToRetry": [
                [
                    100,
                    199
                ],
                [
                    429,
                    429
                ],
                [
                    500,
                    599
                ]
            ]
        }
    },
    "code": 410,
    "errors": [
        {
            "domain": "calendar",
            "reason": "fullSyncRequired",
            "message": "Sync token is no longer valid, a full sync is required.",
            "locationType": "parameter",
            "location": "syncToken"
        }
    ]
}

65|backend  | 24-01-14 01:54:17 [warn] app:user.service: Re-syncing google data for user: REDACTED
65|backend  | 24-01-14 01:54:17 [debug] app:sync.service: Stopping all gcal event watches for user: 63c2e4d854cf9a5cb0ce14a2
65|backend  | 24-01-14 01:54:17 [debug] app:sync.service: Skipped stop for calendarId: [email protected] due to missing field(s):
65|backend  |             channelId: undefined
65|backend  |             resourceid: REDACTED
65|backend  | 24-01-14 01:54:17 [debug] app:sync.helpers: REMINDER: Channel will expire in 7200 minutes (5 days)
65|backend  | 24-01-14 01:54:18 [info] app:sync.service: Sync initialized for channelId: 2b6bf447-cd45-49c3REDACTED
65|backend  | 200 POST /api/sync/gcal/notifications 1.805ms Sun, 14 Jan 2024 01:54:18 GMT
65|backend  | 200 POST /api/oauth/google 1897.772ms Sun, 14 Jan 2024 01:54:18 GMT

This occurs because the user's id is in the browser's session. When the (now deleted) user makes a request to the Compass API, it attaches that old user id to the request. The backend tries to use that id, but cannot because the user has been deleted.

As a result of the failed DB operation, it throws an error to the frontend.

The frontend doesn't have a mechanism to handle this scenario, so it just alerts the user.

Steps to Reproduce

Manual Reproduction

1. Sign in to Compass

2. Revoke Compass's access to your Google account

3. Try editing an existing calendar event or creating a new one, which will trigger a Google API request. Compass will catch the error, recognize that you've revoked access, and delete all user data, and throw the error.

Semi-Automated Reproduction

1. Sign up for Compass
2. Delete the user's data using the CLI delete command (see CLI doc page)
3. Make a change in Compass
4. Get redirected to the login page
5. Try logging in
6. See error

Possible Solution (Not obligatory)

Potential reasons:

• When calling signOut from frontend, the ST session is revoked (which applies to front and backend). But then the backend is later re-revoking the session. (see ST's signOut docs)

Context

Early-adopters who attempt to give Compass another shot will run into this issue.
Having a way to gracefully make sure that an authenticated user can use the app like normal will increase user retention.

Background Color Changes After Deep Scroll

Prerequisites

• Using an up-to-date main branch

Expected Behavior

1. User hovers cursor over main grid
2. User scrolls down and holds
3. The grid color shouldn't change

Current Behavior

1-2: same
3. The grid moves up, exposing white space below the grid

Possible Solution (Not obligatory)

• Update CSS to prevent scrolling in this way or update the CSS To use the same background color when this happnes

Context

Fix Inability to Edit Events due to Prompt Redux Error

Prerequisites

• Using an up-to-date main branch

Expected Behavior

• When editing an event, the UI should just change the new event; it shouldn't refresh the page

Current Behavior

• page refreshes whenever editing an event

Steps to Reproduce

1. Create new event
2. Edit event
3. Notice: app refreshes
4. Notice error:

backend  | 24-02-14 15:08:42 [error] app:error.handler: {"result":"Prompt Redux refresh","description":"Invalid event id (most likely)","statusCode":601,"isOperational":true}

backend 601 PUT /api/event/<eventId> 443.414ms Wed, 14 Feb 2024 15:08:42 GMT

Possible Solution (Not obligatory)

Context

• This only happens when editing an existing event (rather than creating a new one), which makes me thing it has to do with the Redux state getting out-of-whack

Redundant `yarn.lock` in `packages/web`

Prerequisites

• Using an up-to-date main branch

Expected Behavior

yarn dev:web should start the web development server without errors.

Current Behavior

Running yarn dev:web results in the following error:

PS C:\Users\hanzi\Desktop\compass> yarn dev:web
Internal Error: @compass/web@workspace:.: This package doesn't seem to be present in your lockfile; run "yarn install" to update the lockfile
...

Steps to Reproduce

1. Clone the repository and switch to the main branch.
2. configure the .env
3. Run `yarn install at the root of the project.
4. Start the backend successfully.
5. Attempt to run yarn dev:web and encounter the above error.

Possible Solution (Not obligatory)

The issue was resolved by removing a yarn.lock file found in the packages/web directory. After deleting this file and re-running yarn install at the root, yarn dev:web started working as expected. It seems that the presence of this additional yarn.lock file was causing conflicts with dependency resolution.

Context

This issue may affect new contributors or setups, as the error prevents the web development server from starting.
I am new to the project and wanted to confirm if this is an aspect that others have encountered or if it's a change worth considering for the project.

Failed login after changing google email address

Prerequisites

• Using an up-to-date main branch

Expected Behavior

When Google throws an error that includes a user's email in the response, Compass should use that email to find the appropriate user, so that the error can be addressed

Current Behavior

When receiving a Google error, Compass is looking for users in the session and by associating the syncToken...but not by looking at the config.url.

Steps to Reproduce

1. Sign in with a google user

2. Change the Google user's email (via Google alias).

3. Sign out of compass

4. Sign back into compass

Possible Solution (Not obligatory)

Use Gaxios's config.url to get the email, then find the Compass userId based on that email

Context

This affects users who change their gmail address. As a result of the account not being found, a new account should be created or a full sync should occur, so that the updated email is used