🔨 Switch PreferencesModal to use useOvermind

Author: MichaelDeBoey

packages/app/src/app/overmind/namespaces/preferences/actions.ts

@@ -18,9 +18,10 @@ export const setDevtoolsOpen: Action<boolean> = ({ state }, isOpen) => {
   state.preferences.showDevtools = isOpen;
 };
 
-export const itemIdChanged: AsyncAction<{
-  itemId: string;
-}> = async ({ state, actions, effects }, { itemId }) => {
+export const itemIdChanged: AsyncAction<string> = async (
+  { actions, state },
+  itemId
+) => {
   state.preferences.itemId = itemId;
 
   if (itemId === 'integrations') {

packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/elements.ts

@@ -1,14 +1,6 @@
 import { PreferenceText as PreferenceTextBase } from '@codesandbox/common/lib/components/Preference/PreferenceText';
 import styled from 'styled-components';
 
-export const BigTitle = styled.h2`
-  font-weight: 600;
-  color: white;
-  font-size: 1rem;
-  padding-top: 1.5rem;
-  margin-bottom: 0.5rem;
-`;
-
 export const PreferenceText = styled(PreferenceTextBase)`
   font-family: 'Source Code Pro';
   font-size: 0.8rem;

packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/index.tsx

@@ -1,9 +1,10 @@
+import { Text } from '@codesandbox/components';
 import React, { FunctionComponent } from 'react';
 
 import { useOvermind } from 'app/overmind';
-import { Text } from '@codesandbox/components';
 
 import { Rule } from '../../elements';
+
 import { PreferenceText } from './elements';
 
 export const EditorTheme: FunctionComponent = () => {
@@ -23,39 +24,35 @@ export const EditorTheme: FunctionComponent = () => {
 
   return (
     <div>
-      <Text block size={3} marginTop={8} marginBottom={2}>
+      <Text block marginBottom={2} marginTop={8} size={3}>
         Editor Theme
       </Text>
 
-      <Text variant="muted" size={3} block>
+      <Text block size={3} variant="muted">
         You can select your editor theme by selecting File {'->'} Preferences{' '}
         {'->'} Color Theme in the menu bar.
       </Text>
 
       <Rule />
 
-      <Text size={3} marginBottom={2} block>
+      <Text block marginBottom={2} size={3}>
         Custom VSCode Theme
       </Text>
 
-      <Text variant="muted" size={3} marginBottom={4} block>
-        After changing this setting you
-        {"'"}
-        ll have to reload the browser and select {'"'}
-        Custom
-        {'"'} as your color theme.
+      <Text block marginBottom={4} size={3} variant="muted">
+        {`After changing this setting you'll have to reload the browser and select 'Custom' as your color theme.`}
       </Text>
 
       <PreferenceText
         block
-        style={{ minHeight: 130 }}
         isTextArea
         placeholder={`You can use your own theme from VSCode directly:
 1. Open VSCode
 2. Press (CMD or CTRL) + SHIFT + P
 3. Enter: '> Developer: Generate Color Scheme From Current Settings'
 4. Copy the contents and paste them here!`}
         rows={7}
+        style={{ minHeight: 130 }}
         {...bindValue('manualCustomVSCodeTheme', true)}
       />
     </div>

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

@@ -1,12 +1,14 @@
-import React, { FunctionComponent } from 'react';
 import { Text } from '@codesandbox/components';
+import React, { FunctionComponent } from 'react';
+
 import { PreferenceContainer, SubContainer } from '../elements';
 import { VSCodePlaceholder } from '../VSCodePlaceholder';
+
 import { EditorTheme } from './EditorTheme';
 
 export const Appearance: FunctionComponent = () => (
   <div>
-    <Text size={4} marginBottom={6} block variant="muted" weight="bold">
+    <Text block marginBottom={6} size={4} variant="muted" weight="bold">
       Appearance
     </Text>
 

packages/app/src/app/pages/common/Modals/PreferencesModal/Badges/index.tsx renamed to packages/app/src/app/pages/common/Modals/PreferencesModal/Badges.tsx

@@ -1,7 +1,8 @@
-import React, { FunctionComponent } from 'react';
-import { useOvermind } from 'app/overmind';
 import { Text, Element } from '@codesandbox/components';
 import Badge from '@codesandbox/common/lib/utils/badges/Badge';
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
 
 export const Badges: FunctionComponent = () => {
   const {
@@ -15,14 +16,14 @@ export const Badges: FunctionComponent = () => {
 
   return (
     <>
-      <Text size={4} marginBottom={6} block variant="muted" weight="bold">
+      <Text block marginBottom={6} size={4} variant="muted" weight="bold">
         Badges
       </Text>
 
       <Text size={3}>
-        You currently have {badges.length} badge
-        {badges.length === 1 ? '' : 's'}. You can click on the badges to toggle
-        visibility.
+        You currently have{' '}
+        {`${badges.length} badge${badges.length === 1 ? '' : 's'}`}. You can
+        click on the badges to toggle visibility.
       </Text>
 
       <Element marginTop={4}>

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

@@ -8,7 +8,7 @@ import {
   PreferenceContainer,
   PaddedPreference,
   Rule,
-} from '../../elements';
+} from '../elements';
 
 export const Prettier: FunctionComponent = () => {
   const {
@@ -17,7 +17,10 @@ export const Prettier: FunctionComponent = () => {
     },
     state: {
       preferences: {
-        settings: { prettierConfig },
+        settings: {
+          prettierConfig,
+          prettierConfig: { fluid },
+        },
       },
     },
   } = useOvermind();
@@ -56,23 +59,16 @@ export const Prettier: FunctionComponent = () => {
         </Text>
 
         <Rule />
-        <Element
-          css={css({
-            pointerEvents: prettierConfig.fluid ? 'none' : 'all',
-          })}
-        >
+
+        <Element css={css({ pointerEvents: fluid ? 'none' : 'all' })}>
           <PaddedPreference
-            style={{ opacity: prettierConfig.fluid ? 0.5 : 1 }}
+            style={{ opacity: fluid ? 0.5 : 1 }}
             title="Print width"
             type="number"
             {...bindValue('printWidth')}
           />
 
-          <Text
-            size={2}
-            variant="muted"
-            style={{ opacity: prettierConfig.fluid ? 0.5 : 1 }}
-          >
+          <Text size={2} variant="muted" style={{ opacity: fluid ? 0.5 : 1 }}>
             Specify the line length that the printer will wrap on.
           </Text>
         </Element>

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

@@ -1,22 +1,22 @@
-import React, { FunctionComponent } from 'react';
-
 import { Text } from '@codesandbox/components';
+import React, { FunctionComponent } from 'react';
 
 import { Question } from './elements';
 import { Prettier } from './Prettier';
 
 export const CodeFormatting: FunctionComponent = () => (
   <>
-    <Text size={4} marginBottom={4} block variant="muted" weight="bold">
+    <Text block marginBottom={4} size={4} variant="muted" weight="bold">
       Prettier Settings{' '}
       <a
         href="https://prettier.io/docs/en/options.html"
-        target="_blank"
         rel="noopener noreferrer"
+        target="_blank"
       >
         <Question />
       </a>
     </Text>
+
     <Prettier />
   </>
 );

packages/app/src/app/pages/common/Modals/PreferencesModal/EditorPageSettings/EditorSettings/index.tsx renamed to packages/app/src/app/pages/common/Modals/PreferencesModal/EditorPageSettings/EditorSettings.tsx

@@ -1,40 +1,42 @@
-import React from 'react';
+import { Preference } from '@codesandbox/common/lib/components/Preference';
+import { Text, Element } from '@codesandbox/components';
+import React, { FunctionComponent, useState } from 'react';
+
 import Modal from 'app/components/Modal';
 import { useOvermind } from 'app/overmind';
-import { Text, Element } from '@codesandbox/components';
-import { Preference } from '@codesandbox/common/lib/components/Preference';
 
-import { Alert } from '../../../Common/Alert';
-import { PreferenceContainer } from '../../elements';
-import { VSCodePlaceholder } from '../../VSCodePlaceholder';
+import { Alert } from '../../Common/Alert';
+
+import { VSCodePlaceholder } from '../VSCodePlaceholder';
+
+import { PreferenceContainer } from '../elements';
 
-const isSafari: boolean = /^((?!chrome|android).)*safari/i.test(
-  navigator.userAgent
-);
-const isFF: boolean = navigator.userAgent.toLowerCase().includes('firefox');
+const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+const isFF = navigator.userAgent.toLowerCase().includes('firefox');
 
-export const EditorSettings: React.FC = () => {
-  const [showModal, setShowModal] = React.useState(false);
+export const EditorSettings: FunctionComponent = () => {
   const {
-    state: {
-      preferences: { settings },
-    },
     actions: {
       preferences: { settingChanged },
     },
+    state: {
+      preferences: { settings },
+    },
   } = useOvermind();
+  const [showModal, setShowModal] = useState(false);
 
   const bindValue = (name: string) => ({
-    value: settings[name],
     setValue: (value: any) => {
       settingChanged({ name, value });
+
       setShowModal(true);
     },
+    value: settings[name],
   });
 
   return (
     <>
-      <Text size={4} marginBottom={6} block variant="muted" weight="bold">
+      <Text block marginBottom={6} size={4} variant="muted" weight="bold">
         Appearance
       </Text>
 
@@ -49,35 +51,36 @@ export const EditorSettings: React.FC = () => {
               type="boolean"
               {...bindValue('vimMode')}
             />
+
             <Text
-              marginTop={2}
               block
+              marginTop={2}
               size={2}
-              variant="muted"
               style={{ maxWidth: '60%', lineHeight: 1.5 }}
+              variant="muted"
             >
               Toggling the VIM extension will require a refresh. When enabled,
               use the command palette to control VIM
             </Text>
           </PreferenceContainer>
         </Element>
+
         {isSafari || isFF ? (
-          <Text size={2} variant="muted" marginBottom={2} block marginTop={2}>
+          <Text block marginBottom={2} marginTop={2} size={2} variant="muted">
             The VIM extension currently only works on Chrome and Microsoft Edge.
           </Text>
         ) : null}
+
         <Modal
           isOpen={showModal}
           onClose={() => setShowModal(false)}
           width={400}
         >
           <Alert
-            title="Toggle VIM extension"
             description="You need to refresh the browser for this to take effect, do you want to do that now?"
             onCancel={() => setShowModal(false)}
-            onPrimaryAction={() => {
-              location.reload(true);
-            }}
+            onPrimaryAction={() => location.reload(true)}
+            title="Toggle VIM extension"
           />
         </Modal>
       </Element>