1- // import { useEffect, useState } from "react";
2- // import InstillClient, {
3- // Nullable,
4- // Pipeline,
5- // User,
6- // } from "@instill-ai/typescript-sdk";
7-
8- // export default function TypescriptSdkDemo() {
9- // const [pipelines, setPipelines] = useState<Pipeline[]>([]);
10- // const [user, setUser] = useState<User[]>([]);
11- // const [token, setToken] = useState<Nullable<string>>(null);
12-
13- // const client = new InstillClient("http://localhost:8080", "v1alpha", token);
14-
15- // const login = async () => {
16- // const userToken = await client.Auth.authLoginAction({
17- // payload: {
18- // username: "admin",
19- // password: "password",
20- // },
21- // });
22- // setToken(userToken);
23- // };
24-
25- // useEffect(() => {
26- // login();
27- // }, []);
28-
29- // useEffect(() => {
30- // if (token) {
31- // client.Auth.getUserQuery()
32- // .then((data: any) => {
33- // console.log("data", data);
34- // setUser(data);
35- // })
36- // .catch((error: any) => {
37- // console.log("error", error);
38- // });
39-
40- // client.Pipeline.listPipelinesQuery({
41- // pageSize: null,
42- // nextPageToken: null,
43- // })
44- // .then((data: any) => {
45- // console.log("data", data);
46- // setPipelines(data);
47- // })
48- // .catch((error: any) => {
49- // console.log("error", error);
50- // });
51- // }
52- // }, [token]);
53-
54- // return (
55- // <>
56- // <h1>User Data</h1>
57- // <pre style={{ backgroundColor: "white" }}>
58- // {JSON.stringify(user, null, 4)}
59- // </pre>
60-
61- // <h1>Pipelines List</h1>
62- // <pre style={{ backgroundColor: "white" }}>
63- // {JSON.stringify(pipelines, null, 4)}
64- // </pre>
65- // </>
66- // );
67- // }
68-
69- // Console Token Implementation
70-
711import { useEffect , useState } from "react" ;
722import InstillClient , {
733 Nullable ,
@@ -78,34 +8,37 @@ import InstillClient, {
788export default function TypescriptSdkDemo ( ) {
799 const [ pipelines , setPipelines ] = useState < Pipeline [ ] > ( [ ] ) ;
8010 const [ user , setUser ] = useState < User [ ] > ( [ ] ) ;
11+ const [ token , setToken ] = useState < Nullable < string > > ( null ) ;
8112
8213 const client = new InstillClient (
83- "https ://api.instill.tech " ,
14+ "http ://localhost:8080 " ,
8415 "v1alpha" ,
85- "instill_sk_OwuGQ8RGL6ObzYsneAG9Mib1k6zi9Gmj " // console API token
16+ "instill_sk_pgybOAbZmtjB7S5DTDJcmryE7utibLAN " // console API token from http://localhost:3000/settings
8617 ) ;
8718
8819 useEffect ( ( ) => {
89- client . Auth . getUserQuery ( )
90- . then ( ( data : any ) => {
91- console . log ( "data" , data ) ;
92- setUser ( data ) ;
20+ if ( token ) {
21+ client . Auth . getUserQuery ( )
22+ . then ( ( data : any ) => {
23+ console . log ( "data" , data ) ;
24+ setUser ( data ) ;
25+ } )
26+ . catch ( ( error : any ) => {
27+ console . log ( "error" , error ) ;
28+ } ) ;
29+
30+ client . Pipeline . listPipelinesQuery ( {
31+ pageSize : null ,
32+ nextPageToken : null ,
9333 } )
94- . catch ( ( error : any ) => {
95- console . log ( "error" , error ) ;
96- } ) ;
97-
98- client . Pipeline . listPipelinesQuery ( {
99- pageSize : null ,
100- nextPageToken : null ,
101- } )
102- . then ( ( data : any ) => {
103- console . log ( "data" , data ) ;
104- setPipelines ( data ) ;
105- } )
106- . catch ( ( error : any ) => {
107- console . log ( "error" , error ) ;
108- } ) ;
34+ . then ( ( data : any ) => {
35+ console . log ( "data" , data ) ;
36+ setPipelines ( data ) ;
37+ } )
38+ . catch ( ( error : any ) => {
39+ console . log ( "error" , error ) ;
40+ } ) ;
41+ }
10942 } , [ ] ) ;
11043
11144 return (
@@ -122,3 +55,60 @@ export default function TypescriptSdkDemo() {
12255 </ >
12356 ) ;
12457}
58+
59+ // Console Token Implementation
60+
61+ // import { useEffect, useState } from "react";
62+ // import InstillClient, {
63+ // Nullable,
64+ // Pipeline,
65+ // User,
66+ // } from "@instill-ai/typescript-sdk";
67+
68+ // export default function TypescriptSdkDemo() {
69+ // const [pipelines, setPipelines] = useState<Pipeline[]>([]);
70+ // const [user, setUser] = useState<User[]>([]);
71+
72+ // const client = new InstillClient(
73+ // "https://api.instill.tech",
74+ // "v1alpha",
75+ // "instill_sk_OwuGQ8RGL6ObzYsneAG9Mib1k6zi9Gmj" // console API token
76+ // );
77+
78+ // useEffect(() => {
79+ // client.Auth.getUserQuery()
80+ // .then((data: any) => {
81+ // console.log("data", data);
82+ // setUser(data);
83+ // })
84+ // .catch((error: any) => {
85+ // console.log("error", error);
86+ // });
87+
88+ // client.Pipeline.listPipelinesQuery({
89+ // pageSize: null,
90+ // nextPageToken: null,
91+ // })
92+ // .then((data: any) => {
93+ // console.log("data", data);
94+ // setPipelines(data);
95+ // })
96+ // .catch((error: any) => {
97+ // console.log("error", error);
98+ // });
99+ // }, []);
100+
101+ // return (
102+ // <>
103+ // <h1>User Data</h1>
104+ // <pre style={{ backgroundColor: "white" }}>
105+ // {JSON.stringify(user, null, 4)}
106+ // </pre>
107+
108+ // <h1>Pipelines List</h1>
109+ // <pre style={{ backgroundColor: "white" }}>
110+ // {JSON.stringify(pipelines, null, 4)}
111+ // </pre>
112+ // </>
113+ // );
114+ // }
0 commit comments