[ON HOLD] Tagging page improvements

[awest25]

Improvements

(Is it possible to embed and programatically update a google sheet? If so we should look into using this)

• Make position of popup absolute
• Consolidate the popup code (remove most of the states dedicated to the popup)
• Redo the sync logic (described below)
• Make it so users don't have to wait between actions as they currently do (such as deleting rows, adding rows, and editing rows)
• Make inline editing consistent (make it save on blur (unfocus))
• Make it so editing the point start time doesn't cause you to select a different row because they get rearranged (maybe even wait to rearrange until blur)
• Fix general styling (getting rid of unessesary spacing, colors, etc. Just make it look as good as possible.)

Replacing sync logic

To handle real-time collaboration for adding, editing, and deleting rows in a table stored in Firebase Firestore, you can use a combination of Firebase's real-time features and a library like react-firebase-hooks or useFirestoreCollectionData from ReactFire.

Here’s how you can implement this:

1. Firebase Firestore: Firestore's real-time updates allow you to sync changes across multiple clients. When one user makes a change (e.g., adds a row), the change is immediately reflected in the Firestore database and broadcast to all other clients. Firestore handles most of the heavy lifting for you.
2. React Firestore Hooks: Libraries like react-firebase-hooks or useFirestoreCollectionData from ReactFire make it easy to listen for real-time updates to Firestore collections in your React components. This allows you to automatically update the table when any user adds, edits, or deletes rows.
3. Optimistic UI Updates: For a smoother user experience, you might implement optimistic updates, where the UI immediately reflects changes before they’re confirmed by Firestore. This can be achieved using local state management, but ensure you handle potential conflicts when multiple users are editing the same data.
   • This is already being done in the current tagger.
4. Concurrency Handling: Firestore supports transactions and batch writes, which can help ensure that updates are atomic and consistent even when multiple users are modifying data simultaneously.