Apply prettier to AdvancedOptionsMenu, ConfigElement

Author: shepmaster

ui/frontend/.prettierignore

@@ -12,8 +12,10 @@ node_modules
 *.scss
 
 # Slowly migrate files that we've touched
+!AdvancedOptionsMenu.tsx
 !BuildMenu.tsx
 !ButtonSet.tsx
+!ConfigElement.tsx
 !Header.tsx
 !HelpExample.tsx
 !Notifications.tsx

ui/frontend/AdvancedOptionsMenu.tsx

@@ -1,11 +1,11 @@
 import React, { useCallback } from 'react';
 
-import * as config from './reducers/configuration';
 import { Either as EitherConfig, Select as SelectConfig } from './ConfigElement';
 import MenuGroup from './MenuGroup';
+import { useAppDispatch, useAppSelector } from './hooks';
+import * as config from './reducers/configuration';
 import * as selectors from './selectors';
 import { Backtrace, Edition } from './types';
-import { useAppDispatch, useAppSelector } from './hooks';
 
 const AdvancedOptionsMenu: React.FC = () => {
   const isEditionDefault = useAppSelector(selectors.isEditionDefault);
@@ -16,7 +16,10 @@ const AdvancedOptionsMenu: React.FC = () => {
   const dispatch = useAppDispatch();
 
   const changeEdition = useCallback((e: Edition) => dispatch(config.changeEdition(e)), [dispatch]);
-  const changeBacktrace = useCallback((b: Backtrace) => dispatch(config.changeBacktrace(b)), [dispatch]);
+  const changeBacktrace = useCallback(
+    (b: Backtrace) => dispatch(config.changeBacktrace(b)),
+    [dispatch],
+  );
 
   return (
     <MenuGroup title="Advanced options">
@@ -39,7 +42,8 @@ const AdvancedOptionsMenu: React.FC = () => {
         b={Backtrace.Enabled}
         value={backtrace}
         isNotDefault={isBacktraceSet}
-        onChange={changeBacktrace} />
+        onChange={changeBacktrace}
+      />
     </MenuGroup>
   );
 };

ui/frontend/ConfigElement.tsx

@@ -14,37 +14,54 @@ interface EitherProps<T extends string> extends ConfigElementProps {
   onChange: (_: T) => void;
 }
 
-export const Either =
-  <T extends string,>({ id, a, b, aLabel = a, bLabel = b, value, onChange, ...rest }: EitherProps<T>) => (
-    <ConfigElement {...rest}>
-      <div className={styles.toggle}>
-        <input id={`${id}-a`}
-          name={id}
-          value={a}
-          type="radio"
-          checked={value === a}
-          onChange={() => onChange(a as T)} />
-        <label htmlFor={`${id}-a`}>{aLabel}</label>
-        <input id={`${id}-b`}
-          name={id}
-          value={b}
-          type="radio"
-          checked={value === b}
-          onChange={() => onChange(b as T)} />
-        <label htmlFor={`${id}-b`}>{bLabel}</label>
-      </div>
-    </ConfigElement>
-  );
+export const Either = <T extends string>({
+  id,
+  a,
+  b,
+  aLabel = a,
+  bLabel = b,
+  value,
+  onChange,
+  ...rest
+}: EitherProps<T>) => (
+  <ConfigElement {...rest}>
+    <div className={styles.toggle}>
+      <input
+        id={`${id}-a`}
+        name={id}
+        value={a}
+        type="radio"
+        checked={value === a}
+        onChange={() => onChange(a as T)}
+      />
+      <label htmlFor={`${id}-a`}>{aLabel}</label>
+      <input
+        id={`${id}-b`}
+        name={id}
+        value={b}
+        type="radio"
+        checked={value === b}
+        onChange={() => onChange(b as T)}
+      />
+      <label htmlFor={`${id}-b`}>{bLabel}</label>
+    </div>
+  </ConfigElement>
+);
 
 interface SelectProps<T extends string> extends ConfigElementProps {
   children: React.ReactNode;
   value: T;
   onChange: (_: T) => void;
 }
 
-export const Select = <T extends string,>({ value, onChange, children, ...rest }: SelectProps<T>) => (
+export const Select = <T extends string>({
+  value,
+  onChange,
+  children,
+  ...rest
+}: SelectProps<T>) => (
   <ConfigElement {...rest}>
-    <select className={styles.select} value={value} onChange={e => onChange(e.target.value as T)}>
+    <select className={styles.select} value={value} onChange={(e) => onChange(e.target.value as T)}>
       {children}
     </select>
   </ConfigElement>
@@ -54,16 +71,14 @@ interface ConfigElementProps {
   children?: React.ReactNode;
   name: string;
   isNotDefault?: boolean;
-  aside?: JSX.Element,
+  aside?: JSX.Element;
 }
 
 const ConfigElement: React.FC<ConfigElementProps> = ({ name, isNotDefault, aside, children }) => (
   <MenuItem>
     <div className={styles.container}>
       <span className={isNotDefault ? styles.notDefault : styles.name}>{name}</span>
-      <div className={styles.value}>
-        {children}
-      </div>
+      <div className={styles.value}>{children}</div>
     </div>
     {aside}
   </MenuItem>