Wrapped Frontend - Add TA slides & Update slide logic #879
Conversation
|
|
|
[diff-counting] Significant lines: 573. |
There was a problem hiding this comment.
Great start on this so far Annie! And nice work navigating the existing (long) component file and adding in React/CSS changes to more closely mimic the designs. I added a few code style comments, but a couple other things to note:
- usually for frontend PRs, it's good to attach screenshots of the changes you made (even if the reviewer will run it locally) so it's clearer what changes you made. Attaching the reference Figma designs is also a plus.
- if you reload and go to to the favorite TA slide for the first time, there's some flickering – probably some incorrect logic related to the total number of stages for users who are also TAs, but I can take another look and suggest fixes
|
|
||
| const FavTA = () => ( | ||
| <> | ||
| <div style={{ |
There was a problem hiding this comment.
put styling inside Wrapped.scss as a new css class unless it's super small (like a couple lines), in that case u can do styling inline like you do here
src/components/includes/Wrapped.tsx
Outdated
| </div> | ||
|
|
||
| <Typography variant="h3" style={{ fontWeight: 600 }}> | ||
| <div className="taName">TA {wrappedData.favTaId}</div> |
There was a problem hiding this comment.
this is the right logic here, but favTAId is actually a long string corresponding to a particular TA – O0W5vwCn9bN2LLQOiVTB4UyAvxc2
To get the actual TA's name, you'll need to query the users collection in Firebase and look up the firstName and lastName fields
There was a problem hiding this comment.
you can sorta see this on lines 50 and 55. So it would be something like...
const usersRef = firebase.firestore().collection('users'); // accessing the users collection
const doc = await usersRef.doc(props.user?.userId).get(wrappedData.favTaId); // looking up a user document by id
...
<div>`Favorite TA: {doc.firstName} {doc.lastName}`</div> // string concat in javascript (check correct syntax)
src/components/includes/Wrapped.tsx
Outdated
| const totalStages = 5; | ||
|
|
||
| /* TA's only see 4 slides, TA + Student see 7, Only student see 6 */ | ||
| const totalStages = (wrappedData.timeHelpingStudents === undefined || wrappedData.timeHelpingStudents == 0) ? |
There was a problem hiding this comment.
javascript uses === instead of ==
There was a problem hiding this comment.
also, you can use truthy and falsy values in languages like JS to simplify this. So if wrappedData.timeHelpingStudents === undefined, you'd normally do if (wrappedData.timeHelpingStudents)... and the conditional would evaluate to false if it's undefined
There was a problem hiding this comment.
let's also create a const for total stages at the top so this isn't hardcoded
| @@ -84,7 +84,7 @@ const SplitView = ({ | |||
|
|
|||
| const [removeQuestionId, setRemoveQuestionId] = useState<string | undefined>(undefined); | |||
| const [displayFeedbackPrompt, setDisplayFeedbackPrompt] = useState<boolean>(false); | |||
| const [displayWrapped, setDisplayWrapped] = useState<boolean>(false); | |||
| const [displayWrapped, setDisplayWrapped] = useState<boolean>(true); | |||
There was a problem hiding this comment.
make sure to restore variables you set for testing when you push to github
| color: "#080680", | ||
| }} | ||
| > | ||
| 70 |
There was a problem hiding this comment.
I think we only have time spent helping students, so we can remove this. Unless Sia mentioned adding this extra slide? Forgot lol let's check with her during work session.
Summary
Added three total slides to the Wrapped Frontend by building on this PR and Figma dev handoff. I added slides is to display a student's favorite TA, the total time a TA helped students, and a slide for how many students a TA has helped. Also updated slide logic so that if an user is only a student, they do not see TA slides, and if an user is both a student & TA they see all slides, and if an user is only a TA they only see TA specific slides.
Test Plan
To test the slide logic, I edited my test data in QMI Test to test:
Notes
Breaking Changes
None