Merge branch 'update-typescript-react-and-related-dependencies-868'

16 files changed, 50 insertions, 46 deletions

diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index e62d65358e..e0655707c2 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -554,9 +554,8 @@ export default class AppRenderer {
   }
 
   public setPreferredLocale = async (preferredLocale: string): Promise<void> => {
-    const translations = await IpcRendererEventChannel.guiSettings.setPreferredLocale(
-      preferredLocale,
-    );
+    const translations =
+      await IpcRendererEventChannel.guiSettings.setPreferredLocale(preferredLocale);
 
     // set current locale
     this.setLocale(translations.locale);
diff --git a/gui/src/renderer/components/CustomDnsSettings.tsx b/gui/src/renderer/components/CustomDnsSettings.tsx
index 6b8024c9e2..35acb88a6c 100644
--- a/gui/src/renderer/components/CustomDnsSettings.tsx
+++ b/gui/src/renderer/components/CustomDnsSettings.tsx
@@ -325,10 +325,10 @@ function CellListItem(props: ICellListItemProps) {
 
   const inputContainerRef = useStyledRef<HTMLDivElement>();
 
-  const onRemove = useCallback(() => props.onRemove(props.children), [
-    props.onRemove,
-    props.children,
-  ]);
+  const onRemove = useCallback(
+    () => props.onRemove(props.children),
+    [props.onRemove, props.children],
+  );
 
   const onSubmit = useCallback(
     async (value: string) => {
diff --git a/gui/src/renderer/components/EditApiAccessMethod.tsx b/gui/src/renderer/components/EditApiAccessMethod.tsx
index 2c53842543..97996d7f42 100644
--- a/gui/src/renderer/components/EditApiAccessMethod.tsx
+++ b/gui/src/renderer/components/EditApiAccessMethod.tsx
@@ -146,8 +146,8 @@ function TestingDialog(props: TestingDialogProps) {
   const type = props.testing
     ? ModalAlertType.loading
     : props.testResult
-    ? ModalAlertType.success
-    : ModalAlertType.failure;
+      ? ModalAlertType.success
+      : ModalAlertType.failure;
   const prevType = useRef<ModalAlertType>(type);
 
   const isOpen = props.testing || props.testResult !== undefined;
diff --git a/gui/src/renderer/components/ExpiredAccountErrorView.tsx b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
index 3049ba8075..2784f64cd2 100644
--- a/gui/src/renderer/components/ExpiredAccountErrorView.tsx
+++ b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
@@ -215,10 +215,8 @@ function ExternalPaymentButton() {
 }
 
 function BlockWhenDisconnectedAlert() {
-  const {
-    showBlockWhenDisconnectedAlert,
-    setShowBlockWhenDisconnectedAlert,
-  } = useExpiredAccountContext();
+  const { showBlockWhenDisconnectedAlert, setShowBlockWhenDisconnectedAlert } =
+    useExpiredAccountContext();
   const { setBlockWhenDisconnected } = useAppContext();
   const blockWhenDisconnected = useSelector((state) => state.settings.blockWhenDisconnected);
 
diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx
index 98502a6346..d0f2bde6ef 100644
--- a/gui/src/renderer/components/HeaderBar.tsx
+++ b/gui/src/renderer/components/HeaderBar.tsx
@@ -121,8 +121,8 @@ function HeaderBarDeviceInfo() {
   const formattedExpiry = isOutOfTime
     ? sprintf(messages.ngettext('1 day', '%d days', 0), 0)
     : accountExpiry
-    ? formatRemainingTime(accountExpiry)
-    : '';
+      ? formatRemainingTime(accountExpiry)
+      : '';
 
   return (
     <StyledAccountInfo>
diff --git a/gui/src/renderer/components/NotificationArea.tsx b/gui/src/renderer/components/NotificationArea.tsx
index 79c234f71f..ebd87b58b7 100644
--- a/gui/src/renderer/components/NotificationArea.tsx
+++ b/gui/src/renderer/components/NotificationArea.tsx
@@ -208,9 +208,7 @@ function NotificationActionWrapper(props: INotificationActionWrapperProps) {
         <ModalMessage>{troubleshootInfo?.details}</ModalMessage>
         <ModalMessage>
           <ModalMessageList>
-            {troubleshootInfo?.steps.map((step) => (
-              <li key={step}>{step}</li>
-            ))}
+            {troubleshootInfo?.steps.map((step) => <li key={step}>{step}</li>)}
           </ModalMessageList>
         </ModalMessage>
         <ModalMessage>
diff --git a/gui/src/renderer/components/Settings.tsx b/gui/src/renderer/components/Settings.tsx
index 34fb3eb0c1..211679a76c 100644
--- a/gui/src/renderer/components/Settings.tsx
+++ b/gui/src/renderer/components/Settings.tsx
@@ -166,10 +166,10 @@ function AppVersionButton() {
   const isOffline = useSelector((state) => state.connection.isBlocked);
 
   const { openUrl } = useAppContext();
-  const openDownloadLink = useCallback(() => openUrl(getDownloadUrl(suggestedIsBeta)), [
-    openUrl,
-    suggestedIsBeta,
-  ]);
+  const openDownloadLink = useCallback(
+    () => openUrl(getDownloadUrl(suggestedIsBeta)),
+    [openUrl, suggestedIsBeta],
+  );
 
   let icon;
   let footer;
diff --git a/gui/src/renderer/components/SettingsImport.tsx b/gui/src/renderer/components/SettingsImport.tsx
index 3f3cc5dd1f..d93064ff2e 100644
--- a/gui/src/renderer/components/SettingsImport.tsx
+++ b/gui/src/renderer/components/SettingsImport.tsx
@@ -55,9 +55,8 @@ export default function SettingsImport() {
     showOpenDialog,
     getPathBaseName,
   } = useAppContext();
-  const { clearSettingsImportForm, unsetSubmitSettingsImportForm } = useActions(
-    settingsImportActions,
-  );
+  const { clearSettingsImportForm, unsetSubmitSettingsImportForm } =
+    useActions(settingsImportActions);
 
   // Status of the text form which is used to for example submit it.
   const textForm = useSelector((state) => state.settingsImport);
diff --git a/gui/src/renderer/components/TransitionContainer.tsx b/gui/src/renderer/components/TransitionContainer.tsx
index 3e7007e3c8..1df9b097c5 100644
--- a/gui/src/renderer/components/TransitionContainer.tsx
+++ b/gui/src/renderer/components/TransitionContainer.tsx
@@ -98,8 +98,10 @@ export default class TransitionContainer extends React.Component<IProps, IState>
   private isCycling = false;
   private isTransitioning = false;
 
-  private currentContentRef: React.MutableRefObject<HTMLDivElement | null> = React.createRef<HTMLDivElement>();
-  private nextContentRef: React.MutableRefObject<HTMLDivElement | null> = React.createRef<HTMLDivElement>();
+  private currentContentRef: React.MutableRefObject<HTMLDivElement | null> =
+    React.createRef<HTMLDivElement>();
+  private nextContentRef: React.MutableRefObject<HTMLDivElement | null> =
+    React.createRef<HTMLDivElement>();
   // The item that should trigger the cycle to finish in onTransitionEnd
   private transitioningItemRef?: React.RefObject<HTMLDivElement>;
 
diff --git a/gui/src/renderer/components/VpnSettings.tsx b/gui/src/renderer/components/VpnSettings.tsx
index 395d1ba183..951b17a567 100644
--- a/gui/src/renderer/components/VpnSettings.tsx
+++ b/gui/src/renderer/components/VpnSettings.tsx
@@ -588,9 +588,8 @@ function LockdownMode() {
   const blockWhenDisconnected = useSelector((state) => state.settings.blockWhenDisconnected);
   const { setBlockWhenDisconnected: setBlockWhenDisconnectedImpl } = useAppContext();
 
-  const [confirmationDialogVisible, showConfirmationDialog, hideConfirmationDialog] = useBoolean(
-    false,
-  );
+  const [confirmationDialogVisible, showConfirmationDialog, hideConfirmationDialog] =
+    useBoolean(false);
 
   const setBlockWhenDisconnected = useCallback(
     async (blockWhenDisconnected: boolean) => {
diff --git a/gui/src/renderer/components/cell/CellButton.tsx b/gui/src/renderer/components/cell/CellButton.tsx
index b0079226f3..cc7a6e1015 100644
--- a/gui/src/renderer/components/cell/CellButton.tsx
+++ b/gui/src/renderer/components/cell/CellButton.tsx
@@ -16,8 +16,8 @@ const StyledCellButton = styled(Row)<IStyledCellButtonProps>((props) => {
   const backgroundColor = props.$selected
     ? colors.green
     : props.$containedInSection
-    ? colors.blue40
-    : colors.blue;
+      ? colors.blue40
+      : colors.blue;
   const backgroundColorHover = props.$selected ? colors.green : colors.blue80;
 
   return {
diff --git a/gui/src/renderer/components/cell/SettingsTextInput.tsx b/gui/src/renderer/components/cell/SettingsTextInput.tsx
index 6d4c22dcbb..1727997dc4 100644
--- a/gui/src/renderer/components/cell/SettingsTextInput.tsx
+++ b/gui/src/renderer/components/cell/SettingsTextInput.tsx
@@ -73,7 +73,7 @@ export function SettingsNumberInput(props: SettingsNumberInputProps) {
 type ValueTypes = 'text' | 'number';
 type ValueType<T extends ValueTypes> = T extends 'number' ? number | '' : string;
 
-interface InputProps<T extends ValueTypes> extends React.HTMLAttributes<HTMLInputElement> {
+interface InputProps<T extends ValueTypes> extends React.InputHTMLAttributes<HTMLInputElement> {
   type?: T;
   value?: ValueType<T>;
   defaultValue?: ValueType<T>;
diff --git a/gui/src/renderer/components/select-location/CustomLists.tsx b/gui/src/renderer/components/select-location/CustomLists.tsx
index ca4638360c..eafcb161b2 100644
--- a/gui/src/renderer/components/select-location/CustomLists.tsx
+++ b/gui/src/renderer/components/select-location/CustomLists.tsx
@@ -57,9 +57,10 @@ const StyledSideButtonIcon = styled(Cell.Icon)({
     backgroundColor: colors.white40,
   },
 
-  [`${StyledCellButton}:not(:disabled):hover &&, ${StyledAddListCellButton}:not(:disabled):hover &&`]: {
-    backgroundColor: colors.white,
-  },
+  [`${StyledCellButton}:not(:disabled):hover &&, ${StyledAddListCellButton}:not(:disabled):hover &&`]:
+    {
+      backgroundColor: colors.white,
+    },
 });
 
 const StyledInput = styled(SimpleInput)<{ $error: boolean }>((props) => ({
diff --git a/gui/src/renderer/components/select-location/SelectLocation.tsx b/gui/src/renderer/components/select-location/SelectLocation.tsx
index 3f3535225e..f6cf772019 100644
--- a/gui/src/renderer/components/select-location/SelectLocation.tsx
+++ b/gui/src/renderer/components/select-location/SelectLocation.tsx
@@ -58,12 +58,8 @@ import {
 export default function SelectLocation() {
   const history = useHistory();
   const relaySettingsUpdater = useRelaySettingsUpdater();
-  const {
-    saveScrollPosition,
-    resetScrollPositions,
-    scrollViewRef,
-    spacePreAllocationViewRef,
-  } = useScrollPositionContext();
+  const { saveScrollPosition, resetScrollPositions, scrollViewRef, spacePreAllocationViewRef } =
+    useScrollPositionContext();
   const { locationType, setLocationType, setSearchTerm } = useSelectLocationContext();
   const { expandSearchResults } = useRelayListContext();
 
diff --git a/gui/src/renderer/lib/3dmap.ts b/gui/src/renderer/lib/3dmap.ts
index f74efcf5df..ec4def0744 100644
--- a/gui/src/renderer/lib/3dmap.ts
+++ b/gui/src/renderer/lib/3dmap.ts
@@ -82,7 +82,10 @@ export interface Coordinate {
 }
 
 class Vector {
-  public constructor(public x: number, public y: number) {}
+  public constructor(
+    public x: number,
+    public y: number,
+  ) {}
 
   public static fromCoordinate(coordinate: Coordinate): Vector {
     return new Vector(coordinate.latitude, coordinate.longitude);
@@ -138,7 +141,10 @@ class Globe {
 
   private programInfo: ProgramInfo;
 
-  public constructor(private gl: WebGL2RenderingContext, data: MapData) {
+  public constructor(
+    private gl: WebGL2RenderingContext,
+    data: MapData,
+  ) {
     this.landVertexBuffer = initArrayBuffer(gl, data.landPositions);
     this.oceanVertexBuffer = initArrayBuffer(gl, data.oceanPositions);
 
@@ -240,7 +246,10 @@ class LocationMarker {
   private positionBuffer: WebGLBuffer;
   private colorBuffer: WebGLBuffer;
 
-  public constructor(private gl: WebGL2RenderingContext, color: ColorRgb) {
+  public constructor(
+    private gl: WebGL2RenderingContext,
+    color: ColorRgb,
+  ) {
     const white: ColorRgb = [1.0, 1.0, 1.0];
     const black: ColorRgb = [0.0, 0.0, 0.0];
     const rings = [
diff --git a/gui/src/renderer/lib/ip.ts b/gui/src/renderer/lib/ip.ts
index 2f68b68d78..94eb807d49 100644
--- a/gui/src/renderer/lib/ip.ts
+++ b/gui/src/renderer/lib/ip.ts
@@ -23,7 +23,10 @@ export abstract class IpAddress<G extends number[]> {
 
 // Abstract class representing an IP range or subnet
 export abstract class IpRange<G extends number[]> {
-  public constructor(public readonly groups: G, public readonly prefixSize: number) {}
+  public constructor(
+    public readonly groups: G,
+    public readonly prefixSize: number,
+  ) {}
 
   // Returns whether or not this subnet includes the provided IP
   protected includes<T extends IpAddress<G>>(ip: T, groupSize: number): boolean {