Skip to content

Commit

Permalink
feat: adding form state to global
Browse files Browse the repository at this point in the history
  • Loading branch information
@arunavabasucom
arunavabasucom committed Jan 21, 2024
1 parent 4041407 commit 038bdc7
Show file tree
Hide file tree
Showing 2 changed files with 155 additions and 151 deletions.
225 changes: 115 additions & 110 deletions frontend/src/components/Form.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useEffect } from "react";
import Grid from "@mui/joy/Grid";
import { useForm } from "react-hook-form";
import { useForm, FormProvider } from "react-hook-form";
import axios from "axios";
import { yupResolver } from "@hookform/resolvers/yup";
import Button from "@mui/joy/Button";
Expand Down Expand Up @@ -65,17 +65,20 @@ export const Form: React.FunctionComponent<FormProps> = ({
setDisableDownloadButton,
} = useFromStore();

//TODO - we need to make it global (zuatand)
//TODO - we need to make it global

const methods = useForm<FormValues>({
defaultValues: { species: [{ molecule: "CO", mole_fraction: 0.1 }] },
resolver: yupResolver(formSchema),
});

const {
control,
handleSubmit,
setValue,
watch,
formState: { dirtyFields },
} = useForm<FormValues>({
defaultValues: { species: [{ molecule: "CO", mole_fraction: 0.1 }] },
resolver: yupResolver(formSchema),
});
} = methods;

