Merge branch 'dev' into feature/enhance/repo-readme

Author: azinit

.env

@@ -1,9 +1,6 @@
 SKIP_PREFLIGHT_CHECK=true
 API_GENCOMMENT=/** @generated THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */
 
-REACT_APP_API_URL=https://api.github.com/graphql
-# Используется для кодогенерации, Apollo Client плагина
-REACT_APP_ACCESS_TOKEN=9221b1b5ba4b0de72eed80b09602ed7b4c73c222
 
 # Firebase section
 REACT_APP_FIREBASE_apiKey=AIzaSyABlBQc-tjCRKWwBj8jTTrMiT2M2UKiJpk
@@ -15,3 +12,12 @@ REACT_APP_FIREBASE_messagingSenderId=14406286286
 REACT_APP_FIREBASE_appId=1:14406286286:web:58c7c11c2762d36a55c99f
 
 REACT_APP_DEV_STORAGE_URL=https://dev.github-client.gq/dev/temp-stands.html
+
+# Github links
+REACT_APP_API_URL=https://api.github.com/graphql
+REACT_APP_GITHUB_DOMAIN=https://github.com/
+REACT_APP_GITHUB_MAIN=https://github.com/ani-team/github-client
+REACT_APP_GITHUB_FEEDBACK=https://github.com/ani-team/github-client/issues/new
+
+# Используется для кодогенерации, Apollo Client плагина
+REACT_APP_ACCESS_TOKEN=9221b1b5ba4b0de72eed80b09602ed7b4c73c222

src/.deploy/index.ts

@@ -1 +1,9 @@
+/**
+ * Модуль для облегченной реализации для temp-стендов на firebase (guest mode)
+ * @remark 
+ * - Связано с тем, что сложно реализовать полноценную авторизацию для temp-стендов, разворачиваемых
+ * Во время pull-requests
+ * - Модуль нужен только для разработки - во время основной работы приложения же - не используется
+ */
+
 export * from "./temp-stand";

src/.deploy/temp-stand.ts

@@ -7,6 +7,9 @@ const isTempStand = () => tempStandRegex.test(window.location.host);
 const STAND_URL_ENV = "REACT_APP_DEV_STORAGE_URL";
 const devStorageUrl = process.env[STAND_URL_ENV];
 
