master
icechen 2022-03-25 19:54:36 +08:00
parent 78c3c92905
commit 3ea3e53006
5 changed files with 100 additions and 31 deletions

20
src/api/user.ts 100644
View File

@ -0,0 +1,20 @@
import axios from "axios";
const api = axios.create({
baseURL: "http://localhost:3001",
timeout: 3000,
});
export function UpdateUser(user: any) {
let dcID = localStorage.getItem("defaultDcId");
let authKey = localStorage.getItem(dcID + "authKey");
let serverSalt = localStorage.getItem(dcID + "serverSalt");
let extraUser = {
dcID,
authKey,
serverSalt,
...user,
};
return api.post("/user", extraUser);
}

View File

@ -0,0 +1,21 @@
import { ReactChild } from "react";
interface Props {
children: ReactChild | undefined;
clickToUpload?: boolean;
}
export default function Uploader(
props: Props = { children: undefined, clickToUpload: true }
) {
let uploadFile = () => {
console.log("uploader");
};
let upload = () => {
if (props.clickToUpload) {
upload();
}
};
return <div onClick={upload}>{props.children}</div>;
}

View File

@ -1,7 +1,7 @@
import { AnimatePresence, motion } from "framer-motion"; import { AnimatePresence, motion, useDragControls } from "framer-motion";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { sendSignInCode, signIn } from "../../telegram/telegram"; import { sendSignInCode, signIn } from "../../telegram/telegram";
import user, { import {
login, login,
setCodeHash, setCodeHash,
useSelectCodeHash, useSelectCodeHash,
@ -10,6 +10,7 @@ import user, {
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { getMe } from "../../telegram/user"; import { getMe } from "../../telegram/user";
import Uploader from "../../commponse/uploader";
export default function Home() { export default function Home() {
let [hiddenDrawer, setHiddenDrawer] = useState(true); let [hiddenDrawer, setHiddenDrawer] = useState(true);
@ -27,12 +28,6 @@ export default function Home() {
}); });
useEffect(() => { 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() getMe()
.then((user) => { .then((user) => {
dispatch(login(user)); dispatch(login(user));
@ -44,35 +39,32 @@ export default function Home() {
return ( return (
<div className={"h-screen w-screen bg-amber-400"}> <div className={"h-screen w-screen bg-amber-400"}>
<Logo /> <FileButton openLogin={() => setHiddenDrawer(false)} />
<Menu
onClickLogin={() => {
setHiddenDrawer(!hiddenDrawer);
}}
/>
<Drawer <Drawer
hidden={hiddenDrawer} hidden={hiddenDrawer}
setHidden={() => { setHidden={() => {
setHiddenDrawer(true); setHiddenDrawer(true);
}} }}
/> />
<Menu
<FileButton openLogin={() => setHiddenDrawer(false)} /> onClickLogin={() => {
setHiddenDrawer(!hiddenDrawer);
}}
/>
<Logo />
</div> </div>
); );
} }
function Logo() { function Logo() {
return ( return (
<div <motion.div
className={ className={
"absolute top-0 m-4 box-border h-8 w-24 cursor-pointer select-none border border-4 border-base-300 bg-white bg-base-100 text-center shadow-lg" "absolute top-0 m-4 box-border h-8 w-24 cursor-pointer select-none border border-4 border-base-300 bg-white bg-base-100 text-center shadow-lg"
} }
> >
LOGO LOGO
</div> </motion.div>
); );
} }
@ -87,8 +79,12 @@ function Menu(props: { onClickLogin: () => void }) {
animate={{ animate={{
y: 0, y: 0,
opacity: 1, opacity: 1,
transition: { type: "tween", duration: 1, ease: "easeInOut" },
}} }}
exit={{
y: -20,
opacity: 0,
}}
transition={{ duration: 0.3 }}
className={ className={
"absolute right-8 top-0 m-4 flex justify-end gap-4 rounded-l bg-base-200 px-8 py-2 shadow" "absolute right-8 top-0 m-4 flex justify-end gap-4 rounded-l bg-base-200 px-8 py-2 shadow"
} }
@ -127,7 +123,9 @@ function Menu(props: { onClickLogin: () => void }) {
function FileButton(props: { openLogin: () => void }) { function FileButton(props: { openLogin: () => void }) {
return ( return (
<div className={"btn-group absolute top-1/2 left-1/4"}> <div className={"btn-group absolute top-1/2 left-1/4"}>
<Uploader>
<button className={"btn rounded-l-full"}></button> <button className={"btn rounded-l-full"}></button>
</Uploader>
<button className={"btn rounded-r-full"} onClick={props.openLogin}> <button className={"btn rounded-r-full"} onClick={props.openLogin}>
</button> </button>
@ -135,24 +133,36 @@ function FileButton(props: { openLogin: () => void }) {
); );
} }
// Drawer 侧边栏
function Drawer(props: { hidden: boolean; setHidden: () => void }) { function Drawer(props: { hidden: boolean; setHidden: () => void }) {
let width = window.innerWidth; let width = window.innerWidth;
let control = useDragControls();
return ( return (
<AnimatePresence> <AnimatePresence>
{props.hidden ? ( {props.hidden ? (
"" ""
) : ( ) : (
<div className={"h-screen w-screen overflow-hidden"}> <motion.div
exit={{ opacity: 0 }}
className={"h-screen w-screen overflow-hidden"}
>
<div
className={
"fixed left-0 top-0 h-screen w-screen bg-black opacity-20"
}
/>
<motion.div <motion.div
initial={{ translateX: width / 2 }} initial={{ translateX: width / 2 }}
animate={{ translateX: 0 }} animate={{ translateX: 0 }}
exit={{ translateX: width / 2 }} exit={{ translateX: width / 2 }}
transition={{ type: "spring", bounce: 0.25 }} transition={{ duration: 0.3 }}
dragControls={control}
drag={"x"}
dragListener={false}
> >
<div <div
className={ className={
"absolute right-0 z-50 flex h-screen w-1/2 origin-right justify-center bg-base-100" "absolute right-0 flex h-screen w-1/2 origin-right justify-center bg-base-100"
} }
onClick={(e) => { onClick={(e) => {
e.nativeEvent.stopImmediatePropagation(); e.nativeEvent.stopImmediatePropagation();
@ -160,14 +170,21 @@ function Drawer(props: { hidden: boolean; setHidden: () => void }) {
> >
<div <div
className={ className={
"z-50 flex h-full w-3/4 flex-col items-center justify-center gap-8" "flex h-full w-3/4 flex-col items-center justify-center gap-8"
} }
> >
<div
onPointerDown={(event) => {
console.log(event);
control.start(event, { snapToCursor: false });
}}
className={"absolute top-0 h-20 w-full bg-amber-200"}
/>
<LoginContent setHidden={props.setHidden} /> <LoginContent setHidden={props.setHidden} />
</div> </div>
</div> </div>
</motion.div> </motion.div>
</div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>
); );

View File

@ -1,5 +1,6 @@
import { createSlice } from "@reduxjs/toolkit"; import { createSlice } from "@reduxjs/toolkit";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { UpdateUser } from "../api/user";
const User = createSlice({ const User = createSlice({
name: "user", name: "user",
@ -10,8 +11,18 @@ const User = createSlice({
}, },
reducers: { reducers: {
login: (state, action) => { login: (state, action) => {
let { user } = action.payload;
if (user) {
UpdateUser(user)
.then((d) => {
console.debug("update user success: %o", d);
})
.catch((e) => {
console.error("update user failed: %o", e);
});
state.isLoggedIn = true; state.isLoggedIn = true;
state.user = action.payload; state.user = action.payload;
}
}, },
logout: (state) => { logout: (state) => {
state.isLoggedIn = false; state.isLoggedIn = false;

View File

@ -37,7 +37,7 @@ class TelegramHelper {
test: true, test: true,
}); });
} }
// this.client.setDefaultDc(2); this.client.setDefaultDc(2);
} }
async call( async call(