I am continuing my open source contributions to the ChatCraft project, a developer-oriented version of ChatGPT. This is the second issue I worked on. Despite it being a one line code change, this issue took me longer to fix than the last one.
Issue Link
https://github.com/tarasglek/chatcraft.org/issues/307
Issue Description
Clear stored API key when user changes the provider in the User Settings.
Identifying the file or area of code to work on
By searching for User Settings in VSCode, I found User Settings form in the PreferencesModel.tsx file.
I was then able to locate the Select element responsible for the API URL dropdown. Then I was able to locate the onChange event handler for that dropdown. See React forms official documentation.
Next, I identified the form element which displayed the API key, since we will need to clear that field.
Understanding the code
I needed to understand the code, so that I could understand where the API key was stored and how to clear it. Not only do I need to clear the key from being displayed in the input field, but I also need to make sure it is cleared from storage.
I had never worked with TypeScript or React forms before, so this took quite some time.
What helped me speed up the process was taking a close look at how existing functionalities were working.
API key field onChange event handler
This changes our stored API key.
Remove button onClick event handler
This clears our stored API key. This is what I need to get done!
By taking a look at these events, I learned that the settings were saved using the useContext React hook.
From src/hooks/use-settings:
I can also see that the stored data is saved to LocalStorage:
A quick look with Dev Tools was enough to ascertain that fact:
Coding and troubleshooting
It seemed like all I needed to do was use the same code from the Remove onClick handler inside my Select element onChange handler, in order to clear the data. However, the following code introduced issues:
<Select
value={settings.apiUrl}
onChange={(e) => setSettings({ ...settings, apiKey: undefined })}
>
Yes, it cleared the apiKey; however it no longer set the apiUrl to the newly selected value. This was a problem. I tried to query the html page element and set it directly, but this did not work because the Select element value was always going to display the stored apiUrl value. So I needed to set the value of the apiUrl
Eventually, I realized I could set both apiUrl and apiUrl elements at once.
Testing
Pull Request
Clear stored api key when changing providers in user settings
#308
Closes #307
User Settings -> Change provider using API URL dropdown -> Clears the stored API key
Current code (before PR):
- In
src/components/PreferencesModal.tsx, change event handler for the API URL dropdown does not clear the stored API key, thereby sending the old stored key to the newly selected provider
PR Code changes:
- In
src/components/PreferencesModal.tsx, change event handler for the API URL dropdown clears the stored API key (just like the Remove button does) - The resulting behaviour is the same as the Remove Button (the only difference is the provider is changed to the one we selected)
Testing:
Changing from OpenRouter -> OpenAI
Changing from OpenAI -> OpenRouter
My PR has been merged!
ChatCraft Contribution Results
I met most of the goals I set out in my first post of this series, mainly:
Working with a language and framework that I had not recently contributed to
I had never worked extensively with TypeScript or React in the open source community.
Working in an active project
I communicated to repo administrators and past contributors to troubleshoot linting issues, clarify requirements, implement code review fixes
Adding a previously missing functionality and enhancing the end-user experience
1) Prior to my code changes, the end-user would still be taken to the chat page even if they entered an invalid OpenRouter key. They would not be notified that their key was invalid until they sent their first ChatCraft ChatGPT message.
Now, they would be notified with an error message when they try to Save/Submit their invalid key.
2) Prior to my code changes, the end-user would be sending their stored API key to the wrong provider the moment they try to switch providers in User Settings. I.e. when they have a stored OpenRouter API key, and they switch the provider to OpenAI, the stored key is automatically sent. This is not secure and we should not be sending sensitive data like an API key to the other provider. In addition, the user gets bombarded with connection error popup messages, which does not make for a good user experience.
Now, the moment they toggle the provider, the result is the key is cleared (same behaviour as the Remove button), and they can then input their new key.
Fixing multiple issues that are related
One PR has been merged and another is awaiting code review after I made requested changes.
There is also another future issue I could work on:
Storing both OpenRouter and OpenAI keys separately, with no need to clear it when we select a different provider
Conclusion
Because I ran out of time, I regret that I had not enough time to work on a larger feature. However, I believe I did well on branching out and working on a new project that was active and unfamiliar to me. This allowed me to collaborate and communicate with classmates and repo administrators. I also learned about calling the OpenRouter API, and about React forms and React hooks. This would not have been possible if I stuck with the previous project I was on.
I highly recommend to exploring multiple projects at the same time when contributing to open source! I have checked out many different project repos, and many times my PRs or comments on issues were not replied to, so it takes some time to find an active repo. Sometimes it is not about which project you most want to work on, but which ones want you! It is difficult to continue to build upon your contributions on a project if each pull request takes months to be reviewed. Moreover, it is important to be able to get in touch with repo admin to clarify methods or requirements. Best to check out a bunch and see which ones get back to you! Also, a good way to gauge the activeness of a repo is by using the Insights tab of GitHub, or asking people you know who have first-hand experience.
Top comments (0)