@redneckz/wildless-cms-uni-blocks 0.14.674 → 0.14.676

package/src/hooks/useLocation.ts

@@ -1,55 +1,33 @@
-import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { useLocalStore } from '@redneckz/uni-jsx/lib/Store/useLocalStore';
 import { API_BASE_URI } from '../api/apiBaseUrl';
-import { defaultEventBus } from '../EventBus/defaultEventBus';
-import { useLatestEvent } from '../EventBus/useLatestEvent';
-import { fetchJSONUnsafe, type FetchJSONUnsafeType } from '../utils/fetchJSON';
+import { fetchJSON } from '../utils/fetchJSON';
 import { type Region } from './useRegions';
 
 const REGION_URL = `${API_BASE_URI}/region`;
-const LOCATION_STORAGE_KEY = 'location';
-
-export function useLocation(defaultLocation = 'Москва'): [Region, (_: Region) => void] {
-  const [currentLocation, fireCurrentLocation] = useLatestEvent(
-    defaultEventBus,
-    'location',
-    restoreLocation() ?? { name: defaultLocation },
-  );
-
-  const selectCurrentLocation = useCallback((_: Region) => {
-    storeLocation(_);
-    fireCurrentLocation(_);
-  }, []);
-
-  const { data } = useAsyncData(
-    hasStoredLocation() ? null : REGION_URL,
-    fetchJSONUnsafe as FetchJSONUnsafeType<Region>,
-  );
-  useEffect(() => {
-    if (data && !hasStoredLocation()) {
-      fireCurrentLocation(data);
-    }
-  }, [data]);
 
-  return [currentLocation ?? { name: defaultLocation }, selectCurrentLocation];
+interface LocationStore {
+  location: Region;
 }
 
-const hasStoredLocation = () => Boolean(globalThis.localStorage?.getItem(LOCATION_STORAGE_KEY));
-
-const restoreLocation = (): Region | null => {
-  try {
-    const data = globalThis.localStorage?.getItem(LOCATION_STORAGE_KEY);
-
-    return data && JSON.parse(data);
-  } catch (ex) {
-    return null;
-  }
-};
-
-const storeLocation = (_: Region) => {
-  try {
-    globalThis.localStorage?.setItem(LOCATION_STORAGE_KEY, JSON.stringify(_));
-  } catch (ex) {
-    // Do nothing
-  }
-};
+export function useLocation(defaultLocation = 'Москва'): Region {
+  const locationStore = useLocalStore<LocationStore>();
+
+  return locationStore.location ?? { name: defaultLocation };
+}
+
+export function useDefaultLocation(defaultLocation = 'Москва') {
+  const locationStore = useLocalStore<LocationStore>();
+
+  const preselectLocation = useCallback(async () => {
+    if (!locationStore.location) {
+      const region = await fetchJSON<Region>(REGION_URL);
+      locationStore.location = region ?? { name: defaultLocation };
+    }
+  }, [locationStore, defaultLocation]);
+
+  useAsyncData(REGION_URL, preselectLocation);
+
+  return locationStore;
+}

package/src/hooks/useRegions.ts

@@ -14,8 +14,11 @@ export interface Region {
   branches?: string[];
 }
 
+const EMPTY_REGIONS: Region[] = [];
+
+// TODO Почему url можно менять? Разве смысл не в инкапсуляции api url. Тоже под рефакторинг попадает
 export function useRegions(url: string = REGIONS_URL): Region[] {
   const { data } = useAsyncData(url, fetchJSONUnsafe as FetchJSONUnsafeType<Region[]>);
 
-  return Array.isArray(data) ? data : [];
+  return Array.isArray(data) ? data : EMPTY_REGIONS;
 }

package/src/ui-kit/DialogManager/useDialogsList.ts

@@ -28,6 +28,9 @@ export const useDialogsList = ({
   useEffect(
     () =>
       defaultEventBus.subscribe('dialog', (action) => {
+        if (!action) {
+          return;
+        }
         switch (action.type) {
           case 'open':
             push(action);

package/src/ui-kit/FormField/Fields/AddressFactField.tsx

@@ -15,7 +15,7 @@ export const AddressFactField = JSX<CustomFieldProps>(({ field, input }) => {
     if (value) {
       field('addressFact')?.onChange?.(field('addressRegistration').value);
     }
-  }, [value]);
+  }, [value, field('addressRegistration').value]);
 
   const onDaDataChange = useCallback((item: DaDataSuggestion) => {
     field?.(fieldName)?.onChange?.({

package/src/ui-kit/FormField/validators.ts

@@ -5,6 +5,8 @@ import { validator } from '../../validation/validator';
 
 const ERROR_MESSAGE = 'Некорректно заполненное поле';
 
+const ADDRESS_ERROR_MESSAGE = 'Укажите регион, город/населенный пункт, улицу, дом';
+
 export const defaultValidator = (errorMsg?: string) => required(errorMsg ?? ERROR_MESSAGE);
 
 export const defaultSelectValidator = (errorMsg?: string) =>
@@ -71,12 +73,11 @@ export const emailValidator = (errorMsg: string) =>
 const addressDaDataValidate = (address: Address) =>
   Boolean(address.region && address.city && address.house);
 
-export const addressDaDataValidator = () =>
-  validator(addressDaDataValidate)('Укажите регион, город/населенный пункт, улицу, дом, квартиру');
+export const addressDaDataValidator = () => validator(addressDaDataValidate)(ADDRESS_ERROR_MESSAGE);
 
 export const addressOrganizationValidator = () =>
   validator((address: Address) => Boolean(address.fiasCode && address.city && address.house))(
-    'Укажите регион, город/населенный пункт, улицу, дом',
+    ADDRESS_ERROR_MESSAGE,
   );
 
 export const codeWordValidator = (errorMsg?: string) =>

package/src/ui-kit/Input/InputControl.tsx

@@ -33,8 +33,11 @@ export const InputControl = JSX<InputProps>(
     const popupRef = useOutsideClick<HTMLDivElement>(close);
 
     const handleChange = useCallback(
-      (v: string) => (maxLength ? v.length <= maxLength && onChange(v) : onChange(v)),
-      [onChange],
+      (v: string) => {
+        dadata && !isOpen && open();
+        maxLength ? v.length <= maxLength && onChange(v) : onChange(v);
+      },
+      [dadata, isOpen, onChange],
     );
 
     const inputRef = useInputPopup({

package/src/ui-kit/LocationDialog/LocationDialog.tsx

@@ -1,20 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { type BranchesHeader, type ForeignOfficeProps } from '../../data/HeaderData';
-import { useLink } from '../../hooks/useLink';
-import { useLocation } from '../../hooks/useLocation';
+import { useDefaultLocation } from '../../hooks/useLocation';
 import { useRegions, type Region } from '../../hooks/useRegions';
 import { groupBy } from '../../utils/groupBy';
 import { jaroWinklerDistance } from '../../utils/jaroWinklerDistance';
 import { Dialog } from '../DialogManager/Dialog';
 import { useDialogManager } from '../DialogManager/useDialogManager';
-import { LinkWrapper } from '../LinkWrapper/LinkWrapper';
-import { Paragraph } from '../Paragraph/Paragraph';
 import { Text } from '../Text/Text';
 import { renderForeignOffices } from './renderForeignOffices';
 import { renderRegion } from './renderRegion';
 import { renderRegionGroup } from './renderRegionGroup';
 import { SearchBar } from './SearchBar';
+import { SelectedLocation } from './SelectedLocation';
 
 const SEARCH_TERM_MIN_LENGTH = 3;
 
@@ -24,24 +22,29 @@ export interface LocationDialogProps {
 }
 
 export const LocationDialog = JSX<LocationDialogProps>(({ foreignOffices, branches }) => {
-  const [currentLocation, selectCurrentLocation] = useLocation(branches?.default);
-
-  const link = useLink();
-  const { href } = link({ href: `/branches/${currentLocation.slug}` });
+  const locationStore = useDefaultLocation(branches?.default);
 
   const [query, setQuery] = useState('');
 
-  const regions: Region[] = cleanUpRegions(useRegions()).sort((a, b) =>
-    a.name.localeCompare(b.name),
+  const rawRegions = useRegions();
+  const regions = useMemo(
+    (): Region[] => cleanUpRegions(rawRegions).sort((a, b) => a.name.localeCompare(b.name)),
+    [rawRegions],
+  );
+  const regionsGroupByLetter = useMemo(
+    (): Map<string, Region[]> => groupBy(regions, regionFirstLetter),
+    [regions],
   );
-  const regionsGroupByLetter: Map<string, Region[]> = groupBy(regions, regionFirstLetter);
 
   const { close } = useDialogManager();
 
-  const handleChangeLocation = useCallback((region: Region) => {
-    selectCurrentLocation(region);
-    close();
-  }, []);
+  const handleChangeLocation = useCallback(
+    (_: Region) => {
+      locationStore.location = _;
+      close();
+    },
+    [locationStore],
+  );
 
   return (
     <Dialog
@@ -51,16 +54,7 @@ export const LocationDialog = JSX<LocationDialogProps>(({ foreignOffices, branch
           <Text size="text-h4" color="text-primary-text">
             Выберите филиал
           </Text>
-          {currentLocation ? (
-            <div className="mb-s">
-              <Paragraph size="text-l" color="text-primary-text">
-                Сейчас выбран:
-                <LinkWrapper href={href} className="inline mx-2xs text-primary-main">
-                  {currentLocation.name}
-                </LinkWrapper>
-              </Paragraph>
-            </div>
-          ) : null}
+          <SelectedLocation defaultLocation={branches?.default} />
           <SearchBar onSearch={setQuery} searchTerm={query} />
         </div>
       }
@@ -86,10 +80,10 @@ export const LocationDialog = JSX<LocationDialogProps>(({ foreignOffices, branch
   );
 });
 
-const regionFirstLetter = (region: Region) => region.name?.charAt(0) || '';
+const regionFirstLetter = (region: Region) => region.name?.charAt(0) ?? '';
 
 const cleanUpRegions = (regions: Region[]) =>
   regions.map((region) => ({
     ...region,
-    name: region.name?.replace(/республика|область|край'/gi, '').trim() || '',
+    name: region.name?.replace(/республика|область|край'/gi, '').trim() ?? '',
   }));

package/src/ui-kit/LocationDialog/SelectedLocation.tsx

@@ -0,0 +1,27 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import { useLocation } from '../../hooks/useLocation';
+import { LinkWrapper } from '../LinkWrapper/LinkWrapper';
+import { Paragraph } from '../Paragraph/Paragraph';
+
+interface SelectedLocationProps {
+  defaultLocation?: string;
+}
+
+export const SelectedLocation = JSX<SelectedLocationProps>(({ defaultLocation }) => {
+  const currentLocation = useLocation(defaultLocation);
+
+  const link = useLink();
+  const { href } = link({ href: `/branches/${currentLocation.slug}` });
+
+  return currentLocation ? (
+    <div className="mb-s">
+      <Paragraph size="text-l" color="text-primary-text">
+        Сейчас выбран:
+        <LinkWrapper href={href} className="inline mx-2xs text-primary-main">
+          {currentLocation.name}
+        </LinkWrapper>
+      </Paragraph>
+    </div>
+  ) : null;
+});

package/src/ui-kit/PopupManager/PopupManager.tsx

@@ -16,6 +16,9 @@ export const PopupManager = JSX(() => {
   useEffect(
     () =>
       defaultEventBus.subscribe('popup', (action) => {
+        if (!action) {
+          return;
+        }
         switch (action.type) {
           case 'open':
           case 'update':