Merge pull request #172 from ani-team/feature/enchance/misc

Правки с код-ревью

Author: azinit

src/features/repo-details/index.tsx

@@ -1,4 +1,4 @@
-import { Skeleton, Tag, Alert } from "antd";
+import { Skeleton, Tag, Alert, Spin } from "antd";
 import React from "react";
 import { Link } from "react-router-dom";
 import { Language, RepoIdentity } from "../../models";
@@ -33,6 +33,9 @@ const RepoDetails = ({ repo: identity }: Props) => {
     const collaborators = repository?.collaborators?.nodes?.filter(
         (collaborator): collaborator is Collaborator => !!collaborator,
     );
+    const alertDescription =
+        "For a while, you can't navigate through file" +
+        " tree of repo - only view the main README";
     return (
         <div className="flex flex-col">
             <DetailsCard className="common-details" title={identity.name}>
@@ -78,12 +81,14 @@ const RepoDetails = ({ repo: identity }: Props) => {
                     ))}
                 </DetailsCard>
             )}
-            <Alert
-                style={{ borderRadius: 6, marginTop: 10 }}
-                showIcon
-                message="Files access"
-                description="For a while, you can't navigate thorugh file tree of repo - only view the main README"
-            />
+            <Spin spinning={loading}>
+                <Alert
+                    style={{ borderRadius: 6, marginTop: 10 }}
+                    showIcon
+                    message="Files access"
+                    description={alertDescription}
+                />
+            </Spin>
         </div>
     );
 };

src/features/repo-explorer/components/branches-menu/index.tsx

@@ -7,13 +7,14 @@ import "./index.scss";
 type Props = {
     repo: RepoIdentity;
     branches?: Array<BranchIdentity>;
+    onVisibleChange?: (flag: boolean) => void;
 };
 
