refactor file structure

src/components/CalculatorComponent/CalculatorComponent.js

@@ -0,0 +1,53 @@
+import { useEffect } from "react";
+import { calcSlice } from "../../store/reducers/calcSlice";
+import { useSelector, useDispatch } from "react-redux";
+
+import { InputSelect } from "../InputSelect/InputSelect";
+import { InputNumber } from "../InputNumber/InputNumber";
+import { AveragePriceApartment } from "./components/AveragePriceApartment/AveragePriceApartment";
+import { AverageSquareApartment } from "./components/AverageSquareApartment/AverageSquareApartment";
+import { ConsultationOffice } from "./components/ConsultationOffice/ConsultationOffice";
+import { ConsultationReserv } from "./components/ConsultationReserv/ConsultationReserv";
+import { Sales } from "./components/Sales/Sales";
+import { ResultBlock } from "../ResultBlock/ResultBlock";
+
+const INITIAL_REGION = "e5b7edfb-17ec-475f-8631-bc796ad19909";
+
+export const CalculatorComponent = ({ }) => {
+    const dispatch = useDispatch();
+    const { handleSelectRegion, handleOptions, handleValue } = calcSlice.actions;
+    const { selectedRegion, filteredList, squareRC } = useSelector(
+        (state) => state.calcReducer
+    );
+
+    useEffect(() => {
+        dispatch(handleSelectRegion(INITIAL_REGION));
+        dispatch(handleOptions());
+    }, []);
+
+    const handleSelect = (element) => {
+        dispatch(handleSelectRegion(element.id));
+    };
+
+    return (
+        <>
+            <div className="input-container-main">
+                <InputSelect
+                    option={filteredList}
+                    handleSelect={handleSelect}
+                    selectedValue={selectedRegion}
+                ></InputSelect>
+                <InputNumber handleState={handleValue} number={squareRC}></InputNumber>
+                <AverageSquareApartment></AverageSquareApartment>
+                <AveragePriceApartment></AveragePriceApartment>
+            </div>
+            <div className="input-container-second">
+                <ConsultationOffice></ConsultationOffice>
+                <ConsultationReserv></ConsultationReserv>
+                <Sales></Sales>
+                <ResultBlock></ResultBlock>
+            </div>
+
+        </>
+    );
+};

src/components/CalculatorComponent/components/InputComponent/InputComponent.js

@@ -3,7 +3,7 @@ import edit from "./edit.svg";
 import { useEffect, useState, useRef } from "react";
 import CurrencyInput from "react-currency-input-field";
 import { useDispatch } from "react-redux";
-import { calcSlice } from "../../store/reducers/calcSlice";
+import { calcSlice } from "../../../../store/reducers/calcSlice";
 
 export const InputComponent = ({
   value,

src/components/DraggableGallery/DraggableGallery.js

@@ -0,0 +1,5 @@
+export const DraggableGallery = () => {
+    return (<div className="">
+        
+    </div>)
+}

src/components/Main/Main.js

@@ -1,53 +1,11 @@
 import "./Main.css";
-import { useEffect } from "react";
-import { calcSlice } from "../../store/reducers/calcSlice";
-import { useSelector, useDispatch } from "react-redux";
+import { CalculatorComponent } from '../CalculatorComponent/CalculatorComponent'
+export const Main = ({ }) => {
 
-import { InputSelect } from "../InputSelect/InputSelect";
-import { InputNumber } from "../InputNumber/InputNumber";
-import { AveragePriceApartment } from "../AveragePriceApartment/AveragePriceApartment";
-import { AverageSquareApartment } from "../AverageSquareApartment/AverageSquareApartment";
-import { ConsultationOffice } from "../ConsultationOffice/ConsultationOffice";
-import { ConsultationReserv } from "../ConsultationReserv/ConsultationReserv";
-import { Sales } from "../Sales/Sales";
-import { ResultBlock } from "../ResultBlock/ResultBlock";
-
-const INITIAL_REGION = "e5b7edfb-17ec-475f-8631-bc796ad19909";
-
-export const Main = ({}) => {
-  const dispatch = useDispatch();
-  const { handleSelectRegion, handleOptions, handleValue } = calcSlice.actions;
-  const { selectedRegion, filteredList, squareRC } = useSelector(
-    (state) => state.calcReducer
-  );
-
-  useEffect(() => {
-    dispatch(handleSelectRegion(INITIAL_REGION));
-    dispatch(handleOptions());
-  }, []);
-
-  const handleSelect = (element) => {
-    dispatch(handleSelectRegion(element.id));
-  };
 
   return (
     <div className="main">
-      <div className="input-container-main">
-        <InputSelect
-          option={filteredList}
-          handleSelect={handleSelect}
-          selectedValue={selectedRegion}
-        ></InputSelect>
-        <InputNumber handleState={handleValue} number={squareRC}></InputNumber>
-        <AverageSquareApartment></AverageSquareApartment>
-        <AveragePriceApartment></AveragePriceApartment>
-      </div>
-      <div className="input-container-second">
-        <ConsultationOffice></ConsultationOffice>
-        <ConsultationReserv></ConsultationReserv>
-        <Sales></Sales>
-        <ResultBlock></ResultBlock>
-      </div>
+      <CalculatorComponent></CalculatorComponent>
     </div>
   );
 };