Skip to content

Commit 25cc58a

Browse files
author
Alban Bailly
committed
fix build fail part 2
1 parent 79d89a7 commit 25cc58a

File tree

1 file changed

+174
-168
lines changed
  • src/components/5_templates

1 file changed

+174
-168
lines changed

‎src/components/5_templates/api.js

Lines changed: 174 additions & 168 deletions
Original file line numberDiff line numberDiff line change
@@ -28,190 +28,196 @@ const scrollToTop = () => {
2828
});
2929
};
3030

31-
const apiPage = ({ data }) => {
32-
const n = data.allPaths.edges[0].node;
33-
const modes = {
34-
get: "get",
35-
put: "put",
36-
post: "post",
37-
delete: "delete"
38-
};
39-
const responseOptions = {
40-
_200: "_200",
41-
_204: "_204",
42-
default: "default"
43-
};
31+
class apiPage extends React.Component {
32+
componentDidMount() {
33+
window.addEventListener("scroll", () => {
34+
const top = window.scrollY;
35+
const scrollButton = document.getElementById("back-to-top");
36+
if (top >= 50) {
37+
scrollButton.classList.add("is-visible");
38+
} else {
39+
scrollButton.classList.remove("is-visible");
40+
}
41+
});
42+
}
4443

45-
window.addEventListener("scroll", () => {
46-
const top = window.scrollY;
47-
const scrollButton = document.getElementById("back-to-top");
48-
if (top >= 50) {
49-
scrollButton.classList.add("is-visible");
50-
} else {
51-
scrollButton.classList.remove("is-visible");
52-
}
53-
});
44+
render() {
45+
const n = this.props.data.allPaths.edges[0].node;
46+
const modes = {
47+
get: "get",
48+
put: "put",
49+
post: "post",
50+
delete: "delete"
51+
};
52+
const responseOptions = {
53+
_200: "_200",
54+
_204: "_204",
55+
default: "default"
56+
};
5457

55-
return (
56-
<Layout fullWidth>
57-
<SEO
58-
title={
59-
"Linode API | " + (n.get && n.get.tags) ||
60-
(n.post && n.post.tags) ||
61-
(n.put && n.put.tags) ||
62-
(n.delete && n.delete.tags)
63-
}
64-
description={
65-
(n.get && n.get.description ? n.get.description : "") +
66-
(n.post && n.post.description ? n.post.description : "") +
67-
(n.put && n.put.description ? n.put.description : "") +
68-
(n.delete && n.delete.description ? n.delete.description : "")
69-
}
70-
/>
71-
<div className="flex flex-wrap">
72-
<div className="md:hidden search-header-wrapper">
73-
<SearchHeader />
74-
</div>
75-
<div className="sidebar-container">
76-
<Sidebar />
77-
</div>
78-
<div className="w-full px-4 api-content-wrapper">
79-
<div className="api-content mx-auto">
80-
<h1 className="mb-4 ">
81-
{(n.get && n.get.tags) ||
82-
(n.post && n.post.tags) ||
83-
(n.put && n.put.tags) ||
84-
(n.delete && n.delete.tags)}
85-
</h1>
86-
{Object.keys(n).map((e, i) => {
87-
const mode = modes[e];
88-
const m = n[mode];
58+
return (
59+
<Layout fullWidth>
60+
<SEO
61+
title={
62+
"Linode API | " + (n.get && n.get.tags) ||
63+
(n.post && n.post.tags) ||
64+
(n.put && n.put.tags) ||
65+
(n.delete && n.delete.tags)
66+
}
67+
description={
68+
(n.get && n.get.description ? n.get.description : "") +
69+
(n.post && n.post.description ? n.post.description : "") +
70+
(n.put && n.put.description ? n.put.description : "") +
71+
(n.delete && n.delete.description ? n.delete.description : "")
72+
}
73+
/>
74+
<div className="flex flex-wrap">
75+
<div className="md:hidden search-header-wrapper">
76+
<SearchHeader />
77+
</div>
78+
<div className="sidebar-container">
79+
<Sidebar />
80+
</div>
81+
<div className="w-full px-4 api-content-wrapper">
82+
<div className="api-content mx-auto">
83+
<h1 className="mb-4 ">
84+
{(n.get && n.get.tags) ||
85+
(n.post && n.post.tags) ||
86+
(n.put && n.put.tags) ||
87+
(n.delete && n.delete.tags)}
88+
</h1>
89+
{Object.keys(n).map((e, i) => {
90+
const mode = modes[e];
91+
const m = n[mode];
8992

90-
return (
91-
m && (
92-
<div key={i} className="flex flex-col">
93-
<span id={mode} className="endpoint-anchor" />
94-
<div className="xs-full mb-8">
95-
<h2 className="mt-0">{m.summary}</h2>
96-
<div className="bg-ThemeCell p-4 mt-4 mb-8 flex items-center justify-between flex-wrap">
97-
<div className="flex items-center mr-4">
98-
<span className="tag big bold mr-2 uppercase">
99-
{mode}
100-
</span>
101-
<pre className="whitespace-pre-line">
102-
{m.servers
103-
? m.servers[0].url
104-
: "https://api.linode.com/v4"}
105-
{n.name}
106-
</pre>
93+
return (
94+
m && (
95+
<div key={i} className="flex flex-col">
96+
<span id={mode} className="endpoint-anchor" />
97+
<div className="xs-full mb-8">
98+
<h2 className="mt-0">{m.summary}</h2>
99+
<div className="bg-ThemeCell p-4 mt-4 mb-8 flex items-center justify-between flex-wrap">
100+
<div className="flex items-center mr-4">
101+
<span className="tag big bold mr-2 uppercase">
102+
{mode}
103+
</span>
104+
<pre className="whitespace-pre-line">
105+
{m.servers
106+
? m.servers[0].url
107+
: "https://api.linode.com/v4"}
108+
{n.name}
109+
</pre>
110+
</div>
111+
{m.servers &&
112+
m.servers[0].url ===
113+
"https://api.linode.com/v4beta" && (
114+
<span className="tag tag-beta">BETA</span>
115+
)}
107116
</div>
108-
{m.servers &&
109-
m.servers[0].url ===
110-
"https://api.linode.com/v4beta" && (
111-
<span className="tag tag-beta">BETA</span>
112-
)}
113-
</div>
114-
<Markdown
115-
source={m.description}
116-
escapeHtml={false}
117-
className="my-8 api-desc"
118-
/>
119-
{m.security && <Security oauth={m.security[1].oauth} />}
120-
{m.parameters && (
121-
<div className="my-8">
122-
<h3 className="mb-2">Query Parameters</h3>
123-
{m.parameters.map((param, i) => (
124-
<ParamDisplay
125-
key={`param-item-${i}`}
126-
param={param}
127-
m={m}
128-
/>
129-
))}
130-
</div>
131-
)}
132-
{n.parameters && (
133-
<div className="my-8">
134-
<h3 className="mb-2">Path Parameters</h3>
135-
{n.parameters.map((param, i) => (
136-
<ParamDisplay
137-
key={`param-item-${i}`}
138-
param={param}
139-
m={n}
140-
/>
141-
))}
142-
</div>
143-
)}
144-
{m.requestBody && <BodySchema data={m} />}
145-
<div className="w-full mb-8">
146-
<h3>Request Samples</h3>
147-
<Tabs className="my-4">
148-
<TabList>
117+
<Markdown
118+
source={m.description}
119+
escapeHtml={false}
120+
className="my-8 api-desc"
121+
/>
122+
{m.security && <Security oauth={m.security[1].oauth} />}
123+
{m.parameters && (
124+
<div className="my-8">
125+
<h3 className="mb-2">Query Parameters</h3>
126+
{m.parameters.map((param, i) => (
127+
<ParamDisplay
128+
key={`param-item-${i}`}
129+
param={param}
130+
m={m}
131+
/>
132+
))}
133+
</div>
134+
)}
135+
{n.parameters && (
136+
<div className="my-8">
137+
<h3 className="mb-2">Path Parameters</h3>
138+
{n.parameters.map((param, i) => (
139+
<ParamDisplay
140+
key={`param-item-${i}`}
141+
param={param}
142+
m={n}
143+
/>
144+
))}
145+
</div>
146+
)}
147+
{m.requestBody && <BodySchema data={m} />}
148+
<div className="w-full mb-8">
149+
<h3>Request Samples</h3>
150+
<Tabs className="my-4">
151+
<TabList>
152+
{m.x_code_samples &&
153+
m.x_code_samples.map((x, i) => {
154+
return <Tab key={i}>{x.lang}</Tab>;
155+
})}
156+
</TabList>
149157
{m.x_code_samples &&
150158
m.x_code_samples.map((x, i) => {
151-
return <Tab key={i}>{x.lang}</Tab>;
152-
})}
153-
</TabList>
154-
{m.x_code_samples &&
155-
m.x_code_samples.map((x, i) => {
156-
return (
157-
<TabPanel key={i}>
158-
<div className="flex justify-end text-sm">
159-
<Clipboard
160-
data-clipboard-text={x.source}
161-
className="flex items-center hover:text-BaseBlueLight"
159+
return (
160+
<TabPanel key={i}>
161+
<div className="flex justify-end text-sm">
162+
<Clipboard
163+
data-clipboard-text={x.source}
164+
className="flex items-center hover:text-BaseBlueLight"
165+
>
166+
<span className="mr-2">Copy</span>
167+
<Copy
168+
style={{ width: 22, height: 22 }}
169+
/>
170+
</Clipboard>
171+
</div>
172+
<SyntaxHighlighter
173+
language="bash"
174+
style={atomDark}
175+
className="api-samples"
176+
codeTagProps={{
177+
style: { whiteSpace: "pre-wrap" }
178+
}}
162179
>
163-
<span className="mr-2">Copy</span>
164-
<Copy style={{ width: 22, height: 22 }} />
165-
</Clipboard>
166-
</div>
167-
<SyntaxHighlighter
168-
language="bash"
169-
style={atomDark}
170-
className="api-samples"
171-
codeTagProps={{
172-
style: { whiteSpace: "pre-wrap" }
173-
}}
174-
>
175-
{x.source}
176-
</SyntaxHighlighter>
177-
</TabPanel>
178-
);
179-
})}
180-
</Tabs>
181-
<ResponseSamples
180+
{x.source}
181+
</SyntaxHighlighter>
182+
</TabPanel>
183+
);
184+
})}
185+
</Tabs>
186+
<ResponseSamples
187+
options={responseOptions}
188+
responses={m.responses}
189+
m={m}
190+
mode={mode}
191+
/>
192+
</div>
193+
194+
<ResponseList
182195
options={responseOptions}
183196
responses={m.responses}
184197
m={m}
185198
mode={mode}
186199
/>
187200
</div>
188-
189-
<ResponseList
190-
options={responseOptions}
191-
responses={m.responses}
192-
m={m}
193-
mode={mode}
194-
/>
195201
</div>
196-
</div>
197-
)
198-
);
199-
})}
202+
)
203+
);
204+
})}
205+
</div>
200206
</div>
201207
</div>
202-
</div>
203-
<div
204-
className="back-to-top md:hidden"
205-
onClick={scrollToTop}
206-
id="back-to-top"
207-
>
208-
<span className="back-to-top__caret">
209-
<Caret />
210-
</span>
211-
</div>
212-
</Layout>
213-
);
214-
};
208+
<div
209+
className="back-to-top md:hidden"
210+
onClick={scrollToTop}
211+
id="back-to-top"
212+
>
213+
<span className="back-to-top__caret">
214+
<Caret />
215+
</span>
216+
</div>
217+
</Layout>
218+
);
219+
}
220+
}
215221

216222
export default apiPage;
217223

0 commit comments

Comments
 (0)