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 { Input } from "../../components/ui/input";
import { CONTROL_NEW_API_KEY } from "../../constants/constants"; import { CONTROL_NEW_API_KEY } from "../../constants/constants";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import { addApiKeyStore } from "../../controllers/API";
import { import {
ApiKeyInputType, ApiKeyInputType,
StoreApiKeyType, StoreApiKeyType,
@ -20,7 +21,7 @@ export default function StoreApiKeyModal({
const [apiKeyValue, setApiKeyValue] = useState(""); const [apiKeyValue, setApiKeyValue] = useState("");
const [inputState, setInputState] = const [inputState, setInputState] =
useState<ApiKeyInputType>(CONTROL_NEW_API_KEY); useState<ApiKeyInputType>(CONTROL_NEW_API_KEY);
const { setSuccessData } = useContext(alertContext); const { setSuccessData, setErrorData } = useContext(alertContext);
const inputRef = useRef<HTMLInputElement | null>(null); const inputRef = useRef<HTMLInputElement | null>(null);
function handleInput({ function handleInput({
@ -41,6 +42,24 @@ export default function StoreApiKeyModal({
setApiKeyValue(""); 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 ( return (
<BaseModal size="small-h-full" open={open} setOpen={setOpen}> <BaseModal size="small-h-full" open={open} setOpen={setOpen}>
<BaseModal.Trigger>{children}</BaseModal.Trigger> <BaseModal.Trigger>{children}</BaseModal.Trigger>
@ -93,7 +112,14 @@ export default function StoreApiKeyModal({
</Button> </Button>
<Form.Submit asChild> <Form.Submit asChild>
<Button className="mt-8">Save</Button> <Button
className="mt-8"
onClick={() => {
handleSaveKey();
}}
>
Save
</Button>
</Form.Submit> </Form.Submit>
</div> </div>
</Form.Root> </Form.Root>