Update api documentation

harryluyah · Nov 6, 2022 · 5900c51 · 5900c51
1 parent 6433ebe
commit 5900c51
Show file tree

Hide file tree

Showing 11 changed files with 523 additions and 576 deletions.
diff --git a/package.json b/package.json
@@ -54,7 +54,6 @@
     "redux-logger": "^3.0.6",
     "redux-promise-middleware": "^6.1.2",
     "styled-components": "^5.2.1",
-    "swagger-ui-react": "3.52.5",
     "three": "^0.137.5",
     "three-stdlib": "^2.8.6",
     "trim": "0.0.3",

diff --git a/pages/docs/api.tsx b/pages/docs/api.tsx
@@ -1,47 +1,43 @@
-import { useState } from 'react';
-import { Content } from 'src/components/layout/Content';
 import { Page } from 'src/components/layout/Page';
 import { Spacer } from 'src/components/layout/Spacer';
-import SwaggerUI from 'swagger-ui-react';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { NextSeo } from 'next-seo';
 import { useTranslation } from 'next-i18next';
-import { LoaderOverlayWithin } from '@/components/Loader/LoaderOverlayWithin';
+import { useApiDocQuery } from '@/hooks/api/useApiDocQuery';
+import { ApiDocViewer } from '@/components/ApiDocViewer';
+import { Header } from '@/components/layout/Header';
 
 export const ApiDocsPage = () => {
   const { t: seoT, i18n } = useTranslation('seo');
-  const [isLoading, setIsLoading] = useState(true);
+
+  const { data, isLoading } = useApiDocQuery();
 
   return (
     <Page>
-      <Content style={{ position: 'relative' }} padding>
-        <NextSeo
-          title={seoT('title.api_documentation')}
-          description={seoT('website_description.api_documentation')}
-          openGraph={{
-            title: seoT('title.api_documentation'),
-            description: seoT('website_description.api_documentation'),
-            locale: i18n.language,
-          }}
-          additionalMetaTags={[
-            {
-              property: 'keywords',
-              content: seoT('keywords.api_documentation'),
-            },
-          ]}
-        />
-        <Spacer size="xl" />
-        {isLoading && <LoaderOverlayWithin />}
-
-        <SwaggerUI
-          url="https://static.flexpool.io/api/openapi.json"
-          onComplete={() => {
-            setIsLoading(false);
-          }}
-        />
-
-        <Spacer size="xl" />
-      </Content>
+      <NextSeo
+        title={seoT('title.api_documentation')}
+        description={seoT('website_description.api_documentation')}
+        openGraph={{
+          title: seoT('title.api_documentation'),
+          description: seoT('website_description.api_documentation'),
+          locale: i18n.language,
+        }}
+        additionalMetaTags={[
+          {
+            property: 'keywords',
+            content: seoT('keywords.api_documentation'),
+          },
+        ]}
+      />
+      <Header>
+        <h1>API Documentation</h1>
+      </Header>
+
+      <Spacer size="md" />
+
+      <ApiDocViewer endpoints={data} isLoading={isLoading} />
+
+      <Spacer size="xl" />
     </Page>
   );
 };