Merge branch 'dev' into feature/enchance/misc

# Conflicts:
#	src/features/repo-explorer/components/index.tsx

Author: niyazm524

src/app/header/hooks.ts

@@ -0,0 +1,39 @@
+import { KeyboardEventHandler } from "react";
+import { StringParam, useQueryParams } from "use-query-params";
+import { useHistory, useLocation } from "react-router-dom";
+import * as qs from "query-string";
+
+// FIXME: get from `pages`?
+const SEARCH_URL = "/search";
+
+/**
+ * @hook Логика обработки инпута поиска
+ */
+export const useSearchInput = () => {
+    // !!! FIXME: limit scope of query-params literals
+    const [query] = useQueryParams({
+        q: StringParam,
+        type: StringParam,
+        s: StringParam,
+        o: StringParam,
+    });
+    const location = useLocation();
+    const history = useHistory();
+
+    /**
+     * Обработка инпута поиска
+     */
+    const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = ({ key, currentTarget }) => {
+        if (key === "Enter" && currentTarget.value) {
+            const q = currentTarget.value;
+            history.push(`${SEARCH_URL}?${qs.stringify({ ...query, q })}`);
+        }
+    };
+    /**
+     * Поисковой запрос
+     * @remark Если не страница поиска - обнуляем инпут
+     */
+    const searchValue = location.pathname === SEARCH_URL ? query.q ?? "" : "";
+
+    return { handleKeyDown, searchValue };
+};

src/app/header/index.tsx

@@ -1,48 +1,12 @@
-import React, { KeyboardEventHandler } from "react";
+import React from "react";
 import { Layout, Input } from "antd";
-import { Link, useHistory, useLocation } from "react-router-dom";
-import { StringParam, useQueryParams } from "use-query-params";
-import * as qs from "query-string";
+import { Link } from "react-router-dom";
 import { GITHUB_MAIN, GITHUB_FEEDBACK } from "shared/get-env";
 import { Auth } from "features";
 import { ReactComponent as IcLogo } from "./logo.svg";
+import { useSearchInput } from "./hooks";
 import "./index.scss";
 
-// FIXME: get from `pages`?
-const SEARCH_URL = "/search";
-
-/**
- * @hook Логика обработки инпута поиска
- */
-const useSearchInput = () => {
-    // !!! FIXME: limit scope of query-params literals
-    const [query] = useQueryParams({
-        q: StringParam,
-        type: StringParam,
-        s: StringParam,
-        o: StringParam,
-    });
-    const location = useLocation();
-    const history = useHistory();
-
-    /**
-     * Обработка инпута поиска
-     */
-    const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = ({ key, currentTarget }) => {
-        if (key === "Enter" && currentTarget.value) {
-            const q = currentTarget.value;
-            history.push(`${SEARCH_URL}?${qs.stringify({ ...query, q })}`);
-        }
-    };
-    /**
-     * Поисковой запрос
-     * @remark Если не страница поиска - обнуляем инпут
-     */
-    const searchValue = location.pathname === SEARCH_URL ? query.q ?? "" : "";
-
-    return { handleKeyDown, searchValue };
-};
-
 /**
  * Хедер приложения
  * @remark Содержит поисковой инпут с базовой логикой
@@ -66,10 +30,20 @@ const Header = () => {
                         onKeyDown={handleKeyDown}
                     />
                 )}
-                <a className="m-4 text-gray-600" href={GITHUB_MAIN}>
+                <a
+                    className="m-4 text-gray-600"
+                    href={GITHUB_MAIN}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
                     GitHub
                 </a>
-                <a className="m-4 text-gray-600" href={GITHUB_FEEDBACK}>
+                <a
+                    className="m-4 text-gray-600"
+                    href={GITHUB_FEEDBACK}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
                     Feedback
                 </a>
             </div>

src/app/index.scss

@@ -1,9 +1,13 @@
 // NOTE: Временно используем вспомогательные utilities-классы, на время разработки прототипа приложения
 @import "~tailwindcss/dist/utilities.css";
-@import "./vars.scss";
-@import "./normalize.scss";
-@import "./normalize-antd.scss";
-@import "./utils.scss";
+// css-переменные проекта
+@import "./styles/vars.scss";
+// нормализация стилей проекта
+@import "./styles/normalize.scss";
+// нормализация стилей antd компонентов
+@import "./styles/normalize-antd.scss";
+// классы-утилиты
+@import "./styles/utils.scss";
 
 .gc-app {
     display: flex;

src/app/normalize-antd.scss src/app/styles/normalize-antd.scsssrc/app/normalize-antd.scss renamed to src/app/styles/normalize-antd.scss

@@ -1,5 +1,6 @@
 import React from "react";
 import { Button } from "antd";
+import { Link } from "react-router-dom";
 import { useAuth } from "../hooks";
 import { routes } from "../consts";
 
@@ -18,9 +19,9 @@ const User = () => {
             {isAuth && (
                 <>
                     {/* FIXME: use h3 instead */}
-                    <a className="m-4 text-white" href={`/${viewer?.username}`}>
+                    <Link className="m-4 text-white" to={`/${viewer?.username}`}>
                         {viewer?.username}
-                    </a>
+                    </Link>
                     <Button className="m-4" href={routes.logout} onClick={logout}>
                         Logout
                     </Button>

src/app/normalize.scss src/app/styles/normalize.scsssrc/app/normalize.scss renamed to src/app/styles/normalize.scss

@@ -0,0 +1,52 @@
+import { BranchIdentity, RepoIdentity } from "models";
+import { RepoBranchInfoQuery, useRepoDefaultBranchQuery } from "../queries.gen";
+
+type Props = {
+    repo: RepoIdentity;
+};
+
+/**
+ * @hook Получение текущей ветки репозитория
+ */
+export const useBranch = (repo: Props["repo"]) => {
+    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/app/utils.scss src/app/styles/utils.scsssrc/app/utils.scss renamed to src/app/styles/utils.scss

@@ -1,10 +1,10 @@
 import React from "react";
 import { RepoIdentity } from "models";
-import { useBranch, useRepoDetails } from "../hooks";
 import { useRepoBranchInfoQuery } from "../queries.gen";
 import RepoToolbar from "./toolbar";
 import EntriesView from "./entries-view";
 import RepoReadme from "./readme";
+import { useBranch, useRepoDetails } from "./hooks";
 
 type Props = {
     repo: RepoIdentity;