Introduction
This is the beginning of the second half of the term, which means that we have already made a significant amount of contributions. However, it is not the end. At this point, I am preparing a clean plan with a bunch of goals that I am willing to achieve by the end of the term.
During the last lecture, the professor talked about the problems we are experiencing now. One of the problems is that we are working hard on the project, but we jump between the tasks without finishing them 100%. It was a pretty good point since I felt that changing the focus and goals of my work wasn't resulting in high-quality results and PRs.
Therefore, I decided to fix existing bugs caused by my previous PRs. Going forward, my primary purpose for the upcoming lecture is to set meaningful goals that I would be proud of after achieving them during the last half of the term.
Bug that Finally Fixed
In the middle of the previous half of the term, I worked on the Files Attachment UI.
Here's my PR:
[UI] File Attachment Added
#804
Closes #794
This PR improves UX in terms of file management. Previously user was only able to see the file in the PromptForm, but now he is able to use paperclip
icon to see all files attached in modal window, and manage them:
- Attach files... (Same as in OptionsButton)
- Delete (using
removeFile
fromsrc/lib/fs.ts
) - Download (using
downloadFile
fromsrc/lib/fs.ts
)
If user never attached the file(s) paperclip
will trigger file attachment process without opening modal window.
During the implementation of the new UI feature, I faced a bug that was preventing the user from attaching the new files after he had deleted all of them. I was hitting my head on the wall since I wasn't able to find the solution.
However, after the lecture that I was talking about in the introduction, Aldrin opened two issues addressing this problem.
Solution
To fix it, I had to dive into the myself-written code to understand why is that happening. The cause of these problems was pretty simple; I used two <Input>
elements and one of them wasn't always rendering due to the !isAttached
condition:
Before:
{!isAttached && (
<Input
multiple
type="file"
ref={fileInputRef}
hidden
onChange={handleFileChange}
accept={acceptableFileFormats}
/>
)}
After:
<Input
multiple
type="file"
ref={fileInputRef}
hidden
onChange={handleFileChange}
accept={acceptableFileFormats}
/>
It allows us to always render the input element that doesn't have any duplication. Moreover, I had to refresh the fileInputRef
after every deletion so we could ensure that it is available for future use.
Here's the PR I opened:
[FIX] File Input bug fixed
#849
Closes #837 & #838
During the implementation of #804 I couldn't fix the problem after the deletion of all files, I couldn't interact with paperclip button unless refreshed the page. This time I realized that problem was hidden inside of the <Input>
elements that were duplicated, and also we didn't need a condition to render it, we had to render it in any case. Good lesson for me tho :)
Result:
If you noticed, now, if the number of files becomes zero, the modal window is going to get closed, and the user will have to upload a new file to open the file attachments modal window again.
Conclusion
It is so hard to pick a focus of work, and I would like to figure it out during today's lecture. Next week, you will learn about the new focus area I've picked. Thank you for reading, will see you next week!
Top comments (0)