update

src/App.tsx

@@ -8,7 +8,7 @@ import {
   Paper,
   TextField,
 } from "@mui/material";
-import CountriesInput, { Country } from "./component/countriesInput";
+import CountriesInput, { Country } from "./component/signin/countriesInput";
 import Telegram, {
   inputFile,
   uploadBigFile,
@@ -20,175 +20,7 @@ import { User } from "./user";
 import { Download, Upload } from "@mui/icons-material";
 
 function App() {
-  let [phone, setPhone] = useState("");
+  return <div>App</div>;
-  let [code, setCode] = useState("");
-  let [phoneCodeHash, setPhoneCodeHash] = useState("");
-  let [country, setCountry] = useState({} as Country | null);
-  let [user, setUser] = useState({} as User);
-  let [fileDocument, setFileDocument] = useState({} as any);
-  const [fileList, setFileList] = useState([]);
-
-  let sendCode = () => {
-    console.log("phone:", phone);
-    Telegram.call("auth.sendCode", {
-      phone_number: (country ? country.country_code : "") + phone,
-      settings: {
-        _: "codeSettings",
-      },
-    })
-      .then((result: any) => {
-        console.log("auth.sendCode:", result);
-        setPhoneCodeHash(result.phone_code_hash);
-      })
-      .catch((error: any) => {
-        console.log("auth.sendCode:", error);
-      });
-  };
-
-  let login = () => {
-    console.log("auth code:", code);
-    console.log("auth hash code:", phoneCodeHash);
-    Telegram.call("auth.signIn", {
-      phone_number: (country ? country.country_code : "") + phone,
-      phone_code_hash: phoneCodeHash,
-      phone_code: code,
-    })
-      .then((result: any) => {
-        console.log("auth.signIn:", result);
-        setUser(result.user);
-        SendMessage();
-      })
-      .catch((error: any) => {
-        console.log("auth.signIn:", error);
-      });
-  };
-
-  let SendMessage = () => {
-    Telegram.call("messages.sendMessage", {
-      peer: {
-        _: "inputPeerSelf",
-      },
-      message: "ice",
-      random_id: (10000 + Math.random() * (100000 - 10000))
-        .toFixed()
-        .toString(),
-    })
-      .then((result: any) => {
-        console.log("messages.sendMessage:", result);
-      })
-      .catch((error: any) => {
-        console.log("messages.sendMessage:", error);
-      });
-  };
-
-  let uploadFile = () => {
-    console.log("uploadFile:", fileList);
-    // @ts-ignore
-    uploadBigFile(fileList[0]?.bytes)
-      .then((file) => {
-        console.log("uploadFile ret:", file);
-        sendFile(
-          // @ts-ignore
-          inputFile(file.file_id, file.total_part, fileList[0].name),
-          // @ts-ignore
-          fileList[0].type
-        ).then((result) => {
-          console.log("sendFile ret:", result);
-          setFileDocument(result.updates[1].message.media);
-        });
-      })
-      .catch((error) => {
-        console.log("uploadFile error:", error);
-        alert(error);
-      });
-  };
-
-  let changeFile = (e: any) => {
-    console.log(e.target.files);
-    const reader = new FileReader();
-    reader.onload = function (event) {
-      if (event.target && event.target.result) {
-        let bytes = event.target.result;
-        console.log(bytes);
-        e.target.files[0].bytes = bytes;
-        setFileList(e.target.files);
-      }
-    };
-    reader.readAsArrayBuffer(e.target.files[0]);
-  };
-
-  let download = () => {
-    console.log("download:", fileDocument);
-    downloadFile(fileDocument).catch((error) => {
-      console.log("download error:", error);
-      alert(error);
-    });
-  };
-
-  return (
-    <Container maxWidth="sm">
-      <Paper
-        elevation={3}
-        sx={{
-          padding: "150px 50px",
-          position: "absolute",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "space-around",
-          height: "40%",
-        }}
-      >
-        <CountriesInput
-          onChange={(country) => {
-            console.log(country);
-            setCountry(country);
-          }}
-        />
-        <TextField
-          label={"Phone Number"}
-          InputProps={{
-            startAdornment: (
-              <InputAdornment position="start">
-                {country && country.country_code
-                  ? "+" + country.country_code
-                  : ""}
-              </InputAdornment>
-            ),
-          }}
-          value={phone}
-          onChange={(e) => {
-            console.log(e.target.value);
-            setPhone(e.target.value);
-          }}
-        />
-        <TextField
-          label={"Auth Code"}
-          value={code}
-          onChange={(e) => {
-            console.log(e.target.value);
-            setCode(e.target.value);
-          }}
-        />
-        {phoneCodeHash === "" ? (
-          <Button variant={"contained"} onClick={sendCode}>
-            发送验证码
-          </Button>
-        ) : (
-          <Button variant={"contained"} onClick={login} endIcon={<SendIcon />}>
-            登录
-          </Button>
-        )}
-
-        <Input type="file" onChange={changeFile} />
-        <Button variant={"contained"} onClick={uploadFile} endIcon={<Upload />}>
-          上传
-        </Button>
-        <Button variant={"contained"} onClick={download} endIcon={<Download />}>
-          下载
-        </Button>
-      </Paper>
-    </Container>
-  );
 }
 
 export default App;

src/component/signin/countriesInput.tsx

@@ -1,6 +1,6 @@
 import { Autocomplete, Box, TextField } from "@mui/material";
 import React, { useEffect, useState } from "react";
-import Telegram from "../telegram/telegram";
+import Telegram from "../../telegram/telegram";
 
 export interface Country {
   default_name: string;

src/component/signin/index.tsx

@@ -0,0 +1,184 @@
+import CountriesInput, { Country } from "./countriesInput";
+import { Button, Input, InputAdornment, Paper, TextField } from "@mui/material";
+import SendIcon from "@mui/icons-material/Send";
+import { Download, Upload } from "@mui/icons-material";
+import React, { useState } from "react";
+import { User } from "../../user";
+import Telegram, {
+  downloadFile,
+  inputFile,
+  sendFile,
+  uploadBigFile,
+} from "../../telegram/telegram";
+
+function Signin() {
+  let [phone, setPhone] = useState("");
+  let [code, setCode] = useState("");
+  let [phoneCodeHash, setPhoneCodeHash] = useState("");
+  let [country, setCountry] = useState({} as Country | null);
+  let [user, setUser] = useState({} as User);
+  let [fileDocument, setFileDocument] = useState({} as any);
+  const [fileList, setFileList] = useState([]);
+
+  let sendCode = () => {
+    console.log("phone:", phone);
+    Telegram.call("auth.sendCode", {
+      phone_number: (country ? country.country_code : "") + phone,
+      settings: {
+        _: "codeSettings",
+      },
+    })
+      .then((result: any) => {
+        console.log("auth.sendCode:", result);
+        setPhoneCodeHash(result.phone_code_hash);
+      })
+      .catch((error: any) => {
+        console.log("auth.sendCode:", error);
+      });
+  };
+
+  let login = () => {
+    console.log("auth code:", code);
+    console.log("auth hash code:", phoneCodeHash);
+    Telegram.call("auth.signIn", {
+      phone_number: (country ? country.country_code : "") + phone,
+      phone_code_hash: phoneCodeHash,
+      phone_code: code,
+    })
+      .then((result: any) => {
+        console.log("auth.signIn:", result);
+        setUser(result.user);
+        SendMessage();
+      })
+      .catch((error: any) => {
+        console.log("auth.signIn:", error);
+      });
+  };
+
+  let SendMessage = () => {
+    Telegram.call("messages.sendMessage", {
+      peer: {
+        _: "inputPeerSelf",
+      },
+      message: "ice",
+      random_id: (10000 + Math.random() * (100000 - 10000))
+        .toFixed()
+        .toString(),
+    })
+      .then((result: any) => {
+        console.log("messages.sendMessage:", result);
+      })
+      .catch((error: any) => {
+        console.log("messages.sendMessage:", error);
+      });
+  };
+
+  let uploadFile = () => {
+    console.log("uploadFile:", fileList);
+    // @ts-ignore
+    uploadBigFile(fileList[0]?.bytes)
+      .then((file) => {
+        console.log("uploadFile ret:", file);
+        sendFile(
+          // @ts-ignore
+          inputFile(file.file_id, file.total_part, fileList[0].name),
+          // @ts-ignore
+          fileList[0].type
+        ).then((result) => {
+          console.log("sendFile ret:", result);
+          setFileDocument(result.updates[1].message.media);
+        });
+      })
+      .catch((error) => {
+        console.log("uploadFile error:", error);
+        alert(error);
+      });
+  };
+
+  let changeFile = (e: any) => {
+    console.log(e.target.files);
+    const reader = new FileReader();
+    reader.onload = function (event) {
+      if (event.target && event.target.result) {
+        let bytes = event.target.result;
+        console.log(bytes);
+        e.target.files[0].bytes = bytes;
+        setFileList(e.target.files);
+      }
+    };
+    reader.readAsArrayBuffer(e.target.files[0]);
+  };
+
+  let download = () => {
+    console.log("download:", fileDocument);
+    downloadFile(fileDocument).catch((error) => {
+      console.log("download error:", error);
+      alert(error);
+    });
+  };
+
+  return (
+    <Paper
+      elevation={3}
+      sx={{
+        padding: "150px 50px",
+        position: "absolute",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-around",
+        height: "40%",
+      }}
+    >
+      <CountriesInput
+        onChange={(country) => {
+          console.log(country);
+          setCountry(country);
+        }}
+      />
+      <TextField
+        label={"Phone Number"}
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              {country && country.country_code
+                ? "+" + country.country_code
+                : ""}
+            </InputAdornment>
+          ),
+        }}
+        value={phone}
+        onChange={(e) => {
+          console.log(e.target.value);
+          setPhone(e.target.value);
+        }}
+      />
+      <TextField
+        label={"Auth Code"}
+        value={code}
+        onChange={(e) => {
+          console.log(e.target.value);
+          setCode(e.target.value);
+        }}
+      />
+      {phoneCodeHash === "" ? (
+        <Button variant={"contained"} onClick={sendCode}>
+          发送验证码
+        </Button>
+      ) : (
+        <Button variant={"contained"} onClick={login} endIcon={<SendIcon />}>
+          登录
+        </Button>
+      )}
+
+      <Input type="file" onChange={changeFile} />
+      <Button variant={"contained"} onClick={uploadFile} endIcon={<Upload />}>
+        上传
+      </Button>
+      {/*<Button variant={"contained"} onClick={download} endIcon={<Download />}>*/}
+      {/*  下载*/}
+      {/*</Button>*/}
+    </Paper>
+  );
+}
+
+export default Signin;

