From eecee17e99360b18f7841687135ce42e4693a301 Mon Sep 17 00:00:00 2001 From: aFriend Date: Tue, 23 May 2023 04:22:42 +0300 Subject: [PATCH 01/10] Article added --- src/introduction/integration-with-react.md | 226 +++++++++++++++++++++ 1 file changed, 226 insertions(+) create mode 100644 src/introduction/integration-with-react.md diff --git a/src/introduction/integration-with-react.md b/src/introduction/integration-with-react.md new file mode 100644 index 00000000..e9c25a40 --- /dev/null +++ b/src/introduction/integration-with-react.md @@ -0,0 +1,226 @@ +# Integration with React + +In this article, we will look at the combination of gram.js and React + +After creating the project and installing all the necessary dependencies, you can use gram.js in your projects + +## Client launch +In the example below you will see an example of an application that sends a confirmation code and starts the client + +::::tabs +:::tab{title="JavaScript"} + +```js +import React, { useState } from 'react' + +import { TelegramClient } from 'telegram' +import { StringSession } from 'telegram/sessions' + +const SESSION = new StringSession('') +const API_ID = 00000000 +const API_HASH = '111eb4dc492d4ae475d575c00bf0aa11' + +function createClient (session, apiId, apiHash) { + return new TelegramClient( + session, + apiId, + apiHash, + { connectionRetries: 5 } + ) +} + +const client = createClient(SESSION, API_ID, API_HASH) // Immediately create a client using your application data + +async function startClient (phoneNumber, password, phoneCode) { + await client.start({ + phoneNumber, + password, + phoneCode: async () => await new Promise(resolve => { resolve(phoneCode) }), + onError: () => {} + }) + console.log('Done') +} + +async function sendCode (phone) { + await client.connect() // Connecting to the server + await client.sendCode({ + apiId: API_ID, + apiHash: API_HASH + }, phone) +} + + + +export function App () { + const initialState = { phoneNumber: '', password: '', code: '' } + + const [{ phoneNumber, password, code }, setAuthInfo] = useState(initialState) + + + function onInputChangeHandler ({ target: { name, value } }) { + setAuthInfo((authInfo) => ({ ...authInfo, [name]: value })) + } + + function onSendCodeHandler () { + sendCode(phoneNumber) + } + + function onStartClientHandler () { + startClient(phoneNumber, password, code) + } + + return ( + <> + + + + + + + + + + + ) +} +``` + +::: + +:::tab{title="TypeScript"} + +```ts +import React, { type BaseSyntheticEvent, useState } from 'react' + +import { TelegramClient } from 'telegram' +import { type UserAuthParams } from 'telegram/client/auth' +import { StringSession } from 'telegram/sessions' + +const SESSION = new StringSession('') +const API_ID = 00000000 +const API_HASH = '111eb4dc492d4ae475d575c00bf0aa11' + +interface IInitialState { + phoneNumber: string + password: string + code: string +} + +interface IApplicationData { + session: StringSession + apiId: number + apiHash: string +} + +function createClient ({ session, apiId, apiHash }: IApplicationData): TelegramClient { + return new TelegramClient(session, apiId, apiHash, { connectionRetries: 5 }) +} + +const client = createClient({ session: SESSION, apiId: API_ID, apiHash: API_HASH }) // Immediately create a client using your application data + +async function startClient ({ phoneNumber, password, phoneCode }: Omit): Promise { + await client.start({ + phoneNumber, + password, + phoneCode, + onError: () => {} + }) + console.log('Done') +} + +async function sendCode (phone: string): Promise { + await client.connect() // Connecting to the server + await client.sendCode( + { + apiId: API_ID, + apiHash: API_HASH + }, + phone + ) +} + +export function App (): JSX.Element { + const initialState: IInitialState = { phoneNumber: '', password: '', code: '' } + + const [{ phoneNumber, password, code }, setAuthInfo] = useState(initialState) + + function onInputChangeHandler ({ target: { name, value } }: BaseSyntheticEvent): void { + setAuthInfo((authInfo) => ({ ...authInfo, [name]: value })) + } + + async function onSendCodeHandler (): Promise { + await sendCode(phoneNumber) + } + + async function onStartClientHandler (): Promise { + await startClient({ phoneNumber, password: passwordCallback, phoneCode: codeCallback }) + } + + async function passwordCallback (): Promise { + return await new Promise((resolve) => { + resolve(password) + }) + } + + async function codeCallback (): Promise { + return await new Promise((resolve) => { + resolve(code) + }) + } + + return ( + <> + + + + + + + + + + + ) +} +``` + +::: +:::: \ No newline at end of file From aa7561fece58c5a9080c2c69256e8a431893f401 Mon Sep 17 00:00:00 2001 From: aFriend Date: Wed, 24 May 2023 04:03:50 +0300 Subject: [PATCH 02/10] added more info --- src/introduction/integration-with-react.md | 73 +++++++++++++++++++--- 1 file changed, 65 insertions(+), 8 deletions(-) diff --git a/src/introduction/integration-with-react.md b/src/introduction/integration-with-react.md index e9c25a40..592e1b2f 100644 --- a/src/introduction/integration-with-react.md +++ b/src/introduction/integration-with-react.md @@ -38,7 +38,6 @@ async function startClient (phoneNumber, password, phoneCode) { phoneCode: async () => await new Promise(resolve => { resolve(phoneCode) }), onError: () => {} }) - console.log('Done') } async function sendCode (phone) { @@ -142,13 +141,7 @@ function createClient ({ session, apiId, apiHash }: IApplicationData): TelegramC const client = createClient({ session: SESSION, apiId: API_ID, apiHash: API_HASH }) // Immediately create a client using your application data async function startClient ({ phoneNumber, password, phoneCode }: Omit): Promise { - await client.start({ - phoneNumber, - password, - phoneCode, - onError: () => {} - }) - console.log('Done') + await client.start({phoneNumber, password, phoneCode, onError: () => {} }) } async function sendCode (phone: string): Promise { @@ -222,5 +215,69 @@ export function App (): JSX.Element { } ``` +::: +:::: + +## Save session +By making a few changes you can save the session + +::::tabs +:::tab{title="JavaScript"} + +```js +/* +After successfully launching the client, you can call a function client.session.save() that returns the current session, and then save it to local storage, for example +*/ + +async function startClient ({ phoneNumber, password, phoneCode }: Omit): Promise { + await client.start({ phoneNumber, password, phoneCode, onError: () => {} }) + localStorage.setItem('session', JSON.stringify(client.session.save())) // Save session to local storage, also you need to save API_ID and API_HASH +} + + +/* +Now we can get the saved data and run the client without re-authorization +*/ + +const SESSION = new StringSession(JSON.parse(localStorage.getItem('session'))) // Get session from local storage +const API_ID = Number(JSON.parse(localStorage.getItem('apiId'))) // Also get api id +const API_HASH = JSON.parse(localStorage.getItem('apiHash')) // And api hash + +function createClient (session, apiId, apiHash) { + return new TelegramClient(session, apiId, apiHash, { connectionRetries: 5 } ) +} + +const client = createClient(SESSION, API_ID, API_HASH) // Immediately create a client using your application data +``` + +::: + +:::tab{title="TypeScript"} + +```ts +/* +After successfully launching the client, you can call a function client.session.save() that returns the current session, and then save it to local storage, for example +*/ + +async function startClient (phoneNumber, password, phoneCode) { + await client.start({ phoneNumber, password, phoneCode, onError: () => {} }) + localStorage.setItem('session', JSON.stringify(client.session.save())) // Save session to local storage, also you need to save API_ID and API_HASH +} + +/* +Now we can get the saved data and run the client without re-authorization +*/ + +const SESSION = new StringSession(JSON.parse(localStorage.getItem('session') as string)) // Get session from local storage +const API_ID = Number(JSON.parse(localStorage.getItem('apiId') as string)) as number // Also get api id +const API_HASH = JSON.parse(localStorage.getItem('apiHash') as string) // And api hash + +function createClient ({ session, apiId, apiHash }: IApplicationData): TelegramClient { + return new TelegramClient(session, apiId, apiHash, { connectionRetries: 5 } ) +} + +const client = createClient(SESSION, API_ID, API_HASH) // Immediately create a client using your application data +``` + ::: :::: \ No newline at end of file From 77855ada8ffa7e3e6aea4219861cccd513acb0be Mon Sep 17 00:00:00 2001 From: aFriendys <104866675+aFriendys@users.noreply.github.com> Date: Wed, 24 May 2023 04:12:08 +0300 Subject: [PATCH 03/10] Update integration-with-react.md --- src/introduction/integration-with-react.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/introduction/integration-with-react.md b/src/introduction/integration-with-react.md index 592e1b2f..35e75333 100644 --- a/src/introduction/integration-with-react.md +++ b/src/introduction/integration-with-react.md @@ -229,7 +229,7 @@ By making a few changes you can save the session After successfully launching the client, you can call a function client.session.save() that returns the current session, and then save it to local storage, for example */ -async function startClient ({ phoneNumber, password, phoneCode }: Omit): Promise { +async function startClient (phoneNumber, password, phoneCode) { await client.start({ phoneNumber, password, phoneCode, onError: () => {} }) localStorage.setItem('session', JSON.stringify(client.session.save())) // Save session to local storage, also you need to save API_ID and API_HASH } @@ -259,7 +259,7 @@ const client = createClient(SESSION, API_ID, API_HASH) // Immediately create a c After successfully launching the client, you can call a function client.session.save() that returns the current session, and then save it to local storage, for example */ -async function startClient (phoneNumber, password, phoneCode) { +async function startClient ({ phoneNumber, password, phoneCode }: Omit): Promise { await client.start({ phoneNumber, password, phoneCode, onError: () => {} }) localStorage.setItem('session', JSON.stringify(client.session.save())) // Save session to local storage, also you need to save API_ID and API_HASH } @@ -280,4 +280,4 @@ const client = createClient(SESSION, API_ID, API_HASH) // Immediately create a c ``` ::: -:::: \ No newline at end of file +:::: From 39b9708b4ee2fbbeea73222e49e7ae521e2d4ff1 Mon Sep 17 00:00:00 2001 From: aFriendys <104866675+aFriendys@users.noreply.github.com> Date: Thu, 25 May 2023 16:46:37 +0300 Subject: [PATCH 04/10] Little fixes.md --- src/introduction/integration-with-react.md | 55 ++++++++++------------ 1 file changed, 24 insertions(+), 31 deletions(-) diff --git a/src/introduction/integration-with-react.md b/src/introduction/integration-with-react.md index 35e75333..967f83e9 100644 --- a/src/introduction/integration-with-react.md +++ b/src/introduction/integration-with-react.md @@ -1,8 +1,8 @@ # Integration with React -In this article, we will look at the combination of gram.js and React +In this article, we will look at the combination of gramjs and React -After creating the project and installing all the necessary dependencies, you can use gram.js in your projects +After creating the project and installing all the necessary dependencies, you can use gramjs in your projects ## Client launch In the example below you will see an example of an application that sends a confirmation code and starts the client @@ -47,17 +47,13 @@ async function sendCode (phone) { apiHash: API_HASH }, phone) } - - - export function App () { const initialState = { phoneNumber: '', password: '', code: '' } const [{ phoneNumber, password, code }, setAuthInfo] = useState(initialState) - function onInputChangeHandler ({ target: { name, value } }) { - setAuthInfo((authInfo) => ({ ...authInfo, [name]: value })) + setAuthInfo(authInfo => ({ ...authInfo, [name]: value })) } function onSendCodeHandler () { @@ -76,27 +72,23 @@ export function App () { value={phoneNumber} onChange={onInputChangeHandler} /> - - - - (initialState) function onInputChangeHandler ({ target: { name, value } }: BaseSyntheticEvent): void { - setAuthInfo((authInfo) => ({ ...authInfo, [name]: value })) + setAuthInfo(authInfo => ({ ...authInfo, [name]: value })) } async function onSendCodeHandler (): Promise { @@ -173,13 +165,13 @@ export function App (): JSX.Element { } async function passwordCallback (): Promise { - return await new Promise((resolve) => { + return await new Promise(resolve => { resolve(password) }) } async function codeCallback (): Promise { - return await new Promise((resolve) => { + return await new Promise(resolve => { resolve(code) }) } @@ -192,24 +184,28 @@ export function App (): JSX.Element { value={phoneNumber} onChange={onInputChangeHandler} /> - - - - + - - + ) } @@ -226,22 +222,20 @@ By making a few changes you can save the session ```js /* -After successfully launching the client, you can call a function client.session.save() that returns the current session, and then save it to local storage, for example +After successfully launching the client, you can call a function client.session.save() that returns the current session, and then save it to local storage, for example. +Note that we must save only session, having a valid session, you can specify random API_ID and API_HASH */ async function startClient (phoneNumber, password, phoneCode) { await client.start({ phoneNumber, password, phoneCode, onError: () => {} }) - localStorage.setItem('session', JSON.stringify(client.session.save())) // Save session to local storage, also you need to save API_ID and API_HASH + localStorage.setItem('session', JSON.stringify(client.session.save())) // Save session to local storage } - /* -Now we can get the saved data and run the client without re-authorization +Now we can get the saved session and run the client without re-authorization */ const SESSION = new StringSession(JSON.parse(localStorage.getItem('session'))) // Get session from local storage -const API_ID = Number(JSON.parse(localStorage.getItem('apiId'))) // Also get api id -const API_HASH = JSON.parse(localStorage.getItem('apiHash')) // And api hash function createClient (session, apiId, apiHash) { return new TelegramClient(session, apiId, apiHash, { connectionRetries: 5 } ) @@ -256,21 +250,20 @@ const client = createClient(SESSION, API_ID, API_HASH) // Immediately create a c ```ts /* -After successfully launching the client, you can call a function client.session.save() that returns the current session, and then save it to local storage, for example +After successfully launching the client, you can call a function client.session.save() that returns the current session, and then save it to local storage, for example. +Note that we must save only session, having a valid session, you can specify random API_ID and API_HASH */ async function startClient ({ phoneNumber, password, phoneCode }: Omit): Promise { await client.start({ phoneNumber, password, phoneCode, onError: () => {} }) - localStorage.setItem('session', JSON.stringify(client.session.save())) // Save session to local storage, also you need to save API_ID and API_HASH + localStorage.setItem('session', JSON.stringify(client.session.save())) // Save session to local storage } /* -Now we can get the saved data and run the client without re-authorization +Now we can get the saved session and run the client without re-authorization */ const SESSION = new StringSession(JSON.parse(localStorage.getItem('session') as string)) // Get session from local storage -const API_ID = Number(JSON.parse(localStorage.getItem('apiId') as string)) as number // Also get api id -const API_HASH = JSON.parse(localStorage.getItem('apiHash') as string) // And api hash function createClient ({ session, apiId, apiHash }: IApplicationData): TelegramClient { return new TelegramClient(session, apiId, apiHash, { connectionRetries: 5 } ) From 2be618cdfaad34055c75eaf0bfcc3bd5ce72fc92 Mon Sep 17 00:00:00 2001 From: aFriendys <104866675+aFriendys@users.noreply.github.com> Date: Thu, 25 May 2023 16:53:42 +0300 Subject: [PATCH 05/10] added some comments --- src/introduction/integration-with-react.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/introduction/integration-with-react.md b/src/introduction/integration-with-react.md index 967f83e9..b1d7cec0 100644 --- a/src/introduction/integration-with-react.md +++ b/src/introduction/integration-with-react.md @@ -16,7 +16,7 @@ import React, { useState } from 'react' import { TelegramClient } from 'telegram' import { StringSession } from 'telegram/sessions' -const SESSION = new StringSession('') +const SESSION = new StringSession('') //create a new StringSession, also you can use StoreSession const API_ID = 00000000 const API_HASH = '111eb4dc492d4ae475d575c00bf0aa11' @@ -110,7 +110,7 @@ import { TelegramClient } from 'telegram' import { type UserAuthParams } from 'telegram/client/auth' import { StringSession } from 'telegram/sessions' -const SESSION = new StringSession('') +const SESSION = new StringSession('') //create a new StringSession, also you can use StoreSession const API_ID = 00000000 const API_HASH = '111eb4dc492d4ae475d575c00bf0aa11' From 89b4098624f12c13e1c8e908da175a176e2d7954 Mon Sep 17 00:00:00 2001 From: aFriendys <104866675+aFriendys@users.noreply.github.com> Date: Sun, 28 May 2023 14:17:32 +0300 Subject: [PATCH 06/10] Much clear code --- src/introduction/integration-with-react.md | 227 +++++++++------------ 1 file changed, 92 insertions(+), 135 deletions(-) diff --git a/src/introduction/integration-with-react.md b/src/introduction/integration-with-react.md index b1d7cec0..625d268e 100644 --- a/src/introduction/integration-with-react.md +++ b/src/introduction/integration-with-react.md @@ -4,6 +4,8 @@ In this article, we will look at the combination of gramjs and React After creating the project and installing all the necessary dependencies, you can use gramjs in your projects +## Table of Contents + ## Client launch In the example below you will see an example of an application that sends a confirmation code and starts the client @@ -16,52 +18,43 @@ import React, { useState } from 'react' import { TelegramClient } from 'telegram' import { StringSession } from 'telegram/sessions' -const SESSION = new StringSession('') //create a new StringSession, also you can use StoreSession -const API_ID = 00000000 -const API_HASH = '111eb4dc492d4ae475d575c00bf0aa11' - -function createClient (session, apiId, apiHash) { - return new TelegramClient( - session, - apiId, - apiHash, - { connectionRetries: 5 } - ) -} +const SESSION = new StringSession('') +const API_ID = 29653895 // put your API id here +const API_HASH = '7a697a86bfec99dd0ab11d8285d68060' // put your API hash here -const client = createClient(SESSION, API_ID, API_HASH) // Immediately create a client using your application data +const client = new TelegramClient(SESSION, API_ID, API_HASH, { connectionRetries: 5 }) // Immediately create a client using your application data -async function startClient (phoneNumber, password, phoneCode) { - await client.start({ - phoneNumber, - password, - phoneCode: async () => await new Promise(resolve => { resolve(phoneCode) }), - onError: () => {} - }) -} +const initialState = { phoneNumber: '', password: '', phoneCode: '' } // Initialize component initial state -async function sendCode (phone) { - await client.connect() // Connecting to the server - await client.sendCode({ - apiId: API_ID, - apiHash: API_HASH - }, phone) -} export function App () { - const initialState = { phoneNumber: '', password: '', code: '' } - - const [{ phoneNumber, password, code }, setAuthInfo] = useState(initialState) + const [{ phoneNumber, password, phoneCode }, setAuthInfo] = useState(initialState) + + async function sendCodeHandler () { + await client.connect() // Connecting to the server + await client.sendCode( + { + apiId: API_ID, + apiHash: API_HASH + }, + phoneNumber + ) + } - function onInputChangeHandler ({ target: { name, value } }) { - setAuthInfo(authInfo => ({ ...authInfo, [name]: value })) + async function clientStartHandler () { + await client.start({ phoneNumber, password: userAuthParamCallback(password), phoneCode: userAuthParamCallback(phoneCode), onError: () => {} }) + await client.sendMessage('me', { message: "You're successfully logged in!" }) } - function onSendCodeHandler () { - sendCode(phoneNumber) + function inputChangeHandler ({ target: { name, value } }) { + setAuthInfo((authInfo) => ({ ...authInfo, [name]: value })) } - function onStartClientHandler () { - startClient(phoneNumber, password, code) + function userAuthParamCallback (param) { + return async function () { + return await new (resolve => { + resolve(param) + })() + } } return ( @@ -70,30 +63,26 @@ export function App () { type="text" name="phoneNumber" value={phoneNumber} - onChange={onInputChangeHandler} + onChange={inputChangeHandler} /> + - + + + - + + ) } @@ -107,73 +96,51 @@ export function App () { import React, { type BaseSyntheticEvent, useState } from 'react' import { TelegramClient } from 'telegram' -import { type UserAuthParams } from 'telegram/client/auth' import { StringSession } from 'telegram/sessions' -const SESSION = new StringSession('') //create a new StringSession, also you can use StoreSession -const API_ID = 00000000 -const API_HASH = '111eb4dc492d4ae475d575c00bf0aa11' - interface IInitialState { phoneNumber: string password: string - code: string + phoneCode: string } -interface IApplicationData { - session: StringSession - apiId: number - apiHash: string -} - -function createClient ({ session, apiId, apiHash }: IApplicationData): TelegramClient { - return new TelegramClient(session, apiId, apiHash, { connectionRetries: 5 }) -} +const SESSION = new StringSession('') +const API_ID = 29653895 // put your API id here +const API_HASH = '7a697a86bfec99dd0ab11d8285d68060' // put your API hash here -const client = createClient({ session: SESSION, apiId: API_ID, apiHash: API_HASH }) // Immediately create a client using your application data - -async function startClient ({ phoneNumber, password, phoneCode }: Omit): Promise { - await client.start({phoneNumber, password, phoneCode, onError: () => {} }) -} +const client = new TelegramClient(SESSION, API_ID, API_HASH, { connectionRetries: 5 }) // Immediately create a client using your application data -async function sendCode (phone: string): Promise { - await client.connect() // Connecting to the server - await client.sendCode( - { - apiId: API_ID, - apiHash: API_HASH - }, - phone - ) -} +const initialState: IInitialState = { phoneNumber: '', password: '', phoneCode: '' } // Initialize component initial state export function App (): JSX.Element { - const initialState: IInitialState = { phoneNumber: '', password: '', code: '' } - - const [{ phoneNumber, password, code }, setAuthInfo] = useState(initialState) - - function onInputChangeHandler ({ target: { name, value } }: BaseSyntheticEvent): void { - setAuthInfo(authInfo => ({ ...authInfo, [name]: value })) - } - - async function onSendCodeHandler (): Promise { - await sendCode(phoneNumber) + const [{ phoneNumber, password, phoneCode }, setAuthInfo] = useState(initialState) + + async function sendCodeHandler (): Promise { + await client.connect() // Connecting to the server + await client.sendCode( + { + apiId: API_ID, + apiHash: API_HASH + }, + phoneNumber + ) } - async function onStartClientHandler (): Promise { - await startClient({ phoneNumber, password: passwordCallback, phoneCode: codeCallback }) + async function clientStartHandler (): Promise { + await client.start({ phoneNumber, password: userAuthParamCallback(password), phoneCode: userAuthParamCallback(phoneCode), onError: () => {} }) + await client.sendMessage('me', { message: "You're successfully logged in!" }) } - async function passwordCallback (): Promise { - return await new Promise(resolve => { - resolve(password) - }) + function inputChangeHandler ({ target: { name, value } }: BaseSyntheticEvent): void { + setAuthInfo((authInfo) => ({ ...authInfo, [name]: value })) } - async function codeCallback (): Promise { - return await new Promise(resolve => { - resolve(code) - }) + function userAuthParamCallback (param: T): () => Promise { + return async function () { + return await new Promise(resolve => { + resolve(param) + }) + } } return ( @@ -182,30 +149,26 @@ export function App (): JSX.Element { type="text" name="phoneNumber" value={phoneNumber} - onChange={onInputChangeHandler} + onChange={inputChangeHandler} /> + - + + + - + + ) } @@ -226,10 +189,11 @@ After successfully launching the client, you can call a function client.session. Note that we must save only session, having a valid session, you can specify random API_ID and API_HASH */ -async function startClient (phoneNumber, password, phoneCode) { - await client.start({ phoneNumber, password, phoneCode, onError: () => {} }) - localStorage.setItem('session', JSON.stringify(client.session.save())) // Save session to local storage -} +async function clientStartHandler () { + await client.start({ phoneNumber, password: userAuthParamCallback(password), phoneCode: userAuthParamCallback(phoneCode), onError: () => {} }) + localStorage.setItem('session', JSON.stringify(client.session.save())) // Save session to local storage + await client.sendMessage('me', { message: "You're successfully logged in!" }) + } /* Now we can get the saved session and run the client without re-authorization @@ -237,11 +201,7 @@ Now we can get the saved session and run the client without re-authorization const SESSION = new StringSession(JSON.parse(localStorage.getItem('session'))) // Get session from local storage -function createClient (session, apiId, apiHash) { - return new TelegramClient(session, apiId, apiHash, { connectionRetries: 5 } ) -} - -const client = createClient(SESSION, API_ID, API_HASH) // Immediately create a client using your application data +const client = new TelegramClient(SESSION, API_ID, API_HASH, { connectionRetries: 5 }) // Immediately create a client using your application data ``` ::: @@ -254,10 +214,11 @@ After successfully launching the client, you can call a function client.session. Note that we must save only session, having a valid session, you can specify random API_ID and API_HASH */ -async function startClient ({ phoneNumber, password, phoneCode }: Omit): Promise { - await client.start({ phoneNumber, password, phoneCode, onError: () => {} }) - localStorage.setItem('session', JSON.stringify(client.session.save())) // Save session to local storage -} +async function clientStartHandler (): Promise { + await client.start({ phoneNumber, password: userAuthParamCallback(password), phoneCode: userAuthParamCallback(phoneCode), onError: () => {} }) + localStorage.setItem('session', JSON.stringify(client.session.save())) // Save session to local storage + await client.sendMessage('me', { message: "You're successfully logged in!" }) + } /* Now we can get the saved session and run the client without re-authorization @@ -265,11 +226,7 @@ Now we can get the saved session and run the client without re-authorization const SESSION = new StringSession(JSON.parse(localStorage.getItem('session') as string)) // Get session from local storage -function createClient ({ session, apiId, apiHash }: IApplicationData): TelegramClient { - return new TelegramClient(session, apiId, apiHash, { connectionRetries: 5 } ) -} - -const client = createClient(SESSION, API_ID, API_HASH) // Immediately create a client using your application data +const client = new TelegramClient(SESSION, API_ID, API_HASH, { connectionRetries: 5 }) // Immediately create a client using your application data ``` ::: From a2b8c17323c0a81147409942d995544ca7acf452 Mon Sep 17 00:00:00 2001 From: aFriendys <104866675+aFriendys@users.noreply.github.com> Date: Sun, 28 May 2023 14:26:40 +0300 Subject: [PATCH 07/10] never mind --- src/introduction/integration-with-react.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/introduction/integration-with-react.md b/src/introduction/integration-with-react.md index 625d268e..4d8afe80 100644 --- a/src/introduction/integration-with-react.md +++ b/src/introduction/integration-with-react.md @@ -19,8 +19,8 @@ import { TelegramClient } from 'telegram' import { StringSession } from 'telegram/sessions' const SESSION = new StringSession('') -const API_ID = 29653895 // put your API id here -const API_HASH = '7a697a86bfec99dd0ab11d8285d68060' // put your API hash here +const API_ID = 00000000 // put your API id here +const API_HASH = '7a000a86bfec00dd0ab11d0000d00000' // put your API hash here const client = new TelegramClient(SESSION, API_ID, API_HASH, { connectionRetries: 5 }) // Immediately create a client using your application data From e5c9c99a00b16f411ebf338951a2cda5b908cbfb Mon Sep 17 00:00:00 2001 From: aFriendys <104866675+aFriendys@users.noreply.github.com> Date: Sun, 28 May 2023 14:45:55 +0300 Subject: [PATCH 08/10] Error handling part --- src/introduction/integration-with-react.md | 27 +++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/src/introduction/integration-with-react.md b/src/introduction/integration-with-react.md index 4d8afe80..080c25a2 100644 --- a/src/introduction/integration-with-react.md +++ b/src/introduction/integration-with-react.md @@ -1,5 +1,4 @@ # Integration with React - In this article, we will look at the combination of gramjs and React After creating the project and installing all the necessary dependencies, you can use gramjs in your projects @@ -231,3 +230,29 @@ const client = new TelegramClient(SESSION, API_ID, API_HASH, { connectionRetries ::: :::: + +## Catching errors +In order to avoid crashes of the application, it is very important to catch errors in all critical parts of the application, for example in the case below + +```js +async function clientStartHandler () { + await client.start({ phoneNumber, password: userAuthParamCallback(password), phoneCode: userAuthParamCallback(phoneCode), onError: () => {} }) + localStorage.setItem('session', JSON.stringify(client.session.save())) // Save session to local storage + await client.sendMessage('me', { message: "You're successfully logged in!" }) + } +``` + +For example, if you try to start the client using an incorrect phone number or send a message to a non-existent user, your application may break or work incorrectly. You can fix this by using try-catch construct and handling the error + +```js +async function clientStartHandler () { + try { + await client.start({ phoneNumber, password: userAuthParamCallback(password), phoneCode: userAuthParamCallback(phoneCode), onError: () => {} }) + localStorage.setItem('session', JSON.stringify(client.session.save())) // Save session to local storage + await client.sendMessage('me', { message: "You're successfully logged in!" }) + } catch (error) { + console.dir(error) + // Error handling logic + } + } +``` From a57868eede6431976eff46303f38741459b9d323 Mon Sep 17 00:00:00 2001 From: aFriendys <104866675+aFriendys@users.noreply.github.com> Date: Sun, 28 May 2023 14:55:50 +0300 Subject: [PATCH 09/10] little fixes --- src/introduction/integration-with-react.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/introduction/integration-with-react.md b/src/introduction/integration-with-react.md index 080c25a2..fbc69ca3 100644 --- a/src/introduction/integration-with-react.md +++ b/src/introduction/integration-with-react.md @@ -17,9 +17,9 @@ import React, { useState } from 'react' import { TelegramClient } from 'telegram' import { StringSession } from 'telegram/sessions' -const SESSION = new StringSession('') +const SESSION = new StringSession('') //create a new StringSession, also you can use StoreSession const API_ID = 00000000 // put your API id here -const API_HASH = '7a000a86bfec00dd0ab11d0000d00000' // put your API hash here +const API_HASH = '111eb4dc492d4ae475d575c00bf0aa11' // put your API hash here const client = new TelegramClient(SESSION, API_ID, API_HASH, { connectionRetries: 5 }) // Immediately create a client using your application data @@ -103,9 +103,9 @@ interface IInitialState { phoneCode: string } -const SESSION = new StringSession('') +const SESSION = new StringSession('') //create a new StringSession, also you can use StoreSession const API_ID = 29653895 // put your API id here -const API_HASH = '7a697a86bfec99dd0ab11d8285d68060' // put your API hash here +const API_HASH = '111eb4dc492d4ae475d575c00bf0aa11' // put your API hash here const client = new TelegramClient(SESSION, API_ID, API_HASH, { connectionRetries: 5 }) // Immediately create a client using your application data From 730d2a5c415e9a3db4c8c8181a0c28ce7224b7e7 Mon Sep 17 00:00:00 2001 From: aFriendys <104866675+aFriendys@users.noreply.github.com> Date: Sun, 28 May 2023 14:57:33 +0300 Subject: [PATCH 10/10] little fixes --- src/introduction/integration-with-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/introduction/integration-with-react.md b/src/introduction/integration-with-react.md index fbc69ca3..844a0105 100644 --- a/src/introduction/integration-with-react.md +++ b/src/introduction/integration-with-react.md @@ -104,7 +104,7 @@ interface IInitialState { } const SESSION = new StringSession('') //create a new StringSession, also you can use StoreSession -const API_ID = 29653895 // put your API id here +const API_ID = 00000000 // put your API id here const API_HASH = '111eb4dc492d4ae475d575c00bf0aa11' // put your API hash here const client = new TelegramClient(SESSION, API_ID, API_HASH, { connectionRetries: 5 }) // Immediately create a client using your application data