Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit456b8ff

Browse files
committed
Update code snippets to sdk (for js) in dashboard
1 parent1aea5fb commit456b8ff

File tree

2 files changed

+154
-49
lines changed

2 files changed

+154
-49
lines changed

‎packages/dashboard/src/app/(layout)/services/[id]/endpoints/[endpointId]/components/CodeExample.tsx‎

Lines changed: 84 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,20 @@
22

33
import{FC,useState}from"react"
44
import{Select,SelectContent,SelectItem,SelectTrigger,SelectValue}from"@/components/ui/select"
5-
import{Card,CardContent}from"@/components/ui/card"
5+
import{Card,CardContent,CardDescription,CardTitle}from"@/components/ui/card"
66
import{Button}from"@/components/ui/button"
7-
import{Copy,CopyCheck}from"lucide-react"
7+
import{Copy,CopyCheck,Download}from"lucide-react"
88
import{getCodeExample,Language,Method}from"@/utils/getCodeExample";
99

1010
interfaceApiExampleProps{
1111
url:string
1212
method:Method
1313
}
1414

15-
1615
exportconstApiExample:FC<ApiExampleProps>=({ url, method})=>{
1716
const[language,setLanguage]=useState<Language>("js")
1817
const[isCopied,setIsCopied]=useState(false)
18+
const[isSdkCopied,setIsSdkCopied]=useState(false)
1919

2020
consthandleCopy=async()=>{
2121
try{
@@ -27,38 +27,88 @@ export const ApiExample: FC<ApiExampleProps> = ({ url, method }) => {
2727
}
2828
}
2929

30+
consthandleCopyInstallCommand=async()=>{
31+
try{
32+
awaitnavigator.clipboard.writeText("npx api200-generate-sdk -t your_token_here")
33+
setIsSdkCopied(true)
34+
setTimeout(()=>setIsSdkCopied(false),2000)
35+
}catch(err){
36+
console.error('Failed to copy install command:',err)
37+
}
38+
}
39+
3040
return(
31-
<CardclassName={`w-full bg-gray-100 shadow-none`}>
32-
<CardContentclassName="p-4">
33-
<divclassName="flex justify-between items-center mb-4">
34-
<Selectvalue={language}onValueChange={(value)=>setLanguage(valueasLanguage)}>
35-
<SelectTriggerclassName="w-[120px] bg-white h-8 text-xs">
36-
<SelectValueplaceholder="Select language"/>
37-
</SelectTrigger>
38-
<SelectContent>
39-
<SelectItemvalue="js">JavaScript</SelectItem>
40-
<SelectItemvalue="python">Python</SelectItem>
41-
<SelectItemvalue="php">PHP</SelectItem>
42-
<SelectItemvalue="go">Go</SelectItem>
43-
<SelectItemvalue="rust">Rust</SelectItem>
44-
<SelectItemvalue="java">Java</SelectItem>
45-
<SelectItemvalue="csharp">C#</SelectItem>
46-
<SelectItemvalue="curl">cURL</SelectItem>
47-
</SelectContent>
48-
</Select>
49-
<Buttonvariant="outline"size="sm"onClick={handleCopy}className="h-8 w-8 p-0">
50-
{isCopied ?(
51-
<CopyCheckclassName="h-4 w-4 text-green-500"/>
52-
) :(
53-
<CopyclassName="h-4 w-4"/>
54-
)}
55-
</Button>
56-
</div>
57-
<preclassName="text-sm overflow-x-auto">
58-
<code>{getCodeExample(language,url,method)}</code>
59-
</pre>
60-
</CardContent>
61-
</Card>
41+
<divclassName="w-full space-y-4">
42+
{/* SDK Installation Instructions for JavaScript */}
43+
{language==="js"&&(
44+
<CardclassName="w-full bg-blue-50 border-blue-200 shadow-none">
45+
<CardContentclassName="p-4">
46+
<divclassName="flex justify-between items-start mb-3">
47+
<div>
48+
<CardTitleclassName="text-sm text-blue-900">
49+
📦 SDK Installation
50+
</CardTitle>
51+
<CardDescriptionclassName="text-xs text-blue-700">
52+
Generate your personalized SDK with your API token
53+
</CardDescription>
54+
</div>
55+
<Button
56+
variant="outline"
57+
size="sm"
58+
onClick={handleCopyInstallCommand}
59+
className="h-8 w-8 p-0 border-blue-300 hover:bg-blue-100"
60+
>
61+
{isSdkCopied?<CopyCheckclassName="h-3 w-3 text-blue-600"/> :<CopyclassName="h-3 w-3 text-blue-600"/>}
62+
63+
</Button>
64+
</div>
65+
<divclassName="bg-white rounded border border-blue-200 p-3">
66+
<codeclassName="text-sm text-blue-800 font-mono">
67+
npx api200-generate-sdk -t your_token_here
68+
</code>
69+
</div>
70+
</CardContent>
71+
</Card>
72+
)}
73+
74+
{/* Main Code Example */}
75+
<CardclassName="w-full bg-gray-100 shadow-none">
76+
<CardContentclassName="p-4">
77+
<divclassName="flex justify-between items-center mb-4">
78+
<Selectvalue={language}onValueChange={(value)=>setLanguage(valueasLanguage)}>
79+
<SelectTriggerclassName="w-[160px] bg-white h-8 text-xs">
80+
<SelectValueplaceholder="Select language"/>
81+
</SelectTrigger>
82+
<SelectContent>
83+
<SelectItemvalue="js">
84+
<divclassName="flex items-center gap-2">
85+
<span>JavaScript</span>
86+
<spanclassName="text-xs bg-blue-100 text-blue-800 px-1.5 py-0.5 rounded">SDK</span>
87+
</div>
88+
</SelectItem>
89+
<SelectItemvalue="python">Python</SelectItem>
90+
<SelectItemvalue="php">PHP</SelectItem>
91+
<SelectItemvalue="go">Go</SelectItem>
92+
<SelectItemvalue="rust">Rust</SelectItem>
93+
<SelectItemvalue="java">Java</SelectItem>
94+
<SelectItemvalue="csharp">C#</SelectItem>
95+
<SelectItemvalue="curl">cURL</SelectItem>
96+
</SelectContent>
97+
</Select>
98+
<Buttonvariant="outline"size="sm"onClick={handleCopy}className="h-8 w-8 p-0">
99+
{isCopied ?(
100+
<CopyCheckclassName="h-4 w-4 text-green-500"/>
101+
) :(
102+
<CopyclassName="h-4 w-4"/>
103+
)}
104+
</Button>
105+
</div>
106+
<preclassName="text-sm overflow-x-auto">
107+
<code>{getCodeExample(language,url,method)}</code>
108+
</pre>
109+
</CardContent>
110+
</Card>
111+
</div>
62112
)
63113
}
64114

‎packages/dashboard/src/utils/getCodeExample.ts‎

Lines changed: 70 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,83 @@
1-
21
exporttypeMethod="GET"|"POST"|"PUT"|"DELETE"|"PATCH"
32
exporttypeLanguage="js"|"python"|"curl"|"php"|"go"|"rust"|"java"|"csharp"
43

4+
// Helper function to generate SDK method name (matching your SDK generator logic)
5+
functiongenerateSDKMethodName(method:string,path:string):string{
6+
return`${method.toLowerCase()}_${path.replace(/^\//,'').replace(/\//g,'_')}`.replace(/{([^}]+)}/g,'by_$1');
7+
}
8+
9+
// Helper function to convert service name to camelCase (matching your SDK generator logic)
10+
functiontoCamelCase(str:string):string{
11+
returnstr.replace(/-([a-z])/g,(g)=>g[1].toUpperCase());
12+
}
13+
14+
// Helper function to extract service name and endpoint path from URL
15+
functionparseApiUrl(url:string):{serviceName:string;endpointPath:string}{
16+
// Extract from URL like: https://eu.api200.co/api/users/profile/{id}
17+
consturlParts=url.split('/api/');
18+
if(urlParts.length<2){
19+
return{serviceName:'service',endpointPath:'/endpoint'};
20+
}
21+
22+
constpathParts=urlParts[1].split('/');
23+
constserviceName=pathParts[0]||'service';
24+
constendpointPath='/'+pathParts.slice(1).join('/');
25+
26+
return{ serviceName, endpointPath};
27+
}
28+
29+
// Helper function to generate parameter example based on URL path
30+
functiongenerateSDKParams(url:string,method:Method):string{
31+
constpathParams=url.match(/{([^}]+)}/g);
32+
consthasRequestBody=['POST','PUT','PATCH'].includes(method);
33+
34+
if(!pathParams&&!hasRequestBody){
35+
return'';
36+
}
537

