DEV Community

Amir Mullagaliev
Amir Mullagaliev

Posted on

OSD700: Sprint 4 - Planning

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

Description (UPDATED)

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 from src/lib/fs.ts)
  • Download (using downloadFile from src/lib/fs.ts)

If user never attached the file(s) paperclip will trigger file attachment process without opening modal window.

Preview (UPDATED)

ScreenRecording2025-01-27at7 36 33PM-ezgif com-video-to-gif-converter

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.

Image description

Image description

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}
          />
        )}
Enter fullscreen mode Exit fullscreen mode

After:

    <Input
     multiple
     type="file"
     ref={fileInputRef}
     hidden
     onChange={handleFileChange}
     accept={acceptableFileFormats}
    />
Enter fullscreen mode Exit fullscreen mode

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

Description

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:

Image description

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)