ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: google login

Browse Source
This commit is contained in:
Tristan Yang
2022-10-27 23:07:39 +08:00
parent 1987c257ba
commit c08bb8fb13
11 changed files with 89 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/widget/Popup/Login/index.tsx
+30
View File
@@ -0,0 +1,30 @@
// import React from 'react'
import { useGetLoginConfigQuery } from '../../../app/services/server';
import GithubLoginButton from '../../../common/component/GithubLoginButton';
import GoogleLoginButton from '../../../common/component/GoogleLoginButton';
import useGithubAuthConfig from '../../../common/hook/useGithubAuthConfig';
import useGoogleAuthConfig from '../../../common/hook/useGoogleAuthConfig';
// type Props = {}
const Login = () => {
const { clientId } = useGoogleAuthConfig();
const { config: githubAuthConfig } = useGithubAuthConfig();
const { data: loginConfig, isSuccess: loginConfigSuccess } = useGetLoginConfigQuery();
if (!loginConfigSuccess) return <span className="text-xs text-gray-500">checking...</span>;
const {
github: enableGithubLogin,
google: enableGoogleLogin,
} = loginConfig;
const googleLogin = enableGoogleLogin && clientId;
return (
<div className="w-60 flex flex-col">
{googleLogin && <GoogleLoginButton clientId={clientId} />}
{enableGithubLogin && <GithubLoginButton client_id={githubAuthConfig?.client_id} />}
</div>
);
};
export default Login;
src/widget/Popup/MessageFeed/Message/Text.tsx
+8 -8
View File
@@ -21,29 +21,29 @@ const Time: FC<TimeProps> = ({ time }) => {
};
export type MessageProps = {
hostId: number;
compact?: boolean;
isFirst?: boolean;
} & MessagePayload;
const Index: FC<MessageProps> = (props) => {
const { server: { name, logo }, loginUser } = useAppSelector(store => { return { server: store.server, loginUser: store.authData.user }; });
const { from_uid, content, created_at, compact, isFirst = false } = props;
// 暂时写死
const isHost = from_uid == 304;
const { hostId, from_uid, content, created_at, compact, isFirst = false } = props;
const isHost = from_uid == hostId;
return (
<div
className={clsx(
'flex flex-col relative pl-14 py-1 hover:bg-gray-100 rounded-sm',
compact ? 'mt-2' : 'mt-6',
compact ? 'mt-0' : 'mt-4',
isFirst ? 'mt-0' : ''
)}
>
{!compact && (
<div className="absolute left-2 top-2 w-10 h-10 rounded-full overflow-hidden">
<div className="absolute left-0 top-2 w-12 h-12 rounded-full overflow-hidden">
{isHost ? (
<img src={logo} alt="logo" className="w-full h-full" />
) : (
<img className="w-10 h-10" src={getInitialsAvatar({ initials: getInitials(loginUser?.name ?? "Unkown") })} alt="avatar" />
<img className="w-12 h-12" src={getInitialsAvatar({ initials: getInitials(loginUser?.name ?? "Unkown") })} alt="avatar" />
)}
</div>
)}
@@ -55,12 +55,12 @@ const Index: FC<MessageProps> = (props) => {
)}
<p
className={clsx(
'text-gray-600 text-sm whitespace-normal break-words mt-2 w-[80%]',
'text-gray-600 text-md whitespace-normal break-words mt-2 w-[80%]',
compact ? 'group relative mt-0' : ''
)}
>
{compact && (
<time className="absolute -left-2 top-0 -translate-x-full text-gray-300 text-[10px] invisible group-hover:visible">{`${new Date(created_at)
<time className="absolute -left-2 top-0 -translate-x-full text-gray-300 text-xs invisible group-hover:visible">{`${new Date(created_at)
.toLocaleTimeString('en-US', {
second: 'numeric',
minute: 'numeric',
src/widget/Popup/MessageFeed/index.tsx
+10 -2
View File
@@ -1,5 +1,5 @@
/* eslint-disable @typescript-eslint/indent */
import { FC, memo } from 'react';
import { FC, memo, useEffect } from 'react';
// import { MessagePayload } from '../../../app/slices/message';
import { useAppSelector } from '../../../app/store';
import TextMessage from './Message/Text';
@@ -13,6 +13,14 @@ const interval = 10 * 1000;
const Index: FC<Props> = ({ uid }) => {
const { mids, messageMap } = useAppSelector(store => { return { mids: store.userMessage.byId[uid], messageMap: store.message }; });
console.log("mids", mids, uid);
useEffect(() => {
const container = document.querySelector("#MESSAGE_LIST_CONTAINER");
if (mids && mids.length > 0 && container) {
setTimeout(() => {
container.scrollTop = container.scrollHeight;
}, 30);
}
}, [mids]);
if (!mids) return null;
return mids.map((mid, idx) => {
@@ -23,7 +31,7 @@ const Index: FC<Props> = ({ uid }) => {
: prevMsg.from_uid !== currMsg.from_uid
? false
: (currMsg.created_at ?? 0) - (prevMsg.created_at ?? 0) < interval;
return <TextMessage key={currMsg.mid} {...currMsg} compact={compact} isFirst={idx === 0} />;
return <TextMessage hostId={uid} key={currMsg.mid} {...currMsg} compact={compact} isFirst={idx === 0} />;
});
};
src/widget/Popup/Welcome.tsx
+12 -2
View File
@@ -1,11 +1,15 @@
// import clsx from 'clsx'
import { memo } from 'react';
import { useAppSelector } from '../../app/store';
import Login from './Login';
const TextMessage = ({ text, animate = '' }: { text: string; animate?: string }) => (
<p className={`text-gray-600 text-md mb-3 ${animate}`}>{text}</p>
);
const Index = () => {
type Props = {
needLogin?: boolean
}
const Index = ({ needLogin = false }: Props) => {
const { name, logo } = useAppSelector(store => store.server);
return (
<div className="flex gap-2">
@@ -21,7 +25,13 @@ const Index = () => {
hour12: true,
})}`}</time>
</span>
<TextMessage text="Hi there, Nice to meet you!" animate="animate-[fadeInUp_.5s_ease-in-out_both]" />
<TextMessage text="👋 Hi there, Nice to meet you!" animate="animate-[fadeInUp_.5s_ease-in-out_both]" />
{needLogin && <>
<TextMessage text="You need login before we have a nice talk 👇" animate="animate-[fadeInUp_.5s_.8s_ease-in-out_both]" />
<div className="animate-[fadeInUp_.5s_1.2s_ease-in-out_both]">
<Login />
</div>
</>}
</div>
</div>
);
src/widget/Popup/index.tsx
+13 -24
View File
@@ -1,4 +1,4 @@
import { useState, useEffect, useRef, ChangeEvent } from 'react';
import { useState, useRef, ChangeEvent } from 'react';
import Header from './Header';
import Welcome from './Welcome';
import MessageFeed from './MessageFeed';
@@ -6,21 +6,17 @@ import Line from './Line';
import useSendMessage from '../../common/hook/useSendMessage';
import { useAppSelector } from '../../app/store';
type Props = {
hostId: number,
handleClose: () => void
}
const Index = ({ handleClose }: Props) => {
const messageListRef = useRef<HTMLElement | null>(null);
const loginUid = useAppSelector(store => store.authData.user?.uid);
const { sendMessage, isSuccess } = useSendMessage({
from: loginUid,
to: 304,
const Index = ({ handleClose, hostId }: Props) => {
const { user: loginUser, token, guest: isGuest } = useAppSelector(store => store.authData);
const { sendMessage } = useSendMessage({
from: loginUser?.uid,
to: hostId,
context: "user"
});
// const { checked, firstEnter, session } = useSession({ preCheck: true });
// const { isSending, sendSuccess, sendMessage, message } = useSendMessage();
// const { appendMessage, messages } = useFeed();
// const messageListRef = useRef<HTMLElement | null>(null);
const [input, setInput] = useState('');
const handleInput = (evt: ChangeEvent<HTMLTextAreaElement>) => {
setInput(evt.target.value);
@@ -34,23 +30,16 @@ const Index = ({ handleClose }: Props) => {
setInput("");
};
// 自动滚动到底部，todo:根据距离底部位置大小自动滚动 类似微信体验
useEffect(() => {
const container = messageListRef.current;
if (container) {
setTimeout(() => {
container.scrollTop = container.scrollHeight;
}, 30);
}
}, [isSuccess]);
// no token or guest login
const notLogin = !token || isGuest;
return (
<aside className="flex flex-col justify-between bg-white w-full h-full rounded-[10px] pointer-events-auto">
<aside className="flex flex-col justify-between bg-white w-full h-full rounded-md overflow-hidden">
<Header handleClose={handleClose} />
<Line />
{/* message list */}
<section ref={messageListRef} className="px-2 py-3 flex-1 overflow-y-auto scroll-smooth">
<Welcome />
<MessageFeed uid={304} />
<section id='MESSAGE_LIST_CONTAINER' className="px-2 py-3 flex-1 overflow-y-auto scroll-smooth">
<Welcome needLogin={notLogin} />
{notLogin ? null : <MessageFeed uid={hostId} />}
</section>
<Line />
{/* message input */}
src/widget/index.tsx
+5 -5
View File
@@ -4,11 +4,11 @@ import { useGetServerQuery } from "../app/services/server";
import Icon from "./Icon";
import Popup from "./Popup";
import usePreload from "./usePreload";
// type Props = {
type Props = {
hostId: number
};
// };
function Widget() {
function Widget({ hostId }: Props) {
const { rehydrated } = usePreload();
const [visible, setVisible] = useState(false);
const { isLoading, isError } = useGetServerQuery();
@@ -23,7 +23,7 @@ function Widget() {
}
}, [visible]);
if (isLoading || isError || !rehydrated) return null;
return visible ? <Popup handleClose={toggleVisible} /> : <Icon handleClick={toggleVisible} />;
return visible ? <Popup handleClose={toggleVisible} hostId={hostId} /> : <Icon handleClick={toggleVisible} />;
}
export default Widget;