const databaseWatch = watch("database");
React.useEffect(() => {
Expand Down Expand Up @@ -283,131 +286,133 @@ export const Form: React.FunctionComponent<FormProps> = ({
}, [setValue, isNonEquilibrium]);

return (
<form
onSubmit={handleSubmit((data) => onSubmit(data, `calculate-spectrum`))}
>
<Grid container spacing={3}>
<Grid xs={12} sm={8} md={5} lg={6}>
<DatabaseField control={control}></DatabaseField>
</Grid>
<Grid xs={12} sm={8} md={5} lg={6}>
<Mode control={control} />
</Grid>
<Grid xs={12}>
<WavenumberRangeSlider
isUnitChanged={simulateSlitUnit}
minRange={simulateSlitUnit ? 1000 : 500}
maxRange={simulateSlitUnit ? 20000 : 10000}
control={control}
setValue={setValue}
/>
</Grid>

{isNonEquilibrium ? (
<Grid sm={8} lg={4}>
<TGas control={control} />
<FormProvider {...methods}>
<form
onSubmit={handleSubmit((data) => onSubmit(data, `calculate-spectrum`))}
>
<Grid container spacing={3}>
<Grid xs={12} sm={8} md={5} lg={6}>
<DatabaseField control={control}></DatabaseField>
</Grid>
) : (
<Grid sm={8} lg={12}>
<TGas control={control} />
<Grid xs={12} sm={8} md={5} lg={6}>
<Mode control={control} />
</Grid>
<Grid xs={12}>
<WavenumberRangeSlider
isUnitChanged={simulateSlitUnit}
minRange={simulateSlitUnit ? 1000 : 500}
maxRange={simulateSlitUnit ? 20000 : 10000}
control={control}
setValue={setValue}
/>
</Grid>
)}

{isNonEquilibrium ? (
<>
{isNonEquilibrium ? (
<Grid sm={8} lg={4}>
<TRot control={control} />
<TGas control={control} />
</Grid>
<Grid sm={8} lg={4}>
<TVib control={control} />
) : (
<Grid sm={8} lg={12}>
<TGas />
</Grid>
</>
) : null}
)}

{isNonEquilibrium ? (
<Grid sm={8} lg={12}>
<Pressure control={control} />
</Grid>
) : (
<Grid sm={8} lg={12}>
<Pressure control={control} />
</Grid>
)}
{isNonEquilibrium ? (
<>
<Grid sm={8} lg={4}>
<TRot control={control} />
</Grid>
<Grid sm={8} lg={4}>
<TVib control={control} />
</Grid>
</>
) : null}

{isNonEquilibrium ? (
<>
{isNonEquilibrium ? (
<Grid sm={8} lg={12}>
<PathLength control={control} />
<Pressure control={control} />
</Grid>
</>
) : (
<>
) : (
<Grid sm={8} lg={12}>
<PathLength control={control} />
<Pressure control={control} />
</Grid>
</>
)}
)}

<Grid xs={12}>
<Species
isNonEquilibrium={isNonEquilibrium}
control={control}
databaseWatch={databaseWatch}
/>
</Grid>
{isNonEquilibrium ? (
<>
<Grid sm={8} lg={12}>
<PathLength control={control} />
</Grid>
</>
) : (
<>
<Grid sm={8} lg={12}>
<PathLength control={control} />
</Grid>
</>
)}

{useSimulateSlitFunction ? (
<Grid xs={12}>
<UseSimulateSlitSwitch control={control} setValue={setValue} />
<Species
isNonEquilibrium={isNonEquilibrium}
control={control}
databaseWatch={databaseWatch}
/>
</Grid>
) : null}

{useSimulateSlitFunction ? (
useSlit ? (
{useSimulateSlitFunction ? (
<Grid xs={12}>
<UseSimulateSlitSwitch control={control} setValue={setValue} />
</Grid>
) : null}

{useSimulateSlitFunction ? (
useSlit ? (
<Grid xs={12}>
<SimulateSlit
isUnitChangeable={simulateSlitUnit}
control={control}
/>
</Grid>
) : null
) : null}
{showNonEquilibriumSwitch && (
<Grid xs={12}>
<SimulateSlit
isUnitChangeable={simulateSlitUnit}
control={control}
/>
<UseNonEquilibriumCalculationsSwitch />
</Grid>
) : null
) : null}
{showNonEquilibriumSwitch && (
)}
<Grid xs={6}>
<CalcSpectrumButton />
</Grid>
<Grid xs={6}>
<Button
fullWidth
disabled={disableAddToPlotButton}
onClick={handleSubmit((data) =>
onSubmit(data, `calculate-spectrum`, true)
)}
>
Add to plot
</Button>
</Grid>
<Grid xs={12}>
<UseNonEquilibriumCalculationsSwitch />
<DownloadSpecButton
disabled={disableDownloadButton}
onClick={handleSubmit((data) => {
onSubmit(data, `download-spectrum`);
})}
/>
</Grid>
<Grid xs={12}>
<DownloadTxtButton
disabled={disableDownloadButton}
onClick={handleSubmit((data) => {
onSubmit(data, `download-txt`);
})}
/>
</Grid>
)}
<Grid xs={6}>
<CalcSpectrumButton />
</Grid>
<Grid xs={6}>
<Button
fullWidth
disabled={disableAddToPlotButton}
onClick={handleSubmit((data) =>
onSubmit(data, `calculate-spectrum`, true)
)}
>
Add to plot
</Button>
</Grid>
<Grid xs={12}>
<DownloadSpecButton
disabled={disableDownloadButton}
onClick={handleSubmit((data) => {
onSubmit(data, `download-spectrum`);
})}
/>
</Grid>
<Grid xs={12}>
<DownloadTxtButton
disabled={disableDownloadButton}
onClick={handleSubmit((data) => {
onSubmit(data, `download-txt`);
})}
/>
</Grid>
</Grid>
</form>
</form>
</FormProvider>
);
};
81 changes: 40 additions & 41 deletions frontend/src/components/fields/TGas.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,47 +2,46 @@ import Input from "@mui/joy/Input";
import FormControl from "@mui/joy/FormControl";
import FormLabel from "@mui/joy/FormLabel";
import FormHelperText from "@mui/joy/FormHelperText";
import React, { ReactNode } from "react";
import InputAdornment from "@mui/material/InputAdornment";
import { Control, Controller } from "react-hook-form";
import { FormValues } from "../types";
import { Controller, useFormContext } from "react-hook-form";

interface TGasProps {
control: Control<FormValues>;
}
export const TGas: React.FC<TGasProps> = ({ control }) => (
<Controller
render={({ field, formState }) => (
<FormControl>
<FormLabel>TGas</FormLabel>
<Input
{...field}
{...formState}
id="tgas-input"
type="number"
onChange={field.onChange}
value={field.value}
error={!!formState.errors?.tgas}
endDecorator={<InputAdornment position="end">K</InputAdornment>}
onKeyPress={(event: any) => {
if (event?.key === "-" || event?.key === "+") {
event.preventDefault();
}
}}
/>
{formState.errors?.tgas ? (
<FormHelperText
sx={{
color: "red",


export const TGas: React.FC = () => {
const { control } = useFormContext();
return (
<Controller
render={({ field, fieldState }) => (
<FormControl>
<FormLabel>TGas</FormLabel>
<Input
{...field}
id="tgas-input"
type="number"
onChange={field.onChange}
value={field.value}
error={!!fieldState.error}
endDecorator={<InputAdornment position="end">K</InputAdornment>}
onKeyPress={(event: any) => {

Check warning on line 25 in frontend/src/components/fields/TGas.tsx

View workflow job for this annotation

GitHub Actions / 🧪 frontend-ci 

Unexpected any. Specify a different type
if (event?.key === "-" || event?.key === "+") {
event.preventDefault();
}
}}
>
{formState.errors?.tgas?.message}
</FormHelperText>
) : null}
</FormControl>
)}
name="tgas"
control={control}
defaultValue={300}
/>
);
/>
{fieldState.error ? (
<FormHelperText
sx={{
color: "red",
}}
>
{fieldState.error.message}
</FormHelperText>
) : null}
</FormControl>
)}
name="tgas"
control={control}
defaultValue={300}
/>
);
};

0 comments on commit 038bdc7

Please sign in to comment.