Merge pull request #175 from ani-team/fix/test-revisions

AdeliyaG · web-flow · commit 9b03a6431c14 · 2020-12-03T20:37:28.000+03:00
Hooks, style folder and documentation
diff --git a/src/app/header/hooks.ts b/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 };
+};
diff --git a/src/app/header/index.tsx b/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 Содержит поисковой инпут с базовой логикой
diff --git a/src/app/index.scss b/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;
diff --git a/src/app/styles/normalize-antd.scss b/src/app/styles/normalize-antd.scss
diff --git a/src/app/styles/normalize.scss b/src/app/styles/normalize.scss
diff --git a/src/app/styles/utils.scss b/src/app/styles/utils.scss
diff --git a/src/app/styles/vars.scss b/src/app/styles/vars.scss
diff --git a/src/features/auth/user/index.tsx b/src/features/auth/user/index.tsx
@@ -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>
diff --git a/src/features/repo-explorer/components/hooks.ts b/src/features/repo-explorer/components/hooks.ts
@@ -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,
+    };
+};
diff --git a/src/features/repo-explorer/components/index.tsx b/src/features/repo-explorer/components/index.tsx
@@ -1,64 +1,15 @@
 import React from "react";
-import { RepoIdentity, BranchIdentity } from "models";
-import {
-    useRepoBranchInfoQuery,
-    useRepoDefaultBranchQuery,
-    RepoBranchInfoQuery,
-} from "../queries.gen";
+import { RepoIdentity } from "models";
+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;
 };
 
-/**
- * @hook Получение текущей ветки репозитория
- */
-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 Получение нужных полей по сфетченным данным по репозиторию
- */
-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,
-    };
-};
-
 const Explorer = ({ repo }: Props) => {
     const { branch } = useBranch(repo);
     const { loading, data } = useRepoBranchInfoQuery({
diff --git a/src/features/repo-list/index.tsx b/src/features/repo-list/index.tsx
@@ -8,6 +8,7 @@ import { tabsMap } from "./params";
 import "./index.scss";
 
 type Props = {
+    /** @routeParam Логин пользователя текущей страницы */
     username: string;
 };
 
diff --git a/src/features/search/results/hooks.ts b/src/features/search/results/hooks.ts
@@ -0,0 +1,34 @@
+import { dom } from "shared/helpers";
+import { SearchType } from "models";
+import * as Params from "../params";
+
+/**
+ * @hook Работа с поиском, фильтрацией, сортировкой и пагинацией
+ */
+export const useSearch = (PAGE_SIZE: number) => {
+    const { sortOrder, sortField } = Params.useSearchSortParams();
+    const { searchQuery } = Params.useSearchQueryParam();
+    const { searchTypeEnum } = Params.useSearchTypeParam();
+    const { page, setPage } = Params.usePageParam();
+
+    const handlePageChange = (page: number) => {
+        setPage(page);
+        dom.scrollToTop();
+    };
+
+    const isUserSearch = searchTypeEnum === SearchType.User;
+    const isRepoSearch = searchTypeEnum === SearchType.Repository;
+
+    return {
+        type: searchTypeEnum,
+        query: `${searchQuery} sort:${sortField}-${sortOrder}`,
+        queryClean: searchQuery,
+        // Супер пагинация от Нияза (niyazm524)
+        after: btoa(`cursor:${(page - 1) * PAGE_SIZE}`),
+        page,
+        first: PAGE_SIZE,
+        handlePageChange,
+        isUserSearch,
+        isRepoSearch,
+    };
+};
diff --git a/src/features/search/results/index.tsx b/src/features/search/results/index.tsx
@@ -2,9 +2,7 @@ import React from "react";
 import cn from "classnames";
 import { Skeleton, Empty, Pagination } from "antd";
 import { Repo, User, Org, Card } from "shared/components";
-import { dom } from "shared/helpers";
-import { SearchType } from "models";
-import * as Params from "../params";
+import { useSearch } from "./hooks";
 import { useSearchQuery } from "./queries.gen";
 import SortSelect from "./sort-select";
 import "./index.scss";
@@ -13,43 +11,14 @@ import "./index.scss";
 
 const PAGE_SIZE = 10;
 
-/**
- * @hook Работа с поиском, фильтрацией, сортировкой и пагинацией
- */
-const useSearch = () => {
-    const { sortOrder, sortField } = Params.useSearchSortParams();
-    const { searchQuery } = Params.useSearchQueryParam();
-    const { searchTypeEnum } = Params.useSearchTypeParam();
-    const { page, setPage } = Params.usePageParam();
-
-    const handlePageChange = (page: number) => {
-        setPage(page);
-        dom.scrollToTop();
-    };
-
-    const isUserSearch = searchTypeEnum === SearchType.User;
-    const isRepoSearch = searchTypeEnum === SearchType.Repository;
-
-    return {
-        type: searchTypeEnum,
-        query: `${searchQuery} sort:${sortField}-${sortOrder}`,
-        queryClean: searchQuery,
-        // Супер пагинация от Нияза (niyazm524)
-        after: btoa(`cursor:${(page - 1) * PAGE_SIZE}`),
-        page,
-        first: PAGE_SIZE,
-        handlePageChange,
-        isUserSearch,
-        isRepoSearch,
-    };
-};
-
 /**
  * @feature Результаты поиска
  * @remark Отображение результатов поиска на основании запроса и конфига
  */
 const SearchResults = () => {
-    const { handlePageChange, page, isUserSearch, isRepoSearch, ...searchConfig } = useSearch();
+    const { handlePageChange, page, isUserSearch, isRepoSearch, ...searchConfig } = useSearch(
+        PAGE_SIZE,
+    );
 
     const { data, loading } = useSearchQuery({ variables: searchConfig });
 
diff --git a/src/features/user-info/index.tsx b/src/features/user-info/index.tsx
@@ -5,6 +5,7 @@ import { useFollowing } from "./hooks";
 import "./index.scss";
 
 type Props = {
+    /** @routeParam Логин пользователя текущей страницы */
     username: string;
 };
 
diff --git a/src/shared/components/card/index.tsx b/src/shared/components/card/index.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import cn from "classnames";
+import { Link } from "react-router-dom";
 import Skeleton from "./skeleton";
 import SkeletonGroup from "./skeleton-group";
 import "./index.scss";
@@ -37,9 +38,9 @@ const Card = (props: Props) => {
             )}
             <div className="card__details flex flex-col flex-grow">
                 {title && (
-                    <a className="card__title text-title" href={titleHref}>
+                    <Link className="card__title text-title" to={`${titleHref}`}>
                         {title}
-                    </a>
+                    </Link>
                 )}
                 {description && <span className="card__description">{description}</span>}
             </div>
