upload new api spec

metlo-labs · Aug 8, 2022 · 1a84fd0 · 1a84fd0
1 parent d8d5059
commit 1a84fd0
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 8 deletions.
diff --git a/frontend/src/api/apiSpecs/index.ts b/frontend/src/api/apiSpecs/index.ts
@@ -16,3 +16,13 @@ export const getSpecs = async () => {
     return [];
   }
 };
+
+export const uploadSpec = async (file: File) => {
+  const formData = new FormData();
+  formData.append("file", file);
+  return await axios.post(`${API_URL}/spec/new`, formData, {
+    headers: {
+      "Content-Type": "multipart/form-data",
+    },
+  });
+};
diff --git a/frontend/src/components/SpecList/index.tsx b/frontend/src/components/SpecList/index.tsx
@@ -1,14 +1,48 @@
-import React from "react";
-import NextLink from "next/link";
-import { Box, VStack, HStack, Button } from "@chakra-ui/react";
+import React, { useRef, useState } from "react";
+import {
+  Box,
+  VStack,
+  HStack,
+  Button,
+  InputGroup,
+  useToast,
+} from "@chakra-ui/react";
 import { OpenApiSpec } from "@common/types";
 import List from "./List";
+import { uploadSpec } from "api/apiSpecs";
+import { useRouter } from "next/router";
 
 interface APISpecListProps {
   apiSpecs: OpenApiSpec[];
 }
 
 const APISpecList: React.FC<APISpecListProps> = React.memo(({ apiSpecs }) => {
+  const router = useRouter()
+  const [fetching, setFetching] = useState<boolean>(false);
+  const toast = useToast();
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const handleClick = () => inputRef.current?.click();
+  const handleSubmission = async (evt: React.ChangeEvent<HTMLInputElement>) => {
+    setFetching(true);
+    const file = evt.target.files[0];
+    if (!file) {
+      return;
+    }
+    try {
+      await uploadSpec(file);
+      router.reload()
+    } catch (err) {
+      toast({
+        title: "Upload Failed...",
+        description: err.response.data,
+        status: "error",
+        duration: 8000,
+        isClosable: true,
+        position: "top",
+      });
+    }
+    setFetching(false);
+  };
   return (
     <VStack
       w="full"
@@ -19,11 +53,22 @@ const APISpecList: React.FC<APISpecListProps> = React.memo(({ apiSpecs }) => {
       overflow="hidden"
     >
       <Box p="4" borderBottom="1px" borderColor="inherit" w="full">
-        <HStack justifyContent="space-between">
-          <Box />
-          <NextLink href="/spec/new">
-            <Button colorScheme="blue">New</Button>
-          </NextLink>
+        <HStack w="full">
+          <Box marginLeft="auto">
+            <InputGroup onChange={handleSubmission} onClick={handleClick}>
+              <input
+                type="file"
+                multiple={false}
+                hidden
+                ref={(e) => {
+                  inputRef.current = e;
+                }}
+              />
+              <Button colorScheme="blue" isLoading={fetching}>
+                Upload New Spec
+              </Button>
+            </InputGroup>
+          </Box>
         </HStack>
       </Box>
       <Box w="full">