feat: update routing and add Calibration Gas page; refactor state management in Dilution page

Author: aeltorio

src/App.tsx

@@ -1,11 +1,13 @@
 import { Route, Routes } from "react-router-dom";
 
-import IndexPage from "@/pages/dilution";
+import CalibrationGasPage from "@/pages/calibrationgas";
+import DilutionPage from "@/pages/dilution";
 
 function App() {
   return (
     <Routes>
-      <Route element={<IndexPage />} path="/" />
+      <Route element={<DilutionPage />} path="/" />
+      <Route element={<CalibrationGasPage />} path="/calibrationgas" />
     </Routes>
   );
 }

src/components/GasInlet.tsx

@@ -15,12 +15,14 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import React from "react";
+import type React from "react";
+
 import {
   AGA8wasm,
   PropertiesGERGResult,
   type GasMixtureExt,
 } from "@sctg/aga8-js";
+import { useEffect } from "react";
 
 import { GasSelector } from "./GasSelector";
 import { OrificeSelector } from "./OrificeSelector";
@@ -145,7 +147,7 @@ export const GasInlet: React.FC<GasInletProps> = ({
   onOrificeChange,
   onFlowDataChange,
 }) => {
-  React.useEffect(() => {
+  useEffect(() => {
     const updateFlow = async () => {
       const newFlowData = await computeGasFlowFunctionOfPressure(
         temperature,
@@ -169,11 +171,11 @@ export const GasInlet: React.FC<GasInletProps> = ({
         onChange={onPressureChange}
       />
       <div className="my-4">
-          <GasSelector
-            label={`Gas ${label}`}
-            selectedGas={selectedGas}
-            onGasChange={onGasChange}
-          />
+        <GasSelector
+          label={`Gas ${label}`}
+          selectedGas={selectedGas}
+          onGasChange={onGasChange}
+        />
       </div>
       <OrificeSelector
         label={`Orifice ${label}`}

src/components/GasSelector.tsx

@@ -15,7 +15,8 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import React from "react";
+import type React from "react";
+
 import { Select, SelectItem } from "@heroui/select";
 import { pureGasMixtures, type GasMixtureExt } from "@sctg/aga8-js";
 

src/components/OrificeSelector.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import type React from "react";
+
 import { Select, SelectItem } from "@heroui/select";
 
 interface OrificeSelectorProps {

src/components/PressureSlider.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import type React from "react";
+
 import { Slider } from "@heroui/slider";
 
 interface PressureSliderProps {
@@ -27,4 +28,4 @@ export const PressureSlider: React.FC<PressureSliderProps> = ({
       }
     />
   );
-};
+};

src/components/SonicNozzleTable.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import type React from "react";
+
 import {
   Table,
   TableHeader,

src/components/icons.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type React from "react";
 
 import { IconSvgProps } from "@/types";
 

src/components/theme-switch.tsx

@@ -1,4 +1,4 @@
-import { FC, useState, useEffect } from "react";
+import { type FC, useState, useEffect } from "react";
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 import { SwitchProps, useSwitch } from "@heroui/switch";
 import clsx from "clsx";

src/config/site.ts

@@ -5,15 +5,23 @@ export const siteConfig = {
   description: "Comprehensive dilution simulator for AGA8 gaz",
   navItems: [
     {
-      label: "Home",
+      label: "Dilution",
       href: "/",
     },
+    {
+      label: "Calibration Gas",
+      href: "/calibrationgas",
+    },
   ],
   navMenuItems: [
     {
-      label: "Home",
+      label: "Dilution",
       href: "/",
     },
+    {
+      label: "Calibration Gas",
+      href: "/calibrationgas",
+    },
   ],
   links: {
     github: "https://github.com/sctg-development/flow-dilution",

src/main.tsx

@@ -1,17 +1,17 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 
 import App from "./App.tsx";
 import { Provider } from "./provider.tsx";
 import "@/styles/globals.css";
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
     <BrowserRouter basename={import.meta.env.BASE_URL}>
       <Provider>
         <App />
       </Provider>
     </BrowserRouter>
-  </React.StrictMode>,
+  </StrictMode>,
 );