-const BranchesMenu = ({ repo, branches }: Props) => {
+const BranchesMenu = ({ repo, branches, onVisibleChange }: Props) => {
     return (
-        <Menu className="branches-menu" onClick={() => {}}>
+        <Menu className="branches-menu">
             {branches?.map((branch, index) => (
-                <Menu.Item key={index}>
+                <Menu.Item key={index} onClick={() => onVisibleChange?.(false)}>
                     <Link to={`/${repo.owner}/${repo.name}/tree/${branch.name}`}>
                         {branch.name}
                     </Link>

src/features/repo-explorer/components/entries-view/git-file-view.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { List } from "antd";
+import { GITHUB_DOMAIN } from "shared/get-env";
+import { RepoIdentity, GitFile } from "models";
+import { ReactComponent as FileIcon } from "../../assets/file.svg";
+import { ReactComponent as FolderIcon } from "../../assets/folder.svg";
+
+type GitFileViewProps = GitFile & { repo: RepoIdentity; branch: string };
+
+const GitFileView = ({ name, type, repo, branch }: GitFileViewProps) => {
+    const baseUrl = `${GITHUB_DOMAIN}${repo.owner}/${repo.name}`;
+    const link = `${baseUrl}/${type}/${branch ? branch + "/" : ""}${name}`;
+    const EntryIcon = type === "tree" ? FolderIcon : FileIcon;
+    return (
+        <List.Item className="repo-git-view__item">
+            <div className="wrapper">
+                <EntryIcon className="icon" />
+                <a href={link} target="_blank" rel="noopener noreferrer" className="origin-link">
+                    {name}
+                </a>
+            </div>
+        </List.Item>
+    );
+};
+
+export default GitFileView;

src/features/repo-explorer/components/entries-view/index.scss

@@ -21,7 +21,16 @@
         border-top-left-radius: 5px;
         border-top-right-radius: 5px;
 
-        @include text-overflow();
+        .commit-info {
+            @include text-overflow();
+
+            flex: 1 0;
+        }
+
+        span.commit-date {
+            flex: 0 1;
+            margin-left: 12px;
+        }
 
         img,
         .avatar-placeholder {
@@ -37,8 +46,7 @@
             color: white;
         }
 
-        span.commit-message,
-        span.commit-date {
+        span.commit-message {
             margin-left: 5px;
         }
     }
@@ -47,14 +55,25 @@
         padding: 8px 0 8px 8px !important;
         border-bottom: 1px solid var(--clr-gray--100) !important;
 
-        img {
+        & > .wrapper {
+            display: flex;
+            align-items: center;
+        }
+
+        .icon {
             width: 24px;
             height: auto;
             padding: 4px;
         }
 
-        span {
+        .origin-link {
             margin-left: 12px;
+            color: var(--clr-text);
+
+            &:hover {
+                color: #0366d6;
+                text-decoration: underline;
+            }
         }
     }
 }

src/features/repo-explorer/components/entries-view/index.tsx

@@ -1,79 +1,35 @@
 import React from "react";
-import dayjs from "dayjs";
 import { List } from "antd";
 import cn from "classnames";
-import { Link } from "react-router-dom";
+import { RepoIdentity, GitFile, GitCommit } from "models";
+import { useBranch } from "../../hooks";
 import SkeletonArea from "../skeleton-area";
-
-// FIXME: import as ReactComponent
-import FileIcon from "../../assets/file.svg";
-import FolderIcon from "../../assets/folder.svg";
-import logo from "./placeholder.png";
+import GitFileView from "./git-file-view";
+import LastCommitHeader from "./last-commit-header";
 import "./index.scss";
 
-type GitFile = { type: string; name: string };
 type Props = {
     loading?: boolean;
     files: Array<GitFile>;
     className?: string;
-    lastCommit?: {
-        message: string;
-        login?: string;
-        avatarUrl?: string;
-        name?: string | null;
-        date: string;
-    };
+    repo: RepoIdentity;
+    lastCommit?: GitCommit;
 };
 
-const EntriesView = ({ loading, files, lastCommit, className }: Props) => {
+const EntriesView = ({ loading, files, lastCommit, className, repo }: Props) => {
+    const { branch } = useBranch(repo);
     return (
         <div className={cn("repo-git-view", className)}>
             {loading && <SkeletonArea />}
             {!loading && (
                 <List
                     header={lastCommit && <LastCommitHeader lastCommit={lastCommit} />}
                     dataSource={files}
-                    renderItem={GitFileView}
+                    renderItem={(item) => <GitFileView {...item} repo={repo} branch={branch} />}
                 />
             )}
         </div>
     );
 };
 
-const GitFileView = ({ name, type }: GitFile) => (
-    <List.Item className="repo-git-view__item">
-        <div>
-            <img alt="type" src={type === "tree" ? FolderIcon : FileIcon} />
-            <span>{name}</span>
-        </div>
-    </List.Item>
-);
-
-const LastCommitHeader = ({ lastCommit }: { lastCommit: Props["lastCommit"] }) => (
-    <div className="repo-git-view__last-commit">
-        <div>
-            {lastCommit?.avatarUrl ? (
-                <>
-                    <img src={lastCommit?.avatarUrl} alt="avatar" />
-                    <Link className="author-name" to={`/${lastCommit?.login}`}>
-                        {lastCommit?.login}
-                    </Link>
-                </>
-            ) : (
-                <>
-                    <img src={logo} alt="avatar" />
-                    <span className="author-name">{lastCommit?.name}</span>
-                </>
-            )}
-            &nbsp;
-            <span className="commit-message" title={lastCommit?.message}>
-                {lastCommit?.message}
-            </span>
-        </div>
-        <div>
-            <span className="commit-date">on {dayjs(lastCommit?.date).format("D MMM YYYY")}</span>
-        </div>
-    </div>
-);
-
 export default EntriesView;

src/features/repo-explorer/components/entries-view/last-commit-header.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import dayjs from "dayjs";
+import { Link } from "react-router-dom";
+import { GitCommit } from "models";
+import logo from "./placeholder.png";
+
+type Props = {
+    lastCommit: GitCommit;
+};
+
+const LastCommitHeader = ({ lastCommit }: Props) => {
+    const { login, name, avatarUrl, message, date } = lastCommit || {};
+    return (
+        <div className="repo-git-view__last-commit">
+            <div className="commit-info">
+                <img src={avatarUrl ?? logo} alt="avatar" />
+                {avatarUrl ? (
+                    <Link className="author-name" to={`/${login}`}>
+                        {login}
+                    </Link>
+                ) : (
+                    <span className="author-name">{name}</span>
+                )}
+                &nbsp;
+                <span className="commit-message" title={message}>
+                    {message}
+                </span>
+            </div>
+            <div>
+                <span className="commit-date">on {dayjs(date).format("D MMM YYYY")}</span>
+            </div>
+        </div>
+    );
+};
+
+export default LastCommitHeader;

src/features/repo-explorer/components/index.tsx

@@ -28,7 +28,13 @@ const Explorer = ({ repo }: Props) => {
     return (
         <div>
             <RepoToolbar repo={repo} branches={branches} activeBranch={branch} />
-            <EntriesView files={files} lastCommit={lastCommit} loading={loading} className="mt-3" />
+            <EntriesView
+                files={files}
+                lastCommit={lastCommit}
+                loading={loading}
+                repo={repo}
+                className="mt-3"
+            />
             <RepoReadme text={readme} loading={loading} repoUrl={repoUrl} branch={branch} />
         </div>
     );

src/features/repo-explorer/components/toolbar/index.tsx

@@ -1,5 +1,5 @@
 import { Button, Dropdown, Popover } from "antd";
-import React from "react";
+import React, { useState } from "react";
 import { RepoIdentity, BranchIdentity } from "models";
 import BranchesMenu from "../branches-menu";
 import CloneMenu from "./clone-menu";
@@ -12,12 +12,21 @@ type Props = {
 };
 
 const RepoToolbar = ({ repo, branches, activeBranch }: Props) => {
+    const [isBranchDropdownVisible, setBranchDropdownVisible] = useState(false);
     return (
         <div className="flex justify-between">
             <Dropdown
-                overlay={<BranchesMenu branches={branches} repo={repo} />}
+                overlay={
+                    <BranchesMenu
+                        branches={branches}
+                        repo={repo}
+                        onVisibleChange={setBranchDropdownVisible}
+                    />
+                }
                 placement="bottomLeft"
                 arrow
+                visible={isBranchDropdownVisible}
+                onVisibleChange={setBranchDropdownVisible}
                 trigger={["click"]}
             >
                 <Button className="branch-dropdown">{activeBranch}</Button>

src/features/repo-explorer/hooks.ts

@@ -0,0 +1,48 @@
+import { BranchIdentity, RepoIdentity } from "models";
+import { RepoBranchInfoQuery, useRepoDefaultBranchQuery } from "./queries.gen";
+
+/**
+ * @hook Получение текущей ветки репозитория
+ */
+export const useBranch = (repo: RepoIdentity) => {
+    const { data } = useRepoDefaultBranchQuery({
+        variables: {
+            name: repo.name,
+            owner: repo.owner,
+        },
+    });
+    const branch = repo.branch || data?.repository?.defaultBranchRef?.name || "master";
+    return { branch };
+};
+
+/**
+ * @hook Получение нужных полей по сфетченным данным по репозиторию
+ */
+export const useRepoDetails = (repoInfo: RepoBranchInfoQuery | undefined) => {
+    const { repository } = repoInfo || {};
+    const branches = (repository?.refs?.nodes || []).filter(
+        (branch): branch is BranchIdentity => !!branch,
+    );
+    const files = Array.from(repository?.object?.entries ?? []).sort((a, b) =>
+        b.type.localeCompare(a.type),
+    );
+    const target = repository?.ref?.target;
+    const lastCommit =
+        (target && {
+            message: target.messageHeadline,
+            login: target.author?.user?.login,
+            avatarUrl: target.author?.user?.avatarUrl,
+            name: target.author?.name,
+            date: target.author?.date,
+        }) ||
+        undefined;
+
+    // Приходится фетчить файл по двум вариантам наименования, т.к. GitHub не умеет в insensitive case =(
+    const readme = repository?.contentLower?.text || repository?.contentUpper?.text || "";
+    return {
+        branches,
+        files,
+        lastCommit,
+        readme,
+    };
+};

src/features/repo-stat/index.scss

@@ -45,4 +45,14 @@
             border-bottom-right-radius: var(--radius);
         }
     }
+
+    &__skeleton.ant-skeleton-element {
+        flex-basis: 30%;
+        width: 30%;
+        border-radius: var(--radius);
+
+        & > span {
+            width: 100%;
+        }
+    }
 }