add error handling to settings

Author: NikhilShahi

frontend/src/components/Keys/list.tsx

@@ -1,4 +1,4 @@
-import { Badge, Box, Button, useColorMode } from "@chakra-ui/react"
+import { Badge, Button, useColorMode, useToast } from "@chakra-ui/react"
 import { ApiKey } from "@common/types"
 import { deleteKey } from "api/keys"
 import EmptyView from "components/utils/EmptyView"
@@ -7,6 +7,7 @@ import _ from "lodash"
 import { DateTime } from "luxon"
 import { useState } from "react"
 import DataTable, { TableColumn } from "react-data-table-component"
+import { makeToast } from "utils"
 
 interface ListKeysInterface {
   keys: Array<ApiKey>
@@ -16,14 +17,25 @@ interface ListKeysInterface {
 const ListKeys: React.FC<ListKeysInterface> = ({ keys, setKeys }) => {
   const colorMode = useColorMode()
   const [isDeleting, setIsDeleting] = useState<Array<string>>([])
+  const toast = useToast()
 
   const onDeletePress = async (key_name: string) => {
     let _keys = [...isDeleting]
     _keys.push(key_name)
     setIsDeleting(_keys)
-    await deleteKey(key_name)
-    setIsDeleting([...isDeleting].filter(v => v != key_name))
-    setKeys(keys.filter(v => v.name != key_name))
+    try {
+      await deleteKey(key_name)
+      setIsDeleting([...isDeleting].filter(v => v != key_name))
+      setKeys(keys.filter(v => v.name != key_name))
+    } catch (err) {
+      toast(makeToast({
+        title: "Deleting Key failed",
+        status: "error",
+        description: err.response?.data,
+      }, err.response?.status))
+    } finally {
+      setIsDeleting([...isDeleting].filter(v => v != key_name))
+    }
   }
 
   let columns: Array<TableColumn<ApiKey>> = [

frontend/src/pages/settings.tsx

@@ -4,6 +4,7 @@ import {
   Heading,
   HStack,
   useDisclosure,
+  useToast,
   VStack,
 } from "@chakra-ui/react"
 import { ApiKey } from "@common/types"
@@ -17,6 +18,7 @@ import { ContentContainer } from "components/utils/ContentContainer"
 import { GetServerSideProps } from "next"
 import { useState } from "react"
 import superjson from "superjson"
+import { makeToast } from "utils"
 
 export const getServerSideProps: GetServerSideProps = async context => {
   const apiKeys = await getKeys()
@@ -41,6 +43,7 @@ const Keys = ({ keys: _keysString }) => {
     onClose: onNewKeyClose,
   } = useDisclosure()
   const [isAddingKey, setIsAddingKey] = useState(false)
+  const toast = useToast()
 
   const addKey = async (key_name: string) => {
     setIsAddingKey(true)
@@ -58,6 +61,12 @@ const Keys = ({ keys: _keysString }) => {
       setKeys(new_keys)
       setNewKeyValue([resp.apiKey, resp.name])
       onNewKeyOpen()
+    } catch (err) {
+      toast(makeToast({
+        title: "Adding new key failed",
+        status: "error",
+        description: err.response?.data
+      }, err.response?.status))
     } finally {
       setIsAddingKey(false)
       onClose()