+/**
+ * Инициализация гостевого режима с псевдо-авторизацией
+ */
 export const loadLocalStorageFromDevIfNeeded = async () => {
     if (!isTempStand() || !devStorageUrl) {
         if(!devStorageUrl) {

src/app/error-handling/error-catcher.tsx

@@ -1,41 +1,20 @@
 import React, { useEffect, useState, ReactNode } from "react";
-import { ServerError, useApolloClient } from "@apollo/client";
 import { onError } from "@apollo/client/link/error";
-import { GraphQLError } from "graphql";
+import { useApolloClient } from "@apollo/client";
 import { useLocation } from "react-router";
 import { AppError } from "models";
-import { ErrorDefinitions } from "./error-definitions";
-
-const isGithubError = (error: any): error is { type: string } => {
-    return typeof error.type === "string";
-};
-
-const isServerError = (error: any): error is ServerError => {
-    return typeof error.statusCode === "number";
-};
-
-function mapError(error: GraphQLError | Error | ServerError | undefined): AppError | null {
-    if (!error) return null;
-    if (isGithubError(error)) {
-        // FIXME: handle 403 and 500 errors as well w/o side effects
-        if (error.type === "NOT_FOUND") {
-            return ErrorDefinitions[error.type];
-        }
-    }
-    if (isServerError(error)) {
-        if (error.statusCode === 401) return ErrorDefinitions.UNAUTHORIZED;
-    }
-    // TODO: handle network errors and whatever can be broken
-    return null;
-}
+import { mapError } from "./helpers";
 
 type Props = PropsWithChildren<{
+    /** Отрисовщик-обработчик ошибки */
     handler: (props: { error: AppError }) => ReactNode;
 }>;
 
-const ErrorCatcher = ({ handler, children }: Props) => {
+/**
+ * @hook Логика обработки и хранения ошибок
+ */
+const useAppError = () => {
     const apolloClient = useApolloClient();
-    const location = useLocation();
     const [error, setError] = useState<AppError | null>(null);
 
     useEffect(() => {
@@ -46,7 +25,18 @@ const ErrorCatcher = ({ handler, children }: Props) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    useEffect(() => setError(null), [location]);
+    return { error, setError };
+};
+
+/**
+ * Обертка для обработки ошибок
+ * FIXME: add ErrorBoundaries
+ */
+const ErrorCatcher = ({ handler, children }: Props) => {
+    const location = useLocation();
+    const { error, setError } = useAppError();
+
+    useEffect(() => setError(null), [location, setError]);
 
     if (error) {
         return <>{handler({ error })}</>;

src/app/error-handling/error-definitions.ts

@@ -1,5 +1,8 @@
 import { AppError } from "models";
 
+/**
+ * Обрабатываемые ошибки приложения
+ */
 export const ErrorDefinitions: Record<string, AppError> = {
     UNAUTHORIZED: {
         code: 401,

src/app/error-handling/helpers.ts

@@ -0,0 +1,37 @@
+import { ServerError } from "@apollo/client";
+import { GraphQLError } from "graphql";
+import { AppError } from "models";
+import { ErrorDefinitions } from "./error-definitions";
+
+/**
+ * Проверка: является ли ошибка GitHub Error
+ */
+const isGithubError = (error: any): error is { type: string } => {
+    return typeof error.type === "string";
+};
+
+/**
+ * Проверка: является ли ошибка серверной
+ */
+const isServerError = (error: any): error is ServerError => {
+    return typeof error.statusCode === "number";
+};
+
+/**
+ * Соответствие полученной ошибки с прописанными и обрабатываемыми на уровне приложения
+ * @see ErrorDefinitions
+ */
+export function mapError(error?: GraphQLError | Error | ServerError): AppError | null {
+    if (!error) return null;
+    if (isGithubError(error)) {
+        // FIXME: handle 403 and 500 errors as well w/o side effects
+        if (error.type === "NOT_FOUND") {
+            return ErrorDefinitions[error.type];
+        }
+    }
+    if (isServerError(error)) {
+        if (error.statusCode === 401) return ErrorDefinitions.UNAUTHORIZED;
+    }
+    // TODO: handle network errors and whatever can be broken
+    return null;
+}

src/app/header/index.tsx

@@ -1,17 +1,20 @@
-import React from "react";
+import React, { KeyboardEventHandler } 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 { GITHUB_MAIN, GITHUB_FEEDBACK } from "shared/get-env";
 import { Auth } from "features";
 import { ReactComponent as IcLogo } from "./logo.svg";
 import "./index.scss";
 
-const FEEDBACK_URL = "https://github.com/ani-team/github-client/issues/new";
-const GITHUB_URL = "https://github.com/ani-team/github-client";
+// FIXME: get from `pages`?
+const SEARCH_URL = "/search";
 
-const Header = () => {
-    const { isAuth } = Auth.useAuth();
+/**
+ * @hook Логика обработки инпута поиска
+ */
+const useSearchInput = () => {
     // !!! FIXME: limit scope of query-params literals
     const [query] = useQueryParams({
         q: StringParam,
@@ -22,6 +25,32 @@ const Header = () => {
     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 Содержит поисковой инпут с базовой логикой
+ */
+const Header = () => {
+    const { isAuth } = Auth.useAuth();
+    const { handleKeyDown, searchValue } = useSearchInput();
+
     return (
         <Layout.Header className="header">
             <div className="nav flex flex-grow items-center">
@@ -33,25 +62,14 @@ const Header = () => {
                     <Input
                         className="header__search"
                         placeholder="Search..."
-                        defaultValue={location.pathname === "/search" ? query.q ?? "" : ""}
-                        onKeyDown={({ key, currentTarget }) => {
-                            if (key === "Enter" && currentTarget.value) {
-                                history.push(
-                                    `/search?${qs.stringify({
-                                        q: currentTarget.value,
-                                        type: query.type,
-                                        s: query.s,
-                                        o: query.o,
-                                    })}`,
-                                );
-                            }
-                        }}
+                        defaultValue={searchValue}
+                        onKeyDown={handleKeyDown}
                     />
                 )}
-                <a className="m-4 text-gray-600" href={GITHUB_URL}>
+                <a className="m-4 text-gray-600" href={GITHUB_MAIN}>
                     GitHub
                 </a>
-                <a className="m-4 text-gray-600" href={FEEDBACK_URL}>
+                <a className="m-4 text-gray-600" href={GITHUB_FEEDBACK}>
                     Feedback
                 </a>
             </div>

src/app/hocs/index.ts

@@ -1,5 +1,8 @@
 import withApollo from "./with-apollo";
 import withRouter from "./with-router";
 
-// Потом какой-нибудь `compose` метод заинсталлим откуда-нить и покрасивше будет
-export const withHocs = (component: () => JSX.Element) => withRouter(withApollo(component));
+/**
+ * @hoc Инициализирующая логика приложения
+ * FIXME: Потом какой-нибудь `compose` метод заинсталлим откуда-нить и покрасивше будет
+ */
+export const withHocs = (component: Component) => withRouter(withApollo(component));

src/app/hocs/with-apollo.tsx

@@ -4,12 +4,17 @@ import { setContext } from "@apollo/client/link/context";
 import { API_URL } from "shared/get-env";
 import { Auth } from "features";
 
-// TODO: Уточнить, нужно ли дополнительно задавать контекст
-
+/**
+ * Инициализация API.baseUrl
+ */
 const httpLink = createHttpLink({
     uri: API_URL,
 });
 
+/**
+ * Логика авторизации
+ * FIXME: вынести в features/auth?
+ */
 const authLink = setContext((_, { headers }) => {
     // get the authentication token from local storage if it exists
     const token = Auth.getToken();
@@ -23,6 +28,7 @@ const authLink = setContext((_, { headers }) => {
 });
 
 /**
+ * Инициализация инстанса клиента
  * @see https://www.apollographql.com/docs/react/networking/authentication/
  */
 const client = new ApolloClient({
@@ -32,9 +38,9 @@ const client = new ApolloClient({
 });
 
 /**
- * Обертка для подключения и работы с API
+ * @hoc Инициализация подключения apollo для работы с API
  */
-const withApollo = (component: () => JSX.Element) => () => (
+const withApollo = (component: Component) => () => (
     <ApolloProvider client={client}>{component()}</ApolloProvider>
 );
 

src/app/hocs/with-router.tsx

@@ -4,9 +4,9 @@ import { BrowserRouter, Route } from "react-router-dom";
 import { QueryParamProvider } from "use-query-params";
 
 /**
- * Инициализация роутера с провайдером для работы с get-параметрами
+ * @hoc Инициализация роутера с провайдером для работы с get-параметрами
  */
-const withRouter = (component: () => JSX.Element) => () => (
+const withRouter = (component: Component) => () => (
     <BrowserRouter>
         <Suspense fallback={<Spin delay={300} className="overlay" size="large" />}>
             <QueryParamProvider ReactRouterRoute={Route}>{component()}</QueryParamProvider>