upd

client/src/components/Calc.tsx

@@ -7,6 +7,7 @@ import ArrowRightIcon from "./icons/ArrowRightIcon";
 import regionsData from "../assets/regionsData.json";
 import { useEffect, useState } from "react";
 import CloseIcon from "./icons/CloseIcon";
+import api from "../utils/api";
 
 interface Region {
   id: number;
@@ -17,9 +18,11 @@ interface Region {
 }
 
 function Calc() {
-  const [consultations, setConsultations] = useState<number>(100);
   const [selectedRegion, setSelectedRegion] = useState<Region>();
-  const [implementationPeriod, setImplementationPeriod] = useState<number>();
+  const [consultations, setConsultations] = useState<number>(100);
+  const [implementationPeriod, setImplementationPeriod] = useState<number>(
+    null!
+  );
   const [oldImplementationPeriod, setOldImplementationPeriod] =
     useState<number>();
   const [monthlyIncome, setMonthlyIncome] = useState<number>();
@@ -39,8 +42,23 @@ function Calc() {
   const [diffImplementationPeriodEnding, setDiffImplementationPeriodEnding] =
     useState<string>();
 
+  async function getRegionName() {
+    const result: any = await api.get("getRegionName").json();
+
+    if (result.error) {
+      setSelectedRegion(regionsData.find((region) => region.id === 11));
+      return;
+    }
+
+    const foundRegion =
+      regionsData.find((region) => region.name === result.regionName) ||
+      regionsData.find((region) => region.id === 11);
+
+    setSelectedRegion(foundRegion);
+  }
+
   useEffect(() => {
-    setSelectedRegion(regionsData.find((region) => region.id === 11));
+    getRegionName();
   }, []);
 
   useEffect(() => {
@@ -94,8 +112,6 @@ function Calc() {
   }, [monthlyIncome, oldMonthlyIncome]);
 
   useEffect(() => {
-    if (!implementationPeriod) return;
-
     if (implementationPeriod > 10 && implementationPeriod < 15) {
       setOldImplementationPeriodEnding("месяцев");
       return;
@@ -160,21 +176,23 @@ function Calc() {
     <div className="relative flex flex-col sm:gap-16 gap-8">
       <div className="grid xl:grid-cols-4 sm:grid-cols-3">
         <div className="xl:col-auto sm:col-span-full xl:block sm:grid grid-cols-2">
-          <CalcSelect
-            label="Регион"
-            placeholder="Выберите регион"
-            defaultOption={regionsData.find((region) => region.id === 11)?.name}
-            options={regionsData.map((regionItem) => regionItem.name)}
-            handleSelect={(option) => {
-              const foundRegion = regionsData.find(
-                (region) => region.name === option
-              );
+          {selectedRegion && (
+            <CalcSelect
+              label="Регион"
+              placeholder="Выберите регион"
+              defaultOption={selectedRegion.name}
+              options={regionsData.map((regionItem) => regionItem.name)}
+              handleSelect={(option) => {
+                const foundRegion = regionsData.find(
+                  (region) => region.name === option
+                );
 
-              if (foundRegion) {
-                setSelectedRegion(foundRegion);
-              }
-            }}
-          />
+                if (foundRegion) {
+                  setSelectedRegion(foundRegion);
+                }
+              }}
+            />
+          )}
           <div className="border xl:border-t-0 xl:border-l sm:border-l-0 sm:border-t border-t-0 border-[#3D425C] 2xl:p-6 p-4 flex items-center">
             <p className="text-[#52587A] text-xs leading-[120%]">
               Установлены усредненные показатели по региону.

client/src/components/CalcSelect.tsx

@@ -6,7 +6,7 @@ import { useOnClickOutside } from "usehooks-ts";
 interface CalcSelectProps {
   label: string;
   placeholder: string;
-  defaultOption?: string;
+  defaultOption: string;
   options: string[];
   handleSelect: (option: string) => void;
 }