fix(StoreApiKeyModal/index.tsx): add error handling when saving API key and display success/error messages

feat(StoreApiKeyModal/index.tsx): add functionality to save API key using addApiKeyStore function
This commit is contained in:
cristhianzl 2023-10-19 00:24:06 -03:00
commit 4397f88890

View file

@ -5,6 +5,7 @@ import { Button } from "../../components/ui/button";
import { Input } from "../../components/ui/input";
import { CONTROL_NEW_API_KEY } from "../../constants/constants";
import { alertContext } from "../../contexts/alertContext";
import { addApiKeyStore } from "../../controllers/API";
import {
ApiKeyInputType,
StoreApiKeyType,
@ -20,7 +21,7 @@ export default function StoreApiKeyModal({
const [apiKeyValue, setApiKeyValue] = useState("");
const [inputState, setInputState] =
useState<ApiKeyInputType>(CONTROL_NEW_API_KEY);
const { setSuccessData } = useContext(alertContext);
const { setSuccessData, setErrorData } = useContext(alertContext);
const inputRef = useRef<HTMLInputElement | null>(null);
function handleInput({
@ -41,6 +42,24 @@ export default function StoreApiKeyModal({
setApiKeyValue("");
}
const handleSaveKey = () => {
if (inputState && inputState["apikey"]) {
addApiKeyStore(inputState["apikey"]).then(
() => {
setSuccessData({
title: "Success! Your API Key has been saved.",
});
},
(error) => {
setErrorData({
title: "There was an error saving the API Key, please try again.",
list: [error["response"]["data"]["detail"]],
});
}
);
}
};
return (
<BaseModal size="small-h-full" open={open} setOpen={setOpen}>
<BaseModal.Trigger>{children}</BaseModal.Trigger>
@ -93,7 +112,14 @@ export default function StoreApiKeyModal({
</Button>
<Form.Submit asChild>
<Button className="mt-8">Save</Button>
<Button
className="mt-8"
onClick={() => {
handleSaveKey();
}}
>
Save
</Button>
</Form.Submit>
</div>
</Form.Root>