38+
constparams:string[]=[];
39+
40+
// Add path parameters
41+
if(pathParams){
42+
pathParams.forEach(param=>{
43+
constparamName=param.replace(/[{}]/g,'');
44+
params.push(`${paramName}: "your_${paramName}_value"`);
45+
});
46+
}
47+
48+
// Add request body for POST, PUT, PATCH
49+
if(hasRequestBody){
50+
params.push(` requestBody: {
51+
// Your request data here
52+
name: "example",
53+
value: "data"
54+
}`);
55+
}
56+
57+
returnparams.length>0 ?`{\n${params.join(',\n')}\n }` :'';
58+
}
659

760
exportconstgetCodeExample=(language:Language,url:string,method:Method):string=>{
861
constheaders='{"x-api-key": "YOUR_API_KEY"}'
962

10-
constexamples={
11-
js:`const fetchData = async () => {
12-
try {
13-
constresponse =await fetch("${url}", {
14-
method: "${method}",
15-
headers:${headers}
16-
});
17-
const data = await response.json();
18-
console.log(data);
19-
} catch (error) {
20-
console.error('Error:', error);
21-
}
63+
// For JavaScript, show SDK usage instead of fetch
64+
if(language==='js'){
65+
const{ serviceName, endpointPath}=parseApiUrl(url);
66+
constcamelCaseServiceName=toCamelCase(serviceName);
67+
constmethodName=generateSDKMethodName(method,endpointPath);
68+
constparams=generateSDKParams(url,method);
69+
70+
return`
71+
import api200 from '@lib/api200';
72+
73+
const fetchData = async () => {
74+
const { data, error } = await api200.${camelCaseServiceName}.${methodName}.${method.toLowerCase()}(${params ?params :''});
2275
};
2376
24-
fetchData();`,
77+
fetchData();`;
78+
}
2579

80+
constexamples={
2681
python:`import requests
2782
2883
url = "${url}"
@@ -138,5 +193,5 @@ class Program
138193
}`
139194
}
140195

141-
returnexamples[language]||examples.js
196+
returnexamples[language]
142197
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp