WIP

src/components/layout/Sidebar/Settings/Channels.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type React from 'react';
+import { useState } from 'react';
 
 import { useForm } from 'react-hook-form';
 import { FiSave } from 'react-icons/fi';
@@ -17,9 +18,9 @@ export const Channels = (): JSX.Element => {
     channels.find(
       (channel) => channel.role === Protobuf.Channel_Role.PRIMARY,
     ) ?? channels[0];
-  const [usePreset, setUsePreset] = React.useState(true);
-  const [loading, setLoading] = React.useState(false);
-  const [selectedChannel, setSelectedChannel] = React.useState<
+  const [usePreset, setUsePreset] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [selectedChannel, setSelectedChannel] = useState<
     Protobuf.Channel | undefined
   >();
 

src/components/layout/Sidebar/Settings/Index.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type React from 'react';
+import { useState } from 'react';
 
 import {
   FiAlignLeft,
@@ -38,8 +39,8 @@ export interface SettingsProps {
 }
 
 export const Settings = ({ open, setOpen }: SettingsProps): JSX.Element => {
-  const [pluginsOpen, setPluginsOpen] = React.useState(false);
-  const [channelsOpen, setChannelsOpen] = React.useState(false);
+  const [pluginsOpen, setPluginsOpen] = useState(false);
+  const [channelsOpen, setChannelsOpen] = useState(false);
   const {
     rangeTestPluginEnabled,
     extNotificationPluginEnabled,

src/components/layout/Sidebar/Settings/Position.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type React from 'react';
+import { useEffect, useState } from 'react';
 
 import { Controller, useForm } from 'react-hook-form';
 import { FiSave } from 'react-icons/fi';
@@ -18,7 +19,7 @@ export const Position = (): JSX.Element => {
   const preferences = useAppSelector(
     (state) => state.meshtastic.radio.preferences,
   );
-  const [loading, setLoading] = React.useState(false);
+  const [loading, setLoading] = useState(false);
   const { register, handleSubmit, formState, reset, control } =
     useForm<Protobuf.RadioConfig_UserPreferences>({
       defaultValues: {
@@ -32,7 +33,7 @@ export const Position = (): JSX.Element => {
       },
     });
 
-  React.useEffect(() => {
+  useEffect(() => {
     reset(preferences);
   }, [reset, preferences]);
 

src/components/layout/Sidebar/Settings/Power.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type React from 'react';
+import { useEffect, useState } from 'react';
 
 import { useForm } from 'react-hook-form';
 import { FiSave } from 'react-icons/fi';
@@ -14,7 +15,7 @@ export const Power = (): JSX.Element => {
   const preferences = useAppSelector(
     (state) => state.meshtastic.radio.preferences,
   );
-  const [loading, setLoading] = React.useState(false);
+  const [loading, setLoading] = useState(false);
   const { register, handleSubmit, formState, reset } =
     useForm<Protobuf.RadioConfig_UserPreferences>({
       defaultValues: {
@@ -23,7 +24,7 @@ export const Power = (): JSX.Element => {
       },
     });
 
-  React.useEffect(() => {
+  useEffect(() => {
     reset(preferences);
   }, [reset, preferences]);
 

src/components/layout/Sidebar/Settings/Radio.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type React from 'react';
+import { useEffect, useState } from 'react';
 
 import { useForm } from 'react-hook-form';
 import { FiSave } from 'react-icons/fi';
@@ -14,13 +15,13 @@ export const Radio = (): JSX.Element => {
   const preferences = useAppSelector(
     (state) => state.meshtastic.radio.preferences,
   );
-  const [loading, setLoading] = React.useState(false);
+  const [loading, setLoading] = useState(false);
   const { register, handleSubmit, formState, reset } =
     useForm<Protobuf.RadioConfig_UserPreferences>({
       defaultValues: preferences,
     });
 
-  React.useEffect(() => {
+  useEffect(() => {
     reset(preferences);
   }, [reset, preferences]);
 

src/components/layout/Sidebar/Settings/User.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type React from 'react';
+import { useEffect, useState } from 'react';
 
 import { useForm } from 'react-hook-form';
 import { FiSave } from 'react-icons/fi';
@@ -13,7 +14,7 @@ import { useAppSelector } from '@hooks/useAppSelector';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 export const User = (): JSX.Element => {
-  const [loading, setLoading] = React.useState(false);
+  const [loading, setLoading] = useState(false);
   const myNodeNum = useAppSelector(
     (state) => state.meshtastic.radio.hardware,
   ).myNodeNum;
@@ -40,7 +41,7 @@ export const User = (): JSX.Element => {
     },
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     reset({
       longName: node?.user?.longName,
       shortName: node?.user?.shortName,

src/components/layout/Sidebar/Settings/WiFi.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type React from 'react';
+import { useEffect, useState } from 'react';
 
 import { useForm, useWatch } from 'react-hook-form';
 import { FiSave } from 'react-icons/fi';
@@ -14,7 +15,7 @@ export const WiFi = (): JSX.Element => {
   const preferences = useAppSelector(
     (state) => state.meshtastic.radio.preferences,
   );
-  const [loading, setLoading] = React.useState(false);
+  const [loading, setLoading] = useState(false);
   const { register, handleSubmit, formState, reset, control } =
     useForm<Protobuf.RadioConfig_UserPreferences>({
       defaultValues: preferences,
@@ -32,7 +33,7 @@ export const WiFi = (): JSX.Element => {
     defaultValue: false,
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     reset(preferences);
   }, [reset, preferences]);
 

src/components/layout/Sidebar/Settings/channels/Channels.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type React from 'react';
+import { useEffect, useState } from 'react';
 
 import { fromByteArray, toByteArray } from 'base64-js';
 import { useForm } from 'react-hook-form';
@@ -18,9 +19,9 @@ export interface SettingsPanelProps {
 }
 
 export const SettingsPanel = ({ channel }: SettingsPanelProps): JSX.Element => {
-  const [loading, setLoading] = React.useState(false);
-  const [keySize, setKeySize] = React.useState<128 | 256>(256);
-  const [pskHidden, setPskHidden] = React.useState(true);
+  const [loading, setLoading] = useState(false);
+  const [keySize, setKeySize] = useState<128 | 256>(256);
+  const [pskHidden, setPskHidden] = useState(true);
 
   const { register, handleSubmit, setValue, formState, reset } = useForm<
     Omit<Protobuf.ChannelSettings, 'psk'> & { psk: string; enabled: boolean }
@@ -37,7 +38,7 @@ export const SettingsPanel = ({ channel }: SettingsPanelProps): JSX.Element => {
     },
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     reset({
       enabled: [
         Protobuf.Channel_Role.SECONDARY,

src/components/layout/Sidebar/Settings/plugins/ExternalNotifications.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type React from 'react';
+import { useEffect, useState } from 'react';
 
 import { useForm, useWatch } from 'react-hook-form';
 import { FiSave } from 'react-icons/fi';
@@ -12,7 +13,7 @@ import { useAppSelector } from '@hooks/useAppSelector';
 import type { Protobuf } from '@meshtastic/meshtasticjs';
 
 export const ExternalNotificationsSettingsPlanel = (): JSX.Element => {
-  const [loading, setLoading] = React.useState(false);
+  const [loading, setLoading] = useState(false);
 
   const preferences = useAppSelector(
     (state) => state.meshtastic.radio.preferences,
@@ -23,7 +24,7 @@ export const ExternalNotificationsSettingsPlanel = (): JSX.Element => {
       defaultValues: preferences,
     });
 
-  React.useEffect(() => {
+  useEffect(() => {
     reset(preferences);
   }, [reset, preferences]);
 

src/components/layout/Sidebar/Settings/plugins/RangeTest.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type React from 'react';
+import { useEffect, useState } from 'react';
 
 import { useForm, useWatch } from 'react-hook-form';
 import { FiSave } from 'react-icons/fi';
@@ -12,7 +13,7 @@ import { useAppSelector } from '@hooks/useAppSelector';
 import type { Protobuf } from '@meshtastic/meshtasticjs';
 
 export const RangeTestSettingsPanel = (): JSX.Element => {
-  const [loading, setLoading] = React.useState(false);
+  const [loading, setLoading] = useState(false);
 
   const preferences = useAppSelector(
     (state) => state.meshtastic.radio.preferences,
@@ -23,7 +24,7 @@ export const RangeTestSettingsPanel = (): JSX.Element => {
       defaultValues: preferences,
     });
 
-  React.useEffect(() => {
+  useEffect(() => {
     reset(preferences);
   }, [reset, preferences]);
 

src/components/layout/Sidebar/Settings/plugins/Serial.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type React from 'react';
+import { useEffect, useState } from 'react';
 
 import { useForm, useWatch } from 'react-hook-form';
 import { FiSave } from 'react-icons/fi';
@@ -12,7 +13,7 @@ import { useAppSelector } from '@hooks/useAppSelector';
 import type { Protobuf } from '@meshtastic/meshtasticjs';
 
 export const SerialSettingsPanel = (): JSX.Element => {
-  const [loading, setLoading] = React.useState(false);
+  const [loading, setLoading] = useState(false);
 
   const preferences = useAppSelector(
     (state) => state.meshtastic.radio.preferences,
@@ -23,7 +24,7 @@ export const SerialSettingsPanel = (): JSX.Element => {
       defaultValues: preferences,
     });
 
-  React.useEffect(() => {
+  useEffect(() => {
     reset(preferences);
   }, [reset, preferences]);
 

src/components/layout/Sidebar/Settings/plugins/StoreForward.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type React from 'react';
+import { useEffect, useState } from 'react';
 
 import { useForm, useWatch } from 'react-hook-form';
 import { FiSave } from 'react-icons/fi';
@@ -12,7 +13,7 @@ import { useAppSelector } from '@hooks/useAppSelector';
 import type { Protobuf } from '@meshtastic/meshtasticjs';
 
 export const StoreForwardSettingsPanel = (): JSX.Element => {
-  const [loading, setLoading] = React.useState(false);
+  const [loading, setLoading] = useState(false);
 
   const preferences = useAppSelector(
     (state) => state.meshtastic.radio.preferences,
@@ -23,7 +24,7 @@ export const StoreForwardSettingsPanel = (): JSX.Element => {
       defaultValues: preferences,
     });
 
-  React.useEffect(() => {
+  useEffect(() => {
     reset(preferences);
   }, [reset, preferences]);