React 18 and Vite (#4510)

resources/scripts/components/server/startup/StartupContainer.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import * as React from 'react';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import tw from 'twin.macro';
 import VariableBox from '@/components/server/startup/VariableBox';
@@ -20,14 +21,14 @@ const StartupContainer = () => {
     const [loading, setLoading] = useState(false);
     const { clearFlashes, clearAndAddHttpError } = useFlash();
 
-    const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const variables = ServerContext.useStoreState(
         ({ server }) => ({
             variables: server.data!.variables,
             invocation: server.data!.invocation,
             dockerImage: server.data!.dockerImage,
         }),
-        isEqual
+        isEqual,
     );
 
     const { data, error, isValidating, mutate } = getServerStartup(uuid, {
@@ -35,11 +36,11 @@ const StartupContainer = () => {
         dockerImages: { [variables.dockerImage]: variables.dockerImage },
     });
 
-    const setServerFromState = ServerContext.useStoreActions((actions) => actions.server.setServerFromState);
+    const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
     const isCustomImage =
         data &&
         !Object.values(data.dockerImages)
-            .map((v) => v.toLowerCase())
+            .map(v => v.toLowerCase())
             .includes(variables.dockerImage.toLowerCase());
 
     useEffect(() => {
@@ -52,7 +53,7 @@ const StartupContainer = () => {
     useDeepCompareEffect(() => {
         if (!data) return;
 
-        setServerFromState((s) => ({
+        setServerFromState(s => ({
             ...s,
             invocation: data.invocation,
             variables: data.variables,
@@ -66,14 +67,14 @@ const StartupContainer = () => {
 
             const image = v.currentTarget.value;
             setSelectedDockerImage(uuid, image)
-                .then(() => setServerFromState((s) => ({ ...s, dockerImage: image })))
-                .catch((error) => {
+                .then(() => setServerFromState(s => ({ ...s, dockerImage: image })))
+                .catch(error => {
                     console.error(error);
                     clearAndAddHttpError({ key: 'startup:image', error });
                 })
                 .then(() => setLoading(false));
         },
-        [uuid]
+        [uuid],
     );
 
     return !data ? (
@@ -99,7 +100,7 @@ const StartupContainer = () => {
                                     onChange={updateSelectedDockerImage}
                                     defaultValue={variables.dockerImage}
                                 >
-                                    {Object.keys(data.dockerImages).map((key) => (
+                                    {Object.keys(data.dockerImages).map(key => (
                                         <option key={data.dockerImages[key]} value={data.dockerImages[key]}>
                                             {key}
                                         </option>
@@ -126,7 +127,7 @@ const StartupContainer = () => {
             </div>
             <h3 css={tw`mt-8 mb-2 text-2xl`}>Variables</h3>
             <div css={tw`grid gap-8 md:grid-cols-2`}>
-                {data.variables.map((variable) => (
+                {data.variables.map(variable => (
                     <VariableBox key={variable.envVariable} variable={variable} />
                 ))}
             </div>