refactor: more TS code

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 = {

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 = {

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: {

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 = {

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<Props> = ({
   uploading,

src/common/component/Profile/index.tsx

@@ -84,17 +84,17 @@ const Profile: FC<Props> = ({ uid, type = "embed", cid }) => {
                 </li>
               )}
               {canCopyEmail && (
-                <li className="item" onClick={copyEmail}>
+                <li className="item" onClick={copyEmail.bind(undefined, email)}>
                   Copy Email
                 </li>
               )}
               {canRemoveFromChannel && (
-                <li className="item danger" onClick={removeFromChannel}>
+                <li className="item danger" onClick={removeFromChannel.bind(null, uid)}>
                   Remove from Channel
                 </li>
               )}
               {canRemoveFromServer && (
-                <li className="item danger" onClick={removeUser}>
+                <li className="item danger" onClick={removeUser.bind(null, uid)}>
                   Remove from Server
                 </li>
               )}

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;

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<Channel[]>([]);
 
   useEffect(() => {
     if (!input) {

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<StoredUser[]>([]);
   useEffect(() => {
     if (!input) {
       setFilteredUsers(users);

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) {

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<IProps> = ({ uid, mid = 0, unreads, setFiles }) => {
   const [previewMsg, setPreviewMsg] = useState<ArchiveMessage>();

src/routes/chat/DMList/index.tsx

@@ -9,7 +9,12 @@ interface Props {
 }
 
 const DMList: FC<Props> = ({ 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,

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<Props> = ({ 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;

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";

src/routes/chat/utils.tsx

@@ -137,13 +137,14 @@ const MessageWrapper = ({ selectMode = false, context, id, mid, children, ...res
     <StyledWrapper className={selectMode ? "select" : ""} {...rest}>
       <Checkbox className="check" checked={selected} />
       {children}
-      {selectMode && <div className="overlay" onClick={selectMode ? toggleSelect : null}></div>}
+      {selectMode && (
+        <div className="overlay" onClick={selectMode ? toggleSelect : undefined}></div>
+      )}
     </StyledWrapper>
   );
 };
 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>) => {
+}: Params) => {
   if (!curr) return null;
   let { created_at, mid } = curr;
   const local_id = curr.properties?.local_id;
@@ -189,7 +189,6 @@ export const renderMessageFragment = ({
       >
         <Message
           readOnly={selectMode}
-          isFirst={isFirst}
           updateReadIndex={updateReadIndex}
           read={read}
           context={context}

src/routes/resources/Filter/Channel.tsx

@@ -1,3 +1,4 @@
+import { FC } from "react";
 import styled from "styled-components";
 import CheckSign from "../../../assets/icons/check.sign.svg";
 import ChannelIcon from "../../../common/component/ChannelIcon";
@@ -51,10 +52,13 @@ const Styled = styled.div`
     }
   }
 `;
-
-export default function Channel({ select = "", updateFilter }) {
+type Props = {
+  select: number;
+  updateFilter: (param: { channel?: number }) => void;
+};
+const Channel: FC<Props> = ({ 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 }) {
       </ul>
     </Styled>
   );
-}
+};
+export default Channel;

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<Props> = ({ select = "", updateFilter }) => {
+  const handleClick = (dur?: string) => {
     updateFilter({ date: dur });
   };
 
@@ -80,4 +83,5 @@ export default function Date({ select = "", updateFilter }) {
       </ul>
     </Styled>
   );
-}
+};
+export default DateFilter;

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<Props> = ({ 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 }) {
       </ul>
     </Styled>
   );
-}
+};
+export default From;

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: <IconUnknown className="icon" />
   }
 };
-export default function Type({ select = "", updateFilter }) {
-  const handleClick = (type) => {
+type Props = {
+  select: number;
+  updateFilter: (param: { type?: string }) => void;
+};
+const Type: FC<Props> = ({ select = "", updateFilter }) => {
+  const handleClick = (type?: string) => {
     updateFilter({ type });
   };
   return (
@@ -99,4 +104,5 @@ export default function Type({ select = "", updateFilter }) {
       </ul>
     </Styled>
   );
-}
+};
+export default Type;

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<HTMLDivElement>();
   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 (

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;