Patching It Up, Part 2: Progress
Tags: beginners, opensource, javascript
Published: 2022-12-02 16:02:28

## What has happened so far?

I managed to produced an initial solution to the issue 2 and 3. They are awaiting feedbacks, and I'll work on the remaining issue while I wait. 
It took me some time to understand the project's code and pick up more about TypeScript. It felt very confusing, as some things in TypeScript are new to me or written in a style unfamiliar to me, but I managed to understand how the codes fit together across multiple files and learn from the experience. From reading the code written and trying to mimic the style of the project helps me learn a few things, such as how to use `type` in TypeScript and how to write a function's parameter to accept specific sub-object from an object of a specific type, such as `const handleCheck = ({ feedUrl, type }: DiscoveredFeed) => {}`. Since I'm reading more into the background code and even writing some, I feel I'm progressing toward my goal for this batch of work.

---

## [Issue 2](https://github.com/Seneca-CDOT/telescope/issues/3608) and [PR 2](https://github.com/Seneca-CDOT/telescope/pull/3775)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rrge7hotp7agmfsbm5j1.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0ql297upcp2u991l1dt.png)

I traced the code to find all the relevant codes designed only for creating the checkboxes and requiring the users to tick them before going to the next step. Then, I delete them and relevant input variables associated for such use, in codes for form creation. The result is that the checkboxes to confirm ownership of accounts entered are deleted and not required. The users instead get a text confirming their ownership as they finalize the submission of the information in review page. There's no need to tick any checkbox, and the sign-up process is much faster.
Beyond the codes for constructing the checkboxes, I also dig around the project to look into code for making ticking them a requirement. It was more complicated than looking at a HTML from and finding the checkboxes and the `required` attribute on the same code line. The codes are scattered across multiple files.

List of code changes:
- Delete `agreement` field from `RSSFeedsFormProps` and `RSSFeeds`, in `src\web\app\src\components\SignUp\Forms\RSSFeeds.tsx` 
- Delete `agreement` field from `src\web\app\src\components\SignUp\Forms\BlogFeeds.tsx` and `src\web\app\src\components\SignUp\Forms\ChannelFeeds.tsx`
- Delete `githubOwnership`, `blogOwnership`, and `channelOwnership` fields from `SignUpForm` in `src\web\app\src\interfaces\index.ts` 
- Delete `githubOwnership`, `blogOwnership`, and `channelOwnership` from `src\web\app\src\pages\signup.tsx`
- Delete `CheckBoxInput` from `src\web\app\src\components\SignUp\Forms\GitHubAccount.tsx` and `src\web\app\src\components\SignUp\Forms\RSSFeeds.tsx`
- Delete code relating to `githubOwnership`, `blogOwnership`, and `channelOwnership` checking from `src\web\app\src\components\SignUp\Schema\FormSchema.tsx`
- Delete `githubOwnership`, `blogOwnership`, and `channelOwnership` from `src\web\app\src\components\SignUp\Schema\FormModel.tsx`
- Add confirmation text in `src\web\app\src\components\SignUp\Forms\Review.tsx`

---


## [Issue 3](https://github.com/Seneca-CDOT/telescope/issues/3610) and [PR 3](https://github.com/Seneca-CDOT/telescope/pull/3774)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yoo9gj9x7m62x3pev5p5.png)

For this, I added a function to parse the fetched feed URL whenever the feed URL is to be displayed in the "template" for a form page. The function looks at the variable for the URL type, such as "twitch", and parse the URL accordingly. For now, there's only code for Twitch feed URL as this is the scope of the issue, but more can be added in the future as needed.
When making the function, I traced the code to understand what's going on in the page, to understand how the URL comes to be on there, and I ended up looking all the way up to the code for feed discovery. To follow the the project's style and design, I modeled the regular expression (`/https?:\/\/www.twitch.tv\/\w+/`) in the function after what's written for feed discovery.

Change:
- Add a function `parseFeedUrlByType` to parse the fetched twitch URL(s) to be the correct one(s), in `src/web/app/src/components/SignUp/Forms/RSSFeeds.tsx` .