Removed React prefix to some use hooks

client/src/pages/filaments/create.tsx

@@ -1,7 +1,6 @@
-import React from "react";
 import { HttpError, IResourceComponentsProps, useInvalidate, useTranslate } from "@refinedev/core";
 import { Create, useForm, useSelect } from "@refinedev/antd";
-import { Form, Input, Select, InputNumber, ColorPicker, Button, Typography, Modal, Radio } from "antd";
+import { Form, Input, Select, InputNumber, ColorPicker, Button, Typography, Radio } from "antd";
 import TextArea from "antd/es/input/TextArea";
 import { numberFormatter, numberParser } from "../../utils/parsing";
 import { IVendor } from "../vendors/model";
@@ -11,12 +10,11 @@ import { ExtraFieldFormItem, ParsedExtras, StringifiedExtras } from "../../compo
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { getCurrencySymbol, useCurrency } from "../../utils/settings";
-import { searchMatches } from "../../utils/filtering";
-import { ExternalFilament, useGetExternalDBFilaments } from "../../utils/queryExternalDB";
-import { formatFilamentLabel } from "../spools/functions";
+import { ExternalFilament } from "../../utils/queryExternalDB";
 import { FilamentImportModal } from "../../components/filamentImportModal";
 import { getOrCreateVendorFromExternal } from "../vendors/functions";
 import { MultiColorPicker } from "../../components/multiColorPicker";
+import { useEffect, useState } from "react";
 
 dayjs.extend(utc);
 
@@ -32,9 +30,9 @@ export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrClonePr
   const t = useTranslate();
   const extraFields = useGetFields(EntityType.filament);
   const currency = useCurrency();
-  const [isImportExtOpen, setIsImportExtOpen] = React.useState(false);
+  const [isImportExtOpen, setIsImportExtOpen] = useState(false);
   const invalidate = useInvalidate();
-  const [colorType, setColorType] = React.useState<"single" | "multi">("single");
+  const [colorType, setColorType] = useState<"single" | "multi">("single");
 
   const { form, formProps, formLoading, onFinish, redirect } = useForm<
     IFilament,
@@ -91,7 +89,7 @@ export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrClonePr
 
   // Use useEffect to update the form's initialValues when the extra fields are loaded
   // This is necessary because the form is rendered before the extra fields are loaded
