DEV Community

cychu42
cychu42

Posted on • Edited on

Patching It Up, Part 2: Progress

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 and PR 2

Image description
Image description

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 and PR 3

Image description

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 .

Top comments (0)