refactor(lint): decompose big components - repo-details

#163

Author: azinit

src/features/repo-details/card-collaborators/index.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import DetailsCard from "../details-card";
+import { RepoDetailsQuery } from "../queries.gen";
+
+// FIXME: move to models
+type Collaborator = {
+    /** id */
+    id: string;
+    /** Имя пользователя */
+    name: string;
+    /** Логин пользователя */
+    login: string;
+    /** Аватар */
+    avatarUrl: string;
+};
+
+type Props = {
+    /** Данные по репозиторию */
+    repository: RepoDetailsQuery["repository"];
+};
+
+/**
+ * Коллабораторы репозитория
+ */
+const CardCollaborators = ({ repository }: Props) => {
+    const collaborators = repository?.collaborators?.nodes?.filter(
+        (collaborator): collaborator is Collaborator => !!collaborator,
+    );
+
+    if (!collaborators) return null;
+    return (
+        <DetailsCard className="mt-4" title="Collaborators" primary>
+            {collaborators?.map(({ id, login, avatarUrl }) => (
+                <div key={id} className="collaborator">
+                    <img src={avatarUrl} alt="avatar" />
+                    <Link className="name" to={`/${login}`}>
+                        {login}
+                    </Link>
+                </div>
+            ))}
+        </DetailsCard>
+    );
+};
+
+export default CardCollaborators;

src/features/repo-details/card-common/index.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { Skeleton, Tag } from "antd";
+import { Language, RepoIdentity } from "models";
+import DetailsCard from "../details-card";
+import { RepoDetailsQuery } from "../queries.gen";
+
+type Props = {
+    /** Данные по репозиторию */
+    repository: RepoDetailsQuery["repository"];
+    /** repo identity */
+    identity: RepoIdentity;
+    /** Флаг загрузки */
+    loading: boolean;
+};
+
+/**
+ * Общая информация по репозиторию
+ */
+const CardCommon = (props: Props) => {
+    const { repository, identity, loading } = props;
+    const languages = repository?.languages?.nodes?.filter((lang): lang is Language => !!lang);
+    return (
+        <DetailsCard className="common-details" title={identity.name}>
+            {loading && (
+                <Skeleton paragraph={{ rows: 1 }} className="common-details__placeholder" active />
+            )}
+            {repository?.description ? (
+                <div>{repository?.description}</div>
+            ) : (
+                <p>No description, website, or topics provided.</p>
+            )}
+            <br />
+            {repository?.homepageUrl && (
+                <a
+                    href={repository.homepageUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="homepage-link"
+                    title={repository.homepageUrl}
+                >
+                    {repository.homepageUrl}
+                </a>
+            )}
+            {languages?.map(({ id, name, color }) => (
+                <Tag className="language-tag" key={id} color={color || "#165694"}>
+                    {name}
+                </Tag>
+            ))}
+        </DetailsCard>
+    );
+};
+
+export default CardCommon;

src/features/repo-details/index.tsx

@@ -1,30 +1,16 @@
-import { Skeleton, Tag, Alert, Spin } from "antd";
+import { Alert, Spin } from "antd";
 import React from "react";
-import { Link } from "react-router-dom";
-import { Language, RepoIdentity } from "models";
-import DetailsCard from "./details-card";
+import { RepoIdentity } from "models";
+import CardCommon from "./card-common";
+import CardCollaborators from "./card-collaborators";
 import { useRepoDetailsQuery } from "./queries.gen";
 import "./index.scss";
 
-// !!! FIXME: decompose
-
 type Props = {
     /** repo identity */
     repo: RepoIdentity;
 };
 
-// FIXME: move to models
-type Collaborator = {
-    /** id */
-    id: string;
-    /** Имя пользователя */
-    name: string;
-    /** Логин пользователя */
-    login: string;
-    /** Аватар */
-    avatarUrl: string;
-};
-
 /**
  * @feature Информация по репозиторию
  */
@@ -38,56 +24,10 @@ const RepoDetails = ({ repo: identity }: Props) => {
     });
     const repository = data?.repository;
 
-    const languages = repository?.languages?.nodes?.filter((lang): lang is Language => !!lang);
-    const collaborators = repository?.collaborators?.nodes?.filter(
-        (collaborator): collaborator is Collaborator => !!collaborator,
-    );
-
     return (
         <div className="flex flex-col">
-            <DetailsCard className="common-details" title={identity.name}>
-                {loading && (
-                    <Skeleton
-                        paragraph={{ rows: 1 }}
-                        className="common-details__placeholder"
-                        active
-                    />
-                )}
-                {repository?.description !== null ? (
-                    <div>{repository?.description}</div>
-                ) : (
-                    <p>No description, website, or topics provided.</p>
-                )}
-                <br />
-                {repository?.homepageUrl && (
-                    <a
-                        href={repository.homepageUrl}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="homepage-link"
-                        title={repository.homepageUrl}
-                    >
-                        {repository.homepageUrl}
-                    </a>
-                )}
-                {languages?.map(({ id, name, color }) => (
-                    <Tag className="language-tag" key={id} color={color || "#165694"}>
-                        {name}
-                    </Tag>
-                ))}
-            </DetailsCard>
-            {collaborators && (
-                <DetailsCard className="mt-4" title="Collaborators" primary>
-                    {collaborators?.map(({ id, login, avatarUrl }) => (
-                        <div key={id} className="collaborator">
-                            <img src={avatarUrl} alt="avatar" />
-                            <Link className="name" to={`/${login}`}>
-                                {login}
-                            </Link>
-                        </div>
-                    ))}
-                </DetailsCard>
-            )}
+            <CardCommon identity={identity} loading={loading} repository={repository} />
+            <CardCollaborators repository={repository} />
             <Spin spinning={loading}>
                 <Alert
                     style={{ borderRadius: 6, marginTop: 10 }}