From 0254b50a040fc04b963825fba2a1d3cb3aa0374b Mon Sep 17 00:00:00 2001 From: Tristan Yang Date: Wed, 3 Aug 2022 08:50:27 +0800 Subject: [PATCH] refactor: more TS code --- src/app/slices/channels.ts | 2 +- src/app/slices/footprint.ts | 4 ++-- src/app/slices/ui.ts | 2 +- src/app/slices/users.ts | 2 +- src/common/component/FileMessage/ImageMessage.tsx | 4 ++-- src/common/component/Profile/index.tsx | 6 +++--- src/common/hook/useDeleteMessage.ts | 2 +- src/common/hook/useFilteredChannels.ts | 2 +- src/common/hook/useFilteredUsers.ts | 2 +- src/common/utils.tsx | 2 +- src/routes/chat/DMList/NavItem.tsx | 3 ++- src/routes/chat/DMList/index.tsx | 7 ++++++- src/routes/chat/Layout/Operations.tsx | 13 ++++++++----- src/routes/chat/SessionList/Session.tsx | 1 + src/routes/chat/utils.tsx | 9 ++++----- src/routes/resources/Filter/Channel.tsx | 13 +++++++++---- src/routes/resources/Filter/Date.tsx | 14 +++++++++----- src/routes/resources/Filter/From.tsx | 13 +++++++++---- src/routes/resources/Filter/Type.tsx | 12 +++++++++--- src/routes/resources/index.tsx | 14 +++++--------- src/types/user.ts | 2 +- 21 files changed, 77 insertions(+), 52 deletions(-) diff --git a/src/app/slices/channels.ts b/src/app/slices/channels.ts index 42128070..b712aefb 100644 --- a/src/app/slices/channels.ts +++ b/src/app/slices/channels.ts @@ -9,7 +9,7 @@ interface StoredChannel extends Channel { interface State { ids: number[]; - byId: { [id: number]: StoredChannel | undefined }; + byId: { [id: number]: StoredChannel }; } const initialState: State = { diff --git a/src/app/slices/footprint.ts b/src/app/slices/footprint.ts index 4b3e6d0e..fedac02e 100644 --- a/src/app/slices/footprint.ts +++ b/src/app/slices/footprint.ts @@ -6,8 +6,8 @@ export interface State { afterMid: number; readUsers: { [uid: number]: number }; readChannels: { [gid: number]: number }; - muteUsers: { [uid: number]: { expired_in: number } | undefined }; - muteChannels: { [gid: number]: { expired_in: number } | undefined }; + muteUsers: { [uid: number]: { expired_in?: number } | undefined }; + muteChannels: { [gid: number]: { expired_in?: number } | undefined }; } const initialState: State = { diff --git a/src/app/slices/ui.ts b/src/app/slices/ui.ts index 227deabf..6c72f102 100644 --- a/src/app/slices/ui.ts +++ b/src/app/slices/ui.ts @@ -16,7 +16,7 @@ export interface State { type: string; }[]; }; - selectMessages: { [key: string]: any }; + selectMessages: { [key: string]: number[] }; draftMarkdown: { [key: string]: any }; draftMixedText: { [key: string]: any }; rememberedNavs: { diff --git a/src/app/slices/users.ts b/src/app/slices/users.ts index 5ad3c24c..26df7e2c 100644 --- a/src/app/slices/users.ts +++ b/src/app/slices/users.ts @@ -11,7 +11,7 @@ export interface StoredUser extends User { export interface State { ids: number[]; - byId: { [id: number]: StoredUser | undefined }; + byId: { [id: number]: StoredUser }; } const initialState: State = { diff --git a/src/common/component/FileMessage/ImageMessage.tsx b/src/common/component/FileMessage/ImageMessage.tsx index 243416a9..f18948c8 100644 --- a/src/common/component/FileMessage/ImageMessage.tsx +++ b/src/common/component/FileMessage/ImageMessage.tsx @@ -33,14 +33,14 @@ const Styled = styled.div` } `; -interface Props { +type Props = { uploading: boolean; progress: number; thumbnail: string; download: string; content: string; properties: { width: number; height: number }; -} +}; const ImageMessage: FC = ({ uploading, diff --git a/src/common/component/Profile/index.tsx b/src/common/component/Profile/index.tsx index 0ddd836f..e253c318 100644 --- a/src/common/component/Profile/index.tsx +++ b/src/common/component/Profile/index.tsx @@ -84,17 +84,17 @@ const Profile: FC = ({ uid, type = "embed", cid }) => { )} {canCopyEmail && ( -
  • +
  • Copy Email
    • )} {canRemoveFromChannel && ( -
  • +
  • Remove from Channel
    • )} {canRemoveFromServer && ( -
  • +
  • Remove from Server
    • )} diff --git a/src/common/hook/useDeleteMessage.ts b/src/common/hook/useDeleteMessage.ts index 4a561c42..9a469467 100644 --- a/src/common/hook/useDeleteMessage.ts +++ b/src/common/hook/useDeleteMessage.ts @@ -23,7 +23,7 @@ export default function useDeleteMessage() { } setDeleting(false); }; - const canDelete = (mids = []) => { + const canDelete = (mids?: number[]) => { if (!mids || mids.length == 0) return false; // 管理员 if (loginUser?.is_admin) return true; diff --git a/src/common/hook/useFilteredChannels.ts b/src/common/hook/useFilteredChannels.ts index 501122bc..446f11d0 100644 --- a/src/common/hook/useFilteredChannels.ts +++ b/src/common/hook/useFilteredChannels.ts @@ -5,7 +5,7 @@ import { Channel } from "../../types/channel"; export default function useFilteredChannels() { const [input, setInput] = useState(""); const channels = useAppSelector((store) => Object.values(store.channels.byId)); - const [filteredChannels, setFilteredChannels] = useState<(Channel | undefined)[]>([]); + const [filteredChannels, setFilteredChannels] = useState([]); useEffect(() => { if (!input) { diff --git a/src/common/hook/useFilteredUsers.ts b/src/common/hook/useFilteredUsers.ts index e82d0ef1..c4abd0f1 100644 --- a/src/common/hook/useFilteredUsers.ts +++ b/src/common/hook/useFilteredUsers.ts @@ -5,7 +5,7 @@ import { useAppSelector } from "../../app/store"; export default function useFilteredUsers() { const [input, setInput] = useState(""); const users = useAppSelector((store) => Object.values(store.users.byId)); - const [filteredUsers, setFilteredUsers] = useState<(StoredUser | undefined)[]>([]); + const [filteredUsers, setFilteredUsers] = useState([]); useEffect(() => { if (!input) { setFilteredUsers(users); diff --git a/src/common/utils.tsx b/src/common/utils.tsx index 63e3d6f5..6ec36bb7 100644 --- a/src/common/utils.tsx +++ b/src/common/utils.tsx @@ -20,7 +20,7 @@ export const isTreatAsImage = (file: File) => { return false; }; -export function getDefaultSize(size = null, min = 480) { +export function getDefaultSize(size?: { width: number; height: number }, min = 480) { if (!size) return { width: 0, height: 0 }; const { width: oWidth, height: oHeight } = size; if (oWidth == oHeight) { diff --git a/src/routes/chat/DMList/NavItem.tsx b/src/routes/chat/DMList/NavItem.tsx index 3e44f431..8b129021 100644 --- a/src/routes/chat/DMList/NavItem.tsx +++ b/src/routes/chat/DMList/NavItem.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import { useEffect, useState, FC } from "react"; import { NavLink, useNavigate, useMatch } from "react-router-dom"; import { useDrop } from "react-dnd"; @@ -20,7 +21,7 @@ interface IProps { uid: number; mid?: number; unreads: number; - setFiles: () => void; + setFiles: (files: File[]) => void; } const NavItem: FC = ({ uid, mid = 0, unreads, setFiles }) => { const [previewMsg, setPreviewMsg] = useState(); diff --git a/src/routes/chat/DMList/index.tsx b/src/routes/chat/DMList/index.tsx index a9ec0c4d..132f8a3a 100644 --- a/src/routes/chat/DMList/index.tsx +++ b/src/routes/chat/DMList/index.tsx @@ -9,7 +9,12 @@ interface Props { } const DMList: FC = ({ uids, setDropFiles }) => { - const { userMessage, messageData, readUsers, loginUid } = useAppSelector((store) => { + const { + userMessage, + messageData, + readUsers, + loginUid = 0 + } = useAppSelector((store) => { return { loginUid: store.authData.user?.uid, readUsers: store.footprint.readUsers, diff --git a/src/routes/chat/Layout/Operations.tsx b/src/routes/chat/Layout/Operations.tsx index 1be2ac98..43a40246 100644 --- a/src/routes/chat/Layout/Operations.tsx +++ b/src/routes/chat/Layout/Operations.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { FC, useState } from "react"; import styled from "styled-components"; import { useKey } from "rooks"; import toast from "react-hot-toast"; @@ -16,7 +16,6 @@ import { useAppDispatch, useAppSelector } from "../../../app/store"; const Styled = styled.div` position: relative; padding: 16px; - /* padding-bottom: 0; */ display: flex; gap: 32px; align-items: center; @@ -41,8 +40,11 @@ const Styled = styled.div` transform: translateY(-50%); } `; - -export default function Operations({ context, id }) { +type Props = { + context: "user" | "channel"; + id: number; +}; +const Operations: FC = ({ context, id }) => { const [deleteModalVisible, setDeleteModalVisible] = useState(false); const { canDelete } = useDeleteMessage(); const { addFavorite } = useFavMessage({}); @@ -103,4 +105,5 @@ export default function Operations({ context, id }) { )} ); -} +}; +export default Operations; diff --git a/src/routes/chat/SessionList/Session.tsx b/src/routes/chat/SessionList/Session.tsx index e876b8c3..45fb2847 100644 --- a/src/routes/chat/SessionList/Session.tsx +++ b/src/routes/chat/SessionList/Session.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import { useState, useEffect, FC } from "react"; import dayjs from "dayjs"; import { useDrop } from "react-dnd"; diff --git a/src/routes/chat/utils.tsx b/src/routes/chat/utils.tsx index d33c604e..a72e5d6e 100644 --- a/src/routes/chat/utils.tsx +++ b/src/routes/chat/utils.tsx @@ -137,13 +137,14 @@ const MessageWrapper = ({ selectMode = false, context, id, mid, children, ...res {children} - {selectMode &&
    } + {selectMode && ( +
    + )}     ); }; type Params = { selectMode: boolean; - isFirst: boolean; read: boolean; updateReadIndex: (param: any) => void; prev: object | null; @@ -153,14 +154,13 @@ type Params = { }; export const renderMessageFragment = ({ selectMode = false, - isFirst = false, read = true, updateReadIndex, prev = null, curr = null, contextId = 0, context = "user" -}: Partial) => { +}: Params) => { if (!curr) return null; let { created_at, mid } = curr; const local_id = curr.properties?.local_id; @@ -189,7 +189,6 @@ export const renderMessageFragment = ({ > void; +}; +const Channel: FC = ({ select = 0, updateFilter }) => { const { input, updateInput, channels } = useFilteredChannels(); - const handleClick = (gid) => { + const handleClick = (gid?: number) => { updateFilter({ channel: gid }); }; @@ -81,4 +85,5 @@ export default function Channel({ select = "", updateFilter }) { ); -} +}; +export default Channel; diff --git a/src/routes/resources/Filter/Date.tsx b/src/routes/resources/Filter/Date.tsx index 143bb54c..6a0747ab 100644 --- a/src/routes/resources/Filter/Date.tsx +++ b/src/routes/resources/Filter/Date.tsx @@ -1,3 +1,4 @@ +import { FC } from "react"; import styled from "styled-components"; import CheckSign from "../../../assets/icons/check.sign.svg"; @@ -5,7 +6,6 @@ const Styled = styled.div` padding: 12px; background: #ffffff; min-width: 200px; - /* max-height: 230px; */ overflow: auto; box-shadow: 0px 24px 48px -12px rgba(16, 24, 40, 0.18); border-radius: 8px; @@ -56,9 +56,12 @@ export const Dates = { title: "Last 12 months" } }; - -export default function Date({ select = "", updateFilter }) { - const handleClick = (dur) => { +type Props = { + select: number; + updateFilter: (param: { date?: string }) => void; +}; +const DateFilter: FC = ({ select = "", updateFilter }) => { + const handleClick = (dur?: string) => { updateFilter({ date: dur }); }; @@ -80,4 +83,5 @@ export default function Date({ select = "", updateFilter }) { ); -} +}; +export default DateFilter; diff --git a/src/routes/resources/Filter/From.tsx b/src/routes/resources/Filter/From.tsx index 877c1450..57909dc6 100644 --- a/src/routes/resources/Filter/From.tsx +++ b/src/routes/resources/Filter/From.tsx @@ -1,3 +1,4 @@ +import { FC } from "react"; import styled from "styled-components"; import Search from "../Search"; import CheckSign from "../../../assets/icons/check.sign.svg"; @@ -47,10 +48,13 @@ const Styled = styled.div` } } `; - -export default function From({ select = "", updateFilter }) { +type Props = { + select: number; + updateFilter: (param: { from?: number }) => void; +}; +const From: FC = ({ select = "", updateFilter }) => { const { input, updateInput, users } = useFilteredUsers(); - const handleClick = (uid) => { + const handleClick = (uid?: number) => { updateFilter({ from: uid }); }; @@ -75,4 +79,5 @@ export default function From({ select = "", updateFilter }) { ); -} +}; +export default From; diff --git a/src/routes/resources/Filter/Type.tsx b/src/routes/resources/Filter/Type.tsx index b0aaa0a1..956be8d7 100644 --- a/src/routes/resources/Filter/Type.tsx +++ b/src/routes/resources/Filter/Type.tsx @@ -7,6 +7,7 @@ import IconDoc from "../../../assets/icons/file.doc.svg"; import IconCode from "../../../assets/icons/file.code.svg"; import IconImage from "../../../assets/icons/file.image.svg"; import CheckSign from "../../../assets/icons/check.sign.svg"; +import { FC } from "react"; const Styled = styled.div` padding: 12px; @@ -77,8 +78,12 @@ export const FileTypes = { icon: } }; -export default function Type({ select = "", updateFilter }) { - const handleClick = (type) => { +type Props = { + select: number; + updateFilter: (param: { type?: string }) => void; +}; +const Type: FC = ({ select = "", updateFilter }) => { + const handleClick = (type?: string) => { updateFilter({ type }); }; return ( @@ -99,4 +104,5 @@ export default function Type({ select = "", updateFilter }) { ); -} +}; +export default Type; diff --git a/src/routes/resources/index.tsx b/src/routes/resources/index.tsx index 1f39a21e..e61de37c 100644 --- a/src/routes/resources/index.tsx +++ b/src/routes/resources/index.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import { useState, useEffect, useRef, memo } from "react"; import Masonry from "masonry-layout"; import Styled from "./styled"; @@ -7,7 +8,6 @@ import Search from "./Search"; import Filter from "./Filter"; import FileBox from "../../common/component/FileBox"; import { useAppSelector } from "../../app/store"; - const checkFilter = (data, filter, channelMessage) => { let selected = true; const { mid, file_type, created_at, from_uid, properties } = data; @@ -35,9 +35,9 @@ const checkFilter = (data, filter, channelMessage) => { return selected; }; -let msnry: typeof Masonry | null; +let msnry: Masonry | null; function ResourceManagement({ fileMessages }) { - const listContainerRef = useRef(null); + const listContainerRef = useRef(); const [filter, setFilter] = useState({}); const { message, view, channelMessage } = useAppSelector((store) => { return { @@ -62,12 +62,13 @@ function ResourceManagement({ fileMessages }) { useEffect(() => { if (view == Views.grid && listContainerRef) { const container = listContainerRef.current; + if (!container) return; const cWidth = container.getBoundingClientRect().width - 16 * 2; const count = Math.floor(cWidth / 368); const leftWidth = cWidth % 368; const gutter = Math.max(Math.floor(leftWidth / (count - 1)), 8); console.log("gutter", gutter, cWidth, count, leftWidth); - msnry = new Masonry(listContainerRef.current, { + msnry = new Masonry(container, { // options fitWidth: true, gutter, @@ -79,11 +80,6 @@ function ResourceManagement({ fileMessages }) { msnry.destroy(); } } - // return ()=>{ - // if(msnry){ - // msnry.destory() - // } - // } }, [view, filter]); return ( diff --git a/src/types/user.ts b/src/types/user.ts index 86fb1115..36614658 100644 --- a/src/types/user.ts +++ b/src/types/user.ts @@ -2,7 +2,7 @@ export type Gender = 0 | 1; export interface User { uid: number; - email?: string; + email: string; name: string; gender: Gender; language: string;