refactor: more TS code
This commit is contained in:
@@ -33,7 +33,14 @@ const NavItem: FC<IProps> = ({ id, setFiles, toggleRemoveConfirm }) => {
|
||||
handleContextMenuEvent,
|
||||
hideContextMenu
|
||||
} = useContextMenu();
|
||||
const { channel, mids, messageData, readIndex, muted, loginUid } = useAppSelector((store) => {
|
||||
const {
|
||||
channel,
|
||||
mids = [],
|
||||
messageData,
|
||||
readIndex,
|
||||
muted,
|
||||
loginUid = 0
|
||||
} = useAppSelector((store) => {
|
||||
return {
|
||||
channel: store.channels.byId[id],
|
||||
mids: store.channelMessage[id],
|
||||
@@ -76,7 +83,7 @@ const NavItem: FC<IProps> = ({ id, setFiles, toggleRemoveConfirm }) => {
|
||||
updateReadIndex(param);
|
||||
}
|
||||
};
|
||||
const toggleInviteModalVisible = (evt) => {
|
||||
const toggleInviteModalVisible = (evt?: Event) => {
|
||||
if (evt) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
@@ -87,6 +94,7 @@ const NavItem: FC<IProps> = ({ id, setFiles, toggleRemoveConfirm }) => {
|
||||
const data = muted ? { remove_groups: [id] } : { add_groups: [{ gid: id }] };
|
||||
muteChannel(data);
|
||||
};
|
||||
if (!channel) return null;
|
||||
const { is_public, name, owner } = channel;
|
||||
const { unreads = 0, mentions = [] } = getUnreadCount({
|
||||
mids,
|
||||
@@ -119,10 +127,6 @@ const NavItem: FC<IProps> = ({ id, setFiles, toggleRemoveConfirm }) => {
|
||||
title: muted ? "Unmute" : "Mute",
|
||||
handler: handleMute
|
||||
},
|
||||
// {
|
||||
// title: "Notification Settings",
|
||||
// underline: true,
|
||||
// },
|
||||
{
|
||||
title: "Invite People",
|
||||
handler: toggleInviteModalVisible
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useRef, useEffect } from "react";
|
||||
import { useRef, useEffect, FC } from "react";
|
||||
import styled from "styled-components";
|
||||
import { Waveform } from "@uiball/loaders";
|
||||
|
||||
@@ -10,8 +10,11 @@ const Styled = styled.div`
|
||||
width: 100%;
|
||||
padding: 30px 0;
|
||||
`;
|
||||
export default function LoadMore({ pullUp = null }) {
|
||||
const ref = useRef(undefined);
|
||||
type Props = {
|
||||
pullUp: () => void | null;
|
||||
};
|
||||
const LoadMore: FC<Props> = ({ pullUp = null }) => {
|
||||
const ref = useRef<HTMLDivElement>();
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
@@ -20,7 +23,7 @@ export default function LoadMore({ pullUp = null }) {
|
||||
// const currEle = entry.target;
|
||||
if (intersecting && pullUp) {
|
||||
// load more
|
||||
console.log("inview");
|
||||
// console.log("inview");
|
||||
pullUp();
|
||||
}
|
||||
});
|
||||
@@ -29,7 +32,7 @@ export default function LoadMore({ pullUp = null }) {
|
||||
);
|
||||
const currEle = ref?.current;
|
||||
if (currEle) {
|
||||
observer.observe(ref.current);
|
||||
observer.observe(currEle);
|
||||
}
|
||||
return () => {
|
||||
if (currEle) {
|
||||
@@ -39,7 +42,8 @@ export default function LoadMore({ pullUp = null }) {
|
||||
}, [ref, pullUp]);
|
||||
return (
|
||||
<Styled ref={ref}>
|
||||
<Waveform className="loading" size={24} lineWeight={5} speed={1} color="#ccc" />
|
||||
<Waveform size={24} lineWeight={5} speed={1} color="#ccc" />
|
||||
</Styled>
|
||||
);
|
||||
}
|
||||
};
|
||||
export default LoadMore;
|
||||
|
||||
@@ -29,7 +29,6 @@ const Styled = styled.ul`
|
||||
height: 40px;
|
||||
&.channel_default {
|
||||
padding: 5px;
|
||||
/* height: 35px; */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,7 +12,17 @@ import { updateSelectMessages } from "../../app/slices/ui";
|
||||
import Mention from "../../common/component/Message/Mention";
|
||||
import { useAppSelector } from "../../app/store";
|
||||
|
||||
export function getUnreadCount({ mids = [], messageData = {}, loginUid = 0, readIndex = 0 }) {
|
||||
export function getUnreadCount({
|
||||
mids = [],
|
||||
messageData = {},
|
||||
loginUid = 0,
|
||||
readIndex = 0
|
||||
}: {
|
||||
mids?: number[];
|
||||
messageData: object;
|
||||
loginUid: number;
|
||||
readIndex: number;
|
||||
}) {
|
||||
// console.log({ mids, loginUid, readIndex });
|
||||
// 先过滤掉空信息和from自己的
|
||||
const others = mids.filter((mid) => {
|
||||
|
||||
@@ -100,13 +100,7 @@ const InvitePage: FC = () => {
|
||||
toast.error("Register Failed: invalid token or expired");
|
||||
break;
|
||||
case 409: {
|
||||
const tips = {
|
||||
email_conflict: "email conflict",
|
||||
name_conflict: "name conflict"
|
||||
};
|
||||
// todo
|
||||
// @ts-ignore
|
||||
toast.error(`Register Failed: ${tips[error.data?.reason]}`);
|
||||
toast.error(`Register Failed: ${error.data?.reason}`);
|
||||
break;
|
||||
}
|
||||
default:
|
||||
|
||||
@@ -6,7 +6,6 @@ const StyledWrapper = styled.div`
|
||||
height: 100vh;
|
||||
.form {
|
||||
padding: 36px 40px 32px 40px;
|
||||
/* border: 1px solid #eee; */
|
||||
box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
|
||||
border-radius: 12px;
|
||||
.tips {
|
||||
|
||||
@@ -24,7 +24,6 @@ const StyledWrapper = styled.div`
|
||||
height: 100vh;
|
||||
.form {
|
||||
padding: 36px 40px 32px 40px;
|
||||
/* border: 1px solid #eee; */
|
||||
box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
|
||||
border-radius: 12px;
|
||||
.tips {
|
||||
|
||||
Reference in New Issue
Block a user