Hi @r002 !

I don't know if you remember me, but you submitted a pull request in my repo mithi/epic-react-exercises. We had chats about different coding philosophies and ideas about separation of concerns and typescript..
I didn't know how to contact you, so I'm just submitting an issue here. 😅
I'm writing because I wrote something that you might be interested in, it's a short document where I gather my thoughts about writing good React code. I hope you like it, and if you have any comments, suggestions or violent reactions, don't hesitate to tell me. Thanks!

https://github.com/mithi/react-philosophies

Video of bug:

Btw: The entire way FlashAlert is currently implemented is super-hacky. For now it's fine (other features to add! Places to go! Tasks to complete!) But eventually, refactor FlashAlert to actually implement it correctly!

Add 'Quote Rotator' at the top of the page. Everyone's favorite feature! 😀

Adding this field to the schema will allow us to audit in the future and see all logs which have been edited since their creation.

Ie. The user manually edits the log's dt or activity fields.

References:

• https://codepen.io/pixelnik/pen/pgWQBZ/
• https://api.themoviedb.org/3/search/movie?api_key=15d2ea6d0dc1d476efbca3eba2b9bbfb&query=goonies
• http://image.tmdb.org/t/p/w500/imtHhH4NuKMMaSityrxhuSmtyd3.jpg
• http://image.tmdb.org/t/p/w500/eBU7gCjTCj9n2LTxvCSIXXOvHkD.jpg
• https://www.themoviedb.org/movie/9340-the-goonies?language=en-US

Other:

• https://github.com/sameera-madushan/PosterPy

Specs:

• A candidate passage is always in the context of a storyId and a parentPassageId.
• A story is a chain of passages that have graduated from candidate status to cannon status.
• For every story, there can only be one cannon?

GUI:

• For each passage candidate, specify its parentPassageId -- this also automatically then sets its storyId.

• Implement the watch command. Typing watch will open favorite YT video in the GUI. (Eventually build feature to accept args; multiple favorite vids?)
• Add thumbnail in the YoutubeLog widget (eg. https://i.ytimg.com/vi/8xg3vE8Ie_E/default.jpg)

Specifications

1. User enters $> watch YOUTUBE_LINK
2. Parse and input into db:

{
   logId: string,
   dt: Date,
   created: Date,
   command: `watch`
   url: `YOUTUBE_LINK`
   videoTitle: `VIDEO_TITLE`
}

Example:

{
   logId: "buIYEva0zJK9EcaUySue",
   dt: Tue Mar 30 2021 11:44:04 GMT-0400,
   created: Tue Mar 30 2021 11:44:04 GMT-0400,
   command: "watch"
   url: "https://www.youtube.com/watch?v=8xg3vE8Ie_E"
   videoTitle: "Taylor Swift - Love Story"
}

GUI Result

In ActivityLog, show:
Tue Mar 30 2021 12:06 ET :: Watch Taylor Swift - Love Story

In the PreviewPane, show iframe of the YouTube vid.

• What does the landing page look like? Still need to actually figure this out. 🙄

• Load/unload records when user logs in/out

Add ability to the InputEngine to parse Youtube urls and understand/add timestamp field.

Examples:

• https://youtu.be/CoOtuXPSB3s?t=165
• https://www.youtube.com/watch?v=CoOtuXPSB3s&t=165s

Regression happened last build.

Get 20 logs at a time per page. Configurable?

If an unauthorized user tries to log in, show a flash alert modal to inform the user they're unauthorized.

Instead of using regex during the processing phase, refactor the code to parse the log entry on input.
Parsing upfront offers several advantages:

1. If the command is invalid, reject.
2. Store command and activity as their own fields per log in Firestore. This will allow us to use/analyze them easier later.

Commands that resolve:

1. wake up ➡️ sleep
2. return ➡️ go for depart depart for take break nap take nap
3. finish ➡️ start eat begin watch

Supported mono-commands :

1. brush teeth

Impl a global handler in App.tsx that will listen for any custom flashAlert events.

When a flashAlert event is received:

• Flash a modal overlay with the flash alert message for five seconds (make duration configurable later)

Get rid of all of the global event handlers and custom event message sending. Refactor everything to use React's Context API and useState instead!

Ponder:

• Should Internal.sendFlashAlert(...) be specifically converted into its own Context?

https://takeout.google.com/settings/takeout/custom/location_history

• Like Windows Terminal, different commands, args, and flags should all be color-coded differently in the console.

Write tests to ensure these internal calls generate their expected results:

• Processing Logs returns expected
• Rendering Logs returns expected

Actually properly set up webpack for prod. (Minify js, etc.)

Support deleting and editing logs. (Not metalogs; only logs.)

After every edit/delete, LogViewer will need to re-render to recompute all metalogs.

Upon right-click on a log, display a context menu that allows you to delete the log.

Specs:

• Once a candidate is voted on, that vote is permanent. It can't be changed.
• Create a demo mode that will simulate the clock striking midnight and finalizing cannon.
• The moment the deadline passes for that day's passage, also tally up and show how many votes the other candidate received?
• Each passage's author and vote count is hidden until the deadline passes. Only the admin can login and see the progress of who voted for what and when in real time. Everyone else must wait for the deadline to pass before before they're able to see results.

Unimplemented:

• Put 👍👎 into the "Candidate" buttons that update as soon as the passage is voted on.
  Didn't implement this because it requires many Firestore reads the way the data's currently stored. In the future, consider additionally storing all votes in a single doc per user? This way I can just make one call and get all votes at once, rather than query each individual passage's vote collection.

Questions:

• How many passages are users allowed to vote for? Three?
• What happens if there is a tie between candidates?

Example:

When an unauthenticated user first lands on the site, show some dummy logs displaying all the different possible commands and ways to use the system.

Write documentation detailing all the different commands that the system understands. Give usage examples.

Clicking on a log should display its details in this Details Preview Pane.
It should appear on the RHS of the GUI.

Put a thick red border around the log to show it is currently selected.

https://dev.fitbit.com/build/reference/web-api/

If this feature is implemented, then if updates are made from other sources (eg. Another running instance or the Firestore console), then the GUI will automatically update to reflect those changes.

Implement this feature? Need to explore/analyze all implications. Eg. Changing one log could trigger metalogs (like durations and sleep logs) to be processed. Do we want this?

After a user logs in, paint a button in the navbar that lets them download all of their logs as a json file to save locally.
Basically, just export all of their logs from Firestore.

In future: Allow user-configurable parameters in the GUI to download their logs windowed by datetime or filtered by criteria (eg. dt, etc)