Merge pull request #347 from qa-guru/QAGDEV-666

QAGDEV-666 – [FE] MakeVar, fix autocomplete search input

Author: nik1999777

.eslintrc

@@ -144,6 +144,14 @@
             "pattern": "@/**",
             "group": "external"
           },
+          {
+            "pattern": "theme",
+            "group": "internal"
+          },
+          {
+            "pattern": "cache",
+            "group": "internal"
+          },
           {
             "pattern": "{api,assets,features,pages,shared,theme}/**",
             "group": "internal"

src/api/index.ts

@@ -1,8 +1,8 @@
 import { ApolloClient, HttpLink, ApolloLink, Observable } from "@apollo/client";
 import { onError } from "@apollo/client/link/error";
 import fetch from "cross-fetch";
-import { cache } from "cache";
 
+import { cache } from "cache";
 import AuthService from "api/rest/auth-service";
 import { FETCH_POLICY } from "shared/constants";
 

src/app/providers/with-context.tsx

@@ -1,14 +1,18 @@
 import { ReactNode } from "react";
+import { ThemeProvider } from "@mui/material";
 
-import { CommentProvider } from "shared/context/comment-context";
-import SettingsProvider from "shared/context/setting-context";
+import { useSettings } from "shared/hooks";
+import { createCustomTheme } from "theme";
 
 export const withContext = (component: () => ReactNode) => {
   return function WithContextComponent() {
-    return (
-      <SettingsProvider>
-        <CommentProvider>{component()}</CommentProvider>
-      </SettingsProvider>
-    );
+    const { settings } = useSettings();
+
+    const theme = createCustomTheme({
+      theme: settings.theme,
+      responsiveFontSizes: settings.responsiveFontSizes,
+    });
+
+    return <ThemeProvider theme={theme}>{component()}</ThemeProvider>;
   };
 };

src/cache.ts

@@ -1,9 +1,15 @@
 import { InMemoryCache, makeVar } from "@apollo/client";
 
+import { initialSettings, themeSettingsTypes } from "theme";
+import { THEMES } from "theme/constans";
 import { Maybe, UserRole } from "api/graphql/generated/graphql";
 
 export const userIdVar = makeVar<Maybe<string>>(null);
-
 export const userRolesVar = makeVar<Maybe<Maybe<UserRole>[]>>([]);
+export const commentVar = makeVar<Maybe<string | undefined>>(null);
+export const settingsVar = makeVar<themeSettingsTypes>(initialSettings);
+export const lightThemeVar = makeVar<boolean>(
+  initialSettings.theme === THEMES.LIGHT
+);
 
 export const cache = new InMemoryCache();

src/features/admin-panel/users-admin/views/input-filter/input-filter.tsx

@@ -20,15 +20,15 @@ import {
 import RoleSelection from "../role-selection";
 
 const filterLabels = {
-  firstName: "имя",
+  name: "имя",
   email: "email",
 };
 
 type FilterKey = keyof typeof filterLabels;
 
 const InputFilter: FC = () => {
   const { setFilter } = useTableAdminFilter();
-  const [activeFilter, setActiveFilter] = useState<FilterKey>("firstName");
+  const [activeFilter, setActiveFilter] = useState<FilterKey>("name");
 
   const { control, watch, reset, resetField } = useForm({
     defaultValues: {
@@ -78,8 +78,8 @@ const InputFilter: FC = () => {
                 <InputAdornment position="start">
                   <StyledIconsStack>
                     <StyledIconInputButton
-                      isActive={activeFilter === "firstName"}
-                      onClick={() => handleFilterChange("firstName")}
+                      isActive={activeFilter === "name"}
+                      onClick={() => handleFilterChange("name")}
                     >
                       <Tooltip title="Имя">
                         <Person fontSize="small" />

src/features/admin-panel/users-admin/views/input-select-trainings-purchases/input-select-trainings-purchases.tsx

@@ -62,8 +62,6 @@ const InputSelectTrainingsPurchases: FC<IInputSelectTrainingsPurchases> = ({
   const handleSelectChange = (trainings: ITrainingOption[]) => {
     setValue("trainings", trainings);
 
-    console.log("trainings", trainings);
-
     updateUserTrainingPurchase({
       variables: {
         tariffCodes: trainings?.map(({ code }) => code!),

src/features/edit-training/containers/lectors/lectors-container.tsx

@@ -29,7 +29,7 @@ const UsersContainer: FC<ILectorsContainer> = ({ control, name, role }) => {
       sort: { field: UserSortField.Email, order: Order.Desc },
       filter: {
         role,
-        firstName: filterName,
+        name: filterName,
       },
     },
     fetchPolicy: FETCH_POLICY.NETWORK_ONLY,

src/features/edit-training/views/select-lectors/select-lectors.tsx

@@ -21,27 +21,34 @@ const SelectLectors: FC<ISelectLectors> = ({
 }) => {
   const items = data?.users?.items || [];
 
+  const lectorOptions =
+    items?.map((item) => ({
+      ...item,
+      name: `${item?.firstName} ${item?.lastName}`,
+    })) || [];
+
   return (
     <FormControl fullWidth>
       <Controller
         name={name}
         control={control}
-        render={({ field: { onChange, value = [] } }) => (
+        render={({ field: { value, onChange } }) => (
           <Autocomplete
             multiple
-            options={items}
-            getOptionLabel={(option) => option.firstName}
+            options={lectorOptions}
+            getOptionLabel={(option) => option.name}
             isOptionEqualToValue={(option, value) => option.id === value.id}
             value={value || []}
             onInputChange={(_, newInputValue) => onSearchChange(newInputValue)}
             onChange={(_, newValue) => {
               onChange(newValue);
             }}
+            disablePortal
             renderInput={(params) => (
               <TextField
                 {...params}
                 variant="outlined"
-                placeholder="Начните вводить имя..."
+                placeholder="Выберите преподавателя"
                 InputProps={{
                   ...params.InputProps,
                   endAdornment: (

src/features/header/containers/user/user-container.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
-import { userIdVar } from "cache";
 
+import { userIdVar } from "cache";
 import { AppSpinner } from "shared/components/spinners";
 import NoDataErrorMessage from "shared/components/no-data-error-message";
 import { useUserQuery } from "api/graphql/generated/graphql";

src/features/header/views/header/header.tsx

@@ -1,9 +1,10 @@
 import { FC, useState } from "react";
+import { useReactiveVar } from "@apollo/client";
 
+import { lightThemeVar } from "cache";
 import { IPages } from "features/header/types";
 import { Maybe, UserRole } from "api/graphql/generated/graphql";
 import ThemeSelector from "shared/components/theme-selector";
-import { useSettings } from "shared/hooks";
 import CustomLink from "shared/components/custom-link";
 
 import { useRoleFilterPages } from "../../hooks/use-role-filter-pages";
@@ -93,8 +94,7 @@ const configMobilePages: IPages[] = [
 
 const Header: FC = () => {
   const [anchorElNav, setAnchorElNav] = useState<Maybe<HTMLElement>>(null);
-  const { settings } = useSettings();
-  const lightTheme = settings.theme === "light";
+  const lightTheme = useReactiveVar(lightThemeVar);
 
   const pages = useRoleFilterPages(configPages);
   const mobilePages = useRoleFilterPages(configMobilePages);