🔨 Switch CodeFormatting to use useOvermind (#3073)

🔨 Switch CodeFormatting to use useOvermind

Author: christianalfoni

packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/Prettier/index.tsx

@@ -1,4 +1,5 @@
 import React, { FunctionComponent } from 'react';
+
 import { useOvermind } from 'app/overmind';
 
 import {
@@ -9,107 +10,112 @@ import {
   Rule,
 } from '../../elements';
 
-const PrettierComponent: FunctionComponent = () => {
+export const Prettier: FunctionComponent = () => {
   const {
+    actions: {
+      preferences: { settingChanged },
+    },
     state: {
       preferences: {
         settings: { prettierConfig },
       },
     },
-    actions: {
-      preferences: { settingChanged },
-    },
   } = useOvermind();
 
-  const bindValue = name => ({
-    value: prettierConfig[name],
+  const bindValue = (name: string) => ({
     setValue: value =>
-      settingChanged({
-        name: `prettierConfig.${name}`,
-        value,
-      }),
+      settingChanged({ name: `prettierConfig.${name}`, value }),
+    value: prettierConfig[name],
   });
 
-  const { fluid } = prettierConfig;
   return (
     <SubContainer>
       <PreferenceContainer>
         <SubDescription>
           This configuration can be overridden by a{' '}
           <a
             href="https://prettier.io/docs/en/configuration.html"
-            target="_blank"
             rel="noopener noreferrer"
+            target="_blank"
           >
             .prettierrc
           </a>{' '}
           JSON file at the root of the sandbox.
         </SubDescription>
+
         <Rule />
+
         <PaddedPreference
           title="Fluid print width"
           type="boolean"
           {...bindValue('fluid')}
         />
+
         <SubDescription>
           Wrap the code based on the editor width.
         </SubDescription>
+
         <Rule />
+
         <PaddedPreference
-          style={{
-            opacity: fluid ? 0.5 : 1,
-          }}
+          style={{ opacity: prettierConfig.fluid ? 0.5 : 1 }}
           title="Print width"
           type="number"
           {...bindValue('printWidth')}
         />
-        <SubDescription
-          style={{
-            opacity: fluid ? 0.5 : 1,
-          }}
-        >
+
+        <SubDescription style={{ opacity: prettierConfig.fluid ? 0.5 : 1 }}>
           Specify the line length that the printer will wrap on.
         </SubDescription>
+
         <Rule />
 
         <PaddedPreference
           title="Tab width"
           type="number"
           {...bindValue('tabWidth')}
         />
+
         <SubDescription>
           Specify the number of spaces per indentation-level.
         </SubDescription>
+
         <Rule />
 
         <PaddedPreference
           title="Use tabs"
           type="boolean"
           {...bindValue('useTabs')}
         />
+
         <SubDescription>
           Indent lines with tabs instead of spaces.
         </SubDescription>
+
         <Rule />
 
         <PaddedPreference
           title="Semicolons"
           type="boolean"
           {...bindValue('semi')}
         />
+
         <SubDescription>
           Print semicolons at the ends of statements.
         </SubDescription>
+
         <Rule />
 
         <PaddedPreference
           title="Use single quotes"
           type="boolean"
           {...bindValue('singleQuote')}
         />
+
         <SubDescription>
           Use {"'"}single{"'"} quotes instead of {'"'}double{'"'} quotes.
         </SubDescription>
+
         <Rule />
 
         <PaddedPreference
@@ -118,43 +124,49 @@ const PrettierComponent: FunctionComponent = () => {
           options={['none', 'es5', 'all']}
           {...bindValue('trailingComma')}
         />
+
         <SubDescription>
           Print trailing commas wherever possible.
         </SubDescription>
+
         <Rule />
 
         <PaddedPreference
           title="Bracket spacing"
           type="boolean"
           {...bindValue('bracketSpacing')}
         />
+
         <SubDescription>
           Print spaces between brackets in object literals.
         </SubDescription>
+
         <Rule />
 
         <PaddedPreference
           title="JSX Brackets"
           type="boolean"
           {...bindValue('jsxBracketSameLine')}
         />
+
         <SubDescription>
           Put the `{'>'}` of a multi-line JSX element at the end of the last
           line instead of being alone on the next line.
         </SubDescription>
+
         <Rule />
+
         <PaddedPreference
+          options={['avoid', 'always']}
           title="Arrow Function Parentheses"
           type="dropdown"
-          options={['avoid', 'always']}
           {...bindValue('arrowParens')}
         />
+
         <SubDescription>
           Include parentheses around a sole arrow function parameter.
         </SubDescription>
       </PreferenceContainer>
     </SubContainer>
   );
 };
-
-export const Prettier = PrettierComponent;

packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/elements.ts

@@ -0,0 +1,6 @@
+import QuestionBase from 'react-icons/lib/go/question';
+import styled from 'styled-components';
+
+export const Question = styled(QuestionBase)`
+  margin-bottom: 3px;
+`;

packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/index.tsx

@@ -1,9 +1,9 @@
 import React, { FunctionComponent } from 'react';
 
-import Question from 'react-icons/lib/go/question';
+import { Title } from '../elements';
 
+import { Question } from './elements';
 import { Prettier } from './Prettier';
-import { Title } from '../elements';
 
 export const CodeFormatting: FunctionComponent = () => (
   <div>
@@ -14,7 +14,7 @@ export const CodeFormatting: FunctionComponent = () => (
         target="_blank"
         rel="noopener noreferrer"
       >
-        <Question style={{ marginBottom: '3px' }} />
+        <Question />
       </a>
     </Title>