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-29 22:59:22 +08:00
parent 6bb7af46a0
commit 33c24baecb
52 changed files with 232 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/services/auth.ts
+4 -4
View File
@@ -126,13 +126,13 @@ export const authApi = createApi({
}),
sendRegMagicLink: builder.mutation<
{
new_magic_token: "string";
new_magic_token: string;
mail_is_sent: boolean;
},
{
magic_token: "string";
email: "string";
password: "string";
magic_token: string;
email: string;
password: string;
}
>({
query: (data) => ({
src/app/services/server.ts
+1 -1
View File
@@ -121,7 +121,7 @@ export const serverApi = createApi({
getLoginConfig: builder.query<LoginConfig, void>({
query: () => ({ url: `admin/login/config` })
}),
updateLoginConfig: builder.mutation<void, LoginConfig>({
updateLoginConfig: builder.mutation<void, Partial<LoginConfig>>({
query: (data) => ({
url: `admin/login/config`,
method: "POST",
src/app/slices/message.ts
+8 -1
View File
@@ -1,11 +1,16 @@
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import BASE_URL, { ContentTypes } from "../config";
import { isImage } from "../../common/utils";
import { ContentType } from "../../types/message";
export interface MessagePayload {
mid: number;
from_uid?: number;
read?: boolean;
created_at?: number;
sending: boolean;
content_type: string;
content_type: ContentType;
content: string;
expires_in?: number | null;
properties?: {
content_type: string;
size: number;
@@ -13,6 +18,8 @@ export interface MessagePayload {
file_path?: string;
download?: string;
thumbnail?: string;
edited?: boolean | number;
reply_mid?: number;
}
export interface State {
[key: number]: MessagePayload;
src/app/slices/ui.ts
+8 -1
View File
@@ -8,7 +8,14 @@ export interface State {
menuExpand: boolean;
// todo
fileListView: string;
uploadFiles: { [key: string]: any };
uploadFiles: {
[key: string]: {
name: string;
url: string;
size: number;
type: string;
}[];
};
selectMessages: { [key: string]: any };
draftMarkdown: { [key: string]: any };
draftMixedText: { [key: string]: any };
src/common/component/Avatar.tsx
-1
View File
@@ -10,7 +10,6 @@ interface Props {
}
const Avatar: FC<Props> = ({ url = "", name = "unknown name", type = "user", ...rest }) => {
// console.log("avatar url", url);
const [src, setSrc] = useState("");
const handleError = (err: SyntheticEvent<HTMLImageElement>) => {
src/common/component/AvatarUploader.tsx
-1
View File
@@ -96,7 +96,6 @@ const AvatarUploader: FC<Props> = ({
multiple={false}
onChange={handleUpload}
type="file"
// todo: xss
accept="image/*"
name="avatar"
id="avatar"
src/common/component/BlankPlaceholder.tsx
-1
View File
@@ -1,6 +1,5 @@
import { FC, useState } from "react";
import styled from "styled-components";
// import { NavLink } from "react-router-dom";
import ChannelModal from "./ChannelModal";
import InviteModal from "./InviteModal";
import IconChat from "../../assets/icons/placeholder.chat.svg";
src/common/component/ContextMenu.tsx
+4 -4
View File
@@ -1,16 +1,16 @@
import { FC, MouseEvent, ReactElement } from "react";
import { FC, ReactElement } from "react";
import StyledMenu from "./styled/Menu";
export interface Item {
title: string;
icon?: string | ReactElement;
handler: (e: MouseEvent) => void;
handler: (param: any) => void;
underline?: boolean;
danger?: boolean;
}
interface Props {
items: Item[];
items: (Item | boolean | undefined)[];
hideMenu?: () => void;
}
@@ -18,7 +18,7 @@ const ContextMenu: FC<Props> = ({ items = [], hideMenu = null }) => {
return (
<StyledMenu>
{items.map((item) => {
if (!item) return null;
if (typeof item === "boolean" || !item) return null;
const {
title,
icon = null,
src/common/component/InviteModal/AddMembers.tsx
+1 -3
View File
@@ -135,12 +135,11 @@ const AddMembers: FC<Props> = ({ cid = 0, closeModal }) => {
if (!channel) return null;
const { members: uids } = channel;
const userIds = users.map(({ uid }) => uid);
const userIds = users.map((u) => u?.uid || 0);
return (
<Styled>
<div className="filter">
{/* {selects && selects.length > 0 && ( */}
<ul className="selects">
{selects.map((uid) => {
return (
@@ -158,7 +157,6 @@ const AddMembers: FC<Props> = ({ cid = 0, closeModal }) => {
onChange={handleFilterInput}
/>
</ul>
{/* )} */}
</div>
<ul className="users">
{userIds.map((uid) => {
src/common/component/Message/index.tsx
+3 -9
View File
@@ -38,14 +38,10 @@ const Message: FC<IProps> = ({
const [edit, setEdit] = useState(false);
const avatarRef = useRef(null);
const { getPinInfo } = usePinMessage(context == "channel" ? contextId : 0);
const {
message = {},
reactionMessageData,
usersData
} = useAppSelector((store) => {
const { message, reactionMessageData, usersData } = useAppSelector((store) => {
return {
reactionMessageData: store.reactionMessage,
message: store.message[mid] || {},
message: store.message[mid],
usersData: store.users.byId
};
});
@@ -104,7 +100,7 @@ const Message: FC<IProps> = ({
interactive
placement="right"
trigger="click"
content={<Profile uid={fromUid} type="card" cid={contextId} />}
content={<Profile uid={fromUid || 0} type="card" cid={contextId} />}
>
<div className="avatar" data-uid={fromUid} ref={avatarRef}>
<Avatar url={currUser?.avatar} name={currUser?.name} />
@@ -164,11 +160,9 @@ const Message: FC<IProps> = ({
{!edit && !readOnly && (
<Commands
content_type={content_type}
context={context}
contextId={contextId}
mid={mid}
from_uid={fromUid}
toggleEditMessage={toggleEditMessage}
/>
)}
src/common/component/Message/renderContent.tsx
+5 -4
View File
@@ -8,16 +8,17 @@ import ForwardedMessage from "./ForwardedMessage";
import MarkdownRender from "../MarkdownRender";
import FileMessage from "../FileMessage";
import URLPreview from "./URLPreview";
import { ContentType } from "../../../types/message";
type Props = {
context: "user" | "channel";
to?: number;
from_uid?: number;
created_at: number;
created_at?: number;
properties?: object;
content_type;
content_type: ContentType;
content: string;
download: string;
thumbnail: string;
download?: string;
thumbnail?: string;
edited?: boolean | number;
};
const renderContent = ({
src/common/component/MixedInput/ImageElement.tsx
-42
View File
@@ -1,42 +0,0 @@
// import React from 'react'
import { useEditorRef } from "@udecode/plate";
import { Transforms } from "slate";
import { ReactEditor } from "slate-react";
import styled from "styled-components";
import iconClose from "../../../assets/icons/close.circle.svg?url";
const StylePicture = styled.picture`
position: relative;
display: flex;
width: fit-content;
max-width: 240px;
max-height: 240px;
img {
width: 100%;
object-fit: cover;
}
.remove {
background: none;
position: absolute;
top: 0;
right: -20px;
}
`;
export default function ImageElement({ attributes, children, element }) {
const editor = useEditorRef();
const path = ReactEditor.findPath(editor, element);
const handleRemoveImage = () => {
Transforms.removeNodes(editor, { at: path });
};
return (
<StylePicture {...attributes}>
{children}
<img src={element.url}></img>
<button className="remove" onClick={handleRemoveImage}>
<img src={iconClose} alt="icon close" />
</button>
</StylePicture>
);
}
src/common/component/MixedInput/config.ts
-12
View File
@@ -28,18 +28,6 @@ export const CONFIG = {
allow: [ELEMENT_IMAGE, ELEMENT_PARAGRAPH]
}
}
// {
// hotkey: "mod+shift+enter",
// before: true,
// },
// {
// hotkey: "enter",
// query: {
// start: true,
// end: true,
// allow: KEYS_HEADING,
// },
// },
]
}
},
src/common/component/MixedInput/index.tsx
+10 -27
View File
@@ -1,4 +1,4 @@
import { useRef, useEffect, useState, useCallback } from "react";
import { useRef, useEffect, useState, useCallback, ClipboardEvent } from "react";
import { useKey } from "rooks";
import { Editor, Transforms } from "slate";
import {
@@ -9,19 +9,11 @@ import {
createNodeIdPlugin,
createParagraphPlugin,
createSoftBreakPlugin,
// createComboboxPlugin,
createMentionPlugin,
// comboboxSelectors,
// getMentionOnSelectItem,
findMentionInput,
// removeMentionInput,
// isSelectionInMentionInput,
createPlugins,
ELEMENT_PARAGRAPH,
getPlateEditorRef,
// usePlateEditorRef,
// ELEMENT_IMAGE,
// useComboboxControls,
MentionCombobox
} from "@udecode/plate";
import { createComboboxPlugin } from "@udecode/plate-combobox";
@@ -48,7 +40,7 @@ const Plugins = ({
}) => {
// const { getMenuProps, getItemProps } = useComboboxControls();
const [context, to] = id.split("_");
const { addStageFile } = useUploadFile({ context, id: to });
const { addStageFile } = useUploadFile({ context, id: Number(to) });
const enableMentions = members.length > 0;
const userData = useAppSelector((store) => store.users.byId);
const [msgs, setMsgs] = useState([]);
@@ -61,7 +53,7 @@ const Plugins = ({
};
const plateEditor = getPlateEditorRef(`${TEXT_EDITOR_PREFIX}_${id}`);
useEffect(() => {
const handlePasteEvent = (evt) => {
const handlePasteEvent = (evt: ClipboardEvent) => {
const files = [...evt.clipboardData.files];
if (files.length) {
const filesData = files.map((file) => {
@@ -89,6 +81,7 @@ const Plugins = ({
useKey(
"Enter",
(evt) => {
if (!plateEditor) return;
// 是否在at操作
const mentionInputs = findMentionInput(plateEditor);
if (mentionInputs || evt.shiftKey || evt.ctrlKey || evt.altKey || evt.isComposing) {
@@ -106,7 +99,6 @@ const Plugins = ({
});
},
{
// eventTypes: ["keydown"],
target: editableRef,
when: !cmdKey
}
@@ -154,12 +146,12 @@ const Plugins = ({
);
const handleChange = useCallback(
async (val) => {
async (val: any) => {
console.log("tmps changed", val);
const tmps = [];
const getMixedText = (children) => {
const mentions = [];
const arr = children.map(({ type, text, uid }) => {
const getMixedText = (children: any) => {
const mentions: any = [];
const arr = children.map(({ type, text, uid }: any) => {
if (type == "mention") {
mentions.push(uid);
return ` @${uid} `;
@@ -208,7 +200,6 @@ const Plugins = ({
<Styled className="input" ref={editableRef}>
<Plate
id={`${TEXT_EDITOR_PREFIX}_${id}`}
// key={`${TEXT_EDITOR_PREFIX}_${id}`}
onChange={handleChange}
editableProps={{ ...initialProps, style: { userSelect: "text" } }}
initialValue={initialValue}
@@ -216,9 +207,7 @@ const Plugins = ({
>
{enableMentions ? (
<MentionCombobox
// component={StyledCombobox}
onRenderItem={({ item }) => {
console.log("wtf", item);
if (!item || !item.data) return null;
return <User key={item.data.uid} uid={item.data.uid} interactive={false} />;
}}
@@ -245,14 +234,14 @@ const Plugins = ({
);
};
export const useMixedEditor = (key) => {
export const useMixedEditor = (key: string) => {
const editorRef = getPlateEditorRef(`${TEXT_EDITOR_PREFIX}_${key}`);
const focus = () => {
if (editorRef) {
ReactEditor.focus(editorRef);
}
};
const insertText = (txt) => {
const insertText = (txt: string) => {
console.log("eref", editorRef);
if (editorRef) {
ReactEditor.focus(editorRef);
@@ -265,9 +254,3 @@ export const useMixedEditor = (key) => {
};
};
export default Plugins;
// export default memo(Plugins, (prev, next) => {
// return (
// prev.id == next.id &&
// JSON.stringify(prev.initialValue) == JSON.stringify(next.initialValue)
// );
// });
src/common/component/MixedInput/values/nodeTypes.ts
-6
View File
@@ -1,6 +0,0 @@
const nodeTypes = {
paragraph: "p",
image: "img"
};
export default nodeTypes;
src/common/component/MixedInput/values/utils.ts
-27
View File
@@ -1,27 +0,0 @@
import {
ELEMENT_PARAGRAPH
// TElement,
} from "@udecode/plate";
// import { Text } from 'slate'
export const createElement = (text = "", { type = ELEMENT_PARAGRAPH, mark } = {}) => {
const leaf = { text };
if (mark) {
leaf[mark] = true;
}
return {
type,
children: [leaf]
};
};
export const getNodesWithRandomId = (nodes = []) => {
let _id = 10000;
nodes.forEach((node) => {
node.id = _id;
_id++;
});
return nodes;
};
src/common/component/Modal.tsx
-1
View File
@@ -7,7 +7,6 @@ interface Props {
children?: ReactNode;
}
// todo: check memory leak
const Modal: FC<Props> = ({ id = "root-modal", mask = true, children }) => {
const [wrapper, setWrapper] = useState<HTMLDivElement | null>(null);
src/common/component/Send/Replying.tsx
+1 -1
View File
@@ -85,7 +85,7 @@ const renderContent = (data: MessagePayload) => {
res = reactStringReplace(content, /(\s{1}@[0-9]+\s{1})/g, (match, idx) => {
console.log("match", match);
const uid = match.trim().slice(1);
return <Mention popover={false} key={idx} uid={uid} />;
return <Mention popover={false} key={idx} uid={+uid} />;
});
break;
case ContentTypes.markdown:
src/common/component/Send/UploadFileList/EditFileDetails.tsx
+1 -1
View File
@@ -54,7 +54,7 @@ export default function EditFileDetails({
updateName
}: {
name: string;
closeModal: () => void;
closeModal: (p?: any) => void;
updateName: (name: string) => void;
}) {
const [fileName, setFileName] = useState(name);
src/common/component/Send/UploadFileList/index.tsx
+2 -2
View File
@@ -28,7 +28,7 @@ export default function UploadFileList({
setEditInfo((prev) => (prev ? null : info));
};
const handleOpenEditModal = (idx: number) => {
const info = stageFiles[idx];
const info = stageFiles[`${idx}`];
if (!info) return;
toggleModalVisible({ ...info, index: idx });
@@ -55,7 +55,7 @@ export default function UploadFileList({
)}
<Styled>
{stageFiles.map(({ name, url, size, type }, idx) => {
{stageFiles.map(({ name, url, size, type }, idx: number) => {
return (
<li className="file" key={url}>
<div className="preview">
src/common/component/StyledSettingContainer.tsx
+1 -1
View File
@@ -136,7 +136,7 @@ const StyledSettingContainer: FC<Props> = ({
{dangers.length ? (
<ul className="items danger">
{dangers.map((d) => {
if (!d) return null;
if (typeof d === "boolean" || !d) return null;
const { title, handler } = d;
return (
<li key={title} onClick={handler} className="item">
src/common/component/UsersModal.tsx
+1 -1
View File
@@ -73,7 +73,7 @@ const UsersModal: FC<Props> = ({ closeModal }) => {
{users && (
<ul className="users">
{users.map((u) => {
const { uid } = u;
const { uid = 0 } = u || {};
return (
<li key={uid} className="user">
<NavLink onClick={closeModal} to={`/chat/dm/${uid}`}>
src/common/component/styled/Checkbox.tsx
+2 -1
View File
@@ -1,3 +1,4 @@
import { InputHTMLAttributes } from "react";
import styled from "styled-components";
const Styled = styled.input`
@@ -34,6 +35,6 @@ const Styled = styled.input`
}
`;
export default function StyledCheckbox(props) {
export default function StyledCheckbox(props: InputHTMLAttributes<HTMLInputElement>) {
return <Styled readOnly {...props} type="checkbox" />;
}
src/common/component/styled/Input.tsx
+28 -13
View File
@@ -1,11 +1,6 @@
import {
useState,
FC,
DetailedHTMLProps,
InputHTMLAttributes
} from 'react';
import { HiEye, HiEyeOff } from 'react-icons/hi';
import styled from 'styled-components';
import { useState, FC, DetailedHTMLProps, InputHTMLAttributes } from "react";
import { HiEye, HiEyeOff } from "react-icons/hi";
import styled from "styled-components";
const StyledWrapper = styled.div`
width: 100%;
@@ -81,21 +76,41 @@ const StyledInput = styled.input`
}
`;
interface Props extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
interface Props
extends DetailedHTMLProps<
Pick<
InputHTMLAttributes<HTMLInputElement>,
| "placeholder"
| "className"
| "type"
| "autoFocus"
| "id"
| "value"
| "name"
| "required"
| "readOnly"
| "onChange"
| "onBlur"
| "pattern"
| "disabled"
>,
HTMLInputElement
> {
prefix?: string;
ref?: any;
}
const Input: FC<Props> = ({ type = 'text', prefix = '', className, ...rest }) => {
const Input: FC<Props> = ({ type = "text", prefix = "", className, ...rest }) => {
const [inputType, setInputType] = useState(type);
const togglePasswordVisible = () => {
setInputType((prev) => (prev == 'password' ? 'text' : 'password'));
setInputType((prev) => (prev == "password" ? "text" : "password"));
};
return type == 'password' ? (
return type == "password" ? (
<StyledWrapper className={className}>
<StyledInput type={inputType} className={`inner ${className}`} {...rest} />
<div className="view" onClick={togglePasswordVisible}>
{inputType == 'password' ? <HiEyeOff color="#78787c"/> : <HiEye color="#78787c"/>}
{inputType == "password" ? <HiEyeOff color="#78787c" /> : <HiEye color="#78787c" />}
</div>
</StyledWrapper>
) : prefix ? (
src/common/component/styled/Radio.tsx
+15 -7
View File
@@ -1,4 +1,4 @@
import { useState, useId } from "react";
import { useState, useId, FC } from "react";
import styled from "styled-components";
const StyledForm = styled.form`
@@ -61,17 +61,24 @@ const StyledForm = styled.form`
}
}
`;
type Props = {
options: string[];
values: (string | number)[];
defaultValue?: string | number;
onChange?: (param: any) => void;
value: object | number | string;
};
const VALUE_NOT_SET = {};
const VALUES_NOT_SET = {};
const VALUE_NOT_SET = "";
const VALUES_NOT_SET: string[] = [];
export default function Radio({
const Radio: FC<Props> = ({
options,
values = VALUES_NOT_SET,
value = VALUE_NOT_SET,
defaultValue = undefined,
defaultValue = "",
onChange = undefined
}) {
}) => {
const id = useId();
const [fallbackValue, setFallbackValue] = useState(defaultValue);
@@ -104,4 +111,5 @@ export default function Radio({
))}
</StyledForm>
);
}
};
export default Radio;
src/common/hook/useFavMessage.ts
+1 -1
View File
@@ -24,7 +24,7 @@ export default function useFavMessage({
return "error" in resp;
};
const removeFavorite = (id: number) => {
const removeFavorite = (id: string) => {
if (!id) return;
removeFav(id);
};
src/common/hook/useUserOperation.ts
+5 -2
View File
@@ -77,9 +77,12 @@ const useUserOperation = ({ uid, cid }: IProps) => {
};
const isAdmin = !!loginUser?.is_admin;
const loginUid = loginUser?.uid;
const canDeleteChannel = cid && !channel?.is_public && isAdmin;
const canDeleteChannel = !!cid && !channel?.is_public && isAdmin;
const canRemoveFromChannel =
cid && !channel?.is_public && (isAdmin || channel?.owner == loginUid) && uid != channel?.owner;
!!cid &&
!channel?.is_public &&
(isAdmin || channel?.owner == loginUid) &&
uid != channel?.owner;
const canCall: boolean = (agoraConfig as AgoraConfig)?.enabled && loginUid != uid;
const canRemove: boolean = isAdmin && loginUid != uid && !cid;
src/routes/chat/ChannelList/NavItem.tsx
+2 -2
View File
@@ -17,8 +17,8 @@ import { getUnreadCount } from "../utils";
import { useAppSelector } from "../../../app/store";
interface IProps {
id: number;
setFiles: () => void;
toggleRemoveConfirm: () => void;
setFiles: (files: File[]) => void;
toggleRemoveConfirm: (id: number) => void;
}
const NavItem: FC<IProps> = ({ id, setFiles, toggleRemoveConfirm }) => {
const { pathname } = useLocation();
src/routes/chat/ChannelList/index.tsx
+3 -3
View File
@@ -3,13 +3,13 @@ import DeleteConfirmModal from "../../settingChannel/DeleteConfirmModal";
import NavItem from "./NavItem";
import { useAppSelector } from "../../../app/store";
export default function ChannelList({ setDropFiles }) {
const [currId, setCurrId] = useState(null);
export default function ChannelList({ setDropFiles }: { setDropFiles: (files: File[]) => void }) {
const [currId, setCurrId] = useState<number>();
const { channelIds } = useAppSelector((store) => {
return { channelIds: store.channels.ids };
});
const setRemoveChannel = (cid = undefined) => {
const setRemoveChannel = (cid?: number) => {
setCurrId(cid);
};
src/routes/chat/DMChat/index.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ import useMessageFeed from "../../../common/hook/useMessageFeed";
import { useAppSelector } from "../../../app/store";
type Props = {
uid: number;
dropFiles?: [File];
dropFiles?: File[];
};
const DMChat: FC<Props> = ({ uid = 0, dropFiles }) => {
const {
src/routes/chat/DMList/NavItem.tsx
+3 -2
View File
@@ -15,6 +15,7 @@ import { renderPreviewMessage } from "../utils";
import User from "../../../common/component/User";
import { ContentTypes } from "../../../app/config";
import { useAppSelector } from "../../../app/store";
import { ArchiveMessage } from "../../../types/resource";
interface IProps {
uid: number;
mid?: number;
@@ -22,7 +23,7 @@ interface IProps {
setFiles: () => void;
}
const NavItem: FC<IProps> = ({ uid, mid = 0, unreads, setFiles }) => {
const [previewMsg, setPreviewMsg] = useState(null);
const [previewMsg, setPreviewMsg] = useState<ArchiveMessage>();
const { messages: normalizedMessages, normalizeMessage } = useNormalizeMessage();
const dispatch = useDispatch();
const pathMatched = useMatch(`/chat/dm/${uid}`);
@@ -63,7 +64,7 @@ const NavItem: FC<IProps> = ({ uid, mid = 0, unreads, setFiles }) => {
}, [currMsg]);
useEffect(() => {
if (normalizedMessages) {
setPreviewMsg(normalizedMessages.pop());
setPreviewMsg(normalizedMessages?.pop());
}
}, [normalizedMessages]);
src/routes/chat/DMList/index.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { useAppSelector } from "../../../app/store";
interface Props {
uids: number[];
setDropFiles: () => void;
setDropFiles: (files: File[]) => void;
}
const DMList: FC<Props> = ({ uids, setDropFiles }) => {
src/routes/chat/FavList.tsx
+1 -1
View File
@@ -86,7 +86,7 @@ type Props = { cid?: number; uid?: number };
const FavList: FC<Props> = ({ cid = null, uid = null }) => {
const { favorites, removeFavorite } = useFavMessage({ cid, uid });
const handleRemove = (evt: MouseEvent<HTMLButtonElement>) => {
const { id } = evt.currentTarget.dataset;
const { id = "" } = evt.currentTarget.dataset;
console.log("remove fav", id);
removeFavorite(id);
};
src/routes/chat/SessionList/ContextMenu.tsx
+17 -6
View File
@@ -1,3 +1,4 @@
import { FC, ReactElement } from "react";
import Tippy from "@tippyjs/react";
import { useDispatch } from "react-redux";
import { useNavigate, useLocation, useMatch } from "react-router-dom";
@@ -7,8 +8,17 @@ import { removeUserSession } from "../../../app/slices/message.user";
import ContextMenu from "../../../common/component/ContextMenu";
import useUserOperation from "../../../common/hook/useUserOperation";
import { useAppSelector } from "../../../app/store";
export default function SessionContextMenu({
type Props = {
context: "user" | "channel";
id: number;
visible: boolean;
mid: number;
hide: () => void;
deleteChannel: (param: number) => void;
setInviteChannelId: (param: number) => void;
children: ReactElement;
};
const SessionContextMenu: FC<Props> = ({
context = "user",
id,
visible,
@@ -17,10 +27,10 @@ export default function SessionContextMenu({
deleteChannel,
setInviteChannelId,
children
}) {
}) => {
const { canCopyEmail, copyEmail, canDeleteChannel } = useUserOperation({
uid: context == "user" ? id : null,
cid: context == "channel" ? id : null
uid: context == "user" ? id : undefined,
cid: context == "channel" ? id : undefined
});
const [muteChannel] = useUpdateMuteSettingMutation();
const [updateReadIndex] = useReadMessageMutation();
@@ -114,4 +124,5 @@ export default function SessionContextMenu({
{children}
</Tippy>
);
}
};
export default SessionContextMenu;
src/routes/chat/SessionList/Session.tsx
+18 -8
View File
@@ -16,8 +16,8 @@ interface IProps {
type?: "user" | "channel";
id: number;
mid: number;
setDeleteChannelId: () => void;
setInviteChannelId: () => void;
setDeleteChannelId: (param: number) => void;
setInviteChannelId: (param: number) => void;
}
const Session: FC<IProps> = ({
type = "user",
@@ -52,12 +52,17 @@ const Session: FC<IProps> = ({
);
const { visible: contextMenuVisible, handleContextMenuEvent, hideContextMenu } = useContextMenu();
const [data, setData] = useState(null);
const [data, setData] = useState<{
name: string;
icon: string;
mid: number;
is_public: boolean;
}>();
const { messageData, userData, channelData, readIndex, loginUid, mids, muted } = useAppSelector(
(store) => {
return {
mids: type == "user" ? store.userMessage.byId[id] : store.channelMessage[id],
loginUid: store.authData.user?.uid,
loginUid: store.authData.user?.uid || 0,
readIndex:
type == "user" ? store.footprint.readUsers[id] : store.footprint.readChannels[id],
messageData: store.message,
@@ -71,10 +76,15 @@ const Session: FC<IProps> = ({
useEffect(() => {
const tmp = type == "user" ? userData[id] : channelData[id];
if (!tmp) return;
const { name, icon, avatar, is_public = true } = tmp;
const session =
type == "user" ? { name, icon: avatar, mid, is_public } : { name, icon, mid, is_public };
setData(session);
if ("avatar" in tmp) {
// user
const { name, avatar } = tmp;
setData({ name, icon: avatar, mid, is_public: true });
} else {
// channel
const { name, icon = "", is_public } = tmp;
setData({ name, icon, mid, is_public });
}
}, [id, mid, type, userData, channelData]);
if (!data) return null;
const previewMsg = messageData[mid] || {};
src/routes/chat/SessionList/index.tsx
+28 -16
View File
@@ -1,14 +1,24 @@
import { FC } from "react";
import { useState, useEffect } from "react";
import Styled from "./styled";
import Session from "./Session";
import DeleteChannelConfirmModal from "../../settingChannel/DeleteConfirmModal";
import InviteModal from "../../../common/component/InviteModal";
import { useAppSelector } from "../../../app/store";
export default function SessionList({ tempSession = null }) {
const [deleteId, setDeleteId] = useState(null);
const [inviteChannelId, setInviteChannelId] = useState(null);
const [sessions, setSessions] = useState([]);
export interface ChatSession {
key: string;
type: "user" | "channel";
id: number;
mid?: number;
unread?: number;
}
type Props = {
tempSession: ChatSession;
};
const SessionList: FC<Props> = ({ tempSession }) => {
const [deleteId, setDeleteId] = useState<number>();
const [inviteChannelId, setInviteChannelId] = useState<number>();
const [sessions, setSessions] = useState<ChatSession[]>([]);
const { channelIDs, DMs, readChannels, readUsers, channelMessage, userMessage, loginUid } =
useAppSelector((store) => {
return {
@@ -26,7 +36,7 @@ export default function SessionList({ tempSession = null }) {
const cSessions = channelIDs.map((id) => {
const mids = channelMessage[id];
if (!mids || mids.length == 0) {
return { key: `channel_${id}`, mid: null, unreads: 0, id, type: "channel" };
return { key: `channel_${id}`, unreads: 0, id, type: "channel" };
}
const mid = [...mids].pop();
return { key: `channel_${id}`, id, mid, type: "channel" };
@@ -34,13 +44,15 @@ export default function SessionList({ tempSession = null }) {
const uSessions = DMs.map((id) => {
const mids = userMessage[id];
if (!mids || mids.length == 0) {
return { key: `user_${id}`, mid: null, unreads: 0, id, type: "user" };
return { key: `user_${id}`, unreads: 0, id, type: "user" };
}
const mid = [...mids].pop();
return { key: `user_${id}`, type: "user", id, mid };
});
const tmps = [...cSessions, ...uSessions].sort((a, b) => {
return b.mid - a.mid;
const tmps = [...(cSessions as ChatSession[]), ...(uSessions as ChatSession[])].sort((a, b) => {
const { mid: aMid = 0 } = a;
const { mid: bMid = 0 } = b;
return bMid - aMid;
});
setSessions(tempSession ? [tempSession, ...tmps] : tmps);
}, [
@@ -58,7 +70,7 @@ export default function SessionList({ tempSession = null }) {
<>
<Styled>
{sessions.map((s) => {
const { key, type, id, mid } = s;
const { key, type, id, mid = 0 } = s;
return (
<Session
key={key}
@@ -67,28 +79,28 @@ export default function SessionList({ tempSession = null }) {
mid={mid}
setInviteChannelId={setInviteChannelId}
setDeleteChannelId={setDeleteId}
className="session"
/>
);
})}
</Styled>
{deleteId && (
{!!deleteId && (
<DeleteChannelConfirmModal
id={deleteId}
closeModal={() => {
setDeleteId(null);
setDeleteId(0);
}}
/>
)}
{inviteChannelId && (
{!!inviteChannelId && (
<InviteModal
type="channel"
cid={inviteChannelId}
closeModal={() => {
setInviteChannelId(null);
setInviteChannelId(0);
}}
/>
)}
</>
);
}
};
export default SessionList;
src/routes/chat/index.team.tsx
+5 -7
View File
@@ -9,8 +9,6 @@ import AddIcon from "../../assets/icons/add.svg";
import BlankPlaceholder from "../../common/component/BlankPlaceholder";
import Server from "../../common/component/Server";
import Tooltip from "../../common/component/Tooltip";
// import User from "../../common/component/User";
// import CurrentUser from "../../common/component/CurrentUser";
import ChannelChat from "./ChannelChat";
import DMChat from "./DMChat";
import ChannelList from "./ChannelList";
@@ -20,8 +18,8 @@ import DMList from "./DMList";
import { useAppSelector } from "../../app/store";
export default function ChatPage() {
const [channelDropFiles, setChannelDropFiles] = useState([]);
const [userDropFiles, setUserDropFiles] = useState([]);
const [channelDropFiles, setChannelDropFiles] = useState<File[]>([]);
const [userDropFiles, setUserDropFiles] = useState<File[]>([]);
const { sessionUids } = useAppSelector((store) => {
return {
sessionUids: store.userMessage.ids
@@ -40,7 +38,7 @@ export default function ChatPage() {
const { currentTarget } = evt;
currentTarget.classList.toggle("collapse");
};
const tmpUid = sessionUids.findIndex((i) => i == +user_id) > -1 ? null : user_id;
const tmpUid = sessionUids.findIndex((i) => i == +user_id) > -1 ? 0 : +user_id;
// console.log("temp uid", tmpUid);
const placeholderVisible = !channel_id && !user_id;
return (
@@ -87,8 +85,8 @@ export default function ChatPage() {
</div>
<div className={`right ${placeholderVisible ? "placeholder" : ""}`}>
{placeholderVisible && <BlankPlaceholder />}
{channel_id && <ChannelChat cid={channel_id} dropFiles={channelDropFiles} />}
{user_id && <DMChat uid={user_id} dropFiles={userDropFiles} />}
{channel_id && <ChannelChat cid={+channel_id} dropFiles={channelDropFiles} />}
{user_id && <DMChat uid={+user_id} dropFiles={userDropFiles} />}
</div>
</StyledWrapper>
</>
src/routes/chat/utils.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import React from "react";
import React, { ReactElement, ReactNode } from "react";
import dayjs from "dayjs";
import styled from "styled-components";
import reactStringReplace from "react-string-replace";
@@ -60,7 +60,7 @@ export const renderPreviewMessage = (message = null) => {
res = reactStringReplace(content, /(\s{1}@[0-9]+\s{1})/g, (match, idx) => {
console.log("match", match);
const uid = match.trim().slice(1);
return <Mention key={idx} uid={uid} textOnly={true} />;
return <Mention key={idx} uid={+uid} textOnly={true} />;
});
}
break;
src/routes/favs/index.tsx
+3 -7
View File
@@ -5,11 +5,11 @@ import dayjs from "dayjs";
import IconAudio from "../../assets/icons/file.audio.svg";
import IconVideo from "../../assets/icons/file.video.svg";
import IconUnknown from "../../assets/icons/file.unknown.svg";
// import IconDoc from "../../assets/icons/file.doc.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";
import { Favorite } from "../../app/slices/favorites";
const Filters = [
{
icon: <IconUnknown className="icon" />,
@@ -21,11 +21,6 @@ const Filters = [
title: "Images",
filter: "image"
},
// {
// icon: <IconDoc className="icon" />,
// title: "Files",
// filter: "file",
// },
{
icon: <IconVideo className="icon" />,
title: "Videos",
@@ -40,7 +35,7 @@ const Filters = [
type filter = "audio" | "video" | "image" | "";
function FavsPage() {
const [filter, setFilter] = useState<filter>("");
const [favs, setFavs] = useState([]);
const [favs, setFavs] = useState<Favorite[]>([]);
const { favorites, channelData, userData } = useAppSelector((store) => {
return {
favorites: store.favorites,
@@ -132,6 +127,7 @@ function FavsPage() {
</div>
<div className="right">
{favs.map(({ id, created_at, messages }) => {
if (!messages || messages.length == 0) return null;
const [
{
source: { gid, uid }
src/routes/home/usePreload.ts
+1 -1
View File
@@ -43,7 +43,7 @@ export default function usePreload() {
getFavorites();
}
}, [rehydrated]);
const canStreaming = loginUid && rehydrated && !!token;
const canStreaming = !!loginUid && rehydrated && !!token;
console.log("ttt", loginUid, rehydrated, token);
useEffect(() => {
src/routes/login/MetamaskLoginButton.tsx
+6 -2
View File
@@ -5,9 +5,14 @@ import { useLazyGetMetamaskNonceQuery } from "../../app/services/auth";
import metamaskSvg from "../../assets/icons/metamask.svg?url";
import { StyledSocialButton } from "./styled";
import Onboarding from "@metamask/onboarding";
import { LoginCredential } from "../../types/auth";
// import toast from "react-hot-toast";
export default function MetamaskLoginButton({ login }) {
export default function MetamaskLoginButton({
login
}: {
login: (params: LoginCredential) => void;
}) {
const [requesting, setRequesting] = useState(false);
const [accounts, setAccounts] = useState([]);
const [getNonce] = useLazyGetMetamaskNonceQuery();
@@ -64,7 +69,6 @@ export default function MetamaskLoginButton({ login }) {
return signature;
};
const handleMetamaskLogin = async () => {
console.log("wtfff", MetaMaskOnboarding.isMetaMaskInstalled());
if (MetaMaskOnboarding.isMetaMaskInstalled()) {
setRequesting(true);
try {
src/routes/onboarding/steps/adminAccount.tsx
+14 -12
View File
@@ -1,4 +1,4 @@
import { useEffect, useState } from "react";
import { useEffect, useState, FC } from "react";
import styled from "styled-components";
import toast from "react-hot-toast";
import { useDispatch } from "react-redux";
@@ -62,8 +62,11 @@ const StyledWrapper = styled.div`
margin-top: 24px;
}
`;
export default function AdminAccount({ serverName, nextStep }) {
type Props = {
serverName: string;
nextStep: () => void;
};
const AdminAccount: FC<Props> = ({ serverName, nextStep }) => {
const dispatch = useDispatch();
const [createAdmin, { isLoading: isSigningUp, error: signUpError }] = useCreateAdminMutation();
@@ -89,15 +92,13 @@ export default function AdminAccount({ serverName, nextStep }) {
// After logged in
useEffect(() => {
if (isLoggedIn) {
if (isLoggedIn && serverData) {
dispatch(updateInitialized(true));
setTimeout(() => {
// Set server name
updateServer({
...serverData,
name: serverName
});
}, 0);
// Set server name
updateServer({
...serverData,
name: serverName
});
}
}, [isLoggedIn]);
@@ -163,4 +164,5 @@ export default function AdminAccount({ serverName, nextStep }) {
</StyledButton>
</StyledWrapper>
);
}
};
export default AdminAccount;
src/routes/onboarding/steps/donePage.tsx
+1 -1
View File
@@ -57,7 +57,7 @@ const StyledWrapper = styled.div`
}
`;
export default function DonePage({ serverName }) {
export default function DonePage({ serverName }: { serverName: string }) {
const navigate = useNavigate();
return (
src/routes/onboarding/steps/inviteLink.tsx
+1 -1
View File
@@ -73,7 +73,7 @@ const StyledWrapper = styled.div`
}
`;
export default function InviteLink({ nextStep }) {
export default function InviteLink({ nextStep }: { nextStep: () => void }) {
const { link, linkCopied, copyLink } = useInviteLink();
return (
src/routes/onboarding/steps/serverName.tsx
+9 -3
View File
@@ -1,3 +1,4 @@
import { FC } from "react";
import styled from "styled-components";
import toast from "react-hot-toast";
import StyledInput from "../../../common/component/styled/Input";
@@ -44,8 +45,12 @@ const StyledWrapper = styled.div`
margin-top: 24px;
}
`;
export default function ServerName({ serverName, setServerName, nextStep }) {
type Props = {
serverName: string;
setServerName: (name: string) => void;
nextStep: () => void;
};
const ServerName: FC<Props> = ({ serverName, setServerName, nextStep }) => {
return (
<StyledWrapper>
<span className="primaryText">Create a new server</span>
@@ -73,4 +78,5 @@ export default function ServerName({ serverName, setServerName, nextStep }) {
</StyledButton>
</StyledWrapper>
);
}
};
export default ServerName;
src/routes/onboarding/steps/welcomePage.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ const StyledWrapper = styled.div`
}
`;
export default function WelcomePage({ nextStep }) {
export default function WelcomePage({ nextStep }: { nextStep: () => void }) {
return (
<StyledWrapper>
<span className="primaryText">Welcome to your VoceChat!</span>
src/routes/onboarding/steps/whoCanSignUp.tsx
+3 -2
View File
@@ -4,6 +4,7 @@ import styled from "styled-components";
import StyledRadio from "../../../common/component/styled/Radio";
import StyledButton from "../../../common/component/styled/Button";
import { useGetLoginConfigQuery, useUpdateLoginConfigMutation } from "../../../app/services/server";
import { WhoCanSignUp } from "../../../types/server";
const StyledWrapper = styled.div`
height: 100%;
@@ -38,11 +39,11 @@ const StyledWrapper = styled.div`
}
`;
export default function WhoCanSignUp({ nextStep }) {
export default function SignUpSetting({ nextStep }: { nextStep: () => void }) {
const { data: loginConfig } = useGetLoginConfigQuery();
const [updateLoginConfig, { isSuccess, error }] = useUpdateLoginConfigMutation();
const [value, setValue] = useState(undefined);
const [value, setValue] = useState<WhoCanSignUp>();
// Sync to `value` when `loginConfig` is fetched
useEffect(() => {
src/routes/reg/RegWithUsername.tsx
+1 -2
View File
@@ -114,8 +114,7 @@ const RegWithUsername: FC = () => {
onChange={handleInput}
/>
<Button type="submit" disabled={isLoading || !username || isSuccess}>
{/* todo typo */}
{isLoading ? "Logining" : `Continue`}
{isLoading ? "Logging in" : `Continue`}
</Button>
</form>
</>
src/routes/setting/config/Firebase.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
// import { useState, useEffect } from "react";
import { ChangeEvent } from "react";
import StyledContainer from "./StyledContainer";
import Input from "../../../common/component/styled/Input";
import Textarea from "../../../common/component/styled/Textarea";
@@ -14,7 +14,7 @@ export default function ConfigFirebase() {
// const { token_url, description } = values;
updateConfig(values);
};
const handleChange = (evt) => {
const handleChange = (evt: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const newValue = evt.target.value;
const { type } = evt.target.dataset;
setValues((prev) => {
src/routes/setting/config/Logins.tsx
-8
View File
@@ -54,14 +54,6 @@ export default function Logins() {
updateGithubAuthConfig({ [key]: evt.target.value });
}
};
// const handleChange = (evt) => {
// const newValue = evt.target.value;
// const { type } = evt.target.dataset;
// const items = newValue ? newValue.split("\n") : [];
// setValues((prev) => {
// return { ...prev, [type]: items };
// });
// };
const handleToggle = (val) => {
setValues((prev) => {
return { ...prev, ...val };
src/routes/setting/config/SMTP.tsx
+7 -6
View File
@@ -1,4 +1,4 @@
import { useState, useEffect } from "react";
import { useState, useEffect, ChangeEvent } from "react";
import styled from "styled-components";
const StyledTest = styled.div`
display: flex;
@@ -27,14 +27,15 @@ export default function ConfigSMTP() {
// const { token_url, description } = values;
updateConfig({ ...values, port: Number((values as SMTPConfig)?.port ?? 0) });
};
const handleChange = (evt) => {
const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
const newValue = evt.target.value;
const { type } = evt.target.dataset;
const { type = "" } = evt.target.dataset;
setValues((prev) => {
if (!prev) return prev;
return { ...prev, [type]: newValue };
});
};
const handleTestEmailChange = (evt) => {
const handleTestEmailChange = (evt: ChangeEvent<HTMLInputElement>) => {
const newValue = evt.target.value;
setTestEmail(newValue);
};
@@ -55,8 +56,8 @@ export default function ConfigSMTP() {
}
}, [isSuccess, isError]);
// if (!values) return null;
const { host, port, from, username, password, enabled = false } = values ?? {};
if (!values) return null;
const { host, port, from, username, password, enabled = false } = values as SMTPConfig;
console.log("values", values);
return (
<StyledContainer>
src/routes/settingChannel/DeleteConfirmModal.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ import Button from "../../common/component/styled/Button";
interface Props {
id: number;
closeModal: () => void;
closeModal: (cid?: number) => void;
}
const DeleteConfirmModal: FC<Props> = ({ id, closeModal }) => {