DEV Community

cychu42
cychu42

Posted on • Updated on

Patching It Up, Part 3: Release

Status

The two PRs(1 2) mentioned last time were merged without a hitch. For the one that's about parsing Twitch channel feed URL, the maintainer and I agreed that there should be a follow-up issue opened to expand it to YouTube Channel(s). They also found another bug in the sign-up that should exist as its own issue about the RSS feed URL(s) having incorrect domain. For details about them, please see my last post.

The new PR 1 I made early this week is for issue 1, which is about having unconfirmed Twitch channel URL(s) in review page of sign-up, for the same Telescope project. The user is supposed to confirm entered Twitch Channel(s), and only confirmed ones should be listed in review page during sign-up.

This PR is still awaiting further review from maintainer(s). I tried to check it often for update, but it looks like I'll have to wait for next week for the re-review to get it merged. I fixed what's asked two days ago, and now is close to the planned deadline for it, but it should be merged rather quickly once it's reviewed again, from the look of this. It's not a big deal.
Update (Dec. 13, 2022): The PR is now merged.

Changes made in PR 1

For PR 1, I wrote some code to look at Twitch channel feed URLs that are returned from sending Twitch channel URL to feed discovery service of the project and are confirmed. In each, there is the Twitch URL for the associated channel, so I tried to match that against the listed Channel URL(s) to eliminate unconfirmed ones. Whichever Twitch channel has no corresponding confirmed Twitch channel feed URL but is still listed in the list of Channel URL(s) is unconfirmed and would be eliminated.
Image description
Image description
I used .filter() to create new array of Channel URL(s) that has a match through .find(), which uses .includes() to match the target substrings (Twitch channel URL) in Twitch Channel feed URLs. The Array is then turned into a string with each URL separated by a space to match how it is in the original design; this is down by .join() as suggested by a maintainer.

If users would like to backtrack to make changes, unconfirmed Twitch URLs that are not accepted will not be listed, for consistency.
Image description
This is done in a similar way, where I try to use .filter() and .find() to return a new array for that.

Of course, I used if construct to check if Channel URL(s) has anything inside before even running those code.
Also, I have another if construct to check for existence of confirmed URL(s) in the form of channel feed URL(s). If they exist, continue executing the code. If not, just clear the lists of discovered channels feed URLs and Channel URL(s). If the user has no channel confirmed, it goes to reason anything in those lists would be incorrect and should be cleared.

Change:

  • Add code to filter unconfirmed Twitch channel URLs in src\web\app\src\components\SignUp\Forms\Review.tsx

I think future issues can be considered to handle unconfirmed URLs for YouTube and Blog URLs. For now, this is just for Twitch channel URL(s).

Interacting With The Community

I tried to have back and forth discussion with people in the repo to figure out how to approach the issues/PRs, such as proposing my initial idea, talking about what should be part of an issue, and addressing and discussing requested changes in a PR. When I need to ask something or get attention of the community's members, I also went on their Slack channel.

Achieving Goal And Learning

I would say I definitely did achieve my goal. I wanted to get a bit deeper into how the code functions in the background in this big and complex project, to push the scope I work with, and I did just that.
In issue 1, I look into how the variables get passed around and used across files, to be able to manipulate them. I also looked into how each page of the sign-up is made from different components to determine how to place my code.
In issue 2, I looked into how a checkbox is made required and how it's constructed through different custom types and components, to see that I need to delete when I get rid of the checkboxes.
In issue 3, I looked more closely on how functions are written for the project and mimic them, to make my own function and continue the code convention/style used.
From these, I learned more of how to write code in TypeScript, such as how to create your own custom type, as well as how to accept only certain sub-objects in parameter, like const parseFeedUrlByType = ({ feedUrl, type }: DiscoveredFeed) => {};.
I also get to see this large code example of how a complex project can be put together from different parts and components/files. Without seeing it myself, I wouldn't be able to imagine how people can write this project and utilize things like Docusaurus, Docker, and so on.

Top comments (0)