refactor: more TS code

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 (