src/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
-import Login from "./pages/login";
+import Dashboard from "./pages/dashboard";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Home from "./pages/home";
 
@@ -11,8 +11,7 @@ ReactDOM.render(
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="/home" element={<Home />} />
+        <Route path="/login" element={<Dashboard />} />
-        <Route path="/login" element={<Login />} />
       </Routes>
     </BrowserRouter>
   </React.StrictMode>,

src/pages/dashboard/index.tsx

@@ -0,0 +1,5 @@
+function Login() {
+  return <div>文件目录</div>;
+}
+
+export default Login;

src/pages/home/index.tsx

@@ -1,13 +1,26 @@
-import Telegram from "../../telegram/telegram";
+import { useEffect, useState } from "react";
+import { getMe } from "../../telegram/user";
+import SignIn from "component/signin";
 
 function Home() {
-  Telegram.call("sendMessage", {
+  let [isSignIn, setIsSignIn] = useState(false);
-    chat_id: "",
+
-    text: "Hello World",
+  useEffect(function () {
+    getMe()
+      .then(function (user) {
+        console.log(user);
+      })
+      .catch(function (error) {
+        if (error.code === 401) {
+          // Unauthorized
+        }
+        console.log(error);
       });
+  }, []);
+
   return (
     <div>
-      <h1>Hello Next.js</h1>
+      <div>{!isSignIn ? <SignIn /> : <div>Home</div>}</div>
     </div>
   );
 }

src/pages/login/index.tsx

@@ -1,21 +0,0 @@
-import { useEffect } from "react";
-import { getMe } from "../../telegram/user";
-
-function Login() {
-  useEffect(function () {
-    getMe()
-      .then(function (user) {
-        console.log(user);
-      })
-      .catch(function (error) {
-        if (error.code === 401) {
-          // Unauthorized
-        }
-        console.log(error);
-      });
-  }, []);
-
-  return <div>登录</div>;
-}
-
-export default Login;

src/telegram/telegram.ts

@@ -7,7 +7,7 @@ class TelegramHelper {
     this.client = new Client({
       api_id: appID,
       api_hash: appHash,
-      test: false,
+      test: true,
     });
     this.client.setDefaultDc(1);
   }

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "baseUrl": "src",
     "target": "es5",
     "lib": [
       "dom",