-  React.useEffect(() => {
+  useEffect(() => {
     extraFields.data?.forEach((field) => {
       if (formProps.initialValues && field.default_value) {
         const parsedValue = JSON.parse(field.default_value as string);

client/src/pages/filaments/edit.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useEffect, useState } from "react";
 import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { Edit, useForm, useSelect } from "@refinedev/antd";
 import { Form, Input, DatePicker, Select, InputNumber, ColorPicker, message, Alert, Typography, Radio } from "antd";
@@ -26,7 +26,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
   const [hasChanged, setHasChanged] = useState(false);
   const extraFields = useGetFields(EntityType.filament);
   const currency = useCurrency();
-  const [colorType, setColorType] = React.useState<"single" | "multi">("single");
+  const [colorType, setColorType] = useState<"single" | "multi">("single");
 
   const { formProps, saveButtonProps } = useForm<IFilament, HttpError, IFilament, IFilament>({
     liveMode: "manual",
@@ -52,7 +52,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
   }
 
   // Update colorType state
-  React.useEffect(() => {
+  useEffect(() => {
     console.log(formProps.initialValues?.multi_color_hexes);
     if (formProps.initialValues?.multi_color_hexes) {
       setColorType("multi");

client/src/pages/filaments/list.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { useMemo, useState } from "react";
 import { IResourceComponentsProps, useTranslate, useInvalidate, useNavigation } from "@refinedev/core";
 import { useTable, List } from "@refinedev/antd";
 import { Table, Button, Dropdown } from "antd";
@@ -125,7 +125,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
     });
 
   // Create state for the columns to show
-  const [showColumns, setShowColumns] = React.useState<string[]>(initialState.showColumns ?? defaultColumns);
+  const [showColumns, setShowColumns] = useState<string[]>(initialState.showColumns ?? defaultColumns);
 
   // Store state in local storage
   const tableState: TableState = {
@@ -137,7 +137,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
   useStoreInitialState(namespace, tableState);
 
   // Collapse the dataSource to a mutable list
-  const queryDataSource: IFilamentCollapsed[] = React.useMemo(
+  const queryDataSource: IFilamentCollapsed[] = useMemo(
     () => (tableProps.dataSource || []).map((record) => ({ ...record })),
     [tableProps.dataSource]
   );

client/src/pages/printing/spoolSelectModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useMemo, useState } from "react";
 import { Table, Checkbox, Space, Row, Col, message, Button } from "antd";
 import { ISpool } from "../spools/model";
 import { FilteredQueryColumn, SortedColumn, SpoolIconColumn } from "../../components/column";
@@ -79,7 +79,7 @@ const SpoolSelectModal: React.FC<Props> = ({ description, onContinue }) => {
   };
 
   // Collapse the dataSource to a mutable list and add a filament_name field
-  const dataSource: ISpoolCollapsed[] = React.useMemo(
+  const dataSource: ISpoolCollapsed[] = useMemo(
     () => (tableProps.dataSource || []).map((record) => ({ ...record })),
     [tableProps.dataSource]
   );

client/src/pages/settings/generalSettings.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { useEffect } from "react";
 import { useTranslate } from "@refinedev/core";
 import { Button, Form, Input, message } from "antd";
 import { useGetSettings, useSetSetting } from "../../utils/querySettings";
@@ -11,7 +11,7 @@ export function GeneralSettings() {
   const t = useTranslate();
 
   // Set initial form values
-  React.useEffect(() => {
+  useEffect(() => {
     if (settings.data) {
       form.setFieldsValue({
         currency: JSON.parse(settings.data.currency.value),
@@ -20,7 +20,7 @@ export function GeneralSettings() {
   }, [settings.data, form]);
 
   // Popup message if setSetting is successful
-  React.useEffect(() => {
+  useEffect(() => {
     if (setCurrency.isSuccess) {
       messageApi.success(t("notifications.saveSuccessful"));
     }

client/src/pages/spools/create.tsx

@@ -1,25 +1,11 @@
-import React, { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core";
-import { Create, useForm, useSelect } from "@refinedev/antd";
-import {
-  Form,
-  Input,
-  DatePicker,
-  Select,
-  InputNumber,
-  Radio,
-  Divider,
-  Button,
-  Typography,
-  ConfigProvider,
-  Alert,
-  Space,
-} from "antd";
+import { Create, useForm } from "@refinedev/antd";
+import { Form, Input, DatePicker, Select, InputNumber, Radio, Divider, Button, Typography, Alert } from "antd";
 import dayjs from "dayjs";
 import TextArea from "antd/es/input/TextArea";
-import { IFilament } from "../filaments/model";
 import { ISpool, ISpoolParsedExtras, WeightToEnter } from "./model";
-import { formatLength, formatWeight, numberFormatter, numberParser } from "../../utils/parsing";
+import { numberFormatter, numberParser } from "../../utils/parsing";
 import { useSpoolmanLocations } from "../../components/otherModels";
 import { MinusOutlined, PlusOutlined } from "@ant-design/icons";
 import "../../utils/overrides.css";
@@ -27,9 +13,8 @@ import { EntityType, useGetFields } from "../../utils/queryFields";
 import { ExtraFieldFormItem, ParsedExtras, StringifiedExtras } from "../../components/extraFields";
 import utc from "dayjs/plugin/utc";
 import { getCurrencySymbol, useCurrency } from "../../utils/settings";
-import { ExternalFilament, useGetExternalDBFilaments } from "../../utils/queryExternalDB";
 import { createFilamentFromExternal } from "../filaments/functions";
-import { formatFilamentLabel, useGetFilamentSelectOptions } from "./functions";
+import { useGetFilamentSelectOptions } from "./functions";
 import { searchMatches } from "../../utils/filtering";
 
 dayjs.extend(utc);
@@ -145,7 +130,7 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
 
   // Use useEffect to update the form's initialValues when the extra fields are loaded
   // This is necessary because the form is rendered before the extra fields are loaded
-  React.useEffect(() => {
+  useEffect(() => {
     extraFields.data?.forEach((field) => {
       if (formProps.initialValues && field.default_value) {
         const parsedValue = JSON.parse(field.default_value as string);
@@ -161,7 +146,7 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
   const [weightToEnter, setWeightToEnter] = useState(1);
   const [usedWeight, setUsedWeight] = useState(0);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const newFilamentWeight = selectedFilament?.weight || 0;
     const newSpoolWeight = selectedFilament?.spool_weight || 0;
     if (newFilamentWeight > 0) {
@@ -242,7 +227,7 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
     return selectedFilament?.weight ? true : false;
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (weightToEnter >= WeightToEnter.measured_weight) {
       if (!isMeasuredWeightEnabled()) {
         setWeightToEnter(WeightToEnter.remaining_weight);

client/src/pages/spools/edit.tsx

@@ -1,10 +1,9 @@
-import React, { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core";
-import { Edit, useForm, useSelect } from "@refinedev/antd";
+import { Edit, useForm } from "@refinedev/antd";
 import { Form, Input, DatePicker, Select, InputNumber, Radio, Divider, Alert, Typography } from "antd";
 import dayjs from "dayjs";
 import TextArea from "antd/es/input/TextArea";
-import { IFilament } from "../filaments/model";
 import { ISpool, ISpoolParsedExtras, WeightToEnter } from "./model";
 import { numberFormatter, numberParser } from "../../utils/parsing";
 import { useSpoolmanLocations } from "../../components/otherModels";
@@ -117,7 +116,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
   const [weightToEnter, setWeightToEnter] = useState(1);
   const [usedWeight, setUsedWeight] = useState(0);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const newFilamentWeight = selectedFilament?.weight || 0;
     const newSpoolWeight = selectedFilament?.spool_weight || 0;
     console.log("selectedFilament", selectedFilament, newFilamentWeight, newSpoolWeight);
@@ -190,7 +189,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
     return selectedFilament?.weight ? true : false;
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (weightToEnter >= WeightToEnter.measured_weight) {
       if (!isMeasuredWeightEnabled()) {
         setWeightToEnter(WeightToEnter.remaining_weight);

client/src/pages/spools/list.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { IResourceComponentsProps, useInvalidate, useNavigation, useTranslate } from "@refinedev/core";
 import { useTable, List } from "@refinedev/antd";
 import { Table, Button, Dropdown, Modal } from "antd";
@@ -159,7 +159,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
     });
 
   // Create state for the columns to show
-  const [showColumns, setShowColumns] = React.useState<string[]>(initialState.showColumns ?? defaultColumns);
+  const [showColumns, setShowColumns] = useState<string[]>(initialState.showColumns ?? defaultColumns);
 
   // Store state in local storage
   const tableState: TableState = {
@@ -171,7 +171,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
   useStoreInitialState(namespace, tableState);
 
   // Collapse the dataSource to a mutable list
-  const queryDataSource: ISpoolCollapsed[] = React.useMemo(
+  const queryDataSource: ISpoolCollapsed[] = useMemo(
     () => (tableProps.dataSource || []).map((record) => ({ ...record })),
     [tableProps.dataSource]
   );

client/src/pages/vendors/create.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { useEffect } from "react";
 import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { Create, useForm } from "@refinedev/antd";
 import { Button, Form, Input, Typography, InputNumber } from "antd";
@@ -43,7 +43,7 @@ export const VendorCreate: React.FC<IResourceComponentsProps & CreateOrCloneProp
 
   // Use useEffect to update the form's initialValues when the extra fields are loaded
   // This is necessary because the form is rendered before the extra fields are loaded
-  React.useEffect(() => {
+  useEffect(() => {
     extraFields.data?.forEach((field) => {
       if (formProps.initialValues && field.default_value) {
         const parsedValue = JSON.parse(field.default_value as string);

client/src/pages/vendors/list.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { IResourceComponentsProps, useTranslate, useInvalidate, useNavigation } from "@refinedev/core";
 import { useTable, List } from "@refinedev/antd";
 import { Table, Button, Dropdown } from "antd";
@@ -19,6 +18,7 @@ import { useLiveify } from "../../components/liveify";
 import { removeUndefined } from "../../utils/filtering";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { useNavigate } from "react-router-dom";
+import { useMemo, useState } from "react";
 
 dayjs.extend(utc);
 
@@ -66,7 +66,7 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
   });
 
   // Create state for the columns to show
-  const [showColumns, setShowColumns] = React.useState<string[]>(initialState.showColumns ?? allColumns);
+  const [showColumns, setShowColumns] = useState<string[]>(initialState.showColumns ?? allColumns);
 
   // Store state in local storage
   const tableState: TableState = {
@@ -78,9 +78,9 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
   useStoreInitialState(namespace, tableState);
 
   // Collapse the dataSource to a mutable list
-  const queryDataSource: IVendor[] = React.useMemo(
     () => (tableProps.dataSource || []).map((record) => ({ ...record })),
     [tableProps.dataSource]
+  const queryDataSource: IVendor[] = useMemo(
   );
   const dataSource = useLiveify("vendor", queryDataSource, (record: IVendor) => record);