2914 graphql api documentation (#3065)
* Remove dead code * Create playground component * Remove useless call to action * Fix graphiql theme * Fix style * Split components * Move headers to headers form * Fix nodes in open-api components * Remove useless check * Clean code * Fix css differences * Keep carret when fetching schema
This commit is contained in:
martmull
@ -1,35 +1,69 @@
|
||||
import { createGraphiQLFetcher } from "@graphiql/toolkit";
|
||||
import { GraphiQL } from "graphiql";
|
||||
import React from "react";
|
||||
import Layout from "@theme/Layout";
|
||||
import BrowserOnly from "@docusaurus/BrowserOnly";
|
||||
import { createGraphiQLFetcher } from '@graphiql/toolkit';
|
||||
import { GraphiQL } from 'graphiql';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import Layout from '@theme/Layout';
|
||||
import BrowserOnly from '@docusaurus/BrowserOnly';
|
||||
import { useTheme, Theme } from '@graphiql/react';
|
||||
import Playground from '../components/playground';
|
||||
import graphiqlCss from '!css-loader!graphiql/graphiql.css';
|
||||
|
||||
import "graphiql/graphiql.css";
|
||||
|
||||
// Docusaurus does SSR for custom pages but we need to load GraphiQL in the browser
|
||||
const GraphiQLComponent = () => {
|
||||
if (
|
||||
!window.localStorage.getItem("graphiql:theme") &&
|
||||
window.localStorage.getItem("theme") != "dark"
|
||||
) {
|
||||
window.localStorage.setItem("graphiql:theme", "light");
|
||||
}
|
||||
// Docusaurus does SSR for custom pages, but we need to load GraphiQL in the browser
|
||||
const GraphQlComponent = ({token}) => {
|
||||
const fetcher = createGraphiQLFetcher({ url: "https://api.twenty.com/graphql" });
|
||||
|
||||
// We load graphiql style using useEffect as it breaks remaining docs style
|
||||
useEffect(()=> {
|
||||
const styleElement = document.createElement('style')
|
||||
styleElement.innerHTML = graphiqlCss.toString()
|
||||
document.head.append(styleElement)
|
||||
|
||||
return ()=> styleElement.remove();
|
||||
}, [])
|
||||
|
||||
const fetcher = createGraphiQLFetcher({url: "https://api.twenty.com/graphql"});
|
||||
return (
|
||||
<div className="fullHeightPlayground">
|
||||
<GraphiQL fetcher={fetcher} />;
|
||||
<GraphiQL
|
||||
fetcher={fetcher}
|
||||
defaultHeaders={JSON.stringify({Authorization: `Bearer ${token}`})}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
const graphQL = () => {
|
||||
const [token , setToken] = useState()
|
||||
const { setTheme } = useTheme();
|
||||
|
||||
useEffect(()=> {
|
||||
window.localStorage.setItem("graphiql:theme", window.localStorage.getItem("theme") || 'light');
|
||||
|
||||
const handleThemeChange = (ev) => {
|
||||
if(ev.key === 'theme') {
|
||||
setTheme(ev.newValue as Theme);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('storage', handleThemeChange)
|
||||
|
||||
return () => window.removeEventListener('storage', handleThemeChange)
|
||||
}, [])
|
||||
|
||||
const children = <GraphQlComponent token={token} />
|
||||
|
||||
return (
|
||||
<Layout
|
||||
title="GraphQL Playground"
|
||||
description="GraphQL Playground for Twenty"
|
||||
>
|
||||
<BrowserOnly>{
|
||||
() => <Playground
|
||||
children={children}
|
||||
setToken={setToken}
|
||||
/>
|
||||
}</BrowserOnly>
|
||||
</Layout>
|
||||
)
|
||||
};
|
||||
|
||||
const graphQL = () => (
|
||||
<Layout
|
||||
title="GraphQL Playground"
|
||||
description="GraphQL Playground for Twenty"
|
||||
>
|
||||
<BrowserOnly>{() => <GraphiQLComponent />}</BrowserOnly>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
export default graphQL;
|
||||
|
||||
@ -1,67 +0,0 @@
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.form {
|
||||
text-align: center;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #16233f;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.input {
|
||||
padding: 4px;
|
||||
margin: 20px 0 5px 0;
|
||||
max-width: 460px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f3f3;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
|
||||
}
|
||||
|
||||
.invalid {
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.token-invalid {
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.not-visible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.loader {
|
||||
color: #16233f;
|
||||
font-size: 2rem;
|
||||
animation: animate 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes animate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(720deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loader-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
}
|
||||
@ -1,25 +1,14 @@
|
||||
import Layout from "@theme/Layout";
|
||||
import BrowserOnly from "@docusaurus/BrowserOnly";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Layout from '@theme/Layout';
|
||||
import BrowserOnly from '@docusaurus/BrowserOnly';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { API } from '@stoplight/elements';
|
||||
import Playground from '../components/playground';
|
||||
import spotlightTheme from '!css-loader!@stoplight/elements/styles.min.css';
|
||||
import restApiCss from '!css-loader!./rest-api.css';
|
||||
import { parseJson } from "nx/src/utils/json";
|
||||
import { TbLoader2 } from "react-icons/tb";
|
||||
|
||||
type TokenFormProps = {
|
||||
onSubmit: (token: string) => void,
|
||||
isTokenValid: boolean,
|
||||
isLoading: boolean,
|
||||
token: string,
|
||||
}
|
||||
|
||||
const TokenForm = ({onSubmit, isTokenValid, token, isLoading}: TokenFormProps)=> {
|
||||
const updateToken = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
localStorage.setItem('TryIt_securitySchemeValues', JSON.stringify({bearerAuth: event.target.value}))
|
||||
onSubmit(event.target.value)
|
||||
}
|
||||
const RestApiComponent = ({openApiJson}) => {
|
||||
|
||||
// We load spotlightTheme style using useEffect as it breaks remaining docs style
|
||||
useEffect(() => {
|
||||
const styleElement = document.createElement('style');
|
||||
styleElement.innerHTML = spotlightTheme.toString();
|
||||
@ -28,103 +17,32 @@ const TokenForm = ({onSubmit, isTokenValid, token, isLoading}: TokenFormProps)=>
|
||||
return () => styleElement.remove();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const styleElement = document.createElement('style');
|
||||
styleElement.innerHTML = restApiCss.toString();
|
||||
document.head.append(styleElement);
|
||||
|
||||
return () => styleElement.remove();
|
||||
}, []);
|
||||
|
||||
return !isTokenValid && (
|
||||
<div>
|
||||
<div className='container'>
|
||||
<form className="form">
|
||||
<label>
|
||||
To load your REST API schema, <a className='link' href='https://app.twenty.com/settings/developers/api-keys'>generate an API key</a> and paste it here:
|
||||
</label>
|
||||
<p>
|
||||
<input
|
||||
className={(token && !isLoading) ? "input invalid" : "input"}
|
||||
type='text'
|
||||
disabled={isLoading}
|
||||
placeholder='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIyMD...'
|
||||
defaultValue={token}
|
||||
onChange={updateToken}
|
||||
/>
|
||||
<p className={`token-invalid ${(!token || isLoading )&& 'not-visible'}`}>Token invalid</p>
|
||||
<div className='loader-container'>
|
||||
<TbLoader2 className={`loader ${!isLoading && 'not-visible'}`} />
|
||||
</div>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const RestApiComponent = () => {
|
||||
const [openApiJson, setOpenApiJson] = useState({})
|
||||
const [isTokenValid, setIsTokenValid] = useState(false)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const storedToken = parseJson(localStorage.getItem('TryIt_securitySchemeValues'))?.bearerAuth ?? ''
|
||||
|
||||
const validateToken = (openApiJson) => setIsTokenValid(!!openApiJson.tags)
|
||||
|
||||
const getJson = async (token: string ) => {
|
||||
setIsLoading(true)
|
||||
return await fetch(
|
||||
"https://api.twenty.com/open-api",
|
||||
{headers: {Authorization: `Bearer ${token}`}}
|
||||
)
|
||||
.then((res)=> res.json())
|
||||
.then((result)=> {
|
||||
validateToken(result)
|
||||
setIsLoading(false)
|
||||
return result
|
||||
})
|
||||
.catch(() => setIsLoading(false))
|
||||
}
|
||||
|
||||
const submitToken = async (token) => {
|
||||
if (isLoading) return
|
||||
const json = await getJson(token)
|
||||
setOpenApiJson(json)
|
||||
}
|
||||
|
||||
useEffect(()=> {
|
||||
(async ()=> {
|
||||
await submitToken(storedToken)
|
||||
})()
|
||||
},[])
|
||||
|
||||
return isTokenValid !== undefined && (
|
||||
<>
|
||||
<TokenForm
|
||||
onSubmit={submitToken}
|
||||
isTokenValid={isTokenValid}
|
||||
isLoading={isLoading}
|
||||
token={storedToken}
|
||||
/>
|
||||
{
|
||||
isTokenValid && (
|
||||
<API
|
||||
apiDescriptionDocument={JSON.stringify(openApiJson)}
|
||||
router="hash"
|
||||
/>
|
||||
)
|
||||
}
|
||||
</>
|
||||
return (
|
||||
<API
|
||||
apiDescriptionDocument={JSON.stringify(openApiJson)}
|
||||
router="hash"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const restApi = () => (
|
||||
<Layout
|
||||
title="REST API Playground"
|
||||
description="REST API Playground for Twenty"
|
||||
>
|
||||
<BrowserOnly>{() => <RestApiComponent />}</BrowserOnly>
|
||||
</Layout>
|
||||
);
|
||||
const restApi = () => {
|
||||
const [openApiJson, setOpenApiJson] = useState({})
|
||||
|
||||
const children = <RestApiComponent openApiJson={openApiJson} />
|
||||
|
||||
return (
|
||||
<Layout
|
||||
title="REST API Playground"
|
||||
description="REST API Playground for Twenty"
|
||||
>
|
||||
<BrowserOnly>{
|
||||
() => <Playground
|
||||
children={children}
|
||||
setOpenApiJson={setOpenApiJson}
|
||||
/>
|
||||
}</BrowserOnly>
|
||||
</Layout>
|
||||
)
|
||||
};
|
||||
|
||||
export default restApi;
|
||||
|
||||
Reference in New Issue
Block a user