2713 team type componen #2889
2713 team type componen #2889
Conversation
Aaryan1203
changed the base branch from
develop
to
feature/recruitment_and_onboarding
| static async downloadReceiptImage(fileId: string, submitter: User, organization: Organization) { | ||
| await validateUserIsPartOfFinanceTeamOrAdmin(submitter, organization.organizationId); | ||
| static async downloadReceiptImage(fileId: string, _submitter: User, _organization: Organization) { | ||
| // await validateUserIsPartOfFinanceTeamOrAdmin(submitter, organization.organizationId); |
There was a problem hiding this comment.
Why is this method changed?
There was a problem hiding this comment.
Oh yeah so the problem I was having was that this method only allows finance or admins to be able to download an image, i was going to ask if this permissions is necessary because everyone should be able to download images. In that case I could change the name of the function and just remove that permissions check
There was a problem hiding this comment.
Ah I see, I think you should just leave it as it was though
There was a problem hiding this comment.
Wait so should I make a new function then or how should I do it?
| } | ||
|
|
||
| const TeamTypeSection = ({ teamType }: TeamTypeSectionProps) => { | ||
| const [imageUrl, setImageUrl] = useState<string>(''); |
There was a problem hiding this comment.
Why does this have to be a usestate if its not going to change?
There was a problem hiding this comment.
I made it a useState because it gets reset every time the page renders like on line 14. Is there a better way to do this.
There was a problem hiding this comment.
Ok I see what you mean. Generally you really want to avoid using a setState within a useEffect - I think you can achieve this using useRef
There was a problem hiding this comment.
You could declare the imageUrl like this:
const imageUrlRef = useRef<string>('');
And then you can assign values to imageUrlRef.current
There was a problem hiding this comment.
Honestly its pretty tricky and you might wanna do some googling/chatgpt but i think that would work. Lmk if you have questions
There was a problem hiding this comment.
Okay yeah i just tried that and i realized the issue comes because each division is a tab and that does't trigger a rerender. so that means once a picture shows up for one of the divisions, then it stays the same image even if I switch tabs because thats not considered a refresh. Is there another way I can do this
| static async downloadReceiptImage(fileId: string, submitter: User, organization: Organization) { | ||
| await validateUserIsPartOfFinanceTeamOrAdmin(submitter, organization.organizationId); | ||
| static async downloadReceiptImage(fileId: string, _submitter: User, _organization: Organization) { | ||
| // await validateUserIsPartOfFinanceTeamOrAdmin(submitter, organization.organizationId); |
There was a problem hiding this comment.
Ah I see, I think you should just leave it as it was though
| } | ||
|
|
||
| const TeamTypeSection = ({ teamType }: TeamTypeSectionProps) => { | ||
| const [imageUrl, setImageUrl] = useState<string>(''); |
There was a problem hiding this comment.
Ok I see what you mean. Generally you really want to avoid using a setState within a useEffect - I think you can achieve this using useRef
| } | ||
|
|
||
| const TeamTypeSection = ({ teamType }: TeamTypeSectionProps) => { | ||
| const [imageUrl, setImageUrl] = useState<string>(''); |
There was a problem hiding this comment.
You could declare the imageUrl like this:
const imageUrlRef = useRef<string>('');
And then you can assign values to imageUrlRef.current
| } | ||
|
|
||
| const TeamTypeSection = ({ teamType }: TeamTypeSectionProps) => { | ||
| const [imageUrl, setImageUrl] = useState<string>(''); |
There was a problem hiding this comment.
Honestly its pretty tricky and you might wanna do some googling/chatgpt but i think that would work. Lmk if you have questions
Changes
Created the team type component
Created a helper to download an image
For testing purposes I only had a picture in the software division just to see what it would look like so heres a video for that
373267527-fd06d3a7-90fb-4ea5-9671-915ca471c32d.mov
Checklist
It can be helpful to check the
ChecksandFiles changedtabs.Please review the contributor guide and reach out to your Tech Lead if anything is unclear.
Please request reviewers and ping on slack only after you've gone through this whole checklist.
yarn.lockchanges (unless dependencies have changed)Closes #2713