🔨 Switch PreferencesModal to use useOvermind

Author: MichaelDeBoey

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

@@ -19,9 +19,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 (
+  { effects, state, actions },
+  itemId
+) => {
   state.preferences.itemId = itemId;
 
   if (itemId === 'keybindings') {

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

@@ -4,7 +4,7 @@ import { useOvermind } from 'app/overmind';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
 import Badge from '@codesandbox/common/lib/utils/badges/Badge';
 
-import { Title } from '../elements';
+import { Title } from './elements';
 
 export const Badges: FunctionComponent = () => {
   const {

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 {
   PaddedPreference,
   SubDescription,
   Rule,
-} from '../../elements';
+} from '../elements';
 
 export const Prettier: FunctionComponent = () => {
   const {

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,39 @@
+import React, { FunctionComponent, useState } from 'react';
+
 import { Alert } from 'app/components/Alert';
 import Modal from 'app/components/Modal';
 import { useOvermind } from 'app/overmind';
-import React from 'react';
 
 import {
   PaddedPreference,
   PreferenceContainer,
   SubContainer,
   SubDescription,
   Title,
-} from '../../elements';
-import { VSCodePlaceholder } from '../../VSCodePlaceholder';
-
-const isSafari: boolean = /^((?!chrome|android).)*safari/i.test(
-  navigator.userAgent
-);
-const isFF: boolean = navigator.userAgent.toLowerCase().includes('firefox');
+} from '../elements';
+import { VSCodePlaceholder } from '../VSCodePlaceholder';
 
-export const EditorSettings: React.FC = () => {
-  const [showModal, setShowModal] = React.useState(false);
+const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+const isFF = navigator.userAgent.toLowerCase().includes('firefox');
 
+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 (
@@ -51,11 +50,13 @@ export const EditorSettings: React.FC = () => {
             type="boolean"
             {...bindValue('vimMode')}
           />
+
           <SubDescription>
             Toggling the VIM extension will require a refresh. When enabled, use
             the command palette to control VIM
           </SubDescription>
         </PreferenceContainer>
+
         {isSafari || isFF ? (
           <SubDescription
             css={`
@@ -65,18 +66,17 @@ export const EditorSettings: React.FC = () => {
             The VIM extension currently only works on Chrome and Microsoft Edge.
           </SubDescription>
         ) : null}
+
         <Modal
           isOpen={showModal}
           onClose={() => setShowModal(false)}
           width={400}
         >
           <Alert
-            title="Toggle VIM extension"
             body="You need to refresh the browser for this to take effect, do you want to do that now?"
             onCancel={() => setShowModal(false)}
-            onConfirm={() => {
-              location.reload(true);
-            }}
+            onConfirm={() => location.reload(true)}
+            title="Toggle VIM extension"
           />
         </Modal>
       </SubContainer>

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

@@ -1,24 +1,29 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
+
 import { useOvermind } from 'app/overmind';
 
 import {
-  Title,
-  SubContainer,
-  PreferenceContainer,
   PaddedPreference,
-  SubDescription,
+  PreferenceContainer,
   Rule,
-} from '../../elements';
-
-export const PreviewSettings: React.FC = () => {
-  const { state, actions } = useOvermind();
-  const bindValue = name => ({
-    value: state.preferences.settings[name],
-    setValue: value =>
-      actions.preferences.settingChanged({
-        name,
-        value,
-      }),
+  SubContainer,
+  SubDescription,
+  Title,
+} from '../elements';
+
+export const PreviewSettings: FunctionComponent = () => {
+  const {
+    actions: {
+      preferences: { settingChanged },
+    },
+    state: {
+      preferences: { settings },
+    },
+  } = useOvermind();
+
+  const bindValue = (name: string) => ({
+    setValue: value => settingChanged({ name, value }),
+    value: settings[name],
   });
 
   return (
@@ -29,29 +34,36 @@ export const PreviewSettings: React.FC = () => {
         <PreferenceContainer>
           <PaddedPreference
             title="Preview on edit"
+            tooltip="Only update on save"
             type="boolean"
             {...bindValue('livePreviewEnabled')}
-            tooltip="Only update on save"
           />
+
           <SubDescription>
             Preview the latest code without saving.
           </SubDescription>
+
           <Rule />
+
           <PaddedPreference
             title="Clear console"
+            tooltip="Clear console when executing"
             type="boolean"
             {...bindValue('clearConsoleEnabled')}
-            tooltip="Clear console when executing"
           />
+
           <SubDescription>
             Clear your developer console between every execution.
           </SubDescription>
+
           <Rule />
+
           <PaddedPreference
             title="Instant preview"
             type="boolean"
             {...bindValue('instantPreviewEnabled')}
           />
+
           <SubDescription>Show preview on every keypress.</SubDescription>
         </PreferenceContainer>
       </SubContainer>

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

@@ -1,13 +1,13 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 
 import {
-  Title,
+  PreferenceContainer,
   SubContainer,
   SubDescription,
-  PreferenceContainer,
-} from '../elements';
+  Title,
+} from './elements';
 
-export const Experiments: React.FunctionComponent = () => (
+export const Experiments: FunctionComponent = () => (
   <div>
     <Title>Experiments</Title>
 

packages/app/src/app/pages/common/Modals/PreferencesModal/Integrations/elements.js renamed to packages/app/src/app/pages/common/Modals/PreferencesModal/Integrations/elements.ts

@@ -0,0 +1,20 @@
+import React, { FunctionComponent } from 'react';
+
+import { GithubIntegration } from 'app/pages/common/GithubIntegration';
+import { ZeitIntegration } from 'app/pages/common/ZeitIntegration';
+
+import { Title } from '../elements';
+
+import { Container } from './elements';
+
+export const Integrations: FunctionComponent = () => (
+  <div>
+    <Title>Integrations</Title>
+
+    <Container>
+      <ZeitIntegration />
+
+      <GithubIntegration />
+    </Container>
+  </div>
+);