refactor: more TS code

2022-07-08 19:13:49 +08:00
parent 678b8515ca
commit 9f1b115c73
55 changed files with 421 additions and 338 deletions
@@ -0,0 +1,66 @@
+import { FC, ReactElement, useEffect, useState } from "react";
+import styled from "styled-components";
+import StyledMsg from "./styled";
+import renderContent from "./renderContent";
+import Avatar from "../Avatar";
+import useFavMessage from "../../hook/useFavMessage";
+
+const StyledFav = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--br);
+  background-color: #f4f4f5;
+`;
+type Props = {
+  id?: number;
+};
+const FavoredMessage: FC<Props> = ({ id }) => {
+  const { favorites } = useFavMessage({});
+  const [msgs, setMsgs] = useState<ReactElement | null>(null);
+
+  useEffect(() => {
+    const current = favorites.find((f) => f.id == id);
+    const { messages } = current || {};
+    if (!messages) return;
+    const favorite_mids = messages.map(({ from_mid }) => +from_mid) || [];
+
+    setMsgs(
+      <StyledFav data-favorite-mids={favorite_mids.join(",")} className="favorite">
+        <div className="list">
+          {messages.map((msg, idx) => {
+            const { user = {}, download, content, content_type, properties, thumbnail } = msg;
+            return (
+              <StyledMsg className="archive" key={idx}>
+                {user && (
+                  <div className="avatar">
+                    <Avatar url={user.avatar} name={user.name} />
+                  </div>
+                )}
+                <div className="details">
+                  <div className="up">
+                    <span className="name">{user?.name}</span>
+                  </div>
+                  <div className="down">
+                    {renderContent({
+                      download,
+                      content,
+                      content_type,
+                      properties,
+                      thumbnail
+                    })}
+                  </div>
+                </div>
+              </StyledMsg>
+            );
+          })}
+        </div>
+      </StyledFav>
+    );
+  }, [favorites, id]);
+
+  if (!id) return null;
+
+  return msgs;
+};
+
+export default FavoredMessage;
@@ -1,65 +0,0 @@
-import { useEffect, useState } from "react";
-import styled from "styled-components";
-import StyledMsg from "./styled";
-import renderContent from "./renderContent";
-import Avatar from "../Avatar";
-import useFavMessage from "../../hook/useFavMessage";
-
-const StyledFav = styled.div`
-  display: flex;
-  flex-direction: column;
-  border-radius: var(--br);
-  background-color: #f4f4f5;
-`;
-
-const FavoritedMessage = ({ id }) => {
-  const { favorites } = useFavMessage({});
-  const [msgs, setMsgs] = useState(null);
-
-  useEffect(() => {
-    const current = favorites.find((f) => f.id == id);
-    const { messages } = current || {};
-    if (messages) {
-      const favorite_mids = messages.map(({ from_mid }) => from_mid) || [];
-
-      setMsgs(
-        <StyledFav data-favorite-mids={favorite_mids.join(",")} className="favorite">
-          <div className="list">
-            {messages.map((msg, idx) => {
-              const { user = {}, download, content, content_type, properties, thumbnail } = msg;
-              return (
-                <StyledMsg className="archive" key={idx}>
-                  {user && (
-                    <div className="avatar">
-                      <Avatar url={user.avatar} name={user.name} />
-                    </div>
-                  )}
-                  <div className="details">
-                    <div className="up">
-                      <span className="name">{user?.name}</span>
-                    </div>
-                    <div className="down">
-                      {renderContent({
-                        download,
-                        content,
-                        content_type,
-                        properties,
-                        thumbnail
-                      })}
-                    </div>
-                  </div>
-                </StyledMsg>
-              );
-            })}
-          </div>
-        </StyledFav>
-      );
-    }
-  }, [favorites, id]);
-
-  if (!id) return null;
-
-  return msgs;
-};
-
-export default FavoritedMessage;