ChatCraft week 6: Refactoring code
Tags: chatcraft, opensource, chatgpt, typescript
Published: 2024-02-17 01:09:01

---
series: Collaborating on ChatCraft
---

# Issue

{% github https://github.com/tarasglek/chatcraft.org/issues/423 %}

This week on [ChatCraft](https://chatcraft.org), I tackled a follow up [issue](https://github.com/tarasglek/chatcraft.org/issues/423) from the PRs ([1](https://github.com/tarasglek/chatcraft.org/pull/371), [2](https://github.com/tarasglek/chatcraft.org/pull/421)) I merged last two weeks, which allowed users to store provider information for multiple providers using a new `ChatCraftProvider` class I created.

Now that we have a `ChatCraftProvider` class, we want to create and maintain an associative array of providers that we currently support. Right now [ChatCraft](https://chatcraft.org) only supports OpenAI and OpenRouter, but we plan to add more soon!

# PR

{% github https://github.com/tarasglek/chatcraft.org/pull/449 %}

My [PR](https://github.com/tarasglek/chatcraft.org/pull/449) was merged, and now users can go to the ChatCraft settings, and the list of providers in the dropdown there will iterate through our newly created array of supported providers.

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

The difficulty I had was determining where the supported providers should be stored. Dave was able to help me with this, and ultimately we put it in [`ChatCraftProvider.ts`](https://github.com/tarasglek/chatcraft.org/blob/main/src/lib/ChatCraftProvider.ts) as a static array.

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

---
# Investigating an Upcoming Issue

The next [issue](https://github.com/tarasglek/chatcraft.org/issues/401) I have started to work on, will involve refactoring code and then adding a new free provider that users will be allowed to try out.

In the next release, I will be creating a `.ts` file for each of our current providers (OpenAi.ts, OpenRouter.ts) and moving the relevant methods to that file (for example: validateOpenAiKey to OpenAi.ts and validateOpenRouterKey to OpenRouter.ts).

---

# Code reviews

I did two code reviews this week of new features that my teammates worked on.

## PR 437 UI Fix for Mobile

{% github https://github.com/tarasglek/chatcraft.org/pull/437 %}

This first PR I [reviewed](https://github.com/tarasglek/chatcraft.org/pull/437#pullrequestreview-1884150177) was a UI fix to change the behaviour of the mobile ChatCraft sidebar. 

Old behaviour on mobile:

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

New behaviour:

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

There is also animation added to the sidebar now, and the search field has been moved to somewhere more noticeable.

## PR 457 Twitter Card

{% github https://github.com/tarasglek/chatcraft.org/pull/459 %}

The second PR I [reviewed](https://github.com/tarasglek/chatcraft.org/pull/459#pullrequestreview-1884244310) was a twitter card metadata enhancement. Now, when you paste a ChatCraft link to twitter, it will automatically generate a Card like such:

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