File size: 2,234 Bytes
9470652 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | import { Description, Fieldset, Label, Legend } from "@catalyst/fieldset";
import { Radio, RadioField, RadioGroup } from "@catalyst/radio";
import { Text } from "@catalyst/text";
import { useState } from "react";
import { SampleResult } from "../../api";
import { enqueueSnackbar } from "notistack";
import { Button } from "@catalyst/button";
import { useCreateSampleConnection, useGetSamples } from "@/hooks";
import { useNavigate } from "@tanstack/react-router";
export const SampleSelector = ({ name = null }: { name: string | null }) => {
const navigate = useNavigate();
const { data } = useGetSamples();
const samples = data || [];
const { mutate } = useCreateSampleConnection({
onSuccess: () => {
enqueueSnackbar({
variant: "success",
message: "Sample connection created",
});
navigate({ to: "/" });
},
});
const [selectedSample, setSelectedSample] = useState<SampleResult | null>(
null
);
const handleButtonClick = async () => {
if (selectedSample !== null) {
if (name === null || name === "") {
name = selectedSample.title + " (Sample)";
} else {
name = name + " (Sample)";
}
mutate({ key: selectedSample.key, name });
} else {
enqueueSnackbar("Please select a sample dataset.", { variant: "info" });
}
};
const handleRadioChange = (selection: string) => {
const selectedValue = selection as string;
const selectedSample = samples.find(
(sample) => sample.key === selectedValue
);
setSelectedSample(selectedSample || null);
};
return (
<Fieldset>
<Legend>Data Samples</Legend>
<Text>Pick a sample dataset to get started.</Text>
<RadioGroup name="sample" defaultValue="" onChange={handleRadioChange}>
{samples.map((sample, index) => (
<RadioField key={index}>
<Radio value={sample.key} color="white" />
<Label className="cursor-pointer">{sample.title}</Label>
<Description>{sample.link}</Description>
</RadioField>
))}
</RadioGroup>
<Button className="cursor-pointer mt-4" onClick={handleButtonClick}>
Create sample
</Button>
</Fieldset>
);
};
|