Small typescript cleanups

src/frontend/src/components/DashboardItemProxy.tsx

@@ -31,7 +31,7 @@ export function DashboardItemProxy({
     queryFn: fetchData,
     refetchOnWindowFocus: autoupdate
   });
-  const [dashdata, setDashData] = useState({ title: t`Title`, value: '000' });
+  const [dashData, setDashData] = useState({ title: t`Title`, value: '000' });
 
   useEffect(() => {
     if (data) {
@@ -44,7 +44,7 @@ export function DashboardItemProxy({
     <div key={id}>
       <StatisticItem
         id={id}
-        data={dashdata}
+        data={dashData}
         isLoading={isLoading || isFetching}
       />
     </div>

src/frontend/src/components/buttons/AdminButton.tsx

@@ -1,11 +1,8 @@
 import { t } from '@lingui/macro';
 import { IconUserStar } from '@tabler/icons-react';
 import { useCallback, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import { ModelType } from '../../enums/ModelType';
-import { navigateToLink } from '../../functions/navigation';
-import { base_url } from '../../main';
 import { useLocalState } from '../../states/LocalState';
 import { useUserState } from '../../states/UserState';
 import { ModelInformationDict } from '../render/ModelType';

src/frontend/src/components/buttons/PrintingActions.tsx

@@ -2,7 +2,7 @@ import { t } from '@lingui/macro';
 import { notifications } from '@mantine/notifications';
 import { IconPrinter, IconReport, IconTags } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { api } from '../../App';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';

src/frontend/src/components/details/DetailsImage.tsx

@@ -85,7 +85,7 @@ function UploadModal({
   apiPath: string;
   setImage: (image: string) => void;
 }) {
-  const [file1, setFile] = useState<FileWithPath | null>(null);
+  const [currentFile, setCurrentFile] = useState<FileWithPath | null>(null);
   let uploading = false;
 
   // Components to show in the Dropzone when no file is selected
@@ -168,7 +168,7 @@ function UploadModal({
   return (
     <Paper style={{ height: '220px' }}>
       <Dropzone
-        onDrop={(files) => setFile(files[0])}
+        onDrop={(files) => setCurrentFile(files[0])}
         maxFiles={1}
         accept={IMAGE_MIME_TYPE}
         loading={uploading}
@@ -198,7 +198,9 @@ function UploadModal({
               }}
             />
           </Dropzone.Reject>
-          <Dropzone.Idle>{file1 ? fileInfo(file1) : noFileIdle}</Dropzone.Idle>
+          <Dropzone.Idle>
+            {currentFile ? fileInfo(currentFile) : noFileIdle}
+          </Dropzone.Idle>
         </Group>
       </Dropzone>
       <Paper
@@ -218,12 +220,15 @@ function UploadModal({
       >
         <Button
           variant="outline"
-          disabled={!file1}
-          onClick={() => setFile(null)}
+          disabled={!currentFile}
+          onClick={() => setCurrentFile(null)}
         >
           <Trans>Clear</Trans>
         </Button>
-        <Button disabled={!file1} onClick={() => uploadImage(file1)}>
+        <Button
+          disabled={!currentFile}
+          onClick={() => uploadImage(currentFile)}
+        >
           <Trans>Submit</Trans>
         </Button>
       </Paper>
@@ -354,31 +359,27 @@ export function DetailsImage(props: Readonly<DetailImageProps>) {
   };
 
   return (
-    <>
-      <AspectRatio ref={ref} maw={IMAGE_DIMENSION} ratio={1} pos="relative">
-        <>
-          <ApiImage
-            src={img}
-            mah={IMAGE_DIMENSION}
-            maw={IMAGE_DIMENSION}
-            onClick={expandImage}
-          />
-          {permissions.hasChangeRole(props.appRole) &&
-            hasOverlay &&
-            hovered && (
-              <Overlay color="black" opacity={0.8} onClick={expandImage}>
-                <ImageActionButtons
-                  visible={hovered}
-                  actions={props.imageActions}
-                  apiPath={props.apiPath}
-                  hasImage={props.src ? true : false}
-                  pk={props.pk}
-                  setImage={setAndRefresh}
-                />
-              </Overlay>
-            )}
-        </>
-      </AspectRatio>
-    </>
+    <AspectRatio ref={ref} maw={IMAGE_DIMENSION} ratio={1} pos="relative">
+      <>
+        <ApiImage
+          src={img}
+          mah={IMAGE_DIMENSION}
+          maw={IMAGE_DIMENSION}
+          onClick={expandImage}
+        />
+        {permissions.hasChangeRole(props.appRole) && hasOverlay && hovered && (
+          <Overlay color="black" opacity={0.8} onClick={expandImage}>
+            <ImageActionButtons
+              visible={hovered}
+              actions={props.imageActions}
+              apiPath={props.apiPath}
+              hasImage={props.src ? true : false}
+              pk={props.pk}
+              setImage={setAndRefresh}
+            />
+          </Overlay>
+        )}
+      </>
+    </AspectRatio>
   );
 }

src/frontend/src/components/errors/GenericErrorPage.tsx

@@ -1,7 +1,6 @@
 import { Trans } from '@lingui/macro';
 import {
   ActionIcon,
-  Alert,
   Button,
   Card,
   Center,

src/frontend/src/components/forms/fields/ApiFormField.tsx

@@ -1,15 +1,7 @@
 import { t } from '@lingui/macro';
-import {
-  Alert,
-  FileInput,
-  NumberInput,
-  Stack,
-  Switch,
-  TextInput
-} from '@mantine/core';
+import { Alert, FileInput, NumberInput, Stack, Switch } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { useId } from '@mantine/hooks';
-import { IconX } from '@tabler/icons-react';
 import { ReactNode, useCallback, useEffect, useMemo } from 'react';
 import { Control, FieldValues, useController } from 'react-hook-form';
 

src/frontend/src/components/forms/fields/TableField.tsx

@@ -1,5 +1,5 @@
 import { Trans, t } from '@lingui/macro';
-import { Container, Flex, Group, Table } from '@mantine/core';
+import { Container, Group, Table } from '@mantine/core';
 import { useEffect, useMemo } from 'react';
 import { FieldValues, UseControllerReturn } from 'react-hook-form';
 

src/frontend/src/components/importer/ImporterImportProgress.tsx

@@ -29,18 +29,16 @@ export default function ImporterImportProgress({
   }, []);
 
   return (
-    <>
-      <Center>
-        <Container>
-          <Stack gap="xs">
-            <StylishText size="lg">{t`Importing Records`}</StylishText>
-            <Loader />
-            <Text size="lg">
-              {t`Imported rows`}: {session.sessionData.row_count}
-            </Text>
-          </Stack>
-        </Container>
-      </Center>
-    </>
+    <Center>
+      <Container>
+        <Stack gap="xs">
+          <StylishText size="lg">{t`Importing Records`}</StylishText>
+          <Loader />
+          <Text size="lg">
+            {t`Imported rows`}: {session.sessionData.row_count}
+          </Text>
+        </Stack>
+      </Container>
+    </Center>
   );
 }

src/frontend/src/components/items/GettingStartedCarousel.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro';
 import { Carousel } from '@mantine/carousel';
-import { Anchor, Button, Paper, Text, Title, rem } from '@mantine/core';
+import { Anchor, Button, Paper, Text, Title } from '@mantine/core';
 
 import { DocumentationLinkItem } from './DocumentationLinks';
 import * as classes from './GettingStartedCarousel.css';

src/frontend/src/components/modals/QrCodeModal.tsx

@@ -35,7 +35,7 @@ export function QrCodeModal({
     key: 'camId',
     defaultValue: null
   });
-  const [ScanningEnabled, setIsScanning] = useState<boolean>(false);
+  const [scanningEnabled, setScanningEnabled] = useState<boolean>(false);
   const [wasAutoPaused, setWasAutoPaused] = useState<boolean>(false);
   const documentState = useDocumentVisibility();
 
@@ -48,7 +48,7 @@ export function QrCodeModal({
 
   // Stop/star when leaving or reentering page
   useEffect(() => {
-    if (ScanningEnabled && documentState === 'hidden') {
+    if (scanningEnabled && documentState === 'hidden') {
       stopScanning();
       setWasAutoPaused(true);
     } else if (wasAutoPaused && documentState === 'visible') {
@@ -128,12 +128,12 @@ export function QrCodeModal({
             icon: <IconX />
           });
         });
-      setIsScanning(true);
+      setScanningEnabled(true);
     }
   }
 
   function stopScanning() {
-    if (qrCodeScanner && ScanningEnabled) {
+    if (qrCodeScanner && scanningEnabled) {
       qrCodeScanner.stop().catch((err: string) => {
         showNotification({
           title: t`Error while stopping`,
@@ -142,7 +142,7 @@ export function QrCodeModal({
           icon: <IconX />
         });
       });
-      setIsScanning(false);
+      setScanningEnabled(false);
     }
   }
 
@@ -151,7 +151,7 @@ export function QrCodeModal({
       <Group>
         <Text size="sm">{camId?.label}</Text>
         <Space style={{ flex: 1 }} />
-        <Badge>{ScanningEnabled ? t`Scanning` : t`Not scanning`}</Badge>
+        <Badge>{scanningEnabled ? t`Scanning` : t`Not scanning`}</Badge>
       </Group>
       <Container px={0} id="reader" w={'100%'} mih="300px" />
       {!camId ? (
@@ -164,14 +164,14 @@ export function QrCodeModal({
             <Button
               style={{ flex: 1 }}
               onClick={() => startScanning()}
-              disabled={camId != undefined && ScanningEnabled}
+              disabled={camId != undefined && scanningEnabled}
             >
               <Trans>Start scanning</Trans>
             </Button>
             <Button
               style={{ flex: 1 }}
               onClick={() => stopScanning()}
-              disabled={!ScanningEnabled}
+              disabled={!scanningEnabled}
             >
               <Trans>Stop scanning</Trans>
             </Button>

src/frontend/src/components/nav/NotificationDrawer.tsx

@@ -7,7 +7,6 @@ import {
   Drawer,
   Group,
   Loader,
-  LoadingOverlay,
   Space,
   Stack,
   Text,

src/frontend/src/components/render/Instance.tsx

@@ -1,6 +1,6 @@
 import { t } from '@lingui/macro';
 import { Alert, Anchor, Group, Skeleton, Space, Text } from '@mantine/core';
-import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { ReactNode, useCallback } from 'react';
 
 import { api } from '../../App';

src/frontend/src/components/render/Part.tsx

@@ -15,7 +15,7 @@ export function RenderPart(
   const { instance } = props;
 
   let badgeText = '';
-  let badgeColor = 'green';
+  let badgeColor = '';
 
   let stock = instance.total_in_stock;
 

src/frontend/src/forms/BuildForms.tsx

@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro';
-import { ActionIcon, Alert, Stack, Text } from '@mantine/core';
+import { Alert, Stack, Text } from '@mantine/core';
 import {
   IconCalendar,
   IconLink,

src/frontend/src/forms/PurchaseOrderForms.tsx

@@ -33,10 +33,7 @@ import {
   ApiFormAdjustFilterType,
   ApiFormFieldSet
 } from '../components/forms/fields/ApiFormField';
-import {
-  TableField,
-  TableFieldExtraRow
-} from '../components/forms/fields/TableField';
+import { TableFieldExtraRow } from '../components/forms/fields/TableField';
 import { Thumbnail } from '../components/images/Thumbnail';
 import { ProgressBar } from '../components/items/ProgressBar';
 import { StylishText } from '../components/items/StylishText';

src/frontend/src/forms/StockForms.tsx

@@ -7,13 +7,10 @@ import { Suspense, useCallback, useMemo, useState } from 'react';
 
 import { api } from '../App';
 import { ActionButton } from '../components/buttons/ActionButton';
-import { StandaloneField } from '../components/forms/StandaloneField';
 import {
   ApiFormAdjustFilterType,
-  ApiFormField,
   ApiFormFieldSet
 } from '../components/forms/fields/ApiFormField';
-import { ChoiceField } from '../components/forms/fields/ChoiceField';
 import { TableFieldExtraRow } from '../components/forms/fields/TableField';
 import { Thumbnail } from '../components/images/Thumbnail';
 import { StylishText } from '../components/items/StylishText';

src/frontend/src/hooks/UseImportSession.tsx

@@ -1,8 +1,6 @@
 import { useCallback, useMemo } from 'react';
 
-import { api } from '../App';
 import { ApiEndpoints } from '../enums/ApiEndpoints';
-import { apiUrl } from '../states/ApiState';
 import { useInstance } from './UseInstance';
 
 /*

src/frontend/src/hooks/UseInstance.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { api } from '../App';
 import { ApiEndpoints } from '../enums/ApiEndpoints';

src/frontend/src/pages/Auth/Logged-In.tsx

@@ -14,21 +14,19 @@ export default function Logged_In() {
   }, [navigate]);
 
   return (
-    <>
-      <Container>
-        <Stack align="center">
-          <Card shadow="sm" padding="lg" radius="md">
-            <Stack>
-              <Text size="lg">
-                <Trans>Checking if you are already logged in</Trans>
-              </Text>
-              <Group justify="center">
-                <Loader />
-              </Group>
-            </Stack>
-          </Card>
-        </Stack>
-      </Container>
-    </>
+    <Container>
+      <Stack align="center">
+        <Card shadow="sm" padding="lg" radius="md">
+          <Stack>
+            <Text size="lg">
+              <Trans>Checking if you are already logged in</Trans>
+            </Text>
+            <Group justify="center">
+              <Loader />
+            </Group>
+          </Stack>
+        </Card>
+      </Stack>
+    </Container>
   );
 }