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

chore: merge from haodong code

Browse Source
This commit is contained in:
Tristan Yang
2022-06-24 10:32:04 +08:00
parent e53ebd63a7 59593881b2
commit 69b4e7aac2
42 changed files with 714 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/services/auth.ts
+13 -9
View File
@@ -3,7 +3,7 @@ import { nanoid } from "@reduxjs/toolkit";
import baseQuery from "./base.query";
import { setAuthData, updateToken, resetAuthData, updateInitialized } from "../slices/auth.data";
import BASE_URL, { KEY_DEVICE_KEY } from "../config";
import { AuthData } from '../../types/auth';
import { AuthData } from "../../types/auth";
const getDeviceId = () => {
let d = localStorage.getItem(KEY_DEVICE_KEY);
@@ -18,7 +18,7 @@ export const authApi = createApi({
reducerPath: "authApi",
baseQuery,
endpoints: (builder) => ({
login: builder.mutation({
login: builder.mutation<AuthData, string>({
query: (credentials) => ({
url: "token/login",
method: "POST",
@@ -30,17 +30,21 @@ export const authApi = createApi({
}),
transformResponse: (data: AuthData) => {
const { avatar_updated_at } = data.user;
data.user.avatar =
avatar_updated_at == 0
? ""
: `${BASE_URL}/resource/avatar?uid=${data.user.uid}&t=${avatar_updated_at}`;
return data;
return {
...data,
user: {
...data.user,
avatar:
avatar_updated_at == 0
? ""
: `${BASE_URL}/resource/avatar?uid=${data.user.uid}&t=${avatar_updated_at}`
}
};
},
async onQueryStarted(params, { dispatch, queryFulfilled }) {
try {
const { data } = await queryFulfilled;
if (data) {
console.log("login resp", data);
dispatch(setAuthData(data));
}
} catch {
@@ -119,7 +123,7 @@ export const authApi = createApi({
},
url: `user/send_login_magic_link?email=${encodeURIComponent(email)}`,
method: "POST",
responseHandler: (response) => response.text()
responseHandler: (response: Response) => response.text()
// body: { email }
})
}),
src/app/slices/auth.data.ts
+9 -7
View File
@@ -1,26 +1,29 @@
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { KEY_EXPIRE, KEY_PWA_INSTALLED, KEY_REFRESH_TOKEN, KEY_TOKEN, KEY_UID } from "../config";
import { AuthData, AuthToken } from "../../types/auth";
import { AuthData, AuthToken, User } from "../../types/auth";
interface State {
initialized: boolean;
uid: string | null;
user: User | null;
token: string | null;
expireTime: string | number; // todo
expireTime: number;
refreshToken: string | null;
}
const initialState: State = {
initialized: true,
uid: null,
user: null,
token: localStorage.getItem(KEY_TOKEN),
expireTime: localStorage.getItem(KEY_EXPIRE) || +new Date(),
expireTime: Number(localStorage.getItem(KEY_EXPIRE) || +new Date()),
refreshToken: localStorage.getItem(KEY_REFRESH_TOKEN)
};
const emptyState: State = {
initialized: true,
uid: null,
user: null,
token: null,
expireTime: +new Date(),
refreshToken: null
@@ -30,20 +33,20 @@ const authDataSlice = createSlice({
name: "authData",
initialState,
reducers: {
setAuthData(state, action: PayloadAction<AuthData>) {
setAuthData(state, { payload }: PayloadAction<AuthData>) {
const {
initialized = true,
user: { uid },
token,
refresh_token,
expired_in = 0
} = action.payload;
} = payload;
state.initialized = initialized;
state.uid = `${uid}`;
state.user = payload.user;
state.token = token;
state.refreshToken = refresh_token;
// 当前时间往后推expire时长
console.log("expire", expired_in);
const expireTime = +new Date() + Number(expired_in) * 1000;
state.expireTime = expireTime;
// set local data
@@ -53,7 +56,6 @@ const authDataSlice = createSlice({
localStorage.setItem(KEY_UID, `${uid}`);
},
resetAuthData() {
console.log("clear auth data");
// remove local data
localStorage.removeItem(KEY_EXPIRE);
localStorage.removeItem(KEY_TOKEN);
src/app/slices/channels.ts
+23 -23
View File
@@ -1,11 +1,15 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import BASE_URL from '../config';
import { getNonNullValues } from '../../common/utils';
import { Channel, UpdateChannelDTO, UpdatePinnedMessageDTO } from '../../types/channel';
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import BASE_URL from "../config";
import { getNonNullValues } from "../../common/utils";
import { Channel, UpdateChannelDTO, UpdatePinnedMessageDTO } from "../../types/channel";
interface StoredChannel extends Channel {
icon: string;
}
interface State {
ids: number[];
byId: { [id: number]: Channel | undefined };
byId: { [id: number]: StoredChannel | undefined };
}
const initialState: State = {
@@ -23,16 +27,15 @@ const channelsSlice = createSlice({
fullfillChannels(state, action: PayloadAction<Channel[]>) {
const channels = action.payload || [];
state.ids = channels.map(({ gid }) => gid);
state.byId = Object.fromEntries(
channels.map((c) => {
const { gid, avatar_updated_at } = c;
c.icon =
avatar_updated_at == 0
? ''
: `${BASE_URL}/resource/group_avatar?gid=${gid}&t=${avatar_updated_at}`;
return [gid, c];
})
);
channels.forEach((c) => {
state.byId[c.gid] = {
...c,
icon:
c.avatar_updated_at == 0
? ""
: `${BASE_URL}/resource/group_avatar?gid=${c.gid}&t=${c.avatar_updated_at}`
};
});
},
addChannel(state, action: PayloadAction<Channel>) {
const ch = action.payload;
@@ -44,26 +47,23 @@ const channelsSlice = createSlice({
...ch,
icon:
avatar_updated_at == 0
? ''
? ""
: `${BASE_URL}/resource/group_avatar?gid=${gid}&t=${avatar_updated_at}`
};
},
updateChannel(state, action: PayloadAction<UpdateChannelDTO>) {
const ignoreInPublic = ['add_member', 'remove_member'];
const ignoreInPublic = ["add_member", "remove_member"];
const { gid, operation, members = [], ...rest } = action.payload;
const currChannel = state.byId[gid];
if (
!currChannel ||
(currChannel.is_public && ignoreInPublic.includes(operation))
) return;
if (!currChannel || (currChannel.is_public && ignoreInPublic.includes(operation))) return;
switch (operation) {
case 'remove_member': {
case "remove_member": {
state.byId[gid]!.members = state.byId[gid]!.members.filter(
(id) => members.findIndex((uid) => uid == id) == -1
);
break;
}
case 'add_member': {
case "add_member": {
const currs = state.byId[gid]!.members;
const _set = new Set([...currs, ...members]);
state.byId[gid]!.members = Array.from(_set);
src/app/slices/footprint.ts
+40 -36
View File
@@ -1,12 +1,13 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { MuteChannel, MuteUser } from "../../types/sse";
export interface State {
usersVersion: number;
afterMid: number;
readUsers: {};
readChannels: {};
muteUsers: {};
muteChannels: {};
readUsers: { [uid: number]: number };
readChannels: { [gid: number]: number };
muteUsers: { [uid: number]: { expired_at: number } | undefined };
muteChannels: { [gid: number]: { expired_at: number } | undefined };
}
const initialState: State = {
@@ -18,6 +19,13 @@ const initialState: State = {
muteChannels: {}
};
interface UpdateMutePayload {
remove_users: number[];
remove_groups: number[];
add_users: MuteUser[];
add_groups: MuteChannel[];
}
const footprintSlice = createSlice({
name: "footprint",
initialState,
@@ -49,55 +57,51 @@ const footprintSlice = createSlice({
updateAfterMid(state, action: PayloadAction<number>) {
state.afterMid = action.payload;
},
updateMute(state, action) {
updateMute(state, action: PayloadAction<UpdateMutePayload>) {
const payload = action.payload || {};
Object.keys(payload).forEach((key) => {
switch (key) {
case "remove_users":
{
const uids = payload.remove_users;
uids.forEach((id) => {
delete state.muteUsers[id];
});
}
case "remove_users": {
const uids = payload.remove_users;
uids.forEach((id) => {
delete state.muteUsers[id];
});
break;
case "remove_groups":
{
const gids = payload.remove_groups;
gids.forEach((id) => {
delete state.muteChannels[id];
});
}
}
case "remove_groups": {
const gids = payload.remove_groups;
gids.forEach((id) => {
delete state.muteChannels[id];
});
break;
case "add_users":
{
const mutes = payload.add_users;
mutes.forEach(({ uid, expired_in = null }) => {
state.muteUsers[uid] = { expired_in };
});
}
}
case "add_users": {
const mutes = payload.add_users;
mutes.forEach(({ uid, expired_at }) => {
state.muteUsers[uid] = { expired_at };
});
break;
case "add_groups":
{
const mutes = payload.add_groups;
mutes.forEach(({ gid, expired_in = null }) => {
state.muteChannels[gid] = { expired_in };
});
}
}
case "add_groups": {
const mutes = payload.add_groups;
mutes.forEach(({ gid, expired_at }) => {
state.muteChannels[gid] = { expired_at };
});
break;
}
default:
break;
}
});
},
updateReadUsers(state, action) {
updateReadUsers(state, action: PayloadAction<{ uid: number; mid: number }[]>) {
const reads = action.payload || [];
if (reads.length == 0) return;
reads.forEach(({ uid, mid }) => {
state.readUsers[uid] = mid;
});
},
updateReadChannels(state, action) {
updateReadChannels(state, action: PayloadAction<{ gid: number; mid: number }[]>) {
const reads = action.payload || [];
if (reads.length == 0) return;
reads.forEach(({ gid, mid }) => {
src/app/slices/server.ts
+24 -8
View File
@@ -1,5 +1,16 @@
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
interface State {
name: string;
description: string;
logo: string;
inviteLink: {
link: string;
expire: number;
};
}
const initialState: State = {
name: "",
description: "",
logo: "",
@@ -8,6 +19,7 @@ const initialState = {
expire: 0
}
};
const serverSlice = createSlice({
name: "server",
initialState,
@@ -15,24 +27,28 @@ const serverSlice = createSlice({
resetServer() {
return initialState;
},
fullfillServer(state, action) {
fullfillServer(state, action: PayloadAction<State>) {
const {
inviteLink = {
link: "",
expire: 0
},
logo = "", // todo: check missed logo property
name = "",
description = ""
} = action.payload || {};
return { name, description, inviteLink };
return { name, logo, description, inviteLink };
},
updateInfo(state, action) {
updateInfo(state, action: PayloadAction<Partial<State>>) {
const values = action.payload || {};
Object.keys(values).forEach((_key) => {
state[_key] = values[_key];
});
// todo: check and remove old logic
// Object.keys(values).forEach((_key) => {
// state[_key] = values[_key];
// });
state = { ...state, ...values };
}
}
});
export const { updateInfo, resetServer, fullfillServer } = serverSlice.actions;
export default serverSlice.reducer;
src/common/component/Avatar.tsx
+12 -3
View File
@@ -1,10 +1,17 @@
import { useState, useEffect, memo } from "react";
import { useState, useEffect, memo, SyntheticEvent, FC } from "react";
import { getInitials, getInitialsAvatar } from "../utils";
const Avatar = ({ url = "", name = "unkonw name", type = "user", ...rest }) => {
interface Props {
url?: string;
name?: string;
type?: "user" | "channel";
}
const Avatar: FC<Props> = ({ url = "", name = "unknown name", type = "user", ...rest }) => {
// console.log("avatar url", url);
const [src, setSrc] = useState("");
const handleError = (err) => {
const handleError = (err: SyntheticEvent<HTMLImageElement>) => {
console.log("load avatar error", err);
const tmp = getInitialsAvatar({
initials: getInitials(name),
@@ -13,6 +20,7 @@ const Avatar = ({ url = "", name = "unkonw name", type = "user", ...rest }) => {
});
setSrc(tmp);
};
useEffect(() => {
if (!url) {
const tmp = getInitialsAvatar({
@@ -26,6 +34,7 @@ const Avatar = ({ url = "", name = "unkonw name", type = "user", ...rest }) => {
}
}, [url, name]);
if (!src) return null;
return <img src={src} onError={handleError} {...rest} />;
};
src/common/component/AvatarUploader.tsx
+19 -6
View File
@@ -1,4 +1,4 @@
import { useState } from "react";
import { ChangeEvent, FC, useState } from "react";
import styled from "styled-components";
import Avatar from "./Avatar";
import uploadIcon from "../../assets/icons/upload.image.svg?url";
@@ -61,21 +61,31 @@ const StyledWrapper = styled.div`
}
`;
export default function AvatarUploader({
interface Props {
url?: string;
name?: string;
type?: "user";
disabled?: boolean;
uploadImage: (file: File) => Promise<any>;
}
const AvatarUploader: FC<Props> = ({
url = "",
name = "",
type = "user",
uploadImage,
disabled = false
}) {
}) => {
const [uploading, setUploading] = useState(false);
const handleUpload = async (evt) => {
const handleUpload = async (evt: ChangeEvent<HTMLInputElement>) => {
if (uploading) return;
const [file] = evt.target.files;
if (!evt.target.files) return;
const [file] = Array.from(evt.target.files);
setUploading(true);
await uploadImage(file);
setUploading(false);
};
return (
<StyledWrapper>
<div className="avatar">
@@ -87,6 +97,7 @@ export default function AvatarUploader({
multiple={false}
onChange={handleUpload}
type="file"
// todo: xss
accept="image/*"
name="avatar"
id="avatar"
@@ -97,4 +108,6 @@ export default function AvatarUploader({
{!disabled && <img src={uploadIcon} alt="icon" className="icon" />}
</StyledWrapper>
);
}
};
export default AvatarUploader;
src/common/component/BlankPlaceholder.tsx
+13 -6
View File
@@ -1,4 +1,4 @@
import { useState } from "react";
import { FC, useState } from "react";
import styled from "styled-components";
import { NavLink } from "react-router-dom";
import ChannelModal from "./ChannelModal";
@@ -67,7 +67,11 @@ const Styled = styled.div`
}
`;
export default function BlankPlaceholder({ type = "chat" }) {
interface Props {
type?: "chat";
}
const BlankPlaceholder: FC<Props> = ({ type = "chat" }) => {
const server = useAppSelector((store) => store.server);
const [inviteModalVisible, setInviteModalVisible] = useState(false);
const [createChannelVisible, setCreateChannelVisible] = useState(false);
@@ -83,7 +87,8 @@ export default function BlankPlaceholder({ type = "chat" }) {
};
const chatTip =
type == "chat" ? "Create a Channel to Start a Conversation" : "Send a Direct Message";
const chatHanlder = type == "chat" ? toggleChannelModalVisible : toggleContactListVisible;
const chatHandler = type == "chat" ? toggleChannelModalVisible : toggleContactListVisible;
return (
<>
<Styled>
@@ -99,7 +104,7 @@ export default function BlankPlaceholder({ type = "chat" }) {
<IconInvite className="icon" />
<div className="txt">Invite your friends or teammates</div>
</div>
<div className="box" onClick={chatHanlder}>
<div className="box" onClick={chatHandler}>
<IconChat className="icon" />
<div className="txt">{chatTip}</div>
</div>
@@ -109,7 +114,7 @@ export default function BlankPlaceholder({ type = "chat" }) {
</a>
<NavLink to={"#"} className="box">
<IconAsk className="icon" />
<div className="txt">Got quesions? Visit our help center </div>
<div className="txt">Got questions? Visit our help center </div>
</NavLink>
</div>
</Styled>
@@ -120,4 +125,6 @@ export default function BlankPlaceholder({ type = "chat" }) {
{inviteModalVisible && <InviteModal closeModal={toggleInviteModalVisible} />}
</>
);
}
};
export default BlankPlaceholder;
src/common/component/ChannelModal/index.tsx
+5 -8
View File
@@ -14,13 +14,13 @@ import { useCreateChannelMutation } from "../../../app/services/channel";
import { useAppSelector } from "../../../app/store";
export default function ChannelModal({ personal = false, closeModal }) {
const { conactsData, loginUid } = useAppSelector((store) => {
return { conactsData: store.contacts.byId, loginUid: store.authData.uid };
const { contactsData, loginUid } = useAppSelector((store) => {
return { contactsData: store.contacts.byId, loginUid: store.authData.uid };
});
const navigateTo = useNavigate();
const [data, setData] = useState({
name: "",
dsecription: "",
description: "",
members: [loginUid],
is_public: !personal
});
@@ -71,14 +71,12 @@ export default function ChannelModal({ personal = false, closeModal }) {
const { members } = data;
const { uid } = currentTarget.dataset;
let tmp = members.includes(+uid) ? members.filter((m) => m != uid) : [...members, +uid];
console.log(uid, currentTarget);
setData((prev) => {
return { ...prev, members: tmp };
});
console.log({ data });
};
console.log("contacts", contacts);
const loginUser = conactsData[loginUid];
const loginUser = contactsData[loginUid];
if (!loginUser) return null;
const { name, members, is_public } = data;
return (
@@ -98,7 +96,6 @@ export default function ChannelModal({ personal = false, closeModal }) {
{contacts.map((u) => {
const { uid } = u;
const checked = members.includes(uid);
console.log({ checked });
return (
<li
key={uid}
src/common/component/Contact/ContextMenu.tsx
+55 -45
View File
@@ -1,8 +1,18 @@
import { FC, ReactElement } from "react";
import Tippy from "@tippyjs/react";
import useContactOperation from "../../hook/useContactOperation";
import ContextMenu from "../ContextMenu";
export default function ContactContextMenu({ enable = false, uid, cid, visible, hide, children }) {
interface Props {
enable?: boolean;
uid: number;
cid: number;
visible: boolean;
hide: () => void;
children: ReactElement;
}
const ContactContextMenu: FC<Props> = ({ enable = false, uid, cid, visible, hide, children }) => {
const {
canCall,
call,
@@ -18,48 +28,48 @@ export default function ContactContextMenu({ enable = false, uid, cid, visible,
cid
});
return (
<>
<Tippy
disabled={!enable}
visible={visible}
followCursor={"initial"}
interactive
placement="right-start"
popperOptions={{ strategy: "fixed" }}
onClickOutside={hide}
key={uid}
content={
<ContextMenu
hideMenu={hide}
items={[
{
title: "Message",
handler: startChat
},
canCall && {
title: "Call",
handler: call
},
canCopyEmail && {
title: "Copy Email",
handler: copyEmail
},
canRemoveFromChannel && {
danger: true,
title: "Remove From Channel",
handler: removeFromChannel
},
canRemove && {
danger: true,
title: "Remove From Server",
handler: removeUser
}
]}
/>
}
>
{children}
</Tippy>
</>
<Tippy
disabled={!enable}
visible={visible}
followCursor={"initial"}
interactive
placement="right-start"
popperOptions={{ strategy: "fixed" }}
onClickOutside={hide}
key={uid}
content={
<ContextMenu
hideMenu={hide}
items={[
{
title: "Message",
handler: startChat
},
canCall && {
title: "Call",
handler: call
},
canCopyEmail && {
title: "Copy Email",
handler: copyEmail
},
canRemoveFromChannel && {
danger: true,
title: "Remove From Channel",
handler: removeFromChannel
},
canRemove && {
danger: true,
title: "Remove From Server",
handler: removeUser
}
]}
/>
}
>
{children}
</Tippy>
);
}
};
export default ContactContextMenu;
src/common/component/Contact/index.tsx
+22 -7
View File
@@ -1,3 +1,4 @@
import { FC } from "react";
import { useNavigate } from "react-router-dom";
import Tippy from "@tippyjs/react";
import IconOwner from "../../../assets/icons/owner.svg";
@@ -8,17 +9,29 @@ import StyledWrapper from "./styled";
import useContextMenu from "../../hook/useContextMenu";
import { useAppSelector } from "../../../app/store";
export default function Contact({
cid = null,
interface Props {
cid: number;
uid: number;
owner?: number;
dm?: boolean;
interactive?: boolean;
popover?: boolean;
compact?: boolean;
avatarSize?: number;
enableContextMenu?: boolean;
}
const Contact: FC<Props> = ({
cid,
uid,
owner = false,
dm = false,
interactive = true,
uid = "",
popover = false,
compact = false,
avatarSize = 32,
enableContextMenu = false
}) {
}) => {
const navigate = useNavigate();
const { visible: contextMenuVisible, handleContextMenuEvent, hideContextMenu } = useContextMenu();
const curr = useAppSelector((store) => store.contacts.byId[uid]);
@@ -43,10 +56,10 @@ export default function Contact({
content={<Profile uid={uid} type="card" cid={cid} />}
>
<StyledWrapper
onContextMenu={enableContextMenu ? handleContextMenuEvent : null}
size={avatarSize}
onDoubleClick={dm ? handleDoubleClick : null}
className={`${interactive ? "interactive" : ""} ${compact ? "compact" : ""}`}
onDoubleClick={dm ? handleDoubleClick : undefined}
onContextMenu={enableContextMenu ? handleContextMenuEvent : undefined}
>
<div className="avatar">
<Avatar url={curr.avatar} name={curr.name} alt="avatar" />
@@ -58,4 +71,6 @@ export default function Contact({
</Tippy>
</ContextMenu>
);
}
};
export default Contact;
src/common/component/ContextMenu.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { FC, MouseEvent } from "react";
import StyledMenu from "./styled/Menu";
interface Item {
export interface Item {
title: string;
icon: string;
handler: (e: MouseEvent) => void;
src/common/component/DeleteMessageConfirm.tsx
+2 -3
View File
@@ -11,8 +11,7 @@ interface Props {
}
const DeleteMessageConfirmModal: FC<Props> = ({ closeModal, mids = [] }) => {
// const dispatch = useDispatch();
const mid_arr = mids ? (Array.isArray(mids) ? mids : [mids]) : [];
const mid_arr: number[] = mids ? (Array.isArray(mids) ? mids : [mids]) : [];
const [ids] = useState(mid_arr);
const { deleteMessage, isDeleting } = useDeleteMessage();
const handleDelete = async () => {
@@ -40,7 +39,7 @@ const DeleteMessageConfirmModal: FC<Props> = ({ closeModal, mids = [] }) => {
ids.length > 1 ? "these messages" : "this message"
}?`}
>
{ids.length == 1 && <PreviewMessage mid={ids[0]} />}
{ids.length === 1 && <PreviewMessage mid={ids[0]} />}
</StyledModal>
</Modal>
);
src/common/component/FAQ.tsx
-1
View File
@@ -9,7 +9,6 @@ const Styled = styled.div`
export default function FAQ() {
const { data: serverVersion } = useGetServerVersionQuery();
console.log("build time", serverVersion);
return (
<Styled>
<div className="item">Client Version: {process.env.VERSION}</div>
src/common/component/FileBox/index.tsx
+31 -12
View File
@@ -1,7 +1,6 @@
// import React from 'react'
import { FC, ReactElement } from "react";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import { useSelector } from "react-redux";
import Styled from "./styled";
import {
VideoPreview,
@@ -13,13 +12,20 @@ import {
} from "./preview";
import { getFileIcon, formatBytes } from "../../utils";
import IconDownload from "../../../assets/icons/download.svg";
import { useAppSelector } from "../../../app/store";
// todo
// todo: move to root file
dayjs.extend(relativeTime);
const renderPreview = (data) => {
interface Data {
file_type: string;
name: string;
content: string;
}
const renderPreview = (data: Data) => {
const { file_type, name, content } = data;
let preview = null;
let preview: null | ReactElement = null;
const checks = {
image: /^image/gi,
@@ -60,20 +66,31 @@ const renderPreview = (data) => {
}
return preview;
};
export default function FileBox({
preview = false,
interface Props {
preview?: boolean;
flex: boolean;
file_type: string;
name: string;
size: number;
created_at: number;
from_uid: number;
content: string;
}
const FileBox: FC<Props> = ({
preview,
flex,
file_type = "",
file_type,
name,
size,
created_at,
from_uid,
content
}) {
const fromUser = useSelector((store) => store.contacts.byId[from_uid]);
}) => {
const fromUser = useAppSelector((store) => store.contacts.byId[from_uid]);
const icon = getFileIcon(file_type, name);
if (!content || !fromUser || !name) return null;
console.log("file content", content, name, flex);
const previewContent = renderPreview({ file_type, content, name });
const withPreview = preview && previewContent;
return (
@@ -101,4 +118,6 @@ export default function FileBox({
{withPreview && <div className="preview">{previewContent}</div>}
</Styled>
);
}
};
export default FileBox;
src/common/component/FileBox/preview/Audio.tsx
+9 -3
View File
@@ -1,4 +1,4 @@
import { ReactEventHandler, useState } from "react";
import { FC, ReactEventHandler, useState } from "react";
import styled from "styled-components";
const Styled = styled.div`
@@ -17,7 +17,11 @@ const Styled = styled.div`
}
`;
export default function Audio({ url = "" }) {
interface Props {
url: string;
}
const Audio: FC<Props> = ({ url }) => {
const [err, setErr] = useState(false);
const handleError: ReactEventHandler<HTMLAudioElement> = (err) => {
@@ -35,4 +39,6 @@ export default function Audio({ url = "" }) {
)}
</Styled>
);
}
};
export default Audio;
src/common/component/FileBox/preview/Code.tsx
+9 -3
View File
@@ -1,4 +1,4 @@
import { useState, useEffect } from "react";
import { useState, useEffect, FC } from "react";
import styled from "styled-components";
const Styled = styled.div`
@@ -12,7 +12,11 @@ const Styled = styled.div`
color: #eee;
`;
export default function Code({ url = "" }) {
interface Props {
url: string;
}
const Code: FC<Props> = ({ url }) => {
const [content, setContent] = useState("");
useEffect(() => {
const getContent = async (url: string) => {
@@ -26,4 +30,6 @@ export default function Code({ url = "" }) {
if (!content) return null;
return <Styled>{content}</Styled>;
}
};
export default Code;
src/common/component/FileBox/preview/Doc.tsx
+9 -3
View File
@@ -1,4 +1,4 @@
import { useState, useEffect } from "react";
import { useState, useEffect, FC } from "react";
import styled from "styled-components";
const Styled = styled.div`
@@ -11,7 +11,11 @@ const Styled = styled.div`
word-break: break-all;
`;
export default function Doc({ url = "" }) {
interface Props {
url: string;
}
const Doc: FC<Props> = ({ url }) => {
const [content, setContent] = useState("");
useEffect(() => {
const getContent = async (url: string) => {
@@ -25,4 +29,6 @@ export default function Doc({ url = "" }) {
if (!content) return null;
return <Styled>{content}</Styled>;
}
};
export default Doc;
src/common/component/FileBox/preview/Image.tsx
+11 -4
View File
@@ -1,4 +1,4 @@
import React from "react";
import React, { FC } from "react";
import styled from "styled-components";
const Styled = styled.div`
@@ -11,11 +11,18 @@ const Styled = styled.div`
}
`;
export default function Image({ url = "" }) {
interface Props {
url: string;
alt?: string;
}
const Image: FC<Props> = ({ url, alt }) => {
if (!url) return null;
return (
<Styled>
<img src={url} />
<img src={url} alt={alt} />
</Styled>
);
}
};
export default Image;
src/common/component/FileBox/preview/Pdf.tsx
+9 -3
View File
@@ -1,4 +1,5 @@
import styled from "styled-components";
import { FC } from "react";
const Styled = styled.div`
padding: 8px;
@@ -10,14 +11,17 @@ const Styled = styled.div`
}
`;
export default function Pdf({ url = "" }) {
interface Props {
url: string;
}
const Pdf: FC<Props> = ({ url }) => {
// const [content, setContent] = useState("");
// const [pageNumber, setPageNumber] = useState(1);
// const [numPages, setNumPages] = useState(null);
// const onDocumentLoadSuccess = ({ numPages }) => {
// setNumPages(numPages);
// };
if (!url) return null;
return (
<Styled>
<embed src={url} type="application/pdf" />
@@ -26,4 +30,6 @@ export default function Pdf({ url = "" }) {
</Document> */}
</Styled>
);
}
};
export default Pdf;
src/common/component/FileBox/preview/Video.tsx
+9 -4
View File
@@ -1,4 +1,4 @@
import React from "react";
import React, { FC } from "react";
import styled from "styled-components";
const Styled = styled.div`
@@ -10,11 +10,16 @@ const Styled = styled.div`
}
`;
export default function Video({ url = "" }) {
if (!url) return null;
interface Props {
url: string;
}
const Video: FC<Props> = ({ url }) => {
return (
<Styled>
<video controls src={url} />
</Styled>
);
}
};
export default Video;
src/common/component/FileMessage/ImageMessage.tsx
+17 -10
View File
@@ -1,4 +1,4 @@
import { useState, useEffect } from "react";
import { useState, useEffect, FC } from "react";
import styled from "styled-components";
import { CircularProgressbar, buildStyles } from "react-circular-progressbar";
import "react-circular-progressbar/dist/styles.css";
@@ -33,17 +33,25 @@ const Styled = styled.div`
}
`;
export default function ImageMessage({
interface Props {
uploading: boolean;
progress: number;
thumbnail: string;
download: string;
content: string;
properties: { width: number; height: number };
}
const ImageMessage: FC<Props> = ({
uploading,
progress,
thumbnail,
download,
content,
properties = {}
}) {
properties
}) => {
const [url, setUrl] = useState(thumbnail);
const { width = 0, height = 0 } = getDefaultSize(properties);
console.log("image props", properties, width, height);
useEffect(() => {
const newUrl = thumbnail;
const img = new Image();
@@ -64,10 +72,7 @@ export default function ImageMessage({
<CircularProgressbar
value={progress}
strokeWidth={50}
styles={buildStyles({
storke: "#000",
strokeLinecap: "butt"
})}
styles={buildStyles({ strokeLinecap: "butt" })}
/>
</div>
</div>
@@ -85,4 +90,6 @@ export default function ImageMessage({
/>
</Styled>
);
}
};
export default ImageMessage;
src/common/component/GithubLoginButton.tsx
+6 -4
View File
@@ -1,4 +1,4 @@
import { useEffect } from "react";
import { useEffect, FC } from "react";
import IconGithub from "../../assets/icons/github.svg";
import styled from "styled-components";
import { KEY_LOCAL_MAGIC_TOKEN } from "../../app/config";
@@ -17,6 +17,7 @@ const StyledSocialButton = styled(Button)`
color: #344054;
border: 1px solid #d0d5dd;
background: none !important;
.icon {
width: 24px;
height: 24px;
@@ -28,7 +29,7 @@ type Props = {
type?: "login" | "register";
};
export default function GithubLoginButton({ type = "login", client_id }: Props) {
const GithubLoginButton: FC<Props> = ({ type = "login", client_id }) => {
//拿本地存的magic token
const magic_token = localStorage.getItem(KEY_LOCAL_MAGIC_TOKEN);
const [login, { isLoading, isSuccess, error }] = useLoginMutation();
@@ -66,7 +67,7 @@ export default function GithubLoginButton({ type = "login", client_id }: Props)
}
}, [error]);
const handleGithubLogin = () => {
location.href = `http://github.com/login/oauth/authorize?client_id=${client_id}`;
location.href = `https://github.com/login/oauth/authorize?client_id=${client_id}`;
// console.log("github login");
};
// console.log("google login ", loaded);
@@ -76,4 +77,5 @@ export default function GithubLoginButton({ type = "login", client_id }: Props)
{` ${type === "login" ? "Sign in" : "Sign up"} with Github`}
</StyledSocialButton>
);
}
};
export default GithubLoginButton;
src/common/component/ImagePreviewModal.tsx
+35 -10
View File
@@ -1,16 +1,16 @@
import { useRef, useState, useEffect } from "react";
import { useRef, useState, useEffect, FC } from "react";
import styled, { keyframes } from "styled-components";
import { useOutsideClick, useKey } from "rooks";
import { Ring } from "@uiball/loaders";
import Modal from "./Modal";
const AniFadeIn = keyframes`
from{
background: transparent;
}
to{
background: rgba(1, 1, 1, 0.9);
}
from {
background: transparent;
}
to {
background: rgba(1, 1, 1, 0.9);
}
`;
const StyledWrapper = styled.div`
@@ -23,6 +23,7 @@ const StyledWrapper = styled.div`
display: flex;
align-items: center;
justify-content: center;
.box {
position: relative;
transition: all 0.2s ease;
@@ -30,14 +31,17 @@ const StyledWrapper = styled.div`
flex-direction: column;
justify-content: flex-start;
gap: 10px;
> .loading {
position: absolute;
top: 40%;
left: 50%;
transform: translateX(-50%);
}
> .image {
overflow: auto;
img {
max-width: 70vw;
max-height: 80vh;
@@ -46,13 +50,16 @@ const StyledWrapper = styled.div`
object-fit: contain; */
}
}
&.loading .image img {
filter: blur(2px);
}
.origin {
font-weight: bold;
font-size: 14px;
color: #aaa;
&:hover {
text-decoration: underline;
color: #fff;
@@ -61,11 +68,26 @@ const StyledWrapper = styled.div`
}
`;
export default function ImagePreviewModal({ download = true, data, closeModal }) {
export interface PreviewImageData {
originUrl: string;
thumbnail: string;
downloadLink: string;
name: string;
type: string;
}
interface Props {
download?: boolean;
data?: PreviewImageData;
closeModal: () => void;
}
const ImagePreviewModal: FC<Props> = ({ download = true, data, closeModal }) => {
const [url, setUrl] = useState(data?.thumbnail);
const [loading, setLoading] = useState(true);
const wrapperRef = useRef();
const wrapperRef = useRef<HTMLDivElement>(null);
useOutsideClick(wrapperRef, closeModal);
useKey(
"Escape",
() => {
@@ -74,6 +96,7 @@ export default function ImagePreviewModal({ download = true, data, closeModal })
},
{ eventTypes: ["keyup"] }
);
useEffect(() => {
if (data) {
const { originUrl } = data;
@@ -126,4 +149,6 @@ export default function ImagePreviewModal({ download = true, data, closeModal })
</StyledWrapper>
</Modal>
);
}
};
export default ImagePreviewModal;
src/common/component/Loading.tsx
+21 -17
View File
@@ -1,16 +1,16 @@
// import { useState, useEffect } from "react";
import { FC } from "react";
import styled, { keyframes } from "styled-components";
import { Ring } from "@uiball/loaders";
import Button from "./styled/Button";
import useLogout from "../hook/useLogout";
const DelayVisible = keyframes`
from{
opacity: 0;
}
to{
opacity: 1;
}
from {
opacity: 0;
}
to {
opacity: 1;
}
`;
const StyledWrapper = styled.div`
@@ -21,17 +21,15 @@ const StyledWrapper = styled.div`
gap: 15px;
align-items: center;
justify-content: center;
&.fullscreen {
width: 100vw;
height: 100vh;
}
.loading {
display: flex;
align-items: center;
justify-content: center;
}
.reload {
opacity: 0;
&.visible {
animation: ${DelayVisible} 1s forwards;
animation-delay: 30s;
@@ -39,20 +37,26 @@ const StyledWrapper = styled.div`
}
`;
export default function Loading({ reload = false, fullscreen = false }) {
interface Props {
reload?: boolean;
fullscreen?: boolean;
}
const Loading: FC<Props> = ({ reload = false, fullscreen = false }) => {
const { clearLocalData } = useLogout();
const handleReload = () => {
clearLocalData();
// todo: only firefox has argument
location.reload(true);
location.reload();
};
return (
<StyledWrapper className={fullscreen ? "fullscreen" : ""}>
<Ring className="loading" size={40} lineWeight={5} speed={2} color="black" />
<Ring size={40} lineWeight={5} speed={2} color="black" />
<Button className={`reload danger ${reload ? "visible" : ""}`} onClick={handleReload}>
Reload
</Button>
</StyledWrapper>
);
}
};
export default Loading;
src/common/component/Modal.tsx
+16 -6
View File
@@ -1,11 +1,19 @@
import { useEffect, useState } from "react";
import { FC, ReactNode, useEffect, useState } from "react";
import { createPortal } from "react-dom";
export default function Modal({ id = "root-modal", mask = true, children }) {
const [wrapper, setWrapper] = useState(null);
// let eleRef = useRef(null);
interface Props {
id?: string;
mask?: boolean;
children?: ReactNode;
}
// todo: check memory leak
const Modal: FC<Props> = ({ id = "root-modal", mask = true, children }) => {
const [wrapper, setWrapper] = useState<HTMLDivElement | null>(null);
useEffect(() => {
const modalRoot = document.getElementById(id);
if (!modalRoot) return;
if (mask) {
modalRoot.classList.add("mask");
}
@@ -17,7 +25,9 @@ export default function Modal({ id = "root-modal", mask = true, children }) {
modalRoot.removeChild(wrapper);
};
}, [id, mask]);
if (!wrapper) return null;
console.log("create portal");
return createPortal(children, wrapper);
}
};
export default Modal;
src/common/component/ReactionItem.tsx
+22 -5
View File
@@ -1,3 +1,4 @@
import { FC, ReactElement } from "react";
import EmojiThumbUp from "../../assets/icons/emoji.thumb.up.svg";
import EmojiThumbDown from "../../assets/icons/emoji.thumb.down.svg";
import EmojiSmile from "../../assets/icons/emoji.smile.svg";
@@ -7,7 +8,18 @@ import EmojiHeart from "../../assets/icons/emoji.heart.svg";
import EmojiRocket from "../../assets/icons/emoji.rocket.svg";
import EmojiLook from "../../assets/icons/emoji.look.svg";
const Emojis = {
interface Emojis {
"👍": ReactElement;
"👎": ReactElement;
"😄": ReactElement;
"👀": ReactElement;
"🚀": ReactElement;
"❤️": ReactElement;
"🙁": ReactElement;
"🎉": ReactElement;
}
const emojis: Emojis = {
"👍": <EmojiThumbUp className="emoji" />,
"👎": <EmojiThumbDown className="emoji" />,
"😄": <EmojiSmile className="emoji" />,
@@ -18,8 +30,13 @@ const Emojis = {
"🎉": <EmojiCelebrate className="emoji" />
};
export default function ReactionItem({ native = "" }) {
if (!native || !Emojis[native]) return null;
return Emojis[native];
interface Props {
native?: keyof Emojis;
}
const ReactionItem: FC<Props> = ({ native }) => {
if (!native) return null;
return emojis[native] ?? null;
};
export default ReactionItem;
src/common/component/SaveTip.tsx
+2 -2
View File
@@ -14,7 +14,7 @@ const StyledWrapper = styled.div`
background: #fff;
/* gap: 20px; */
border: 1px solid #e5e7eb;
box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
border-radius: 25px;
.txt {
padding: 8px;
@@ -37,7 +37,7 @@ const StyledWrapper = styled.div`
background: #1fe1f9;
border: 1px solid #1fe1f9;
box-sizing: border-box;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
border-radius: 25px;
&.reset {
background: none;
src/common/component/Search.tsx
+1 -2
View File
@@ -34,11 +34,10 @@ const StyledWrapper = styled.div`
`;
export default function Search() {
console.log("searching");
return (
<StyledWrapper>
<div className="search">
<img src={searchIcon} />
<img src={searchIcon} alt="search icon" />
<input placeholder="Search..." className="input" />
</div>
<Tooltip tip="More" placement="bottom">
src/common/component/Server.tsx
+1 -1
View File
@@ -68,7 +68,7 @@ export default function Server() {
<NavLink to={`/setting?f=${pathname}`}>
<div className="server">
<div className="logo">
<img src={logo} />
<img alt="logo" src={logo} />
</div>
<div className="info">
<h3 className="name" title={description}>
src/common/component/UserGuide/index.tsx
+15 -6
View File
@@ -1,10 +1,11 @@
import { FC, ReactElement } from "react";
import styled, { createGlobalStyle } from "styled-components";
import Tippy from "@tippyjs/react";
import { roundArrow } from "tippy.js";
import { Placement, roundArrow } from "tippy.js";
import "tippy.js/dist/svg-arrow.css";
import { updateUserGuide } from "../../../app/slices/ui";
import steps from "./steps";
import { useAppDispatch, useAppSelector } from "../../../app/store";
import { useAppDispatch } from "../../../app/store";
const Styled = styled.div`
display: flex;
@@ -57,15 +58,21 @@ const OverrideTippyArrowColor = createGlobalStyle`
}
`;
export default function UserGuide({ step = 1, placement = "right-start", delay = null, children }) {
interface Props {
step?: number;
placement: Placement;
delay?: number | [number | null, number | null];
children: ReactElement;
}
const UserGuide: FC<Props> = ({ step = 1, placement = "right-start", delay, children }) => {
const dispatch = useAppDispatch();
const { visible, step: reduxStep } = useAppSelector((store) => store.ui.userGuide);
const currStep = steps[step - 1];
const isLastStep = steps.length == step;
// if (!visible) return children;
if (!currStep) return null;
const { title, description } = currStep;
const defaultDuration = [300, 250];
const defaultDuration: [number, number] = [300, 250];
const handleSkip = () => {
// to do
dispatch(updateUserGuide({ visible: false }));
@@ -104,4 +111,6 @@ export default function UserGuide({ step = 1, placement = "right-start", delay =
</Tippy>
</>
);
}
};
export default UserGuide;
src/common/component/styled/Modal.tsx
+4 -10
View File
@@ -1,4 +1,4 @@
import { FC, ReactElement } from "react";
import { FC, ReactNode } from "react";
import styled from "styled-components";
const Styled = styled.div`
@@ -43,18 +43,12 @@ const Styled = styled.div`
interface Props {
title?: string;
description?: string;
buttons: ReactElement[] | ReactElement;
children?: ReactElement;
buttons?: ReactNode;
children?: ReactNode;
className?: string;
}
const StyledModal: FC<Props> = ({
title = "",
description = "",
buttons = null,
children,
...props
}) => {
const StyledModal: FC<Props> = ({ title = "", description = "", buttons, children, ...props }) => {
return (
<Styled {...props}>
{title && <h3 className="title">{title}</h3>}
src/common/hook/useChatScroll.ts
+2 -3
View File
@@ -1,9 +1,8 @@
import { useRef, useEffect } from "react";
// import { useDebounce } from "rooks";
function useChatScroll(deps = []) {
// todo: ref should be initialized to null
const ref = useRef();
function useChatScroll<T extends HTMLElement>() {
const ref = useRef<T>(null);
// useEffect(() => {
// console.log("chat scroll", ref);
// if (ref.current) {
src/common/hook/useContextMenu.tsx
+13 -7
View File
@@ -1,14 +1,19 @@
import { useState } from "react";
import { useState, MouseEvent, ReactElement } from "react";
import { hideAll } from "tippy.js";
import Tippy from "@tippyjs/react";
import Menu from "../component/ContextMenu";
import Menu, { Item } from "../component/ContextMenu";
interface ContextMenuProps {
key: string | number;
children: ReactElement;
items: Item[];
}
export default function useContextMenu(placement = "right-start") {
const [visible, setVisible] = useState(false);
// for tippy.js
const [offset, setOffset] = useState({ x: 0, y: 0 });
const handleContextMenuEvent = (evt) => {
// console.log("context menu event", evt, evt.currentTarget);
const handleContextMenuEvent = (evt: MouseEvent) => {
hideAll();
evt.preventDefault();
const { currentTarget, clientX, clientY } = evt;
@@ -22,14 +27,14 @@ export default function useContextMenu(placement = "right-start") {
y = top - clientY;
}
setOffset({ x, y });
setVisible(true);
console.log("offset", x, y);
};
const hideContextMenu = () => {
setVisible(false);
};
const ContextMenu = ({ key, items, children }) => {
const ContextMenu = ({ key, items, children }: ContextMenuProps) => {
return (
<Tippy
visible={visible}
@@ -45,6 +50,7 @@ export default function useContextMenu(placement = "right-start") {
</Tippy>
);
};
return {
ContextMenu,
offset,
src/common/hook/useRemoveLocalMessage.ts
+12 -6
View File
@@ -1,14 +1,20 @@
// import second from 'first'
import { useDispatch } from "react-redux";
import { removeMessage } from "../../app/slices/message";
import { removeChannelMsg } from "../../app/slices/message.channel";
import { removeUserMsg } from "../../app/slices/message.user";
export default function useRemoveLocalMessage({ context = "user", id = 0 }) {
const dispatch = useDispatch();
import { useAppDispatch } from "../../app/store";
// todo: check usage
interface Props {
context: "user" | "channel";
id: number;
}
export default function useRemoveLocalMessage({ context = "user", id = 0 }: Props) {
const dispatch = useAppDispatch();
const removeContextMessage = context == "channel" ? removeChannelMsg : removeUserMsg;
const removeLocalMessage = (mid) => {
return (mid: number) => {
dispatch(removeContextMessage({ id, mid }));
dispatch(removeMessage(mid));
};
return removeLocalMessage;
}
src/common/hook/useSendMessage.ts
+35 -10
View File
@@ -1,14 +1,34 @@
// import second from 'first'
import toast from "react-hot-toast";
import { removeReplyingMessage, addReplyingMessage } from "../../app/slices/message";
import { useSendChannelMsgMutation } from "../../app/services/channel";
import { useSendMsgMutation } from "../../app/services/contact";
import { useReplyMessageMutation } from "../../app/services/message";
import { useDispatch, useSelector } from "react-redux";
import toast from "react-hot-toast";
export default function useSendMessage(props) {
import { useAppDispatch, useAppSelector } from "../../app/store";
interface Props {
context: "user" | "channel";
from: number;
to: number;
}
interface SendMessagesDTO {
type: "text";
content: string;
users: number[];
channels: number[];
}
interface SendMessageDTO {
type: "text";
content: string;
properties: object;
reply_mid?: number;
}
export default function useSendMessage(props?: Props) {
const { context = "user", from = null, to = null } = props || {};
const dispatch = useDispatch();
const stageFiles = useSelector((store) => store.ui.uploadFiles[`${context}_${to}`] || []);
const dispatch = useAppDispatch();
const stageFiles = useAppSelector((store) => store.ui.uploadFiles[`${context}_${to}`] || []);
const [replyMessage, { isError: replyErr, isLoading: replying, isSuccess: replySuccess }] =
useReplyMessageMutation();
const [
@@ -18,7 +38,12 @@ export default function useSendMessage(props) {
const [sendUserMsg, { isLoading: userSending, isSuccess: userSuccess, isError: userError }] =
useSendMsgMutation();
const sendFn = context == "user" ? sendUserMsg : sendChannelMsg;
const sendMessages = async ({ type = "text", content, users = [], channels = [] }) => {
const sendMessages = async ({
type = "text",
content,
users = [],
channels = []
}: SendMessagesDTO) => {
if (users.length) {
for await (const uid of users) {
await sendUserMsg({
@@ -42,9 +67,9 @@ export default function useSendMessage(props) {
type = "text",
content,
properties = {},
reply_mid = null,
reply_mid,
...rest
}) => {
}: SendMessageDTO) => {
if (reply_mid) {
removeReplying();
await replyMessage({
@@ -66,7 +91,7 @@ export default function useSendMessage(props) {
});
}
};
const setReplying = (mid) => {
const setReplying = (mid: number) => {
if (stageFiles.length !== 0) {
toast.error("Only text is supported when replying a message");
return;
src/react-app-env.d.ts
Vendored
+73 -1
View File
@@ -1 +1,73 @@
/// <reference types="react-scripts" />
/// <reference types="node" />
/// <reference types="react" />
/// <reference types="react-dom" />
declare namespace NodeJS {
interface ProcessEnv {
readonly NODE_ENV: "development" | "production" | "test";
readonly PUBLIC_URL: string;
}
}
declare module "*.avif" {
const src: string;
export default src;
}
declare module "*.bmp" {
const src: string;
export default src;
}
declare module "*.gif" {
const src: string;
export default src;
}
declare module "*.jpg" {
const src: string;
export default src;
}
declare module "*.jpeg" {
const src: string;
export default src;
}
declare module "*.png" {
const src: string;
export default src;
}
declare module "*.webp" {
const src: string;
export default src;
}
// fix type error: TS2307: Cannot find module '...svg?url' or its corresponding type declarations.
declare module "*.svg?url" {
const src: string;
export default src;
}
declare module "*.svg" {
import * as React from "react";
const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement> & { title?: string }>;
export default ReactComponent;
}
declare module "*.module.css" {
const classes: { readonly [key: string]: string };
export default classes;
}
declare module "*.module.scss" {
const classes: { readonly [key: string]: string };
export default classes;
}
declare module "*.module.sass" {
const classes: { readonly [key: string]: string };
export default classes;
}
src/routes/settingChannel/navs.tsx
+3 -3
View File
@@ -1,7 +1,8 @@
import Overview from "./Overview";
import ManageMembers from "../../common/component/ManageMembers";
const useNavs = (channelId) => {
const navs = [
const useNavs = (channelId: number) => {
return [
{
title: "General",
items: [
@@ -36,7 +37,6 @@ const useNavs = (channelId) => {
// ],
// },
];
return navs;
};
export default useNavs;
src/types/auth.ts
-3
View File
@@ -1,4 +1,3 @@
export interface AuthToken {
// common
server_id: string;
@@ -7,11 +6,9 @@ export interface AuthToken {
expired_in: number;
}
// todo: check gender values
export type Gender = 0 | 1;
export interface User {
// avatar: string; // todo: check transform data in redux slice
uid: number;
email: string;
name: string;
src/types/channel.ts
+4 -14
View File
@@ -1,18 +1,8 @@
export interface ChannelMember {}
export interface ChannelMember {
export interface Message {}
}
// todo: check message fields
export interface ChannelMessage {
mid: number;
}
export type ContentType =
'text/plain' |
'text/markdown' |
'rustchat/file' |
'rustchat/archive';
export type ContentType = "text/plain" | "text/markdown" | "rustchat/file" | "rustchat/archive";
export interface PinnedMessage {
mid: number;
@@ -38,7 +28,7 @@ export interface Channel {
}
export interface UpdateChannelDTO {
operation: 'add_member' | 'remove_member';
operation: "add_member" | "remove_member";
members?: number[];
// type = 'group_changed'
src/types/global.d.ts
Vendored
+4 -4
View File
@@ -1,10 +1,10 @@
import { PrecacheEntry } from "workbox-precaching/src/_types";
import localforage from "localforage";
export declare global {
import { PrecacheEntry } from "workbox-precaching/src/_types";
import localforage from "localforage";
interface Window {
__WB_MANIFEST: Array<PrecacheEntry | string>;
skipWaiting: () => void;
CACHE: { [key: string]: typeof localforage };
CACHE: { [key: string]: typeof localforage | undefined };
}
}
src/types/sse.ts
+103 -63
View File
@@ -1,24 +1,24 @@
import { User } from './auth';
import { Channel, ContentType } from './channel';
import { User } from "./auth";
import { Channel, ContentType } from "./channel";
export interface ReadyEvent {
type: 'ready';
type: "ready";
}
export interface UsersSnapshotEvent {
type: 'users_snapshot';
type: "users_snapshot";
users: User[];
version: number;
}
// todo: check if create_by field exists
export interface UserLog extends Omit<User, 'create_by'> {
export interface UserLog extends Omit<User, "create_by"> {
log_id: number;
action: 'create' | 'update' | 'delete';
action: "create" | "update" | "delete";
}
export interface UsersLogEvent {
type: 'users_log';
type: "users_log";
logs: UserLog[];
}
@@ -28,87 +28,126 @@ export interface UserState {
}
export interface UsersStateEvent {
type: 'users_state';
type: "users_state";
users: UserState[];
}
interface UsersStateChangedEvent extends UserState{
type: 'users_state_changed';
interface UsersStateChangedEvent extends UserState {
type: "users_state_changed";
}
interface UserSettingsEvent {
type: 'user_settings';
mute_users?: { uid: number; expired_at: number; }[];
mute_groups?: { gid: number; expired_at: number; }[];
read_index_users?: { uid: number; mid: number; }[];
read_index_groups?: { gid: number; mid: number; }[];
burn_after_reading_users?: { uid: number; expires_in: number; }[];
burn_after_reading_groups?: { gid: number; expires_in: number; }[];
export interface MuteUser {
uid: number;
expired_at: number;
}
interface UserSettingsChangedEvent {
type: 'user_settings_changed';
export interface MuteChannel {
gid: number;
expired_at: number;
}
export interface UserSettingsEvent {
type: "user_settings";
mute_users?: MuteUser[];
mute_groups?: MuteChannel[];
read_index_users?: { uid: number; mid: number }[];
read_index_groups?: { gid: number; mid: number }[];
burn_after_reading_users?: { uid: number; expires_in: number }[];
burn_after_reading_groups?: { gid: number; expires_in: number }[];
}
export interface UserSettingsChangedEvent {
type: "user_settings_changed";
from_device?: string;
add_mute_users?: { uid: number; expired_at: number; }[];
add_mute_users?: MuteUser[];
remove_mute_users?: number[];
add_mute_groups?: { gid: number; expired_at: number; }[];
add_mute_groups?: MuteChannel[];
remove_mute_groups?: number[];
read_index_users?: { uid: number; mid: number; }[];
read_index_groups?: { gid: number; mid: number; }[];
burn_after_reading_users?: { uid: number; expires_in: number; }[];
burn_after_reading_groups?: { gid: number; expires_in: number; }[];
read_index_users?: { uid: number; mid: number }[];
read_index_groups?: { gid: number; mid: number }[];
burn_after_reading_users?: { uid: number; expires_in: number }[];
burn_after_reading_groups?: { gid: number; expires_in: number }[];
}
interface RelatedGroupsEvent {
type: 'related_groups';
export interface RelatedGroupsEvent {
type: "related_groups";
groups: Channel[];
}
interface ChatEvent {
type: 'chat';
export interface NormalMessage {
type: "normal";
properties: {};
content_type: ContentType;
content: string;
expires_in: number;
}
export interface EditReactionDetail {
properties: {};
content_type: ContentType;
content: string;
type: "edit";
}
export interface LikeReactionDetail {
action: string;
type: "like";
}
export interface DeleteReactionDetail {
type: "delete";
}
export interface ReactionMessage {
type: "reaction";
mid: number; // original message id
detail: EditReactionDetail | LikeReactionDetail | DeleteReactionDetail;
}
export interface ReplyMessage {
type: "reply";
mid: number; // original message id
properties: {};
content_type: ContentType;
content: string;
}
export interface ChatEvent {
type: "chat";
mid: number;
from_uid: number;
created_at: number;
target: { uid: number };
detail: {
properties: {};
content: string;
content_type: ContentType;
expires_in: number;
type: 'normal';
};
detail: NormalMessage | ReactionMessage | ReplyMessage;
}
interface KickEvent {
type: 'kick';
type: "kick";
reason: string;
}
interface UserJoinedGroupEvent {
type: 'user_joined_group';
type: "user_joined_group";
gid: number;
uid: number[];
}
interface UserLeavedGroupEvent {
type: 'user_leaved_group';
type: "user_leaved_group";
gid: number;
uid: number[];
}
interface JoinedGroupEvent {
type: 'joined_group';
type: "joined_group";
group: Channel;
}
interface KickFromGroupEvent {
type: 'kick_from_group';
type: "kick_from_group";
gid: number;
reason: string;
}
interface GroupChangedEvent {
type: 'group_changed';
type: "group_changed";
gid: number;
name: string;
description: string;
@@ -117,7 +156,7 @@ interface GroupChangedEvent {
}
interface PinnedMessageUpdatedEvent {
type: 'pinned_message_updated';
type: "pinned_message_updated";
gid: number;
mid: number;
msg: {
@@ -127,28 +166,29 @@ interface PinnedMessageUpdatedEvent {
properties: {};
content: string;
content_type: ContentType;
}
};
}
interface HeartbeatEvent {
type: 'heartbeat';
type: "heartbeat";
time: number;
}
export type ServerEvent = ReadyEvent |
UsersSnapshotEvent |
UsersLogEvent |
UsersStateEvent |
UsersStateChangedEvent |
UserSettingsEvent |
UserSettingsChangedEvent |
RelatedGroupsEvent |
ChatEvent |
KickEvent |
UserJoinedGroupEvent |
UserLeavedGroupEvent |
JoinedGroupEvent |
KickFromGroupEvent |
GroupChangedEvent |
PinnedMessageUpdatedEvent |
HeartbeatEvent;
export type ServerEvent =
| ReadyEvent
| UsersSnapshotEvent
| UsersLogEvent
| UsersStateEvent
| UsersStateChangedEvent
| UserSettingsEvent
| UserSettingsChangedEvent
| RelatedGroupsEvent
| ChatEvent
| KickEvent
| UserJoinedGroupEvent
| UserLeavedGroupEvent
| JoinedGroupEvent
| KickFromGroupEvent
| GroupChangedEvent
| PinnedMessageUpdatedEvent
| HeartbeatEvent;