From 78c3c929058efb8ed9480c79dcf3ff4c474ee615 Mon Sep 17 00:00:00 2001 From: icechen Date: Mon, 21 Mar 2022 04:29:58 +0800 Subject: [PATCH] update --- package.json | 2 +- pnpm-lock.yaml | 118 +++++++++++----------- src/App.tsx | 16 +-- src/pages/home/index.tsx | 208 +++++++++++++++++++++++++++++++-------- src/store.ts | 11 +++ src/store/user.ts | 40 ++++++++ src/telegram/telegram.ts | 8 +- vite.config.ts | 12 ++- 8 files changed, 303 insertions(+), 112 deletions(-) create mode 100644 src/store.ts create mode 100644 src/store/user.ts diff --git a/package.json b/package.json index 1c6453f..20ae72e 100644 --- a/package.json +++ b/package.json @@ -8,12 +8,12 @@ "preview": "vite preview" }, "dependencies": { - "@react-spring/web": "^9.4.4", "@reduxjs/toolkit": "^1.8.0", "autoprefixer": "^10.4.2", "axios": "^0.26.1", "daisyui": "^2.6.4", "filesize": "^8.0.7", + "framer-motion": "^6.2.8", "mtproton": "^6.0.0", "postcss": "^8.4.8", "prettier-plugin-tailwindcss": "^0.1.8", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ea0a794..bf8f6a5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,7 +1,6 @@ lockfileVersion: 5.3 specifiers: - '@react-spring/web': ^9.4.4 '@redux-devtools/core': ^3.11.0 '@reduxjs/toolkit': ^1.8.0 '@tailwindcss/forms': ^0.5.0 @@ -12,6 +11,7 @@ specifiers: axios: ^0.26.1 daisyui: ^2.6.4 filesize: ^8.0.7 + framer-motion: ^6.2.8 mtproton: ^6.0.0 postcss: ^8.4.8 prettier: ^2.5.1 @@ -26,12 +26,12 @@ specifiers: vite: ^2.8.6 dependencies: - '@react-spring/web': 9.4.4_react-dom@17.0.2+react@17.0.2 '@reduxjs/toolkit': 1.8.0_react-redux@7.2.6+react@17.0.2 autoprefixer: 10.4.2_postcss@8.4.8 axios: 0.26.1 daisyui: 2.6.4_554c024960c0d85659bdf1e5e950b7f7 filesize: 8.0.7 + framer-motion: 6.2.8_react-dom@17.0.2+react@17.0.2 mtproton: 6.0.0 postcss: 8.4.8 prettier-plugin-tailwindcss: 0.1.8_prettier@2.5.1 @@ -325,6 +325,19 @@ packages: to-fast-properties: 2.0.0 dev: true + /@emotion/is-prop-valid/0.8.8: + resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==} + requiresBuild: true + dependencies: + '@emotion/memoize': 0.7.4 + dev: false + optional: true + + /@emotion/memoize/0.7.4: + resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==} + dev: false + optional: true + /@jridgewell/resolve-uri/3.0.5: resolution: {integrity: sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==} engines: {node: '>=6.0.0'} @@ -362,60 +375,6 @@ packages: fastq: 1.13.0 dev: false - /@react-spring/animated/9.4.4_react@17.0.2: - resolution: {integrity: sha512-e9xnuBaUTD+NolKikUmrGWjX8AVCPyj1GcEgjgq9E+0sXKv46UY7cm2EmB6mUDTxWIDVKebARY++xT4nGDraBQ==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 - dependencies: - '@react-spring/shared': 9.4.4_react@17.0.2 - '@react-spring/types': 9.4.4 - react: 17.0.2 - dev: false - - /@react-spring/core/9.4.4_react@17.0.2: - resolution: {integrity: sha512-llgb0ljFyjMB0JhWsaFHOi9XFT8n1jBMVs1IFY2ipIBerWIRWrgUmIpakLPHTa4c4jwqTaDSwX90s2a0iN7dxQ==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 - dependencies: - '@react-spring/animated': 9.4.4_react@17.0.2 - '@react-spring/rafz': 9.4.4 - '@react-spring/shared': 9.4.4_react@17.0.2 - '@react-spring/types': 9.4.4 - react: 17.0.2 - dev: false - - /@react-spring/rafz/9.4.4: - resolution: {integrity: sha512-5ki/sQ06Mdf8AuFstSt5zbNNicRT4LZogiJttDAww1ozhuvemafNWEHxhzcULgCPCDu2s7HsroaISV7+GQWrhw==} - dev: false - - /@react-spring/shared/9.4.4_react@17.0.2: - resolution: {integrity: sha512-ySVgScDZlhm/+Iy2smY9i/DDrShArY0j6zjTS/Re1lasKnhq8qigoGiAxe8xMPJNlCaj3uczCqHy3TY9bKRtfQ==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 - dependencies: - '@react-spring/rafz': 9.4.4 - '@react-spring/types': 9.4.4 - react: 17.0.2 - dev: false - - /@react-spring/types/9.4.4: - resolution: {integrity: sha512-KpxKt/D//q/t/6FBcde/RE36LKp8PpWu7kFEMLwpzMGl9RpcexunmYOQJWwmJWtkQjgE1YRr7DzBMryz6La1cQ==} - dev: false - - /@react-spring/web/9.4.4_react-dom@17.0.2+react@17.0.2: - resolution: {integrity: sha512-iJmOLdhcuizriUlu/xqBc5y8KaFts+UI+iC+GxyTwBtzxA9czKiSAZW2ESuhG8stafa3jncwjfTQQp84KN36cw==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - dependencies: - '@react-spring/animated': 9.4.4_react@17.0.2 - '@react-spring/core': 9.4.4_react@17.0.2 - '@react-spring/shared': 9.4.4_react@17.0.2 - '@react-spring/types': 9.4.4 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - dev: false - /@redux-devtools/core/3.11.0_34362ad81a919891909cf289bf01b934: resolution: {integrity: sha512-LE8GF/9pttlIOYJWqOfwbAvYAokRNHCEtCu0DfA11tksYVwIX79CpB2jIJH/KH7n1LzwXPCCl4MOFnyZH4przg==} peerDependencies: @@ -1099,6 +1058,29 @@ packages: resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==} dev: false + /framer-motion/6.2.8_react-dom@17.0.2+react@17.0.2: + resolution: {integrity: sha512-4PtBWFJ6NqR350zYVt9AsFDtISTqsdqna79FvSYPfYDXuuqFmiKtZdkTnYPslnsOMedTW0pEvaQ7eqjD+sA+HA==} + peerDependencies: + react: '>=16.8 || ^17.0.0 || ^18.0.0' + react-dom: '>=16.8 || ^17.0.0 || ^18.0.0' + dependencies: + framesync: 6.0.1 + hey-listen: 1.0.8 + popmotion: 11.0.3 + react: 17.0.2 + react-dom: 17.0.2_react@17.0.2 + style-value-types: 5.0.0 + tslib: 2.3.1 + optionalDependencies: + '@emotion/is-prop-valid': 0.8.8 + dev: false + + /framesync/6.0.1: + resolution: {integrity: sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==} + dependencies: + tslib: 2.3.1 + dev: false + /fsevents/2.3.2: resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} @@ -1152,6 +1134,10 @@ packages: dependencies: function-bind: 1.1.1 + /hey-listen/1.0.8: + resolution: {integrity: sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==} + dev: false + /history/5.3.0: resolution: {integrity: sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==} dependencies: @@ -1385,6 +1371,15 @@ packages: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} engines: {node: '>=8.6'} + /popmotion/11.0.3: + resolution: {integrity: sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==} + dependencies: + framesync: 6.0.1 + hey-listen: 1.0.8 + style-value-types: 5.0.0 + tslib: 2.3.1 + dev: false + /postcss-js/4.0.0_postcss@8.4.8: resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==} engines: {node: ^12 || ^14 || >= 16} @@ -1637,6 +1632,13 @@ packages: engines: {node: '>=0.10.0'} dev: true + /style-value-types/5.0.0: + resolution: {integrity: sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==} + dependencies: + hey-listen: 1.0.8 + tslib: 2.3.1 + dev: false + /supports-color/5.5.0: resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} engines: {node: '>=4'} @@ -1699,6 +1701,10 @@ packages: is-number: 7.0.0 dev: false + /tslib/2.3.1: + resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==} + dev: false + /typedarray-to-buffer/3.1.5: resolution: {integrity: sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==} dependencies: diff --git a/src/App.tsx b/src/App.tsx index 71ce264..bbe77ba 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,15 +1,19 @@ import { BrowserRouter, Route, Routes } from "react-router-dom"; import Home from "./pages/home"; import Dashboard from "./pages/dashboard"; +import { Provider } from "react-redux"; +import store from "./store"; function App() { return ( - - - } /> - } /> - - + + + + } /> + } /> + + + ); } diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 143f25e..6bae89c 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -1,10 +1,49 @@ -import { useState } from "react"; -import { animated, useSpring } from "@react-spring/web"; +import { AnimatePresence, motion } from "framer-motion"; +import { useEffect, useState } from "react"; +import { sendSignInCode, signIn } from "../../telegram/telegram"; +import user, { + login, + setCodeHash, + useSelectCodeHash, + useSelectorIsLoggedIn, +} from "../../store/user"; +import { useDispatch } from "react-redux"; +import { Link } from "react-router-dom"; +import { getMe } from "../../telegram/user"; export default function Home() { let [hiddenDrawer, setHiddenDrawer] = useState(true); + let dispatch = useDispatch(); + let handleHiddenDrawer = (e: MouseEvent) => { + if (!hiddenDrawer) { + console.log(e.target); + setHiddenDrawer(true); + } + }; + + useEffect(() => { + document.addEventListener("click", handleHiddenDrawer); + return () => document.removeEventListener("click", handleHiddenDrawer); + }); + + useEffect(() => { + let dcID = localStorage.getItem("defaultDcId"); + console.log(dcID); + let authKey = localStorage.getItem(dcID + "authKey"); + let serverSalt = localStorage.getItem(dcID + "serverSalt"); + console.log("authKey = %s", authKey); + console.log("serverSalt = %s", serverSalt); + getMe() + .then((user) => { + dispatch(login(user)); + }) + .catch((e) => { + console.log(e); + }); + }, []); + return ( -
+
void }) { + let loggedIn = useSelectorIsLoggedIn(); return ( -
  • 定价
    • -
  • - 注册/登录 -
    • -
+ {!loggedIn ? ( +
  • + 注册/登录 +
    • + ) : ( + +
  • + 文件列表 +
    • + + )} + ); } function FileButton(props: { openLogin: () => void }) { return (
    - - +
    @@ -71,39 +136,100 @@ function FileButton(props: { openLogin: () => void }) { } function Drawer(props: { hidden: boolean; setHidden: () => void }) { - const styles = useSpring({ - opacity: !props.hidden ? 1 : 0, - visibility: !props.hidden ? "visible" : "hidden", - }); + let width = window.innerWidth; return ( - -
    -
    { - props.setHidden(); - }} - >
    -
    -
    - -
    + + {props.hidden ? ( + "" + ) : ( +
    + +
    { + e.nativeEvent.stopImmediatePropagation(); + }} + > +
    + +
    +
    +
    -
    - + )} + ); } -function LoginContent() { +function LoginContent(props: { setHidden: () => void }) { + let [phone, setPhone] = useState(""); + let [phoneCode, setPhoneCode] = useState(""); + let codeHash = useSelectCodeHash(); + const dispatch = useDispatch(); + + let handleSendCode = () => { + sendSignInCode(phone) + .then((hash) => { + dispatch(setCodeHash(hash)); + }) + .catch((e) => { + alert(e.error_message); + }); + }; + + let handleLogin = () => { + signIn(phone, phoneCode, codeHash) + .then((e) => { + dispatch(login(e.user)); + props.setHidden(); + alert("登录成功"); + }) + .catch((e) => { + alert(e.error_message); + }); + }; + return ( -
    - - +
    + {codeHash === "" ? ( + <> +
    + + setPhone(e.target.value)} + /> +
    + + + ) : ( +
    + + setPhoneCode(e.target.value)} + /> + +
    + )}
    ); } diff --git a/src/store.ts b/src/store.ts new file mode 100644 index 0000000..1739556 --- /dev/null +++ b/src/store.ts @@ -0,0 +1,11 @@ +import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit"; +import userReducer from "./store/user"; + +export default configureStore({ + reducer: { + user: userReducer, + }, + middleware: getDefaultMiddleware({ + serializableCheck: false, + }), +}); diff --git a/src/store/user.ts b/src/store/user.ts new file mode 100644 index 0000000..9299a77 --- /dev/null +++ b/src/store/user.ts @@ -0,0 +1,40 @@ +import { createSlice } from "@reduxjs/toolkit"; +import { useSelector } from "react-redux"; + +const User = createSlice({ + name: "user", + initialState: { + codeHash: "", + isLoggedIn: false, + user: {}, + }, + reducers: { + login: (state, action) => { + state.isLoggedIn = true; + state.user = action.payload; + }, + logout: (state) => { + state.isLoggedIn = false; + state.user = {}; + }, + setCodeHash: (state, action) => { + state.codeHash = action.payload; + }, + }, +}); + +export function useSelectorUser() { + return useSelector((state: any) => state.user.user); +} + +export function useSelectorIsLoggedIn() { + return useSelector((state: any) => state.user.isLoggedIn); +} + +export function useSelectCodeHash() { + return useSelector((state: any) => state.user.codeHash); +} + +export const { login, logout, setCodeHash } = User.actions; + +export default User.reducer; diff --git a/src/telegram/telegram.ts b/src/telegram/telegram.ts index 1e8b4b2..eeb42de 100644 --- a/src/telegram/telegram.ts +++ b/src/telegram/telegram.ts @@ -15,7 +15,7 @@ class TelegramHelper { this.client = new Client({ api_id: appID, api_hash: appHash, - test: false, + test: true, }); } else { let createTransport = function (dc: any, crypto: any) { @@ -47,15 +47,15 @@ class TelegramHelper { hideLog: boolean = false ): Promise { try { - !hideLog && console.log(`${method} req\n${params}`); + !hideLog && console.debug(`${method} req\n%o`, params); options = { ...options, }; let resp = await this.client.call(method, params, options); - !hideLog && console.log(`${method} resp\n${resp}`); + !hideLog && console.debug(`${method} resp\n%o`, resp); return resp; } catch (error) { - !hideLog && console.log(`${method} error:`, error); + !hideLog && console.debug(`${method} error\n%o`, error); // @ts-ignore const { error_code, error_message } = error; diff --git a/vite.config.ts b/vite.config.ts index b1b5f91..7d3fa6f 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,11 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react()] -}) + server: { + port: 3000, + host: true, + }, + plugins: [react()], +});