React.js, Next.js, MUI v5, and Firebase Developer
Budget: $8 – $15 USD
We are an academic research team at HonorEd Technologies Inc. We have built an open-source, online experiment pipeline. We are looking for a senior web developer to join our research team and directly work with our research lead to improve and expand upon our existing platform. This system is used to manage our research team through micro-tasking and a point system, recruit participants, match researchers and participants, schedule experiment sessions, send reminder emails, conduct our controlled experiments, collect and organize the data, and provide it in CSV format for our researchers to analyze.
Responsibilities:
- Maintain code in existing platform, including fixing bugs
- Design and develop new features and custom components to meet project requirements
- Comprehensively document existing and new code for open-source development
- Embed features and tools implemented by other teams into our research platform
- Maintain and update project dependencies as well as fix any conflicts
Qualifications:
- React.js for web, including profiling, optimization, and Recoil.js
- Next.js integrated with MUI, including emotion
- Firebase and Firestore, server-less and through backend
- Google Cloud Functions and Cloud Run (bonus for Kubernetes)
- TDD with Jest and Enzyme
- Open-source software documentation
Screening Question:
How to Set 2 React States Based on Changes in 2 Firestore onSnapshot Listeners?
We are building a chat app, where users vote on each other's messages. This React App demonstrates the issue: https://codesandbox.io/s/react-firestore-messages-votes-jyzzks?file=/src/App.js
We have two Firestore collections:
- messages: contains the id, message (text), sender, dateTime, totalVotes, ....
- mVotes: contains the userVote, voter, messageId, dateTime, ....
And two React states:
- messages: is an object with the message id as a key and the value is an object including the message (text), sender, dateTime, and totalVotes, in addition to userVote from the mVotes collection.
- userTotalVotes: is the total votes the authenticated user has cast so far. The value is not saved in the database and is calculated in the front-end.
We have two Firestore onSnapshots that listen to all the changes in messages and mVotes collections. This way, as soon as a message is added/updated or the user casts or changes their vote on a message, messages and userTotalVotes get updated and the corresponding changes are shown in the UI.
We defined these listeners in a useEffect with no dependencies. Every time something changes in messages or mVotes, inside Firestore onSnapshots we call setMessages and setUserTotalVotes, and get their previous value to update accordingly. However, when a user votes on a message, because simultaneously:
The message document changes it totalVotes
The mVote document changes its userVote
both Firestore onSnapshots get fired, but only one of the setMessages and setUserTotalVotes calls works fine. The other one messes up.
How should we solve this issue? Please explain your answer and respond with a link to your code sample to show how you solve this problem.
Responsibilities:
- Maintain code in existing platform, including fixing bugs
- Design and develop new features and custom components to meet project requirements
- Comprehensively document existing and new code for open-source development
- Embed features and tools implemented by other teams into our research platform
- Maintain and update project dependencies as well as fix any conflicts
Qualifications:
- React.js for web, including profiling, optimization, and Recoil.js
- Next.js integrated with MUI, including emotion
- Firebase and Firestore, server-less and through backend
- Google Cloud Functions and Cloud Run (bonus for Kubernetes)
- TDD with Jest and Enzyme
- Open-source software documentation
Screening Question:
How to Set 2 React States Based on Changes in 2 Firestore onSnapshot Listeners?
We are building a chat app, where users vote on each other's messages. This React App demonstrates the issue: https://codesandbox.io/s/react-firestore-messages-votes-jyzzks?file=/src/App.js
We have two Firestore collections:
- messages: contains the id, message (text), sender, dateTime, totalVotes, ....
- mVotes: contains the userVote, voter, messageId, dateTime, ....
And two React states:
- messages: is an object with the message id as a key and the value is an object including the message (text), sender, dateTime, and totalVotes, in addition to userVote from the mVotes collection.
- userTotalVotes: is the total votes the authenticated user has cast so far. The value is not saved in the database and is calculated in the front-end.
We have two Firestore onSnapshots that listen to all the changes in messages and mVotes collections. This way, as soon as a message is added/updated or the user casts or changes their vote on a message, messages and userTotalVotes get updated and the corresponding changes are shown in the UI.
We defined these listeners in a useEffect with no dependencies. Every time something changes in messages or mVotes, inside Firestore onSnapshots we call setMessages and setUserTotalVotes, and get their previous value to update accordingly. However, when a user votes on a message, because simultaneously:
The message document changes it totalVotes
The mVote document changes its userVote
both Firestore onSnapshots get fired, but only one of the setMessages and setUserTotalVotes calls works fine. The other one messes up.
How should we solve this issue? Please explain your answer and respond with a link to your code sample to show how you solve this problem.