Dan DitomasoandGitHub
c729d3b25e
* fix: resolve lint warnings/errors and apply formatting Fix 10 oxlint issues (2 errors, 8 warnings): - Remove unused catch parameters in Security.tsx and ImportDialog.tsx - Remove stray expression in Generator.tsx - Add eslint-disable for debounced useCallback in FilterControl.tsx - Remove unnecessary deps (resolveDB, store) in bindStoreToDevice.ts - Prefix unused variant param in AppSidebar.tsx - Memoize tabs arrays in DeviceConfig, RadioConfig, ModuleConfig - Fix channels type in RadioConfig TabItem Also applies oxfmt formatting across all files. * updating lock file * update protobuf package * fix: regenerate pnpm-lock.yaml and exclude jsr protobufs from minimumReleaseAge * prevented http card from always being polled * updated pnpm config fiile * updated actions * removed biome config and lint system leftovers * updating protobuf package
77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
import { Channels } from "@app/components/PageComponents/Channels/Channels";
|
|
import { LoRa } from "@components/PageComponents/Settings/LoRa.tsx";
|
|
import { Security } from "@components/PageComponents/Settings/Security/Security.tsx";
|
|
import { Spinner } from "@components/UI/Spinner.tsx";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/UI/Tabs.tsx";
|
|
import { useDevice, type ValidConfigType } from "@core/stores";
|
|
import { type ComponentType, Suspense, useMemo } from "react";
|
|
import type { UseFormReturn } from "react-hook-form";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
interface ConfigProps {
|
|
onFormInit: <T extends object>(methods: UseFormReturn<T>) => void;
|
|
}
|
|
|
|
type TabItem = {
|
|
case: ValidConfigType | "channels";
|
|
label: string;
|
|
element: ComponentType<ConfigProps>;
|
|
count?: number;
|
|
};
|
|
|
|
export const RadioConfig = ({ onFormInit }: ConfigProps) => {
|
|
const { hasConfigChange } = useDevice();
|
|
const { t } = useTranslation("config");
|
|
const tabs: TabItem[] = useMemo(
|
|
() => [
|
|
{
|
|
case: "lora",
|
|
label: t("page.tabLora"),
|
|
element: LoRa,
|
|
},
|
|
{
|
|
case: "channels",
|
|
label: t("page.tabChannels"),
|
|
element: Channels,
|
|
},
|
|
{
|
|
case: "security",
|
|
label: t("page.tabSecurity"),
|
|
element: Security,
|
|
},
|
|
],
|
|
[t],
|
|
);
|
|
|
|
const flags = useMemo(
|
|
() =>
|
|
new Map(tabs.map((tab) => [tab.case, tab.case !== "channels" && hasConfigChange(tab.case)])),
|
|
[tabs, hasConfigChange],
|
|
);
|
|
|
|
return (
|
|
<Tabs defaultValue={t("page.tabLora")}>
|
|
<TabsList className="w-full dark:bg-slate-700">
|
|
{tabs.map((tab) => (
|
|
<TabsTrigger key={tab.label} value={tab.label} className="dark:text-white relative">
|
|
{tab.label}
|
|
{flags.get(tab.case) && (
|
|
<span className="absolute -top-0.5 -right-0.5 z-50 flex size-3">
|
|
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-500 opacity-25" />
|
|
<span className="relative inline-flex size-3 rounded-full bg-sky-500" />
|
|
</span>
|
|
)}
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
{tabs.map((tab) => (
|
|
<TabsContent key={tab.label} value={tab.label}>
|
|
<Suspense fallback={<Spinner size="lg" className="my-5" />}>
|
|
<tab.element onFormInit={onFormInit} />
|
|
</Suspense>
|
|
</TabsContent>
|
|
))}
|
|
</Tabs>
|
|
);
|
|
};
|