fix: fix breaking tab component

- move active tab state from componentDidMount to constructor
- fix toggle.tsx breaking tsc
- add .prettierrc.js for consistent formatting

3 files changed, 30 insertions, 23 deletions

diff --git a/.prettierrc.js b/.prettierrc.js
new file mode 100644
index 000000000..6db0775a3
--- /dev/null
+++ b/.prettierrc.js
@@ -0,0 +1,4 @@
+module.exports = {
+  singleQuote: true,
+  arrowParens: 'avoid'
+};
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx
index d84508a5f..ea335f281 100644
--- a/packages/forms/src/toggle/index.tsx
+++ b/packages/forms/src/toggle/index.tsx
@@ -10,7 +10,10 @@ import { Error } from '../error';
 import { Label } from '../label';
 import { Wrapper } from '../wrapper';
 
-interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField, IWithStyle {
+interface IProps
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    IFormField,
+    IWithStyle {
   className?: string;
 }
 
@@ -35,7 +38,7 @@ const styles = (theme: Theme) => ({
   },
   buttonActive: {
     background: theme.toggleButtonActive,
-    left: (theme.toggleWidth - theme.toggleHeight) + 1,
+    left: theme.toggleWidth - theme.toggleHeight + 1,
   },
   input: {
     visibility: 'hidden' as any,
@@ -77,27 +80,28 @@ class ToggleComponent extends Component<IProps> {
     } = this.props;
 
     return (
-      <Wrapper
-        className={className}
-        identifier="franz-toggle"
-      >
+      <Wrapper className={className} identifier="franz-toggle">
         <Label
           title={label}
           showLabel={showLabel}
           htmlFor={id}
           className={classes.toggleLabel}
         >
-          <div className={classnames({
-            [`${classes.toggle}`]: true,
-            [`${classes.disabled}`]: disabled,
-          })}>
-            <div className={classnames({
-              [`${classes.button}`]: true,
-              [`${classes.buttonActive}`]: checked,
-            })} />
+          <div
+            className={classnames({
+              [`${classes.toggle}`]: true,
+              [`${classes.disabled}`]: disabled,
+            })}
+          >
+            <div
+              className={classnames({
+                [`${classes.button}`]: true,
+                [`${classes.buttonActive}`]: checked,
+              })}
+            />
             <input
               className={classes.input}
-              id={id || name}
+              id={id}
               type="checkbox"
               checked={checked}
               value={value}
@@ -106,9 +110,7 @@ class ToggleComponent extends Component<IProps> {
             />
           </div>
         </Label>
-        {error && (
-          <Error message={error} />
-        )}
+        {error && <Error message={error} />}
       </Wrapper>
     );
   }
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.js
index 7ece29fbe..e68dc3a1d 100644
--- a/src/components/ui/Tabs/Tabs.js
+++ b/src/components/ui/Tabs/Tabs.js
@@ -8,6 +8,11 @@ import { oneOrManyChildElements } from '../../../prop-types';
 export default
 @observer
 class Tab extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { active: this.props.active };
+  }
+
   static propTypes = {
     children: oneOrManyChildElements.isRequired,
     active: PropTypes.number,
@@ -17,17 +22,13 @@ class Tab extends Component {
     active: 0,
   };
 
-  componentDidMount() {
-    this.setState({ active: this.props.active });
-  }
-
   switchTab(index) {
     this.setState({ active: index });
   }
 
   render() {
     const { children: childElements } = this.props;
-    const children = childElements.filter((c) => !!c);
+    const children = childElements.filter(c => !!c);
 
     if (children.length === 1) {
       return <div>{children}</div>;