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

Merge remote-tracking branch 'upstream/main' into refactor/typescript

Browse Source 
# Conflicts:
#	src/common/component/ForwardModal/index.tsx
#	src/common/component/GoogleLoginButton.tsx
#	src/common/component/ManageMembers.tsx
#	src/routes/settingChannel/Overview.tsx
#	src/routes/settingChannel/index.tsx
This commit is contained in:
HD
2022-06-29 17:04:22 +08:00
parent 003353e43f 1281091db9
commit f1733d030c
44 changed files with 207 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "vocechat-web",
"version": "0.2.14",
"version": "0.3.1",
"private": true,
"homepage": "https://privoce.voce.chat",
"dependencies": {
@@ -8,6 +8,7 @@
"@metamask/onboarding": "^1.0.1",
"@microsoft/fetch-event-source": "^2.0.1",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
"@react-oauth/google": "^0.2.6",
"@reduxjs/toolkit": "^1.8.2",
"@svgr/webpack": "^6.2.1",
"@testing-library/jest-dom": "^5.16.4",
@@ -53,7 +54,6 @@
"react-dnd": "16.0.1",
"react-dnd-html5-backend": "16.0.1",
"react-dom": "^18.2.0",
"react-google-login": "^5.2.2",
"react-helmet": "^6.1.0",
"react-hot-toast": "^2.2.0",
"react-icons": "^4.4.0",
scripts/build.js
+1 -1
View File
@@ -99,7 +99,7 @@ checkBrowsers(paths.appPath, isInteractive)
// version and md5 files
fs.writeFileSync(`${buildFolder}/VERSION`, require("../package.json").version);
const hash = md5File.sync(`${buildFolder}/VERSION`);
fs.writeFileSync(`${buildFolder}/web..md5`, hash);
fs.writeFileSync(`${buildFolder}/web.vocechat.md5`, hash);
},
(err) => {
const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === "true";
src/app/config.ts
+3 -2
View File
@@ -1,6 +1,6 @@
// const BASE_URL = `${location.origin}/api`;
const BASE_URL = `https://dev.rustchat.com/api`;
export const CACHE_VERSION = `0.3.0`;
const BASE_URL = `https://dev.voce.chat/api`;
export const CACHE_VERSION = `0.3.1`;
export const ContentTypes = {
text: "text/plain",
markdown: "text/markdown",
@@ -27,6 +27,7 @@ export const vapidKey = `BGXCn-5YRXSFw38Q9lUKJ5bibL212-yIQn1pCvthGhp6_KwA29FO1Ax
export const tokenHeader = "X-API-Key";
export const FILE_SLICE_SIZE = 1000 * 200 * 8; //200kb
export const FILE_IMAGE_SIZE = 1000 * 10000 * 8; //10mb
export const KEY_LOGIN_USER = "VOCECHAT_LOGIN_USER";
export const KEY_TOKEN = "VOCECHAT_TOKEN";
export const KEY_EXPIRE = "VOCECHAT_TOKEN_EXPIRE";
export const KEY_REFRESH_TOKEN = "VOCECHAT_REFRESH_TOKEN";
src/app/services/contact.ts
+1 -2
View File
@@ -2,7 +2,7 @@ import { createApi } from "@reduxjs/toolkit/query/react";
// import toast from "react-hot-toast";
import { KEY_UID } from "../config";
import baseQuery from "./base.query";
import { resetAuthData, setUid } from "../slices/auth.data";
import { resetAuthData } from "../slices/auth.data";
import { updateMute } from "../slices/footprint";
import { fullfillContacts } from "../slices/contacts";
import BASE_URL, { ContentTypes } from "../config";
@@ -41,7 +41,6 @@ export const contactApi = createApi({
const markedContacts = contacts.map((u) => {
return u.uid == matchedUser.uid ? { ...u, online: true } : u;
});
dispatch(setUid(matchedUser.uid));
dispatch(fullfillContacts(markedContacts));
}
} catch {
src/app/services/message.ts
+1 -1
View File
@@ -132,7 +132,7 @@ export const messageApi = createApi({
async onQueryStarted(id, { dispatch, queryFulfilled, getState }) {
try {
const { data } = await queryFulfilled;
const loginUid = getState().authData.uid;
const loginUid = getState().authData.user.uid;
const messages = normalizeArchiveData(data, id, loginUid);
dispatch(populateFavorite({ id, messages }));
} catch (err) {
src/app/services/server.ts
+4 -7
View File
@@ -1,6 +1,6 @@
import { createApi } from "@reduxjs/toolkit/query/react";
import BASE_URL from "../config";
import { updateInfo, StoredServer } from "../slices/server";
import { updateInfo } from "../slices/server";
import baseQuery from "./base.query";
import { RootState } from "../store";
import { User } from "../../types/auth";
@@ -22,16 +22,13 @@ export const serverApi = createApi({
reducerPath: "serverApi",
baseQuery,
endpoints: (builder) => ({
getServer: builder.query<StoredServer, void>({
getServer: builder.query<Server, void>({
query: () => ({ url: `admin/system/organization` }),
transformResponse: (data: Server) => {
const logo = `${BASE_URL}/resource/organization/logo?t=${+new Date()}`;
return { ...data, logo };
},
async onQueryStarted(data, { dispatch, queryFulfilled }) {
try {
const { data: server } = await queryFulfilled;
dispatch(updateInfo(server));
const logo = `${BASE_URL}/resource/organization/logo?t=${+new Date()}`;
dispatch(updateInfo({ ...server, logo }));
} catch {
console.log("get server info error");
}
src/app/slices/auth.data.ts
+17 -24
View File
@@ -1,20 +1,25 @@
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { KEY_EXPIRE, KEY_PWA_INSTALLED, KEY_REFRESH_TOKEN, KEY_TOKEN, KEY_UID } from "../config";
import {
KEY_EXPIRE,
KEY_PWA_INSTALLED,
KEY_LOGIN_USER,
KEY_REFRESH_TOKEN,
KEY_TOKEN,
KEY_UID
} from "../config";
import { AuthData, AuthToken, User } from "../../types/auth";
interface State {
initialized: boolean;
uid: string | null;
user: User | null;
user: User | undefined;
token: string | null;
expireTime: number;
refreshToken: string | null;
}
const loginUser = localStorage.getItem(KEY_LOGIN_USER) || "";
const initialState: State = {
initialized: true,
uid: null,
user: null,
user: loginUser ? JSON.parse(loginUser) : undefined,
token: localStorage.getItem(KEY_TOKEN),
expireTime: Number(localStorage.getItem(KEY_EXPIRE) || +new Date()),
refreshToken: localStorage.getItem(KEY_REFRESH_TOKEN)
@@ -22,8 +27,7 @@ const initialState: State = {
const emptyState: State = {
initialized: true,
uid: null,
user: null,
user: undefined,
token: null,
expireTime: +new Date(),
refreshToken: null
@@ -34,22 +38,17 @@ const authDataSlice = createSlice({
initialState,
reducers: {
setAuthData(state, { payload }: PayloadAction<AuthData>) {
const {
initialized = true,
user: { uid },
token,
refresh_token,
expired_in = 0
} = payload;
const { initialized = true, user, token, refresh_token, expired_in = 0 } = payload;
const { uid } = user;
state.initialized = initialized;
state.uid = `${uid}`;
state.user = payload.user;
state.user = user;
state.token = token;
state.refreshToken = refresh_token;
// 当前时间往后推expire时长
const expireTime = +new Date() + Number(expired_in) * 1000;
state.expireTime = expireTime;
// set local data
localStorage.setItem(KEY_LOGIN_USER, JSON.stringify(user));
localStorage.setItem(KEY_EXPIRE, `${expireTime}`);
localStorage.setItem(KEY_TOKEN, token);
localStorage.setItem(KEY_REFRESH_TOKEN, refresh_token);
@@ -65,16 +64,11 @@ const authDataSlice = createSlice({
return emptyState;
},
setUid(state, action: PayloadAction<string>) {
state.uid = action.payload;
console.log("set uid original");
},
updateInitialized(state, action: PayloadAction<boolean>) {
state.initialized = action.payload;
},
updateToken(state, action: PayloadAction<AuthToken>) {
const { token, refresh_token, expired_in } = action.payload;
console.log("refresh token");
state.token = token;
const et = +new Date() + Number(expired_in) * 1000;
state.expireTime = et;
@@ -86,6 +80,5 @@ const authDataSlice = createSlice({
}
});
export const { updateInitialized, setAuthData, resetAuthData, setUid, updateToken } =
authDataSlice.actions;
export const { updateInitialized, setAuthData, resetAuthData, updateToken } = authDataSlice.actions;
export default authDataSlice.reducer;
src/app/slices/server.ts
+4 -1
View File
@@ -39,11 +39,14 @@ const serverSlice = createSlice({
},
updateInfo(state, action: PayloadAction<Partial<StoredServer>>) {
const values = action.payload || {};
const tmp = { ...state, ...values };
console.log("ssss", tmp);
// todo: check and remove old logic
// Object.keys(values).forEach((_key) => {
// state[_key] = values[_key];
// });
state = { ...state, ...values };
return { ...state, ...values };
}
}
});
src/common/component/AddEntriesMenu.tsx
-1
View File
@@ -41,7 +41,6 @@ const Styled = styled.ul`
}
`;
export default function AddEntriesMenu() {
// const currentUser = useSelector((store) => store.contacts.byId[store.authData.uid]);
const [isPrivate, setIsPrivate] = useState(false);
const [inviteModalVisible, setInviteModalVisible] = useState(false);
src/common/component/ChannelModal/index.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ interface Props {
const ChannelModal: FC<Props> = ({ personal = false, closeModal }) => {
const { contactsData, loginUid } = useAppSelector((store) => {
return { contactsData: store.contacts.byId, loginUid: store.authData.uid };
return { contactsData: store.contacts.byId, loginUid: store.authData.user?.uid };
});
const navigateTo = useNavigate();
const [data, setData] = useState<CreateChannelDTO>({
src/common/component/CurrentUser.tsx
+1 -1
View File
@@ -64,7 +64,7 @@ const StyledWrapper = styled.div`
export default function CurrentUser() {
const { values: agoraConfig } = useConfig("agora");
const currUser = useAppSelector((store) => {
return store.contacts.byId[store.authData.uid];
return store.authData.user;
});
if (!currUser) return null;
src/common/component/ForwardModal/index.tsx
+16 -29
View File
@@ -1,10 +1,11 @@
import { useState, MouseEvent, FC, ChangeEvent } from "react";
import toast from "react-hot-toast";
import { useState, MouseEvent } from "react";
// import toast from "react-hot-toast";
import Modal from "../Modal";
import Button from "../styled/Button";
import Input from "../styled/Input";
import Channel from "../Channel";
import Contact from "../Contact";
// import Channel from "../Channel";
import Reply from "../Message/Reply";
import StyledWrapper from "./styled";
import useForwardMessage from "../../hook/useForwardMessage";
@@ -13,41 +14,31 @@ import useFilteredChannels from "../../hook/useFilteredChannels";
import useFilteredUsers from "../../hook/useFilteredUsers";
import CloseIcon from "../../../assets/icons/close.circle.svg";
import StyledCheckbox from "../styled/Checkbox";
import toast from "react-hot-toast";
interface Props {
mids: number[];
closeModal: () => void;
}
const ForwardModal: FC<Props> = ({ mids, closeModal }) => {
export default function ForwardModal({ mids, closeModal }) {
const [appendText, setAppendText] = useState("");
const { sendMessages } = useSendMessage();
const { forwardMessage, forwarding } = useForwardMessage();
const [selectedMembers, setSelectedMembers] = useState<number[]>([]);
const [selectedChannels, setSelectedChannels] = useState<number[]>([]);
const [selectedMembers, setSelectedMembers] = useState([]);
const [selectedChannels, setSelectedChannels] = useState([]);
const {
channels,
// input: channelInput,
updateInput: updateChannelInput
} = useFilteredChannels();
const { contacts, input, updateInput } = useFilteredUsers();
// const { conactsData, loginUid } = useSelector((store) => {
// return { conactsData: store.contacts.byId, loginUid: store.authData.uid };
// });
const toggleCheck = ({ currentTarget }: MouseEvent<HTMLLIElement>) => {
const { id, type = "user" } = currentTarget.dataset;
const ids: number[] = type == "user" ? selectedMembers : selectedChannels;
const ids = type == "user" ? selectedMembers : selectedChannels;
const updateState = type == "user" ? setSelectedMembers : setSelectedChannels;
const id_num = Number(id);
let tmp = ids.includes(id_num) ? ids.filter((m) => m !== id_num) : [...ids, id_num];
let tmp = ids.includes(+id) ? ids.filter((m) => m != id) : [...ids, +id];
console.log(id, currentTarget);
updateState(tmp);
};
const updateAppendText = (evt: ChangeEvent<HTMLInputElement>) => {
const updateAppendText = (evt) => {
setAppendText(evt.target.value);
};
const handleForward = async () => {
await forwardMessage({
mids: mids.map((mid) => +mid),
@@ -64,25 +55,21 @@ const ForwardModal: FC<Props> = ({ mids, closeModal }) => {
toast.success("Forward Message Successfully");
closeModal();
};
const removeSelected = (id: number, from = "user") => {
const removeSelected = (id, from = "user") => {
if (from == "user") {
setSelectedMembers(selectedMembers.filter((m) => m != id));
} else {
setSelectedChannels(selectedChannels.filter((cid) => cid != id));
}
};
const handleSearchChange = (evt: ChangeEvent<HTMLInputElement>) => {
const handleSearchChange = (evt) => {
const newVal = evt.target.value;
updateChannelInput(newVal);
updateInput(newVal);
};
let selectedCount = selectedMembers.length + selectedChannels.length;
const sendButtonDisabled =
(selectedChannels.length == 0 && selectedMembers.length == 0) || forwarding;
return (
<Modal>
<StyledWrapper>
@@ -99,6 +86,7 @@ const ForwardModal: FC<Props> = ({ mids, closeModal }) => {
channels.map((c) => {
const { gid } = c;
const checked = selectedChannels.includes(gid);
console.log({ checked });
return (
<li
key={gid}
@@ -116,6 +104,7 @@ const ForwardModal: FC<Props> = ({ mids, closeModal }) => {
contacts.map((u) => {
const { uid } = u;
const checked = selectedMembers.includes(uid);
console.log({ checked });
return (
<li
key={uid}
@@ -187,6 +176,4 @@ const ForwardModal: FC<Props> = ({ mids, closeModal }) => {
</StyledWrapper>
</Modal>
);
};
export default ForwardModal;
}
src/common/component/GoogleLoginButton.tsx
+38 -18
View File
@@ -1,5 +1,5 @@
import { FC, useEffect } from "react";
import { useGoogleLogin } from "react-google-login";
import { FC, useEffect, useState } from "react";
import { useGoogleLogin, GoogleOAuthProvider } from "@react-oauth/google";
import toast from "react-hot-toast";
import styled from "styled-components";
import { KEY_LOCAL_MAGIC_TOKEN } from "../../app/config";
@@ -24,31 +24,30 @@ const StyledSocialButton = styled(Button)`
`;
interface Props {
clientId: string;
loadError?: boolean;
loaded?: boolean;
clientId?: string;
type?: "login" | "register";
}
const GoogleLoginButton: FC<Props> = ({ type = "login", clientId }) => {
const GoogleLogin: FC<Props> = ({ type = "login", loaded, loadError }) => {
const [login, { isSuccess, isLoading, error }] = useLoginMutation();
// 拿本地存的magic token
//拿本地存的magic token
const magic_token = localStorage.getItem(KEY_LOCAL_MAGIC_TOKEN);
const { signIn, loaded } = useGoogleLogin({
onScriptLoadFailure: (wtf) => {
console.error("google login script load failure", wtf);
},
clientId,
const googleLogin = useGoogleLogin({
// flow: "auth-code",
onSuccess: (res) => {
if ("code" in res) {
console.error(`google login failed: ${res.code}`);
} else {
login({ magic_token, id_token: res.tokenId, type: "google" });
login({
magic_token,
id_token: res.access_token,
type: "google"
});
}
},
onFailure: (wtf) => {
console.error("google login failure", wtf);
}
});
useEffect(() => {
if (isSuccess) {
toast.success("Login Successfully");
@@ -70,17 +69,38 @@ const GoogleLoginButton: FC<Props> = ({ type = "login", clientId }) => {
return;
}
}, [error]);
const handleGoogleLogin = () => {
signIn();
googleLogin();
};
return (
<StyledSocialButton disabled={!loaded || isLoading} onClick={handleGoogleLogin}>
<IconGoogle className="icon" />
{loaded ? `${type === "login" ? "Sign in" : "Sign up"} with Google` : `Initializing`}
{loadError
? "Script Load Error!"
: loaded
? `${type === "login" ? "Sign in" : "Sign up"} with Google`
: `Initializing`}
</StyledSocialButton>
);
};
const GoogleLoginButton: FC<Props> = ({ type = "login", clientId }) => {
const [scriptLoaded, setScriptLoaded] = useState(false);
const [hasError, setHasError] = useState(false);
return (
<GoogleOAuthProvider
onScriptLoadError={() => {
setHasError(true);
}}
onScriptLoadSuccess={() => {
setScriptLoaded(true);
}}
clientId={clientId}
>
<GoogleLogin type={type} loaded={scriptLoaded} loadError={hasError} />
</GoogleOAuthProvider>
);
};
export default GoogleLoginButton;
src/common/component/ManageMembers.tsx
+4 -11
View File
@@ -1,4 +1,4 @@
import { FC, useEffect } from "react";
import { useEffect } from "react";
import styled from "styled-components";
import Tippy from "@tippyjs/react";
import { hideAll } from "tippy.js";
@@ -114,17 +114,12 @@ const StyledWrapper = styled.section`
}
}
`;
interface Props {
cid?: number;
}
const ManageMembers: FC<Props> = ({ cid = null }) => {
export default function ManageMembers({ cid = 0 }) {
const { contacts, channels, loginUser } = useAppSelector((store) => {
return {
contacts: store.contacts,
channels: store.channels,
loginUser: store.contacts.byId[store.authData.uid]
loginUser: store.authData.user
};
});
const { copyEmail, removeFromChannel, removeUser, canRemove, canRemoveFromChannel } =
@@ -250,6 +245,4 @@ const ManageMembers: FC<Props> = ({ cid = null }) => {
</ul>
</StyledWrapper>
);
};
export default ManageMembers;
}
src/common/component/Manifest/index.tsx
+4 -5
View File
@@ -1,4 +1,4 @@
import { useEffect, useState, useRef } from "react";
import { useEffect, useState, useRef, SyntheticEvent } from "react";
import Prompt from "./Prompt";
import usePrompt from "./usePrompt";
@@ -6,9 +6,8 @@ export default function Manifest() {
const { setCanceled: setCanceled, prompted } = usePrompt();
const deferredPromptRef = useRef(null);
const [popup, setPopup] = useState(false);
// const { data, isSuccess } = useGetServerQuery();
useEffect(() => {
const handleInstallPromotion = (e) => {
const handleInstallPromotion = (e: SyntheticEvent) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
@@ -36,10 +35,10 @@ export default function Manifest() {
// }
// }
window.addEventListener("beforeinstallprompt", handleInstallPromotion);
window.addEventListener("beforeinstallprompt", handleInstallPromotion, true);
window.addEventListener("appinstalled", handleInstalled);
return () => {
window.removeEventListener("beforeinstallprompt", handleInstallPromotion);
window.removeEventListener("beforeinstallprompt", handleInstallPromotion, true);
window.removeEventListener("appinstalled", handleInstalled);
};
}, []);
src/common/component/Message/Reaction.tsx
+3 -2
View File
@@ -9,6 +9,7 @@ import ReactionPicker from "./ReactionPicker";
import Tooltip from "../Tooltip";
import { useReactMessageMutation } from "../../../app/services/message";
import addEmojiIcon from "../../../assets/icons/add.emoji.svg?url";
import { useAppSelector } from "../../../app/store";
const StyledWrapper = styled.span`
position: relative;
@@ -129,9 +130,9 @@ const ReactionDetails = ({ uids = [], emoji, index }) => {
};
export default function Reaction({ mid, reactions = null }) {
const [reactWithEmoji] = useReactMessageMutation();
const { currUid } = useSelector((store) => {
const { currUid } = useAppSelector((store) => {
return {
currUid: store.authData.uid
currUid: store.authData.user?.uid
};
});
const handleReact = (emoji) => {
src/common/component/Message/ReactionPicker.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ export default function ReactionPicker({ mid, hidePicker }) {
const { reactionData, currUid } = useAppSelector((store) => {
return {
reactionData: store.reactionMessage[mid] || {},
currUid: store.authData.uid
currUid: store.authData.user?.uid
};
});
// useOutsideClick(wrapperRef, hidePicker);
src/common/component/Message/useMessageOperation.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ export default function useMessageOperation({ mid, context, contextId }: Params)
from_uid: store.message[mid]?.from_uid,
content_type: store.message[mid]?.content_type,
properties: store.message[mid]?.properties,
currUid: store.authData.uid
currUid: store.authData.user?.uid
};
});
const { canPin, pins, unpinMessage, isUnpinSuccess } = usePinMessage(
src/common/component/Send/index.tsx
+1 -1
View File
@@ -47,7 +47,7 @@ function Send({
uids: store.contacts.ids,
contactsData: store.contacts.byId,
mode: store.ui.inputMode,
from_uid: store.authData.uid,
from_uid: store.authData.user?.uid,
replying_mid: store.message.replying[`${context}_${id}`],
uploadFiles: store.ui.uploadFiles[`${context}_${id}`]
};
src/common/component/Server.tsx
+2 -2
View File
@@ -60,7 +60,7 @@ export default function Server() {
server: store.server
};
});
// console.log("server info", server);
console.log("server info", server);
const { name, description, logo } = server;
return (
@@ -68,7 +68,7 @@ export default function Server() {
<NavLink to={`/setting?f=${pathname}`}>
<div className="server">
<div className="logo">
<img alt="logo" src={logo} />
<img alt={`${name} logo`} src={logo} />
</div>
<div className="info">
<h3 className="name" title={description}>
src/common/component/Tooltip.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ const StyledTip = styled.div`
interface Props {
tip: string;
placement: Placement;
placement?: Placement;
delay?: number | [number | null, number | null];
children: ReactElement;
}
src/common/component/UploadModal/index.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ import useSendMessage from "../../hook/useSendMessage";
import { useAppSelector } from "../../../app/store";
export default function UploadModal({ context = "user", sendTo = 0, files = [], closeModal }) {
const from_uid = useAppSelector((store) => store.authData.uid);
const from_uid = useAppSelector((store) => store.authData.user?.uid);
const {
sendMessage,
isSuccess: sendMessageSuccess,
src/common/hook/useContactOperation.ts
+5 -6
View File
@@ -17,18 +17,17 @@ export default function useContactOperation({ uid, cid }: { uid: number; cid: nu
const [removeInChannel, { isSuccess: removeSuccess }] = useRemoveMembersMutation();
const navigateTo = useNavigate();
const { copy } = useCopy();
const { user, channel, loginUid, isAdmin } = useAppSelector((store) => {
const { user, channel, loginUser, isAdmin } = useAppSelector((store) => {
return {
user: store.contacts.byId[uid],
channel: store.channels.byId[cid],
loginUid: store.authData.uid,
isAdmin: store.contacts.byId[store.authData.uid]?.is_admin
loginUser: store.authData.user
};
});
useEffect(() => {
setPassedUid(uid ?? loginUid);
}, [uid, loginUid]);
setPassedUid(uid ?? loginUser.uid);
}, [uid, loginUser]);
useEffect(() => {
if (removeSuccess || removeUserSuccess) {
@@ -68,7 +67,7 @@ export default function useContactOperation({ uid, cid }: { uid: number; cid: nu
toast.success("Cooming Soon...");
hideAll();
};
const loginUid = loginUser?.uid;
const canRemoveFromChannel =
cid && !channel?.is_public && (isAdmin || channel?.owner == loginUid);
const canCall = agoraConfig.enabled && loginUid != uid;
src/common/hook/useDeleteMessage.ts
+1 -1
View File
@@ -7,7 +7,7 @@ export default function useDeleteMessage() {
const { loginUser, messageData } = useAppSelector((store) => {
return {
messageData: store.message,
loginUser: store.contacts.byId[store.authData.uid]
loginUser: store.authData.user
};
});
const [
src/common/hook/useLeaveChannel.ts
+1 -1
View File
@@ -3,7 +3,7 @@ import { useAppSelector } from "../../app/store";
export default function useLeaveChannel(cid: number) {
const { channel, loginUid } = useAppSelector((store) => {
return { channel: store.channels.byId[cid], loginUid: store.authData.uid };
return { channel: store.channels.byId[cid], loginUid: store.authData.user?.uid };
});
const [update, { isLoading: transfering, isSuccess: transferSuccess }] =
useUpdateChannelMutation();
src/common/hook/useMessageFeed.ts
+22 -12
View File
@@ -1,9 +1,19 @@
import { useEffect, useState, useRef } from "react";
import { useSelector } from "react-redux";
import { useLazyGetHistoryMessagesQuery } from "../../app/services/channel";
import { useLazyGetHistoryMessagesQuery as useLazyGetDMHistoryMsg } from "../../app/services/contact";
const getFeedWithPagination = (config) => {
import { useAppSelector } from "../../app/store";
export interface PageInfo {
isFirst: boolean;
isLast: boolean;
pageCount: number;
pageSize: number;
pageNumber: number;
ids: number[];
}
interface Config extends Partial<PageInfo> {
mids: number[];
}
const getFeedWithPagination = (config: Config): PageInfo => {
const { pageNumber = 1, pageSize = 40, mids = [], isLast = false } = config || {};
const shadowMids = mids.slice(0);
@@ -41,16 +51,16 @@ let oldScroll = 0;
export default function useMessageFeed({ context = "channel", id = null }) {
const [loadMoreChannelMsgs] = useLazyGetHistoryMessagesQuery();
const [loadMoreDmMsgs] = useLazyGetDMHistoryMsg();
const listRef = useRef([]);
const pageRef = useRef(null);
const containerRef = useRef(null);
const listRef = useRef<number[]>([]);
const pageRef = useRef<object | null>(null);
const containerRef = useRef<HTMLElement | null>(null);
const [hasMore, setHasMore] = useState(true);
const [appends, setAppends] = useState([]);
const [items, setItems] = useState([]);
const [items, setItems] = useState<number[]>([]);
const loadMoreMsgsFromServer = context == "channel" ? loadMoreChannelMsgs : loadMoreDmMsgs;
const { mids, messageData, loginUid } = useSelector((store) => {
const { mids, messageData, loginUid } = useAppSelector((store) => {
return {
loginUid: store.authData.uid,
loginUid: store.authData.user?.uid,
mids:
context == "channel" ? store.channelMessage[id] || [] : store.userMessage.byId[id] || [],
messageData: store.message
@@ -58,7 +68,7 @@ export default function useMessageFeed({ context = "channel", id = null }) {
});
useEffect(() => {
listRef.current = [];
pageRef.current = [];
pageRef.current = null;
setItems([]);
setHasMore(true);
setAppends([]);
@@ -91,10 +101,10 @@ export default function useMessageFeed({ context = "channel", id = null }) {
} else {
// 追加
const [lastMid] = listRef.current.slice(-1);
const sorteds = mids.slice(0).sort((a, b) => {
const sorteds = mids.slice(0).sort((a: number, b: number) => {
return Number(a) - Number(b);
});
const appends = sorteds.filter((s) => s > lastMid);
const appends = sorteds.filter((s: number) => s > lastMid);
console.log("appends", appends, sorteds, lastMid, mids);
if (appends.length) {
setAppends(appends);
src/common/hook/usePinMessage.ts
+1 -1
View File
@@ -7,7 +7,7 @@ export default function usePinMessage(cid: number) {
const { channel, loginUser } = useAppSelector((store) => {
return {
channel: store.channels.byId[cid],
loginUser: store.contacts.byId[store.authData.uid]
loginUser: store.authData.user
};
});
const [pin, { isError, isLoading, isSuccess }] = usePinMessageMutation();
src/routes/chat/ChannelChat/index.tsx
+3 -5
View File
@@ -58,15 +58,13 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
userIds,
data,
messageData,
loginUid,
loginUser,
footprint
} = useSelector((store) => {
return {
selects: store.ui.selectMessages[`channel_${cid}`],
footprint: store.footprint,
loginUser: store.contacts.byId[store.authData.uid],
loginUid: store.authData.uid,
loginUser: store.authData.user,
// msgIds: store.channelMessage[cid] || [],
userIds: store.contacts.ids,
data: store.channels.byId[cid] || {},
@@ -93,7 +91,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
if (!data) return null;
const { name, description, is_public, members = [], owner } = data;
const memberIds = is_public ? userIds : members.slice(0).sort((n) => (n == owner ? -1 : 0));
const addVisible = loginUser?.is_admin || owner == loginUid;
const addVisible = loginUser?.is_admin || owner == loginUser.uid;
console.log("channel message list", msgIds);
const readIndex = footprint.readChannels[cid];
const pinCount = data?.pinned_messages?.length || 0;
@@ -236,7 +234,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
if (!curr) return null;
const isFirst = idx == 0;
const prev = isFirst ? null : messageData[feeds[idx - 1]];
const read = curr?.from_uid == loginUid || mid <= readIndex;
const read = curr?.from_uid == loginUser.uid || mid <= readIndex;
return renderMessageFragment({
selectMode: !!selects,
updateReadIndex: updateReadDebounced,
src/routes/chat/ChannelList/NavItem.tsx
+2 -11
View File
@@ -29,21 +29,12 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
handleContextMenuEvent,
hideContextMenu
} = useContextMenu();
const {
channel,
mids,
messageData,
readIndex,
muted,
loginUid
// loginUser,
} = useSelector((store) => {
const { channel, mids, messageData, readIndex, muted, loginUid } = useSelector((store) => {
return {
// loginUser: store.contacts.byId[store.authData.uid],
channel: store.channels.byId[id],
mids: store.channelMessage[id],
messageData: store.message,
loginUid: store.authData.uid,
loginUid: store.authData.user?.uid,
readIndex: store.footprint.readChannels[id],
muted: store.footprint.muteChannels[id]
};
src/routes/chat/DMChat/index.tsx
+3 -3
View File
@@ -1,5 +1,4 @@
// import { useState, useEffect } from "react";
import { useSelector } from "react-redux";
import { useDebounce } from "rooks";
import Tippy from "@tippyjs/react";
import FavList from "../FavList";
@@ -15,6 +14,7 @@ import { StyledHeader, StyledDMChat } from "./styled";
import LoadMore from "../LoadMore";
import { renderMessageFragment } from "../utils";
import useMessageFeed from "../../../common/hook/useMessageFeed";
import { useAppSelector } from "../../../app/store";
export default function DMChat({ uid = "", dropFiles = [] }) {
const {
@@ -29,10 +29,10 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
const [updateReadIndex] = useReadMessageMutation();
const updateReadDebounced = useDebounce(updateReadIndex, 300);
console.log("dm files", dropFiles);
const { currUser, messageData, footprint, loginUid, selects } = useSelector((store) => {
const { currUser, messageData, footprint, loginUid, selects } = useAppSelector((store) => {
return {
selects: store.ui.selectMessages[`user_${uid}`],
loginUid: store.authData.uid,
loginUid: store.authData.user?.uid,
footprint: store.footprint,
currUser: store.contacts.byId[uid],
messageData: store.message
src/routes/chat/DMList/index.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ interface Props {
const DMList: FC<Props> = ({ uids, setDropFiles }) => {
const { userMessage, messageData, readUsers, loginUid } = useAppSelector((store) => {
return {
loginUid: store.authData.uid,
loginUid: store.authData.user?.uid,
readUsers: store.footprint.readUsers,
contactData: store.contacts.byId,
userMessage: store.userMessage.byId,
src/routes/chat/SessionList/Session.tsx
+1 -1
View File
@@ -55,7 +55,7 @@ export default function Session({
(store) => {
return {
mids: type == "user" ? store.userMessage.byId[id] : store.channelMessage[id],
loginUid: store.authData.uid,
loginUid: store.authData.user?.uid,
readIndex:
type == "user" ? store.footprint.readUsers[id] : store.footprint.readChannels[id],
messageData: store.message,
src/routes/chat/SessionList/index.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ export default function SessionList({ tempSession = null }) {
const { channelIDs, DMs, readChannels, readUsers, channelMessage, userMessage, loginUid } =
useAppSelector((store) => {
return {
loginUid: store.authData.uid,
loginUid: store.authData.user?.uid,
channelIDs: store.channels.ids,
DMs: store.userMessage.ids,
userMessage: store.userMessage.byId,
src/routes/home/ServerDropList.tsx
-58
View File
@@ -1,58 +0,0 @@
// import React from 'react';
import styled from "styled-components";
// import { HiChevronDoubleLeft } from "react-icons/hi";
const StyledWrapper = styled.div`
min-height: 56px;
display: flex;
justify-content: space-between;
align-items: center;
/* &.expand {
padding-right: 16px;
} */
.server {
display: flex;
align-items: center;
gap: 10px;
.logo {
width: 28px;
height: 28px;
border-radius: 50%;
}
.info {
display: flex;
flex-direction: column;
gap: 4px;
white-space: nowrap;
.title {
font-weight: bold;
font-size: 14px;
line-height: 100%;
color: #374151;
text-transform: capitalize;
}
.count {
font-weight: normal;
font-size: 12px;
line-height: 100%;
color: #78787c;
}
}
}
`;
export default function ServerDropList({ data, memberCount, expand = true }) {
if (!data) return null;
return (
<StyledWrapper className={expand ? "expand" : ""}>
<div className="server">
<img className="logo" src={data.logo} alt="logo" />
{expand && (
<div className="info">
<h2 className="title animate__animated animate__fadeIn">{data.name}</h2>
<span className="count">{memberCount} members</span>
</div>
)}
</div>
</StyledWrapper>
);
}
src/routes/home/index.tsx
+3 -3
View File
@@ -1,7 +1,6 @@
// import React from 'react';
// import { useEffect } from "react";
import { Outlet, NavLink, useLocation, useMatch } from "react-router-dom";
import { useSelector } from "react-redux";
import StyledWrapper from "./styled";
import User from "./User";
// import Tools from "./Tools";
@@ -17,6 +16,7 @@ import ChatIcon from "../../assets/icons/chat.svg";
import ContactIcon from "../../assets/icons/contact.svg";
import FavIcon from "../../assets/icons/bookmark.svg";
import FolderIcon from "../../assets/icons/folder.svg";
import { useAppSelector } from "../../app/store";
// const routes = ["/setting", "/setting/channel/:cid"];
export default function HomePage() {
usePWABadge();
@@ -29,10 +29,10 @@ export default function HomePage() {
ready,
remeberedNavs: { chat: chatPath, contact: contactPath }
}
} = useSelector((store) => {
} = useAppSelector((store) => {
return {
ui: store.ui,
loginUid: store.authData.uid
loginUid: store.authData.user?.uid
};
});
const { loading } = usePreload();
src/routes/home/usePreload.ts
+3 -1
View File
@@ -13,7 +13,7 @@ import { useAppSelector } from "../../app/store";
export default function usePreload() {
const { rehydrate, rehydrated } = useRehydrate();
const { loginUid, token } = useAppSelector((store) => {
return { loginUid: store.authData.uid, token: store.authData.token };
return { loginUid: store.authData.user?.uid, token: store.authData.token };
});
const { setStreamingReady } = useStreaming();
const [
@@ -54,6 +54,8 @@ export default function usePreload() {
}
}, [rehydrated]);
const canStreaming = loginUid && rehydrated && !!token;
console.log("ttt", loginUid, rehydrated, token);
useEffect(() => {
setStreamingReady(canStreaming);
}, [canStreaming]);
src/routes/invite/index.tsx
-2
View File
@@ -19,8 +19,6 @@ const InvitePage: FC = () => {
const [samePwd, setSamePwd] = useState(true);
const [token, setToken] = useState<string | null>("");
const [valid, setValid] = useState(false);
// const [sp] = useSearchParams();
// const navigateTo = useNavigate();
const [register, { data, isLoading, isSuccess, isError, error }] = useRegisterMutation();
const [checkToken, { data: isValid, isLoading: checkLoading, isSuccess: checkSuccess }] =
useCheckMagicTokenValidMutation();
src/routes/setting/MyAccount.tsx
+1 -1
View File
@@ -116,7 +116,7 @@ export default function MyAccount() {
const [editModal, setEditModal] = useState(null);
const [uploadAvatar, { isSuccess: uploadSuccess }] = useUpdateAvatarMutation();
const loginUser = useAppSelector((store) => {
return store.contacts.byId[store.authData.uid];
return store.authData.user;
});
useEffect(() => {
src/routes/setting/Overview.tsx
+10 -11
View File
@@ -2,7 +2,6 @@ import { useState, useEffect } from "react";
import styled from "styled-components";
import toast from "react-hot-toast";
import {
useGetServerQuery,
useUpdateServerMutation,
useUpdateLogoMutation,
useUpdateLoginConfigMutation,
@@ -99,13 +98,12 @@ const StyledWrapper = styled.div`
`;
export default function Overview() {
const loginUser = useAppSelector((store) => {
return store.contacts.byId[store.authData.uid];
const { loginUser, server } = useAppSelector((store) => {
return { loginUser: store.authData.user, server: store.server };
});
const [changed, setChanged] = useState(false);
const [serverValues, setServerValues] = useState(null);
const [serverValues, setServerValues] = useState<typeof server>(server);
const [loginConfigValues, setLoginConfigValues] = useState(null);
const { data: server, refetch: refetchServer } = useGetServerQuery();
const { data: loginConfig, refetch: refetchLoginConfig } = useGetLoginConfigQuery();
const [updateServer, { isSuccess: serverUpdated }] = useUpdateServerMutation();
const [uploadLogo, { isSuccess: uploadSuccess }] = useUpdateLogoMutation();
@@ -113,10 +111,12 @@ export default function Overview() {
const handleUpdate = () => {
const { name, description } = serverValues;
updateServer({ name, description });
updateLoginConfig({
...loginConfig,
who_can_sign_up: loginConfigValues.who_can_sign_up
});
if (loginUser?.is_admin) {
updateLoginConfig({
...loginConfig,
who_can_sign_up: loginConfigValues.who_can_sign_up
});
}
};
const handleChange = (evt) => {
const newValue = evt.target.value;
@@ -133,7 +133,6 @@ export default function Overview() {
useEffect(() => {
if (uploadSuccess) {
toast.success("Update logo successfully!");
refetchServer();
}
}, [uploadSuccess]);
useEffect(() => {
@@ -162,7 +161,6 @@ export default function Overview() {
useEffect(() => {
if (serverUpdated && loginConfigUpdated) {
toast.success("Configuration updated!");
refetchServer();
refetchLoginConfig();
}
}, [serverUpdated, loginConfigUpdated]);
@@ -171,6 +169,7 @@ export default function Overview() {
const { name, description, logo } = serverValues;
const { who_can_sign_up: whoCanSignUp } = loginConfigValues;
const isAdmin = loginUser?.is_admin;
return (
<StyledWrapper>
<div className="logo">
src/routes/setting/navs.tsx
+1 -1
View File
@@ -96,7 +96,7 @@ const navs = [
const useNavs = () => {
const loginUser = useAppSelector((store) => {
return store.contacts.byId[store.authData.uid];
return store.authData.user;
});
return navs.filter((nav) => {
if (loginUser?.is_admin) {
src/routes/settingChannel/Overview.tsx
+7 -15
View File
@@ -1,4 +1,4 @@
import { useState, useEffect, ChangeEvent } from "react";
import { useState, useEffect } from "react";
import styled from "styled-components";
import toast from "react-hot-toast";
import {
@@ -43,44 +43,37 @@ const StyledWrapper = styled.div`
}
}
`;
interface ChannelFormData {
name: string;
description: string;
}
export default function Overview({ id = 0 }) {
const { loginUser, channel } = useAppSelector((store) => {
const { uid } = store.authData;
return {
loginUser: uid ? store.contacts.byId[Number(uid)] : undefined,
loginUser: store.authData.user,
channel: store.channels.byId[id]
};
});
const { data, refetch } = useGetChannelQuery(id);
const [changed, setChanged] = useState(false);
const [values, setValues] = useState<ChannelFormData>({ name: "", description: "" });
const [values, setValues] = useState(null);
const [updateChannelIcon] = useUpdateIconMutation();
const [updateChannel, { isSuccess: updated }] = useUpdateChannelMutation();
const handleUpdate = () => {
const { name, description } = values;
updateChannel({ id, name, description });
};
const handleChange = (evt: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const handleChange = (evt) => {
const newValue = evt.target.value;
const { type } = evt.target.dataset as { type: keyof ChannelFormData };
const { type } = evt.target.dataset;
setValues((prev) => {
return { ...prev, [type]: newValue };
});
};
const updateIcon = (image: File) => {
const updateIcon = (image) => {
updateChannelIcon({ gid: id, image });
};
const handleReset = () => {
console.log("reset", data);
setValues(data);
};
@@ -107,7 +100,6 @@ export default function Overview({ id = 0 }) {
toast.success("Channel updated!");
refetch();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [updated]);
if (!values || !id) return null;
src/routes/settingChannel/index.tsx
+28 -34
View File
@@ -1,7 +1,7 @@
import { useState } from "react";
import { useParams, useNavigate, useSearchParams } from "react-router-dom";
import LeaveChannel from "../../common/component/LeaveChannel";
import StyledSettingContainer, { Danger } from "../../common/component/StyledSettingContainer";
import StyledSettingContainer from "../../common/component/StyledSettingContainer";
import DeleteConfirmModal from "./DeleteConfirmModal";
import useNavs from "./navs";
import { useAppSelector } from "../../app/store";
@@ -9,54 +9,39 @@ import { useAppSelector } from "../../app/store";
let from: string | null = null;
export default function ChannelSetting() {
const { cid } = useParams<{ cid: string }>();
const cidNum = Number(cid);
const { isAdmin, loginUid, channel } = useAppSelector((store) => {
const { cid } = useParams();
const { loginUser, channel } = useAppSelector((store) => {
return {
loginUid: store.authData.uid,
isAdmin: store.authData.uid
? store.contacts.byId[Number(store.authData.uid)]?.is_admin
: false,
channel: store.channels.byId[cidNum]
loginUser: store.authData.user,
channel: store.channels.byId[cid]
};
});
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const navs = useNavs(cidNum);
const flattenNaves = navs.map(({ items }) => items).flat();
const navs = useNavs(cid);
const flatenNavs = navs
.map(({ items }) => {
return items;
})
.flat();
const navKey = searchParams.get("nav");
from = from ?? (searchParams.get("f") || "/");
const [deleteConfirm, setDeleteConfirm] = useState(false);
const [leaveConfirm, setLeaveConfirm] = useState(false);
const close = () => {
// todo: check usage
navigate(from!);
navigate(from);
from = null;
};
const toggleDeleteConfirm = () => {
const toggleDeleteConfrim = () => {
setDeleteConfirm((prev) => !prev);
};
const toggleLeaveConfirm = () => {
const toggleLeaveConfrim = () => {
setLeaveConfirm((prev) => !prev);
};
if (!cid) return null;
const currNav = flattenNaves.find((n) => n.name == navKey) || flattenNaves[0];
const canDelete = isAdmin || channel?.owner === Number(loginUid);
const currNav = flatenNavs.find((n) => n.name == navKey) || flatenNavs[0];
const canDelete = loginUser.isAdmin || channel?.owner == loginUser.uid;
const canLeave = !channel?.is_public;
const dangers: Danger[] = [];
if (canLeave) {
dangers.push({
title: "Leave Channel",
handler: toggleLeaveConfirm
});
}
if (canDelete) {
dangers.push({
title: "Delete Channel",
handler: toggleDeleteConfirm
});
}
return (
<>
@@ -65,12 +50,21 @@ export default function ChannelSetting() {
closeModal={close}
title="Channel Setting"
navs={navs}
dangers={dangers}
dangers={[
canLeave && {
title: "Leave Channel",
handler: toggleLeaveConfrim
},
canDelete && {
title: "Delete Channel",
handler: toggleDeleteConfrim
}
]}
>
{currNav.component}
</StyledSettingContainer>
{deleteConfirm && <DeleteConfirmModal closeModal={toggleDeleteConfirm} id={Number(cid)} />}
{leaveConfirm && <LeaveChannel closeModal={toggleLeaveConfirm} id={cidNum} />}
{deleteConfirm && <DeleteConfirmModal closeModal={toggleDeleteConfrim} id={cid} />}
{leaveConfirm && <LeaveChannel closeModal={toggleLeaveConfrim} id={cid} />}
</>
);
}
src/types/auth.ts
+1
View File
@@ -17,6 +17,7 @@ export interface User {
is_admin: boolean;
avatar_updated_at: number;
create_by: string;
avatar?: string;
}
export interface AuthData extends AuthToken {
yarn.lock
+5 -8
View File
@@ -2386,6 +2386,11 @@
resolved "http://mirrors.cloud.tencent.com/npm/@react-hook%2fmerged-ref/-/merged-ref-1.3.2.tgz#919b387a5f79ed67f2578f2015ab7b7d337787d2"
integrity sha512-cQ9Y8m4zlrw/qotReo33E+3Sy9FVqMZb5JwUlb3wj3IJJ1cNJtxcgfWF6rS2NZQrfBJ2nAnckUdPJjMyIJTNZg==
"@react-oauth/google@^0.2.6":
version "0.2.6"
resolved "https://mirrors.cloud.tencent.com/npm/@react-oauth%2fgoogle/-/google-0.2.6.tgz#42f7a18c62d677c77ee8e1fc2eec2ccbe50be997"
integrity sha512-Az6w/EL3QHSvWVbfX2WbUB15PGqM0hm86bpAoyvjw2nhDdPp9IOjpFg5HfSGJQJBydjbCFnZjI8PJskTzLOhew==
"@reduxjs/toolkit@^1.8.2":
version "1.8.2"
resolved "https://mirrors.cloud.tencent.com/npm/@reduxjs%2ftoolkit/-/toolkit-1.8.2.tgz#352fd17bc858af51d21ce8d28183a930cab9e638"
@@ -10377,14 +10382,6 @@ react-fast-compare@^3.0.1, react-fast-compare@^3.1.1:
resolved "https://mirrors.tencent.com/npm/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
react-google-login@^5.2.2:
version "5.2.2"
resolved "http://mirrors.cloud.tencent.com/npm/react-google-login/-/react-google-login-5.2.2.tgz#a20b46440c6c1610175ef75baf427118ff0e9859"
integrity sha512-JUngfvaSMcOuV0lFff7+SzJ2qviuNMQdqlsDJkUM145xkGPVIfqWXq9Ui+2Dr6jdJWH5KYdynz9+4CzKjI5u6g==
dependencies:
"@types/react" "*"
prop-types "^15.6.0"
react-helmet@^6.1.0:
version "6.1.0"
resolved "https://mirrors.tencent.com/npm/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"