Make @/contexts/* to be simple ts to avoid linter error

Avoiding: "Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components"

Author: pinkwah

frontend/src/components/ConvertibleTextField.tsx

@@ -1,6 +1,6 @@
 import { TextField } from "@equinor/eds-core-react";
 import { ChangeEventHandler, FocusEventHandler, ForwardedRef, ReactNode, useEffect, useState } from "react";
-import { useSettings } from "@/contexts/SettingsContext.tsx";
+import { useSettings } from "@/contexts/SettingsContext";
 
 // Copied and modified from EDS
 type ConvertibleTextFieldProps = {

frontend/src/components/ModelInputs.tsx

@@ -1,10 +1,10 @@
 import React, { ChangeEvent, useState } from "react";
 import { ModelConfig } from "@/dto/FormConfig";
 import { Autocomplete, Button, NativeSelect, TextField, Typography } from "@equinor/eds-core-react";
-import ConvertibleTextField from "./ConvertibleTextField.tsx";
-import { FORMULA_TO_NAME_MAPPER } from "@/constants/formula_map.tsx";
-import { MetaTooltip } from "@/functions/Tooltip.tsx";
-import { Columns } from "@/components/styles.ts";
+import ConvertibleTextField from "./ConvertibleTextField";
+import { FORMULA_TO_NAME_MAPPER } from "@/constants/formula_map";
+import { MetaTooltip } from "@/functions/Tooltip";
+import { Columns } from "@/components/styles";
 
 const DEFAULTS = {
     O2: 30,

frontend/src/components/Simulation/NoResults.tsx

@@ -1,5 +1,5 @@
 import icon from "@/assets/no-results-light.svg";
-import CenteredImage from "@/components/CenteredImage.tsx";
+import CenteredImage from "@/components/CenteredImage";
 
 const NoResults = () => <CenteredImage src={icon} caption="No results to display" />;
 

frontend/src/components/TopBar.tsx

@@ -6,7 +6,7 @@ import { useMsal } from "@azure/msal-react";
 import config from "@/configuration";
 import { Link } from "react-router-dom";
 import { useSettings } from "@/contexts/SettingsContext";
-import { LargeScreenOnly, SmallScreenOnly } from "@/components/styles.ts";
+import { LargeScreenOnly, SmallScreenOnly } from "@/components/styles";
 import { useQuery } from "@tanstack/react-query";
 
 type NavItem = {

frontend/src/contexts/ModelContext.tsx frontend/src/contexts/ModelContext.tsfrontend/src/contexts/ModelContext.tsx renamed to frontend/src/contexts/ModelContext.ts

@@ -1,4 +1,4 @@
-import { createContext, ReactNode, useContext, useEffect } from "react";
+import { createContext, createElement, FC, ReactNode, useContext, useEffect } from "react";
 import { ModelConfig } from "@/dto/FormConfig";
 import { getModels } from "@/api/api";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
@@ -14,7 +14,7 @@ type AvailableModelsContextType = {
 
 const AvailableModelsContext = createContext<AvailableModelsContextType>(null as any);
 
-export const AvailableModelsProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+export const AvailableModelsProvider: FC<{ children: ReactNode }> = ({ children }) => {
     const isAuthenticated = useIsAuthenticated();
     const queryClient = useQueryClient();
     const {
@@ -28,13 +28,13 @@ export const AvailableModelsProvider: React.FC<{ children: ReactNode }> = ({ chi
     });
 
     useEffect(() => {
-        queryClient.invalidateQueries({ queryKey: ["models"] });
+        (async () => await queryClient.invalidateQueries({ queryKey: ["models"] }))();
     }, [isAuthenticated, queryClient]);
 
-    return (
-        <AvailableModelsContext.Provider value={{ models: models ?? [], error, isLoading }}>
-            {children}
-        </AvailableModelsContext.Provider>
+    return createElement(
+        AvailableModelsContext.Provider,
+        { value: { models: models ?? [], error, isLoading } },
+        children
     );
 };
 

frontend/src/contexts/SettingsContext.tsx frontend/src/contexts/SettingsContext.tsfrontend/src/contexts/SettingsContext.tsx renamed to frontend/src/contexts/SettingsContext.ts

@@ -1,4 +1,4 @@
-import { createContext, ReactNode, useContext, useState } from "react";
+import { createContext, createElement, FC, ReactNode, useContext, useState } from "react";
 
 export class Unit {
     name: string;
@@ -76,7 +76,7 @@ function nextUnit(units: Unit[], current: Unit, keyName: string): Unit {
     return unit;
 }
 
-export const SettingsProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+export const SettingsProvider: FC<{ children: ReactNode }> = ({ children }) => {
     const [temperature, setTemperature] = useState<Unit>(getDefault(temperatures, "temperatureUnit"));
 
     const settingsContext: SettingsContextType = {
@@ -91,7 +91,7 @@ export const SettingsProvider: React.FC<{ children: ReactNode }> = ({ children }
         },
     };
 
-    return <SettingsContext.Provider value={settingsContext}>{children}</SettingsContext.Provider>;
+    return createElement(SettingsContext.Provider, { value: settingsContext }, children);
 };
 
 export const useSettings = () => useContext(SettingsContext);

frontend/src/contexts/SimulationsContext.ts

@@ -1,13 +1,13 @@
 import React, { useMemo, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { getLabResults } from "@/api/api.tsx";
-import { syntheticResults } from "@/assets/syntheticResults.tsx";
+import { getLabResults } from "@/api/api";
+import { syntheticResults } from "@/assets/syntheticResults";
 import { Card, Typography } from "@equinor/eds-core-react";
 import LabResultsPlot from "@/components/LabResultsPlot";
 import LabResultsTable from "@/components/LabResultsTable";
-import { ExperimentResult } from "@/dto/ExperimentResult.tsx";
-import { useSimulationQueries } from "@/hooks/useSimulationQueriesResult.ts";
-import DownloadButton from "@/components/DownloadButton.tsx";
+import { ExperimentResult } from "@/dto/ExperimentResult";
+import { useSimulationQueries } from "@/hooks/useSimulationQueriesResult";
+import DownloadButton from "@/components/DownloadButton";
 
 const LabResults: React.FC = () => {
     const [selectedExperiments, setSelectedExperiments] = useState<ExperimentResult[]>([]);

frontend/src/pages/LabResults.tsx

@@ -7,8 +7,8 @@ import Results from "./Results";
 import { useAvailableModels } from "@/contexts/ModelContext";
 import SaveResult from "@/components/SaveResult";
 import { SimulationResults } from "@/dto/SimulationResults";
-import NoResults from "@/components/Simulation/NoResults.tsx";
-import Working from "@/components/Simulation/Working.tsx";
+import NoResults from "@/components/Simulation/NoResults";
+import Working from "@/components/Simulation/Working";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { getResultForSimulation, ResultIsPending, startSimulation } from "@/api/api";
 import Step from "@/components/Step";