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

refactor: more TS code

Browse Source
This commit is contained in:
Tristan Yang
2022-07-08 19:13:49 +08:00
parent 678b8515ca
commit 9f1b115c73
55 changed files with 421 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.vscode/settings.json
Vendored
+16 -1
View File
@@ -26,7 +26,22 @@
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"cSpell.words": ["btns", "navs", "oidc", "reduxjs", "thirdparty", "tippyjs", "vocechat"],
"cSpell.words": [
"appinstalled",
"beforeinstallprompt",
"btns",
"localstorage",
"magiclink",
"navs",
"oidc",
"reduxjs",
"Swiper",
"thirdparty",
"tippyjs",
"toastui",
"uiball",
"vocechat"
],
"reactSnippets.settings.prettierEnabled": true,
"reactSnippets.settings.importReactOnTop": false
}
src/app/services/auth.ts
+34 -28
View File
@@ -3,7 +3,13 @@ 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, KEY_LOCAL_MAGIC_TOKEN } from "../config";
import { AuthData, LoginCredential } from "../../types/auth";
import {
AuthData,
CredentialResponse,
LoginCredential,
RenewTokenDTO,
RenewTokenResponse
} from "../../types/auth";
const getDeviceId = () => {
let d = localStorage.getItem(KEY_DEVICE_KEY);
@@ -59,14 +65,11 @@ export const authApi = createApi({
})
}),
// 更新token
renew: builder.mutation({
query: ({ token, refreshToken }) => ({
renew: builder.mutation<RenewTokenResponse, RenewTokenDTO>({
query: (data) => ({
url: "/token/renew",
method: "POST",
body: {
token,
refresh_token: refreshToken
}
body: data
}),
async onQueryStarted(params, { dispatch, queryFulfilled }) {
try {
@@ -79,7 +82,7 @@ export const authApi = createApi({
}
}),
// 更新 device token
updateDeviceToken: builder.mutation({
updateDeviceToken: builder.mutation<void, { device_token: string }>({
query: (device_token) => ({
url: "/token/device_token",
method: "PUT",
@@ -89,66 +92,69 @@ export const authApi = createApi({
})
}),
// 获取openid
getOpenid: builder.mutation({
query: ({ issuer, redirect_uri }) => ({
getOpenid: builder.mutation<{ url: string }, { issuer: string; redirect_uri: string }>({
query: (data) => ({
url: "/token/openid/authorize",
method: "POST",
body: {
issuer,
redirect_uri
}
body: data
})
}),
checkMagicTokenValid: builder.mutation({
checkMagicTokenValid: builder.mutation<boolean, string>({
query: (token) => ({
url: "user/check_magic_token",
method: "POST",
body: { magic_token: token }
})
}),
updatePassword: builder.mutation({
query: ({ old_password, new_password }) => ({
updatePassword: builder.mutation<void, { old_password: string; new_password: string }>({
query: (data) => ({
url: "user/change_password",
method: "POST",
body: { old_password, new_password }
body: data
})
}),
sendLoginMagicLink: builder.mutation({
sendLoginMagicLink: builder.mutation<string, string>({
query: (email) => ({
headers: {
// "content-type": "text/plain",
accept: "text/plain"
},
url: `user/send_login_magic_link?email=${encodeURIComponent(email)}`,
method: "POST",
responseHandler: (response: Response) => response.text()
// body: { email }
})
}),
sendRegMagicLink: builder.mutation({
sendRegMagicLink: builder.mutation<
{
new_magic_token: "string";
mail_is_sent: boolean;
},
{
magic_token: "string";
email: "string";
password: "string";
}
>({
query: (data) => ({
url: `user/send_reg_magic_link`,
method: "POST",
body: data
})
}),
getMetamaskNonce: builder.query({
getMetamaskNonce: builder.query<string, string>({
query: (address) => ({
url: `/token/metamask/nonce?public_address=${address}`
})
}),
checkEmail: builder.query({
checkEmail: builder.query<boolean, string>({
query: (email) => ({
url: `/user/check_email?email=${encodeURIComponent(email)}`
})
}),
// todo: check return type
getCredentials: builder.query<any, void>({
getCredentials: builder.query<CredentialResponse, void>({
query: () => ({ url: "/token/credentials" })
}),
// todo: check return type
logout: builder.query<any, void>({
logout: builder.query<void, void>({
query: () => ({ url: "token/logout" }),
async onQueryStarted(params, { dispatch, queryFulfilled }) {
try {
src/app/services/channel.ts
+9 -8
View File
@@ -9,9 +9,10 @@ import { removeChannelSession } from "../slices/message.channel";
import { removeReactionMessage } from "../slices/message.reaction";
import { onMessageSendStarted } from "./handlers";
import handleChatMessage from "../../common/hook/useStreaming/chat.handler";
import { Channel, CreateChannelDTO } from "../../types/channel";
import { Channel, ChannelDTO, CreateChannelDTO } from "../../types/channel";
import { RootState } from "../store";
import { ContentTypeKey } from "../../types/message";
import { ContentTypeKey, ChatMessage } from "../../types/message";
export const channelApi = createApi({
reducerPath: "channelApi",
baseQuery,
@@ -41,7 +42,7 @@ export const channelApi = createApi({
body: data
})
}),
updateChannel: builder.mutation({
updateChannel: builder.mutation<void, ChannelDTO>({
query: ({ id, ...data }) => ({
url: `group/${id}`,
method: "PUT",
@@ -49,7 +50,7 @@ export const channelApi = createApi({
}),
async onQueryStarted({ id, name, description }, { dispatch, queryFulfilled }) {
// id: who send to ,from_uid: who sent
const patchResult = dispatch(updateChannel({ id, name, description }));
const patchResult = dispatch(updateChannel({ gid: id, name, description }));
try {
await queryFulfilled;
} catch {
@@ -58,7 +59,7 @@ export const channelApi = createApi({
}
}
}),
getHistoryMessages: builder.query({
getHistoryMessages: builder.query<ChatMessage[], { id: number; mid?: number; limit: number }>({
query: ({ id, mid = null, limit = 100 }) => ({
url: mid
? `/group/${id}/history?before=${mid}&limit=${limit}`
@@ -145,21 +146,21 @@ export const channelApi = createApi({
await onMessageSendStarted.call(this, param1, param2, "channel");
}
}),
addMembers: builder.mutation({
addMembers: builder.mutation<void, { id: number; members: number[] }>({
query: ({ id, members }) => ({
url: `group/${id}/members/add`,
method: "POST",
body: members
})
}),
removeMembers: builder.mutation({
removeMembers: builder.mutation<void, { id: number; members: number[] }>({
query: ({ id, members }) => ({
url: `group/${id}/members/remove`,
method: "POST",
body: members
})
}),
updateIcon: builder.mutation({
updateIcon: builder.mutation<void, { gid: number; image: File }>({
query: ({ gid, image }) => ({
headers: {
"content-type": "image/png"
src/app/services/handlers.ts
-12
View File
@@ -25,18 +25,6 @@ export const onMessageSendStarted = async (
console.log("handlers data", content, type, properties, ignoreLocal, id);
const isImage = properties.content_type?.startsWith("image");
const ts = properties.local_id || +new Date();
// let imageData = null;
// if (type == "image") {
// if (typeof content == "string" && content.startsWith("data:image")) {
// // base64
// // const resp = await fetch(content);
// // const blob = await resp.blob();
// // imageData = new File([blob], "tmp.png", { type: "image/png" });
// imageData = content;
// } else {
// imageData = URL.createObjectURL(content);
// }
// }
const tmpMsg = {
content: isImage ? content.path : content,
content_type: ContentTypes[type],
src/app/services/message.ts
+15 -19
View File
@@ -4,23 +4,16 @@ import { updateReadChannels, updateReadUsers } from "../slices/footprint";
import { fillFavorites, populateFavorite, addFavorite, deleteFavorite } from "../slices/favorites";
import { onMessageSendStarted } from "./handlers";
import { normalizeArchiveData } from "../../common/utils";
// import { updateMessage } from "../slices/message";
import baseQuery from "./base.query";
import { OG } from "../../types/common";
type UploadFileResponse = {
path: string;
size: number;
hash: string;
image_properties: {
width: number;
height: number;
};
};
import { Archive, FavoriteArchive, OG } from "../../types/resource";
import { ContentTypeKey, UploadFileResponse } from "../../types/message";
import { RootState } from "../store";
export const messageApi = createApi({
reducerPath: "messageApi",
baseQuery,
endpoints: (builder) => ({
editMessage: builder.mutation({
editMessage: builder.mutation<number, { mid: number; content: string; type: ContentTypeKey }>({
query: ({ mid, content, type = "text" }) => ({
headers: {
"content-type": ContentTypes[type]
@@ -50,7 +43,7 @@ export const messageApi = createApi({
body: meta
})
}),
createArchive: builder.mutation({
createArchive: builder.mutation<string, number[]>({
query: (mids = []) => ({
url: `/resource/archive`,
method: "POST",
@@ -73,7 +66,7 @@ export const messageApi = createApi({
url: `/resource/open_graphic_parse?url=${encodeURIComponent(url)}`
})
}),
getArchiveMessage: builder.query({
getArchiveMessage: builder.query<Archive, string>({
query: (file_path) => ({
url: `/resource/archive?file_path=${encodeURIComponent(file_path)}`
})
@@ -92,7 +85,7 @@ export const messageApi = createApi({
body: { mid }
})
}),
favoriteMessage: builder.mutation({
favoriteMessage: builder.mutation<FavoriteArchive, number[]>({
query: (mids) => ({
url: `/favorite`,
method: "POST",
@@ -123,14 +116,14 @@ export const messageApi = createApi({
}
}
}),
getFavoriteDetails: builder.query({
getFavoriteDetails: builder.query<Archive, number>({
query: (id) => ({
url: `/favorite/${id}`
}),
async onQueryStarted(id, { dispatch, queryFulfilled, getState }) {
try {
const { data } = await queryFulfilled;
const loginUid = getState().authData.user.uid;
const loginUid = (getState() as RootState).authData.user.uid;
const messages = normalizeArchiveData(data, id, loginUid);
dispatch(populateFavorite({ id, messages }));
} catch (err) {
@@ -138,7 +131,7 @@ export const messageApi = createApi({
}
}
}),
getFavorites: builder.query({
getFavorites: builder.query<FavoriteArchive[], void>({
query: () => ({
url: `/favorite`
}),
@@ -155,7 +148,10 @@ export const messageApi = createApi({
}
}
}),
replyMessage: builder.mutation({
replyMessage: builder.mutation<
number,
{ reply_mid: number; content: string; type: ContentTypeKey }
>({
query: ({ reply_mid, content, type = "text" }) => ({
headers: {
"content-type": ContentTypes[type]
src/app/services/server.ts
+2 -3
View File
@@ -3,7 +3,7 @@ import BASE_URL from "../config";
import { updateInfo } from "../slices/server";
import baseQuery from "./base.query";
import { RootState } from "../store";
import { User } from "../../types/auth";
import { User } from "../../types/user";
import {
FirebaseConfig,
GoogleAuthConfig,
@@ -51,7 +51,6 @@ export const serverApi = createApi({
getServerVersion: builder.query<string, void>({
query: () => ({
headers: {
// "content-type": "text/plain",
accept: "text/plain"
},
url: `/admin/system/version`,
@@ -128,7 +127,7 @@ export const serverApi = createApi({
body: data
})
}),
updateLogo: builder.mutation({
updateLogo: builder.mutation<void, File>({
query: (data) => ({
headers: {
"content-type": "image/png"
src/app/services/user.ts
+10 -6
View File
@@ -9,13 +9,14 @@ import BASE_URL, { ContentTypes } from "../config";
import { onMessageSendStarted } from "./handlers";
import handleChatMessage from "../../common/hook/useStreaming/chat.handler";
import { User, UserDTO, UserForAdmin, UserForAdminDTO } from "../../types/user";
import { ContentType, MuteDTO } from "../../types/message";
import { ChatMessage, ContentTypeKey, MuteDTO } from "../../types/message";
import { RootState } from "../store";
export const userApi = createApi({
reducerPath: "userApi",
baseQuery,
endpoints: (builder) => ({
getUsers: builder.query({
getUsers: builder.query<User[], void>({
query: () => ({ url: `user` }),
transformResponse: (data: User[]) => {
return data.map((user) => {
@@ -74,7 +75,7 @@ export const userApi = createApi({
}
}
}),
updateAvatar: builder.mutation({
updateAvatar: builder.mutation<void, File>({
query: (data) => ({
headers: {
"content-type": "image/png"
@@ -92,7 +93,10 @@ export const userApi = createApi({
})
}),
sendMsg: builder.mutation({
sendMsg: builder.mutation<
number,
{ id: number; content: string; type: ContentTypeKey; properties?: object }
>({
query: ({ id, content, type = "text", properties = "" }) => ({
headers: {
"content-type": ContentTypes[type],
@@ -108,7 +112,7 @@ export const userApi = createApi({
await onMessageSendStarted.call(this, param1, param2, "user");
}
}),
getHistoryMessages: builder.query({
getHistoryMessages: builder.query<ChatMessage[], { id: number; mid?: number; limit: number }>({
query: ({ id, mid = null, limit = 100 }) => ({
url: mid
? `/user/${id}/history?before=${mid}&limit=${limit}`
@@ -118,7 +122,7 @@ export const userApi = createApi({
const { data: messages } = await queryFulfilled;
if (messages?.length) {
messages.forEach((msg) => {
handleChatMessage(msg, dispatch, getState());
handleChatMessage(msg, dispatch, getState() as RootState);
});
}
}
src/app/slices/auth.data.ts
+2 -2
View File
@@ -7,7 +7,7 @@ import {
KEY_TOKEN,
KEY_UID
} from "../config";
import { AuthData, AuthToken, User } from "../../types/auth";
import { AuthData, AuthToken, RenewTokenResponse, User } from "../../types/auth";
interface State {
initialized: boolean;
@@ -67,7 +67,7 @@ const authDataSlice = createSlice({
updateInitialized(state, action: PayloadAction<boolean>) {
state.initialized = action.payload;
},
updateToken(state, action: PayloadAction<AuthToken>) {
updateToken(state, action: PayloadAction<RenewTokenResponse>) {
const { token, refresh_token, expired_in } = action.payload;
state.token = token;
const et = +new Date() + Number(expired_in) * 1000;
src/app/slices/channels.ts
+1 -1
View File
@@ -53,7 +53,7 @@ const channelsSlice = createSlice({
},
updateChannel(state, action: PayloadAction<UpdateChannelDTO>) {
const ignoreInPublic = ["add_member", "remove_member"];
const { gid, operation, members = [], ...rest } = action.payload;
const { gid, operation = "", members = [], ...rest } = action.payload;
const currChannel = state.byId[gid];
if (!currChannel || (currChannel.is_public && ignoreInPublic.includes(operation))) return;
switch (operation) {
src/app/slices/ui.ts
+1 -1
View File
@@ -59,7 +59,7 @@ const uiSlice = createSlice({
},
updateRememberedNavs(
state,
action: PayloadAction<{ key?: "chat" | "user"; path: string | null } | undefined>
action: PayloadAction<{ key?: "chat" | "user"; path?: string | null } | undefined>
) {
const { key = "chat", path = null } = action.payload || {};
state.rememberedNavs[key] = path;
src/app/slices/users.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { isNull, omitBy } from "lodash";
import BASE_URL from "../config";
import { User } from "../../types/auth";
import { User } from "../../types/user";
import { UserLog, UserState } from "../../types/sse";
export interface StoredUser extends User {
src/common/component/BlankPlaceholder.tsx
+1 -1
View File
@@ -68,7 +68,7 @@ const Styled = styled.div`
`;
interface Props {
type?: "chat";
type?: "chat" | "user";
}
const BlankPlaceholder: FC<Props> = ({ type = "chat" }) => {
src/common/component/Channel.tsx
-1
View File
@@ -32,7 +32,6 @@ const StyledWrapper = styled.div`
}
}
.name {
/* user-select: text; */
display: flex;
font-weight: 600;
font-size: 14px;
src/common/component/ChannelIcon.tsx
+5 -6
View File
@@ -3,18 +3,17 @@ import styled from "styled-components";
import HashIcon from "../../assets/icons/channel.svg";
import LockHashIcon from "../../assets/icons/channel.private.svg";
interface Props {
personal?: boolean;
muted?: boolean;
className?: string;
}
const Styled = styled.div`
display: flex;
&.muted path {
fill: #d0d5dd;
}
`;
interface Props {
personal?: boolean;
muted?: boolean;
className?: string;
}
const ChannelIcon: FC<Props> = ({ personal = false, muted = false, className = "" }) => {
return (
src/common/component/CurrentUser.tsx
+5 -3
View File
@@ -4,6 +4,7 @@ import micIcon from "../../assets/icons/mic.on.svg?url";
import Avatar from "./Avatar";
import useConfig from "../hook/useConfig";
import { useAppSelector } from "../../app/store";
import { FC } from "react";
const StyledWrapper = styled.div`
background-color: #f4f4f5;
@@ -60,8 +61,8 @@ const StyledWrapper = styled.div`
}
}
`;
export default function CurrentUser() {
type Props = {};
const CurrentUser: FC<Props> = () => {
const { values: agoraConfig } = useConfig("agora");
const currUser = useAppSelector((store) => {
return store.authData.user;
@@ -86,4 +87,5 @@ export default function CurrentUser() {
)}
</StyledWrapper>
);
}
};
export default CurrentUser;
src/common/component/EmojiPicker.tsx
-6
View File
@@ -11,8 +11,6 @@ interface Props {
const StyledWrapper = styled.div`
filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
border-radius: 12px;
/* height: 358px;
overflow: hidden; */
.emoji-mart {
border: none;
border-radius: 12px;
@@ -43,10 +41,6 @@ const EmojiPicker: FC<Props> = ({ onSelect, ...rest }) => {
perLine={10}
emojiSize={24}
emojiTooltip={true}
// set="twitter"
// data={data}
// set="twitter"
// showPreview={false}
showSkinTones={false}
onSelect={onSelect}
{...rest}
src/common/component/FAQ.tsx
+5 -3
View File
@@ -1,3 +1,4 @@
import { FC } from "react";
import styled from "styled-components";
import { useGetServerVersionQuery } from "../../app/services/server";
@@ -6,8 +7,8 @@ const Styled = styled.div`
flex-direction: column;
gap: 12px;
`;
export default function FAQ() {
type Props = {};
const FAQ: FC<Props> = () => {
const { data: serverVersion } = useGetServerVersionQuery();
return (
<Styled>
@@ -16,4 +17,5 @@ export default function FAQ() {
<div className="item">Build Timestamp: {process.env.REACT_APP_BUILD_TIME}</div>
</Styled>
);
}
};
export default FAQ;
src/common/component/FileMessage/index.tsx
+2 -2
View File
@@ -25,7 +25,7 @@ interface Props {
context: "user" | "channel";
to: number;
created_at: number;
from_uid?: number;
from_uid: number;
content: string;
download: string;
thumbnail: string;
@@ -41,7 +41,7 @@ const FileMessage: FC<Props> = ({
context,
to,
created_at,
from_uid = null,
from_uid,
content = "",
download = "",
thumbnail = "",
src/common/component/ForwardModal/index.tsx
+8 -3
View File
@@ -1,4 +1,4 @@
import { useState, MouseEvent, ChangeEvent } from "react";
import { useState, MouseEvent, ChangeEvent, FC } from "react";
// import toast from "react-hot-toast";
import Modal from "../Modal";
import Button from "../styled/Button";
@@ -15,8 +15,12 @@ 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 IProps {
mids: number[];
closeModal: () => void;
}
export default function ForwardModal({ mids, closeModal }) {
const ForwardModal: FC<IProps> = ({ mids, closeModal }) => {
const [appendText, setAppendText] = useState("");
const { sendMessages } = useSendMessage();
const { forwardMessage, forwarding } = useForwardMessage();
@@ -176,4 +180,5 @@ export default function ForwardModal({ mids, closeModal }) {
</StyledWrapper>
</Modal>
);
}
};
export default ForwardModal;
src/common/component/GithubLoginButton.tsx
+3 -1
View File
@@ -6,6 +6,7 @@ import { KEY_LOCAL_MAGIC_TOKEN } from "../../app/config";
import Button from "./styled/Button";
import { useLoginMutation } from "../../app/services/auth";
import toast from "react-hot-toast";
import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
const StyledSocialButton = styled(Button)`
width: 100%;
@@ -51,7 +52,8 @@ const GithubLoginButton: FC<Props> = ({ type = "login", client_id }) => {
}, [isSuccess]);
useEffect(() => {
if (error) {
switch (error?.status) {
// todo: why?
switch ((error as FetchBaseQueryError).status) {
case 410:
toast.error(
"No associated account found, please user admin for an invitation link to join."
src/common/component/GoogleLoginButton.tsx
+2 -2
View File
@@ -66,13 +66,13 @@ const GoogleLoginInner: FC<Props> = ({ type = "login", loaded, loadError }) => {
}, [error]);
return (
<StyledSocialButton disabled={!loaded || isLoading} onClick={null}>
<StyledSocialButton disabled={!loaded || isLoading}>
<div className="invisible">
<GoogleLogin
onSuccess={(res) => {
login({
magic_token,
id_token: res.credential,
id_token: res.credential || "",
type: "google"
});
}}
src/common/component/ImagePreviewModal.tsx
+4 -4
View File
@@ -66,10 +66,10 @@ const StyledWrapper = styled.div`
export interface PreviewImageData {
originUrl: string;
thumbnail: string;
downloadLink: string;
name: string;
type: string;
thumbnail?: string;
downloadLink?: string;
name?: string;
type?: string;
}
interface Props {
src/common/component/InviteLink.tsx
+6 -3
View File
@@ -2,6 +2,7 @@ import styled from "styled-components";
import useInviteLink from "../hook/useInviteLink";
import Input from "./styled/Input";
import Button from "./styled/Button";
import { FC } from "react";
const StyledWrapper = styled.div`
display: flex;
@@ -37,8 +38,8 @@ const StyledWrapper = styled.div`
margin-bottom: 20px;
}
`;
export default function InviteLink() {
type Props = {};
const InviteLink: FC<Props> = () => {
const { generating, link, linkCopied, copyLink, generateNewLink } = useInviteLink();
const handleNewLink = () => {
generateNewLink();
@@ -59,4 +60,6 @@ export default function InviteLink() {
</Button>
</StyledWrapper>
);
}
};
export default InviteLink;
src/common/component/ManageMembers.tsx
+12 -2
View File
@@ -135,7 +135,15 @@ const ManageMembers: FC<Props> = ({ cid }) => {
}
}, [updateSuccess]);
const handleToggleRole = ({ ignore = false, uid = null, isAdmin = true }) => {
const handleToggleRole = ({
ignore = false,
uid,
isAdmin = true
}: {
ignore: boolean;
uid: number;
isAdmin: boolean;
}) => {
hideAll();
if (ignore) return;
updateUser({ id: uid, is_admin: isAdmin });
@@ -154,7 +162,9 @@ const ManageMembers: FC<Props> = ({ cid }) => {
</div>
<ul className="members">
{uids.map((uid) => {
const { name, email, is_admin } = users.byId[uid];
const currUser = users.byId[uid];
if (!currUser) return null;
const { name, email, is_admin } = currUser;
const owner = channel && channel.owner == uid;
const switchRoleVisible = loginUser.is_admin && loginUser.uid !== uid;
const dotsVisible = email || loginUser?.is_admin;
src/common/component/Manifest/index.tsx
+8 -20
View File
@@ -1,13 +1,14 @@
import { useEffect, useState, useRef, SyntheticEvent } from "react";
import { useEffect, useState, useRef, FC } from "react";
import { BeforeInstallPromptEvent } from "../../../types/global";
import Prompt from "./Prompt";
import usePrompt from "./usePrompt";
export default function Manifest() {
interface IProps {}
const Manifest: FC<IProps> = () => {
const { setCanceled: setCanceled, prompted } = usePrompt();
const deferredPromptRef = useRef(null);
const deferredPromptRef = useRef<null | BeforeInstallPromptEvent>(null);
const [popup, setPopup] = useState(false);
useEffect(() => {
const handleInstallPromotion = (e: SyntheticEvent) => {
const handleInstallPromotion = (e: BeforeInstallPromptEvent) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
@@ -21,20 +22,6 @@ export default function Manifest() {
deferredPromptRef.current = null;
setPopup(false);
};
// if (isSuccess && data) {
// console.log("server", data);
// manifest.name = `${data.name}'s Chat`;
// // const stringManifest = JSON.stringify(manifest);
// // const blob = new Blob([stringManifest], { type: "application/json" });
// // const manifestURL = URL.createObjectURL(blob);
// let content = encodeURIComponent(JSON.stringify(manifest));
// let manifestURL = "data:application/manifest+json," + content;
// const manifestEle = document.querySelector("#my-manifest-placeholder");
// if (manifestEle) {
// manifestEle.setAttribute("href", manifestURL);
// }
// }
window.addEventListener("beforeinstallprompt", handleInstallPromotion, true);
window.addEventListener("appinstalled", handleInstalled);
return () => {
@@ -61,4 +48,5 @@ export default function Manifest() {
};
if (!popup || prompted) return null;
return <Prompt handleInstall={handleInstall} closePrompt={handleClose} />;
}
};
export default Manifest;
src/common/component/MarkdownEditor/index.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ function MarkdownEditor({
const editorInstance = editor.getInstance();
editorInstance.removeHook("addImageBlobHook");
editorInstance.addHook("addImageBlobHook", async (blob, callback) => {
const { thumbnail = "" } = await uploadFile(blob);
const { thumbnail = "" } = (await uploadFile(blob)) || {};
callback(thumbnail);
});
setEditorInstance(editorInstance);
src/common/component/MarkdownRender.tsx
+26 -32
View File
@@ -1,14 +1,8 @@
import { useEffect, useState, useRef, FC, MouseEvent } from "react";
import { useEffect, useState, useRef, FC } from "react";
import "prismjs/themes/prism.css";
import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css";
import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js";
// import "prismjs/themes/prism.css";
// import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css";
// import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight";
// Import prismjs
// import Prism from "prismjs";
import { Viewer } from "@toast-ui/react-editor";
import styled from "styled-components";
import ImagePreviewModal, { PreviewImageData } from "./ImagePreviewModal";
@@ -24,37 +18,37 @@ const Styled = styled.div`
}
`;
interface Props {
interface IProps {
content: string;
}
const MarkdownRender: FC<Props> = ({ content }) => {
const mdContainer = useRef<HTMLDivElement>(null);
const MarkdownRender: FC<IProps> = ({ content }) => {
const mdContainer = useRef<HTMLDivElement>();
const [previewImage, setPreviewImage] = useState<PreviewImageData | null>(null);
useEffect(() => {
const container = mdContainer?.current;
if (container) {
// 点击查看大图
container.addEventListener(
"click",
(evt) => {
console.log(evt);
evt.stopPropagation();
const { target } = evt;
// 图片
if (target.nodeName == "IMG") {
const urlObj = new URL(target.src);
const originUrl = `${urlObj.origin}${
urlObj.pathname
}?file_path=${urlObj.searchParams.get("file_path")}`;
const data = { originUrl };
setPreviewImage(data);
}
},
true
);
}
if (!container) return;
// 点击查看大图
// todo: 事件代理
container.addEventListener(
"click",
(evt) => {
console.log(evt);
evt.stopPropagation();
const target = evt.target as HTMLImageElement;
if (!target) return;
// 图片
if (target.nodeName == "IMG") {
const urlObj = new URL(target.src);
const originUrl = `${urlObj.origin}${urlObj.pathname}?file_path=${urlObj.searchParams.get(
"file_path"
)}`;
const data = { originUrl };
setPreviewImage(data);
}
},
true
);
}, []);
const closePreviewModal = () => {
src/common/component/Message/FavoredMessage.tsx
+66
View File
@@ -0,0 +1,66 @@
import { FC, ReactElement, useEffect, useState } from "react";
import styled from "styled-components";
import StyledMsg from "./styled";
import renderContent from "./renderContent";
import Avatar from "../Avatar";
import useFavMessage from "../../hook/useFavMessage";
const StyledFav = styled.div`
display: flex;
flex-direction: column;
border-radius: var(--br);
background-color: #f4f4f5;
`;
type Props = {
id?: number;
};
const FavoredMessage: FC<Props> = ({ id }) => {
const { favorites } = useFavMessage({});
const [msgs, setMsgs] = useState<ReactElement | null>(null);
useEffect(() => {
const current = favorites.find((f) => f.id == id);
const { messages } = current || {};
if (!messages) return;
const favorite_mids = messages.map(({ from_mid }) => +from_mid) || [];
setMsgs(
<StyledFav data-favorite-mids={favorite_mids.join(",")} className="favorite">
<div className="list">
{messages.map((msg, idx) => {
const { user = {}, download, content, content_type, properties, thumbnail } = msg;
return (
<StyledMsg className="archive" key={idx}>
{user && (
<div className="avatar">
<Avatar url={user.avatar} name={user.name} />
</div>
)}
<div className="details">
<div className="up">
<span className="name">{user?.name}</span>
</div>
<div className="down">
{renderContent({
download,
content,
content_type,
properties,
thumbnail
})}
</div>
</div>
</StyledMsg>
);
})}
</div>
</StyledFav>
);
}, [favorites, id]);
if (!id) return null;
return msgs;
};
export default FavoredMessage;
src/common/component/Message/FavoritedMessage.tsx
-65
View File
@@ -1,65 +0,0 @@
import { useEffect, useState } from "react";
import styled from "styled-components";
import StyledMsg from "./styled";
import renderContent from "./renderContent";
import Avatar from "../Avatar";
import useFavMessage from "../../hook/useFavMessage";
const StyledFav = styled.div`
display: flex;
flex-direction: column;
border-radius: var(--br);
background-color: #f4f4f5;
`;
const FavoritedMessage = ({ id }) => {
const { favorites } = useFavMessage({});
const [msgs, setMsgs] = useState(null);
useEffect(() => {
const current = favorites.find((f) => f.id == id);
const { messages } = current || {};
if (messages) {
const favorite_mids = messages.map(({ from_mid }) => from_mid) || [];
setMsgs(
<StyledFav data-favorite-mids={favorite_mids.join(",")} className="favorite">
<div className="list">
{messages.map((msg, idx) => {
const { user = {}, download, content, content_type, properties, thumbnail } = msg;
return (
<StyledMsg className="archive" key={idx}>
{user && (
<div className="avatar">
<Avatar url={user.avatar} name={user.name} />
</div>
)}
<div className="details">
<div className="up">
<span className="name">{user?.name}</span>
</div>
<div className="down">
{renderContent({
download,
content,
content_type,
properties,
thumbnail
})}
</div>
</div>
</StyledMsg>
);
})}
</div>
</StyledFav>
);
}
}, [favorites, id]);
if (!id) return null;
return msgs;
};
export default FavoritedMessage;
src/common/component/Meta.tsx
+5 -3
View File
@@ -1,8 +1,9 @@
import { FC } from "react";
import { Helmet } from "react-helmet";
import BASE_URL from "../../app/config";
import { useGetServerQuery } from "../../app/services/server";
export default function Meta() {
type Props = {};
const Meta: FC<Props> = () => {
const { data, isSuccess } = useGetServerQuery();
return (
@@ -11,4 +12,5 @@ export default function Meta() {
{isSuccess && <title>{data.name} Web App</title>}
</Helmet>
);
}
};
export default Meta;
src/common/component/Notification/useDeviceToken.ts
+3 -4
View File
@@ -2,9 +2,8 @@ import { useState } from "react";
import { initializeApp } from "firebase/app";
import { getToken, getMessaging } from "firebase/messaging";
import { firebaseConfig } from "../../../app/config";
const useDeviceToken = (vapidKey) => {
const [token, setToken] = useState(null);
const useDeviceToken = (vapidKey: string) => {
const [token, setToken] = useState<string | null>(null);
// https only
if (navigator.serviceWorker) {
const messaging = getMessaging(initializeApp(firebaseConfig));
@@ -17,7 +16,7 @@ const useDeviceToken = (vapidKey) => {
console.log("current token for client: ", currentToken);
setToken(currentToken);
// updateDeviceToken(currentToken)
// Perform any other neccessary action with the token
// Perform any other necessary action with the token
} else {
// Show permission request UI
console.log("No registration token available. Request permission to generate one.");
src/common/component/Profile/index.tsx
+2 -2
View File
@@ -11,8 +11,8 @@ import useUserOperation from "../../hook/useUserOperation";
import { useAppSelector } from "../../../app/store";
interface Props {
uid?: number;
type: string;
uid: number;
type?: "embed" | "card";
cid?: number;
}
src/common/component/Search.tsx
+5 -3
View File
@@ -4,6 +4,7 @@ import searchIcon from "../../assets/icons/search.svg?url";
import addIcon from "../../assets/icons/add.svg?url";
import AddEntriesMenu from "./AddEntriesMenu";
import Tooltip from "./Tooltip";
import { FC } from "react";
const StyledWrapper = styled.div`
position: relative;
@@ -32,8 +33,8 @@ const StyledWrapper = styled.div`
cursor: pointer;
}
`;
export default function Search() {
type Props = {};
const Search: FC<Props> = () => {
return (
<StyledWrapper>
<div className="search">
@@ -47,4 +48,5 @@ export default function Search() {
</Tooltip>
</StyledWrapper>
);
}
};
export default Search;
src/common/component/Send/index.tsx
+10 -6
View File
@@ -1,4 +1,4 @@
import { useEffect, useState } from "react";
import { useEffect, useState, FC } from "react";
import useSendMessage from "../../hook/useSendMessage";
import useAddLocalFileMessage from "../../hook/useAddLocalFileMessage";
import { updateInputMode } from "../../../app/slices/ui";
@@ -20,11 +20,15 @@ const Modes = {
text: "text",
markdown: "markdown"
};
function Send({
interface IProps {
context?: "channel" | "user";
id: number;
}
const Send: FC<IProps> = ({
// 发给谁，或者是channel，或者是user
context = "channel",
id = ""
}) {
id
}) => {
const { resetStageFiles } = useUploadFile({ context, id });
const { getDraft, getUpdateDraft } = useDraft({ context, id });
const editor = useMixedEditor(`${context}_${id}`);
@@ -111,7 +115,7 @@ function Send({
resetStageFiles();
}
};
const sendMarkdown = async (content) => {
const sendMarkdown = async (content: string) => {
sendMessage({
id,
reply_mid: replying_mid,
@@ -173,7 +177,7 @@ function Send({
</div>
</StyledSend>
);
}
};
export default Send;
// export default memo(Send, (prevs, nexts) => {
src/common/hook/useAddLocalFileMessage.ts
+3 -3
View File
@@ -5,16 +5,16 @@ import { addChannelMsg } from "../../app/slices/message.channel";
import { addUserMsg } from "../../app/slices/message.user";
interface IProps {
context: "channel" | "uesr";
context: "channel" | "user";
to: number;
}
export default function useAddLocalFileMessage({ context, to }: IProps) {
const dispatch = useDispatch();
const addContextMessage = context == "channel" ? addChannelMsg : addUserMsg;
const addLocalFileMesage = (data) => {
const addLocalFileMessage = (data) => {
dispatch(addMessage(data));
dispatch(addContextMessage({ id: to, mid: data.mid }));
};
return addLocalFileMesage;
return addLocalFileMessage;
}
src/common/hook/useStreaming/index.ts
+1 -1
View File
@@ -74,7 +74,7 @@ export default function useStreaming() {
isError
} = await renewToken({
token,
refreshToken
refresh_token: refreshToken
});
if (isError) return;
api_token = newToken;
src/common/hook/useUploadFile.ts
+11 -6
View File
@@ -1,4 +1,4 @@
import { useState, useRef } from "react";
import { useState, useRef, FC } from "react";
import toast from "react-hot-toast";
import { updateUploadFiles } from "../../app/slices/ui";
import BASE_URL, { FILE_SLICE_SIZE } from "../../app/config";
@@ -6,8 +6,12 @@ import { usePrepareUploadFileMutation, useUploadFileMutation } from "../../app/s
import { useAppDispatch, useAppSelector } from "../../app/store";
// todo: check props type
export default function useUploadFile(props: { context: string; id: string } | object = {}) {
const { context = "", id = "" } = props;
interface IProps {
context: "channel" | "user";
id: number;
}
const useUploadFile = (props: IProps) => {
const { context, id } = props;
const dispatch = useAppDispatch();
const { stageFiles, replying } = useAppSelector((store) => {
return {
@@ -112,7 +116,7 @@ export default function useUploadFile(props: { context: string; id: string } | o
canceledRef.current = true;
};
const removeStageFile = (idx) => {
const removeStageFile = (idx: number) => {
dispatch(updateUploadFiles({ context, id, operation: "remove", index: idx }));
};
@@ -128,7 +132,7 @@ export default function useUploadFile(props: { context: string; id: string } | o
dispatch(updateUploadFiles({ context, id, operation: "reset" }));
};
const updateStageFile = (idx, data = {}) => {
const updateStageFile = (idx: number, data = {}) => {
dispatch(
updateUploadFiles({
context,
@@ -156,4 +160,5 @@ export default function useUploadFile(props: { context: string; id: string } | o
removeStageFile,
updateStageFile
};
}
};
export default useUploadFile;
src/common/hook/useUserOperation.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { useState, useEffect, FC } from "react";
import { useState, useEffect } from "react";
import toast from "react-hot-toast";
// import { ContentTypes } from "../../../app/config";
import { useNavigate, useMatch } from "react-router-dom";
src/routes/chat/FavList.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
// import React from "react";
// import { useSelector } from "react-redux";
import styled from "styled-components";
import FavoritedMessage from "../../common/component/Message/FavoritedMessage";
import FavoredMessage from "../../common/component/Message/FavoredMessage";
import IconSurprise from "../../assets/icons/emoji.suprise.svg";
// import IconForward from "../../../assets/icons/forward.svg";
import IconRemove from "../../assets/icons/close.svg";
@@ -107,7 +107,7 @@ export default function FavList({ cid = null, uid = null }) {
console.log("favv", id);
return (
<li key={id} className="fav">
<FavoritedMessage id={id} />
<FavoredMessage id={id} />
<div className="opts">
{/* <button
className="btn"
src/routes/favs/index.tsx
+4 -4
View File
@@ -1,7 +1,6 @@
import { useState, useEffect } from "react";
import Styled from "./styled";
import { useSelector } from "react-redux";
import FavoritedMessage from "../../common/component/Message/FavoritedMessage";
import FavoredMessage from "../../common/component/Message/FavoredMessage";
import dayjs from "dayjs";
import IconAudio from "../../assets/icons/file.audio.svg";
import IconVideo from "../../assets/icons/file.video.svg";
@@ -10,6 +9,7 @@ import IconUnknown from "../../assets/icons/file.unknown.svg";
import IconImage from "../../assets/icons/file.image.svg";
import IconChannel from "../../assets/icons/channel.svg";
import { ContentTypes } from "../../app/config";
import { useAppSelector } from "../../app/store";
const Filters = [
{
icon: <IconUnknown className="icon" />,
@@ -40,7 +40,7 @@ const Filters = [
function FavsPage() {
const [filter, setFilter] = useState("");
const [favs, setFavs] = useState([]);
const { favorites, channelData, userData } = useSelector((store) => {
const { favorites, channelData, userData } = useAppSelector((store) => {
console.log("favs", store.favorites);
return {
favorites: store.favorites,
@@ -153,7 +153,7 @@ function FavsPage() {
{tip}
{dayjs(created_at).format("YYYY-MM-DD")}
</h4>
<FavoritedMessage key={id} id={id} />
<FavoredMessage key={id} id={id} />
</div>
);
})}
src/routes/login/OidcLoginButton.tsx
+12 -8
View File
@@ -1,13 +1,14 @@
/* eslint-disable no-undef */
import { useState } from "react";
import { FC, useState } from "react";
import styled from "styled-components";
import StyledModal from "../../common/component/styled/Modal";
import Modal from "../../common/component/Modal";
import { StyledSocialButton } from "./styled";
import StyledButton from "../../common/component/styled/Button";
import OidcLoginEntry from "./OidcLoginEntry";
import { OIDCConfig } from "../../types/auth";
const StyledOicdLoginModal = styled(StyledModal)`
const StyledOidcLoginModal = styled(StyledModal)`
text-align: center;
padding: 32px 32px 16px;
@@ -21,13 +22,15 @@ const StyledOicdLoginModal = styled(StyledModal)`
height: 24px;
}
&Cancel {
&.buttonCancel {
color: #8f8f8f;
}
}
`;
export default function OidcLoginButton({ issuers }) {
interface IProps {
issuers?: OIDCConfig[];
}
const OidcLoginButton: FC<IProps> = ({ issuers }) => {
const [modal, setModal] = useState(false);
if (!issuers) return null;
return (
@@ -41,7 +44,7 @@ export default function OidcLoginButton({ issuers }) {
</StyledSocialButton>
{modal && (
<Modal id="modal-modal">
<StyledOicdLoginModal title="Login with OIDC">
<StyledOidcLoginModal title="Login with OIDC">
{issuers
.filter((issuer) => issuer.enable)
.map((issuer, index) => (
@@ -55,9 +58,10 @@ export default function OidcLoginButton({ issuers }) {
>
Close
</StyledButton>
</StyledOicdLoginModal>
</StyledOidcLoginModal>
</Modal>
)}
</>
);
}
};
export default OidcLoginButton;
src/routes/login/OidcLoginEntry.tsx
+7 -9
View File
@@ -1,27 +1,24 @@
/* eslint-disable no-undef */
import { useEffect } from "react";
import { useEffect, FC } from "react";
import { useGetOpenidMutation } from "../../app/services/auth";
import { OIDCConfig } from "../../types/auth";
import { StyledSocialButton } from "./styled";
export default function OidcLoginEntry({ issuer }) {
const OidcLoginEntry: FC<{ issuer: OIDCConfig }> = ({ issuer }) => {
const [getOpenId, { data, isLoading, isSuccess }] = useGetOpenidMutation();
const handleSolidLogin = () => {
getOpenId({
// issuer: "solidweb.org",
issuer,
issuer: issuer.domain,
redirect_uri: `${location.origin}/#/login`
});
};
useEffect(() => {
if (isSuccess) {
console.log("wtf", data);
if (isSuccess && data) {
const { url } = data;
location.href = url;
}
}, [data, isSuccess]);
console.log(issuer);
return (
<StyledSocialButton disabled={isLoading} onClick={handleSolidLogin}>
@@ -29,4 +26,5 @@ export default function OidcLoginEntry({ issuer }) {
Login with {issuer.domain}
</StyledSocialButton>
);
}
};
export default OidcLoginEntry;
src/routes/login/index.tsx
+7 -7
View File
@@ -1,5 +1,5 @@
/* eslint-disable no-undef */
import { useState, useEffect } from "react";
import { useState, useEffect, FormEvent, ChangeEvent } from "react";
import toast from "react-hot-toast";
import BASE_URL from "../../app/config";
// import web3 from "web3";
@@ -16,6 +16,7 @@ import useGoogleAuthConfig from "../../common/hook/useGoogleAuthConfig";
import useGithubAuthConfig from "../../common/hook/useGithubAuthConfig";
import GoogleLoginButton from "../../common/component/GoogleLoginButton";
import GithubLoginButton from "../../common/component/GithubLoginButton";
import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
export default function LoginPage() {
const { data: enableSMTP } = useGetSMTPStatusQuery();
@@ -53,7 +54,6 @@ export default function LoginPage() {
}
// magic link
if (magic_token && typeof exists !== "undefined") {
// console.log("tokken", token, exists);
const isLogin = exists == "true";
if (isLogin) {
// login
@@ -71,7 +71,7 @@ export default function LoginPage() {
useEffect(() => {
if (error) {
console.log("login err", error);
switch (error.status) {
switch ((error as FetchBaseQueryError).status) {
case 401:
toast.error("Username or Password incorrect");
break;
@@ -94,7 +94,7 @@ export default function LoginPage() {
}
}, [isSuccess]);
const handleLogin = (evt) => {
const handleLogin = (evt: FormEvent<HTMLFormElement>) => {
evt.preventDefault();
console.log("wtf", input);
login({
@@ -103,10 +103,10 @@ export default function LoginPage() {
});
};
const handleInput = (evt) => {
const { type } = evt.target.dataset;
const handleInput = (evt: ChangeEvent<HTMLInputElement>) => {
const { type } = evt.target.dataset as { type?: "email" | "password" };
const { value } = evt.target;
// console.log(type, value);
if (!type) return;
setInput((prev) => {
prev[type] = value;
return { ...prev };
src/routes/oauth/index.tsx
+4 -4
View File
@@ -8,10 +8,10 @@ import toast from "react-hot-toast";
import { setAuthData } from "../../app/slices/auth.data";
export default function OAuthPage() {
const [login, { data, isSuccess, isError, error: loginError }] = useLoginMutation();
const [login, { data, isSuccess, isError }] = useLoginMutation();
const { token } = useParams();
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [error, setError] = useState<string | null>(null);
const dispatch = useDispatch();
const navigateTo = useNavigate();
useEffect(() => {
@@ -28,9 +28,9 @@ export default function OAuthPage() {
}, [token]);
useEffect(() => {
if (isError) {
setError(loginError);
setError("Something Error");
}
}, [isError, loginError]);
}, [isError]);
useEffect(() => {
if (isSuccess && data) {
src/routes/setting/APIConfig.tsx
+1 -2
View File
@@ -20,7 +20,6 @@ const StyledConfirm = styled.div`
gap: 10px;
width: 250px;
.tip {
/* word-break: break-all; */
color: orange;
font-size: 12px;
line-height: 1.5;
@@ -100,7 +99,7 @@ export default function APIConfig() {
</Tippy>
<div className="tip">
Tip: The security key agreed between the server and the third-party app is used to encrypt
the communication data.{" "}
the communication data.
</div>
</Styled>
);
src/routes/setting/index.tsx
+2 -3
View File
@@ -4,7 +4,7 @@ import StyledSettingContainer from "../../common/component/StyledSettingContaine
import useNavs from "./navs";
import LogoutConfirmModal from "./LogoutConfirmModal";
let from: string | null = null;
let from: string = "";
export default function Setting() {
const [searchParams] = useSearchParams();
@@ -15,10 +15,9 @@ export default function Setting() {
const [logoutConfirm, setLogoutConfirm] = useState(false);
const navigateTo = useNavigate();
const close = () => {
// dispatch(toggleSetting());
// todo: check usage
navigateTo(from!);
from = null;
from = "";
};
const toggleLogoutConfirm = () => {
src/routes/settingChannel/index.tsx
+13 -13
View File
@@ -6,20 +6,20 @@ import DeleteConfirmModal from "./DeleteConfirmModal";
import useNavs from "./navs";
import { useAppSelector } from "../../app/store";
let from: string | null = null;
let from: string = "";
export default function ChannelSetting() {
const { cid } = useParams();
const { cid = 0 } = useParams();
const { loginUser, channel } = useAppSelector((store) => {
return {
loginUser: store.authData.user,
channel: store.channels.byId[cid]
channel: cid ? store.channels.byId[+cid] : undefined
};
});
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const navs = useNavs(cid);
const flatenNavs = navs
const navs = useNavs(+cid);
const flattenNavs = navs
.map(({ items }) => {
return items;
})
@@ -30,16 +30,16 @@ export default function ChannelSetting() {
const [leaveConfirm, setLeaveConfirm] = useState(false);
const close = () => {
navigate(from);
from = null;
from = "";
};
const toggleDeleteConfrim = () => {
const toggleDeleteConfirm = () => {
setDeleteConfirm((prev) => !prev);
};
const toggleLeaveConfrim = () => {
const toggleLeaveConfirm = () => {
setLeaveConfirm((prev) => !prev);
};
if (!cid) return null;
const currNav = flatenNavs.find((n) => n.name == navKey) || flatenNavs[0];
const currNav = flattenNavs.find((n) => n.name == navKey) || flattenNavs[0];
const canDelete = loginUser.isAdmin || channel?.owner == loginUser.uid;
const canLeave = !channel?.is_public;
@@ -53,18 +53,18 @@ export default function ChannelSetting() {
dangers={[
canLeave && {
title: "Leave Channel",
handler: toggleLeaveConfrim
handler: toggleLeaveConfirm
},
canDelete && {
title: "Delete Channel",
handler: toggleDeleteConfrim
handler: toggleDeleteConfirm
}
]}
>
{currNav.component}
</StyledSettingContainer>
{deleteConfirm && <DeleteConfirmModal closeModal={toggleDeleteConfrim} id={cid} />}
{leaveConfirm && <LeaveChannel closeModal={toggleLeaveConfrim} id={cid} />}
{deleteConfirm && <DeleteConfirmModal closeModal={toggleDeleteConfirm} id={+cid} />}
{leaveConfirm && <LeaveChannel closeModal={toggleLeaveConfirm} id={+cid} />}
</>
);
}
src/routes/users/index.tsx
+5 -4
View File
@@ -1,6 +1,6 @@
import { useEffect } from "react";
import { NavLink, useParams, useLocation } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import { updateRememberedNavs } from "../../app/slices/ui";
import Search from "../../common/component/Search";
import User from "../../common/component/User";
@@ -8,13 +8,14 @@ import Profile from "../../common/component/Profile";
import StyledWrapper from "./styled";
import BlankPlaceholder from "../../common/component/BlankPlaceholder";
import { useAppSelector } from "../../app/store";
export default function UsersPage() {
const dispatch = useDispatch();
const { pathname } = useLocation();
const { user_id } = useParams();
const userIds = useSelector((store) => store.users.ids);
const userIds = useAppSelector((store) => store.users.ids);
useEffect(() => {
dispatch(updateRememberedNavs({ key: "user" }));
return () => {
@@ -30,7 +31,7 @@ export default function UsersPage() {
<Search />
<div className="list">
<nav className="nav">
{userIds.map((uid) => {
{userIds.map((uid: number) => {
return (
<NavLink key={uid} className="session" to={`/users/${uid}`}>
<User uid={uid} enableContextMenu={true} />
@@ -43,7 +44,7 @@ export default function UsersPage() {
</div>
{user_id ? (
<div className="right">
<Profile uid={user_id} />
<Profile uid={+user_id} />
</div>
) : (
<div className="right placeholder">
src/types/auth.ts
+15
View File
@@ -6,6 +6,9 @@ export interface AuthToken {
refresh_token: string;
expired_in: number;
}
export interface RenewTokenDTO extends Pick<AuthToken, "token" | "refresh_token"> {}
export interface RenewTokenResponse
extends Pick<AuthToken, "token" | "refresh_token" | "expired_in"> {}
export interface AuthData extends AuthToken {
initialized?: boolean;
@@ -57,3 +60,15 @@ export type LoginCredential =
| GoogleCredential
| ThirdPartyCredential
| MagicLinkCredential;
export type CredentialResponse = {
password: boolean;
google: string;
metamask: string;
oidc: string[];
};
export interface OIDCConfig {
enable: boolean;
favicon: string;
domain: string;
}
src/types/channel.ts
+5 -3
View File
@@ -34,8 +34,12 @@ export interface CreateChannelDTO {
is_public: boolean;
}
export interface ChannelDTO extends Pick<Channel, "owner" | "description" | "name"> {
id: number;
}
export interface UpdateChannelDTO {
operation: "add_member" | "remove_member";
operation?: "add_member" | "remove_member";
members?: number[];
gid: number; // todo check
name?: string;
@@ -43,8 +47,6 @@ export interface UpdateChannelDTO {
owner?: number;
avatar_updated_at?: number;
type?: string;
// type = 'user_joined_group' | 'user_leaved_group'
// gid
uid?: number[];
icon?: string;
}
src/types/global.d.ts
Vendored
+26
View File
@@ -1,3 +1,26 @@
interface BeforeInstallPromptEvent extends Event {
/**
* Returns an array of DOMString items containing the platforms on which the event was dispatched.
* This is provided for user agents that want to present a choice of versions to the user such as,
* for example, "web" or "play" which would allow the user to chose between a web version or
* an Android version.
*/
readonly platforms: Array<string>;
/**
* Returns a Promise that resolves to a DOMString containing either "accepted" or "dismissed".
*/
readonly userChoice: Promise<{
outcome: "accepted" | "dismissed";
platform: string;
}>;
/**
* Allows a developer to show the install prompt at a time of their own choosing.
* This method returns a Promise.
*/
prompt(): Promise<void>;
}
export declare global {
import { PrecacheEntry } from "workbox-precaching/src/_types";
import localforage from "localforage";
@@ -7,4 +30,7 @@ export declare global {
skipWaiting: () => void;
CACHE: { [key: string]: typeof localforage | undefined };
}
interface WindowEventMap {
beforeinstallprompt: BeforeInstallPromptEvent;
}
}
src/types/message.ts
+12
View File
@@ -1,3 +1,5 @@
import { ChatEvent } from "./sse";
export type ContentType = "text/plain" | "text/markdown" | "vocechat/file" | "vocechat/archive";
export type ContentTypeKey = "text" | "markdown" | "file" | "archive";
@@ -13,3 +15,13 @@ export interface MuteDTO {
remove_users?: number[];
remove_groups?: number[];
}
export interface UploadFileResponse {
path: string;
size: number;
hash: string;
image_properties: {
width: number;
height: number;
};
}
export interface ChatMessage extends Omit<ChatEvent, "type"> {}
src/types/resource.ts
+8 -4
View File
@@ -1,3 +1,8 @@
export interface Archive {
users: ArchiveUser[];
messages: ArchiveMessage[];
num_attachments: number;
}
export interface ArchiveUser {
name: string;
avatar?: number;
@@ -13,10 +18,9 @@ export interface ArchiveMessage {
file_id?: number;
thumbnail_id?: number;
}
export interface Archive {
users: ArchiveUser[];
messages: ArchiveMessage[];
num_attachments: number;
export interface FavoriteArchive {
id: string;
created_at: number;
}
// 上传文件API响应
export interface UploadResponse {
src/types/sse.ts
+8 -3
View File
@@ -1,4 +1,4 @@
import { User } from "./auth";
import { User } from "./user";
import { Channel } from "./channel";
import { ContentType } from "./message";
@@ -110,13 +110,18 @@ export interface ReplyMessage {
content_type: ContentType;
content: string;
}
type MessageTargetUser = {
uid: number;
};
type MessageTargetChannel = {
gid: number;
};
export interface ChatEvent {
type: "chat";
mid: number;
from_uid: number;
created_at: number;
target: { uid: number };
target: MessageTargetChannel | MessageTargetUser;
detail: NormalMessage | ReactionMessage | ReplyMessage;
}
src/types/user.ts
+4 -6
View File
@@ -2,7 +2,7 @@ export type Gender = 0 | 1;
export interface User {
uid: number;
email: string;
email?: string;
name: string;
gender: Gender;
language: string;
@@ -25,9 +25,7 @@ export interface UserForAdmin extends User {
status: UserStatus;
online_devices: UserDevice[];
}
export interface UserForAdminDTO
extends Pick<
UserForAdmin,
"email" | "password" | "name" | "gender" | "is_admin" | "language" | "status"
> {}
export interface UserForAdminDTO extends Partial<UserForAdmin> {
id?: number;
}
export interface UserDTO extends Pick<User, "name" | "gender" | "language"> {}