diff --git a/src/component/homeButton/style.module.css b/src/component/homeButton/style.module.css index a13deab..87e1b9e 100644 --- a/src/component/homeButton/style.module.css +++ b/src/component/homeButton/style.module.css @@ -94,6 +94,6 @@ body { } .receiveInputClose { - position: absolute; + position: absolute !important; right: 20px; } diff --git a/src/component/signin/countriesInput.tsx b/src/component/signin/countriesInput.tsx index 2f15d5c..8293782 100644 --- a/src/component/signin/countriesInput.tsx +++ b/src/component/signin/countriesInput.tsx @@ -15,23 +15,24 @@ function CountriesInput(props: { let [countriesList, setCountriesList] = useState([] as Country[]); useEffect(() => { - Telegram.call("help.getCountriesList").then((result: any) => { - console.log("country:", result); - let resp: Country[] = []; - result.countries.map((country: any) => { - resp.push({ - default_name: country.default_name, - country_code: country.country_codes[0].country_code, - // patterns: - // country.country_codes[0]?.patterns.length > 0 - // ? country.country_codes[0]?.patterns[0] - // : "", - iso2: country.iso2, + Telegram.call("help.getCountriesList", undefined, undefined, true).then( + (result: any) => { + let resp: Country[] = []; + result.countries.map((country: any) => { + resp.push({ + default_name: country.default_name, + country_code: country.country_codes[0].country_code, + // patterns: + // country.country_codes[0]?.patterns.length > 0 + // ? country.country_codes[0]?.patterns[0] + // : "", + iso2: country.iso2, + }); + return true; }); - return true; - }); - setCountriesList(resp); - }); + setCountriesList(resp); + } + ); }, []); return ( diff --git a/src/global.d.ts b/src/global.d.ts index 431be8b..2fd6026 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -1,2 +1,9 @@ declare module "mtproton/envs/browser"; declare module "mtproton/src/utils/common"; +declare module "mtproton/src/index"; +declare module "mtproton/envs/browser/sha1"; +declare module "mtproton/envs/browser/sha256"; +declare module "mtproton/envs/browser/pbkdf2"; +declare module "mtproton/envs/browser/transport"; +declare module "mtproton/envs/browser/get-random-bytes"; +declare module "mtproton/envs/browser/get-local-storage"; diff --git a/src/index.tsx b/src/index.tsx index 953cb31..cdade08 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,15 +4,19 @@ import reportWebVitals from "./reportWebVitals"; import Dashboard from "./pages/dashboard"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Home from "./pages/home"; +import { Provider } from "react-redux"; +import store from "./store"; ReactDOM.render( - - - } /> - } /> - - + + + + } /> + } /> + + + , document.getElementById("root") ); diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index 72eba2d..b484ba2 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -1,6 +1,31 @@ import style from "./style.module.css"; import { Link } from "react-router-dom"; +import React, { useState } from "react"; +import { + Divider, + IconButton, + Menu, + MenuItem, + Paper, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, +} from "@mui/material"; +import MoreHorizIcon from "@mui/icons-material/MoreHoriz"; + +enum ContentType { + File, + Share, + SafeBox, + Recycled, +} + function Login() { + let [type, setType] = useState(ContentType.File); + return (
-
  • 文件
    • -
  • 分享
    • -
  • 保险箱
    • -
  • 回收站
    • +
  • setType(ContentType.File)}>文件
    • +
  • setType(ContentType.Share)}>分享
    • +
  • setType(ContentType.SafeBox)}>保险箱
    • +
  • setType(ContentType.Recycled)}>回收站
    • LOGO
    -
    +
    + {type === ContentType.File && } + {type === ContentType.Share && } + {type === ContentType.SafeBox && } + {type === ContentType.Recycled && } +
    ); } +function File() { + let [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl); + + let handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + let handleClose = () => { + setAnchorEl(null); + }; + return ( +
    + + + + + + 名称 + 修改时间 + 大小 + + + + + + xxx + + + + + 2020-01-01 12:12:12 + 128MB + + +
    +     +     + + 下载 + 分享 + + 重命名 + 移动 + 移至保险箱 + 查看详细信息 + 删除 + +
    + ); +} + +function Share() { + return
    分享
    ; +} + +function SafeBox() { + return
    保险箱
    ; +} + +function Recycled() { + return
    回收站
    ; +} + export default Login; diff --git a/src/pages/dashboard/style.module.css b/src/pages/dashboard/style.module.css index 33b280c..869a8c4 100644 --- a/src/pages/dashboard/style.module.css +++ b/src/pages/dashboard/style.module.css @@ -32,3 +32,10 @@ font-size: 48px; cursor: pointer; } + +.content { + display: flex; + flex-direction: column; + width: 100%; + height: 100vh; +} \ No newline at end of file diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 5dd8faf..dfe0a71 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -5,24 +5,33 @@ import style from "./style.module.css"; import { Box, Drawer } from "@mui/material"; import { HomeMenu } from "../../component/homeMenu"; import { HomeSignIn } from "../../component/homeSignIn"; +import { useDispatch } from "react-redux"; +import { useSelectorIsLoggedIn, useSelectorUser } from "../../store/user"; +import { login } from "../../store/user"; function Home() { - let [isSignIn, setIsSignIn] = useState(false); + // let [isSignIn, setIsSignIn] = useState(false); + const dispatch = useDispatch(); + let isSignIn = useSelectorIsLoggedIn(); let [isOpenSignIn, setIsOpenSignIn] = useState(false); + let user = useSelectorUser(); - useEffect(function () { - getMe() - .then(function (user) { - // 已登录 - setIsSignIn(true); - }) - .catch(function (error) { - if (error.code === 401) { - // Unauthorized - } - console.log(error); - }); - }, []); + useEffect( + function () { + getMe() + .then(function (user) { + // 已登录 + dispatch(login(user)); + }) + .catch(function (error) { + if (error.code === 401) { + // Unauthorized + } + console.log(error); + }); + }, + [dispatch] + ); return (
    @@ -34,7 +43,6 @@ function Home() { }} />
    - - + {user.user &&
    {user.user.username}
    } {}, + user: userReducer, }, }); diff --git a/src/store/fileList.ts b/src/store/fileList.ts new file mode 100644 index 0000000..32cfcd7 --- /dev/null +++ b/src/store/fileList.ts @@ -0,0 +1,29 @@ +import { createSlice } from "@reduxjs/toolkit"; +import { useSelector } from "react-redux"; +import storage from "../storage"; + +const FileList = createSlice({ + name: "fileList", + initialState: { + fileList: [], + }, + reducers: { + updateOfStorage: (state) => { + state.fileList = storage().getObject("fileList"); + }, + + addFileOfStorage: (state, action) => { + // @ts-ignore + state.fileList.push(action.payload); + storage().setObject("fileList", state.fileList); + }, + }, +}); + +export function useSelectorFileList() { + return useSelector((state: any) => state.fileList); +} + +export const { updateOfStorage } = FileList.actions; + +export default FileList.reducer; diff --git a/src/store/user.ts b/src/store/user.ts new file mode 100644 index 0000000..eb7a1e8 --- /dev/null +++ b/src/store/user.ts @@ -0,0 +1,32 @@ +import { createSlice } from "@reduxjs/toolkit"; +import { useSelector } from "react-redux"; + +const User = createSlice({ + name: "user", + initialState: { + isLoggedIn: false, + user: {}, + }, + reducers: { + login: (state, action) => { + state.isLoggedIn = true; + state.user = action.payload; + }, + logout: (state) => { + state.isLoggedIn = false; + state.user = {}; + }, + }, +}); + +export function useSelectorUser() { + return useSelector((state: any) => state.user.user); +} + +export function useSelectorIsLoggedIn() { + return useSelector((state: any) => state.user.isLoggedIn); +} + +export const { login, logout } = User.actions; + +export default User.reducer; diff --git a/src/telegram/telegram.ts b/src/telegram/telegram.ts index 40cfca3..eb70391 100644 --- a/src/telegram/telegram.ts +++ b/src/telegram/telegram.ts @@ -1,26 +1,59 @@ import Client from "mtproton/envs/browser"; import { rand_id } from "../utils/rand"; import { obj } from "../utils/log"; +import makeMTProto from "mtproton/src/index"; +import SHA1 from "mtproton/envs/browser/sha1"; +import SHA256 from "mtproton/envs/browser/sha256"; +import PBKDF2 from "mtproton/envs/browser/pbkdf2"; +import Transport from "mtproton/envs/browser/transport"; +import getRandomBytes from "mtproton/envs/browser/get-random-bytes"; +import getLocalStorage from "mtproton/envs/browser/get-local-storage"; class TelegramHelper { private client: any; - constructor(appID: number, appHash: string) { - this.client = new Client({ - api_id: appID, - api_hash: appHash, - test: true, - }); + constructor(appID: number, appHash: string, custom: boolean = false) { + if (custom) { + this.client = new Client({ + api_id: appID, + api_hash: appHash, + test: true, + }); + } else { + let createTransport = function (dc: any, crypto: any) { + return new Transport(dc, crypto); + }; + + const MTProto = makeMTProto({ + SHA1, + SHA256, + PBKDF2, + getRandomBytes, + getLocalStorage, + createTransport, + }); + + this.client = new MTProto({ + api_id: appID, + api_hash: appHash, + test: true, + }); + } this.client.setDefaultDc(1); } - async call(method: string, params?: object, options?: object): Promise { + async call( + method: string, + params?: object, + options?: object, + hideLog: boolean = false + ): Promise { try { - console.dir(`${method} req\n${obj(params)}`); + !hideLog && console.dir(`${method} req\n${obj(params)}`); let resp = await this.client.call(method, params, options); - console.dir(`${method} resp\n${obj(resp)}`); + !hideLog && console.dir(`${method} resp\n${obj(resp)}`); return resp; } catch (error) { - console.log(`${method} error:`, error); + !hideLog && console.log(`${method} error:`, error); // @ts-ignore const { error_code, error_message } = error;