Refactor|Overmind: Refactor CodeFormatting/Prettier to useOvermind

Author: NileshPatel17

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { inject, observer } from 'app/componentConnectors';
+import React, { FunctionComponent } from 'react';
+import { useOvermind } from 'app/overmind';
 
 import {
   SubContainer,
@@ -9,16 +9,28 @@ import {
   Rule,
 } from '../../elements';
 
-function PrettierComponent({ store, signals }) {
+const PrettierComponent: FunctionComponent = () => {
+  const {
+    state: {
+      preferences: {
+        settings: { prettierConfig },
+      },
+    },
+    actions: {
+      preferences: { settingChanged },
+    },
+  } = useOvermind();
+
   const bindValue = name => ({
-    value: store.preferences.settings.prettierConfig[name],
+    value: prettierConfig[name],
     setValue: value =>
-      signals.preferences.settingChanged({
+      settingChanged({
         name: `prettierConfig.${name}`,
         value,
       }),
   });
 
+  const { fluid } = prettierConfig;
   return (
     <SubContainer>
       <PreferenceContainer>
@@ -45,15 +57,15 @@ function PrettierComponent({ store, signals }) {
         <Rule />
         <PaddedPreference
           style={{
-            opacity: store.preferences.settings.prettierConfig.fluid ? 0.5 : 1,
+            opacity: fluid ? 0.5 : 1,
           }}
           title="Print width"
           type="number"
           {...bindValue('printWidth')}
         />
         <SubDescription
           style={{
-            opacity: store.preferences.settings.prettierConfig.fluid ? 0.5 : 1,
+            opacity: fluid ? 0.5 : 1,
           }}
         >
           Specify the line length that the printer will wrap on.
@@ -143,6 +155,6 @@ function PrettierComponent({ store, signals }) {
       </PreferenceContainer>
     </SubContainer>
   );
-}
+};
 
-export const Prettier = inject('store', 'signals')(observer(PrettierComponent));
+export const Prettier = PrettierComponent;

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

@@ -0,0 +1,23 @@
+import React, { FunctionComponent } from 'react';
+
+import Question from 'react-icons/lib/go/question';
+
+import { Prettier } from './Prettier';
+import { Title } from '../elements';
+
+export const CodeFormatting: FunctionComponent = () => (
+  <div>
+    <Title>
+      Prettier Settings{' '}
+      <a
+        href="https://prettier.io/docs/en/options.html"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <Question style={{ marginBottom: '3px' }} />
+      </a>
+    </Title>
+
+    <Prettier />
+  </div>
+);