ChatCraft week 3: Coding and code reviews
Tags: chatcraft, typescript, chatgpt, opensource
Published: 2024-01-27 04:52:51

---
series: Collaborating on ChatCraft
---

#Coding

This week of working with the [ChatCraft](https://chatcraft.org) team, I started to tackle issue 345.

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

Currently, [ChatCraft](https://chatcraft.org) allows users to switch between two providers, OpenAI and OpenRouter, however it only stores the API key of one provider. That means when we switch to a different provider, the old key is cleared from storage. We want to allow for the storage of multiple providers.

I started working on my issue by analyzing the code and thinking about how I would implement this. I came up with multiple ways this could be implemented, and discussed it with the team during our weekly triage meeting. My main question was should I just add another field in localStorage to store the second api provider info, or use an array or something similar to store them in case we have more than two providers in the future.

Following the meeting, I was able to quickly write some code to store the data in an array in localStorage and I commented in the issue with more details of my proposed implementation, as well as some questions I had.

The ChatCraft admins were quick to respond to me. Dave gave me detailed specs and Taras added that it would be better to use an associated array rather than a list.

With this information in hand, I reworked my code and created a [Draft PR](https://github.com/tarasglek/chatcraft.org/pull/371) with my current progress. I listed what has been implemented thus far and what has yet to be done. Very optimistic about completing this issue next week!

File: `src/lib/settings.ts`
Creating an associative array `settings.providers`:

![code change 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yyf9zor55mop0bnv0x7o.png)

File: `src/components/PreferencesModal.tsx`
Editing the `onChange` event handler of the api key field in Settings to store the provider info in `settings.providers`:

![code change 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7yjpjza3184ix1il85uh.png)

Testing:

![testing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bar4sh02q30pynsqfb1o.png)

# Code Reviews

I did a couple code reviews of my fellow teammates!

See my [review](https://github.com/tarasglek/chatcraft.org/pull/300#pullrequestreview-1844413310) of [PR 300](https://github.com/tarasglek/chatcraft.org/pull/300), which was a UI change by Amnish to have the sidebar overlap the main app instead of displacing it to the right.

See my [review](https://github.com/tarasglek/chatcraft.org/pull/286#pullrequestreview-1844494192) of Mingming's [PR 286](https://github.com/tarasglek/chatcraft.org/pull/286), which was allowing ChatCraft to parse images and answer questions based on those images! Very cool :)

In my reviews I mainly focused on testing the features that should be implemented. I also gave my thoughts on any behaviours that potentially may negatively impact users.

# Using ChatCraft for Coding

While coding, I used [ChatCraft](https://chatcraft.org) to help me and found it was faster than using google when I needed to describe a very specific thing I was trying to code. It was also useful in suggesting potential reasons why I was getting syntax errors in VS Code.

Example:
![ChatCraft example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gwtnc8x4rt65w71lo8xh.png)