SitePreview: convert to tsx

app/soapbox/features/soapbox_config/components/site-preview.tsx

@@ -1,13 +1,19 @@
 import classNames from 'classnames';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
+import React, { useMemo } from 'react';
 
 import { defaultSettings } from 'soapbox/actions/settings';
+import { normalizeSoapboxConfig } from 'soapbox/normalizers';
 import { generateThemeCss } from 'soapbox/utils/theme';
 
-export default function SitePreview({ soapbox }) {
+interface ISitePreview {
+  /** Raw Soapbox configuration. */
+  soapbox: any,
+}
 
-  const settings = defaultSettings.mergeDeep(soapbox.get('defaultSettings'));
+/** Renders a preview of the website's style with the configuration applied. */
+const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
+  const soapboxConfig = useMemo(() => normalizeSoapboxConfig(soapbox), [soapbox]);
+  const settings = defaultSettings.mergeDeep(soapboxConfig.defaultSettings);
 
   const bodyClass = classNames('site-preview', `theme-mode-${settings.get('themeMode')}`, {
     'no-reduce-motion': !settings.get('reduceMotion'),
@@ -18,7 +24,7 @@ export default function SitePreview({ soapbox }) {
 
   return (
     <div className={bodyClass}>
-      <style>{`.site-preview {${generateThemeCss(soapbox)}}`}</style>
+      <style>{`.site-preview {${generateThemeCss(soapboxConfig)}}`}</style>
       <div className='app-holder'>
         <div>
           <div className='ui'>
@@ -26,15 +32,15 @@ export default function SitePreview({ soapbox }) {
               <div className='tabs-bar__container'>
                 <div className='tabs-bar__split tabs-bar__split--left'>
                   <a className='tabs-bar__link--logo' href='#'>
-                    <img alt='Logo' src={soapbox.get('logo')} />
+                    <img alt='Logo' src={soapboxConfig.logo} />
                     <span>Home</span>
                   </a>
                   <a className='tabs-bar__link' href='#'>
-                    <i role='img' alt='home' className='fa fa-home' />
+                    <i role='img' className='fa fa-home' />
                     <span>Home</span>
                   </a>
                   <a className='tabs-bar__link' href='#'>
-                    <i role='img' alt='bell' className='fa fa-bell' />
+                    <i role='img' className='fa fa-bell' />
                     <span>Notifications</span>
                   </a>
                 </div>
@@ -49,8 +55,6 @@ export default function SitePreview({ soapbox }) {
     </div>
   );
 
-}
-
-SitePreview.propTypes = {
-  soapbox: ImmutablePropTypes.record.isRequired,
 };
+
+export default SitePreview;

app/soapbox/features/soapbox_config/index.js

@@ -27,7 +27,7 @@ import Accordion from '../ui/components/accordion';
 
 import ColorWithPicker from './components/color-with-picker';
 import IconPicker from './components/icon-picker';
-import SitePreview from './components/site_preview';
+import SitePreview from './components/site-preview';
 
 const messages = defineMessages({
   heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },

app/soapbox/normalizers/soapbox/soapbox_config.ts

@@ -89,7 +89,7 @@ export const SoapboxConfigRecord = ImmutableRecord({
   colors: ImmutableMap(),
   copyright: `♥${new Date().getFullYear()}. Copying is an act of love. Please copy and share.`,
   customCss: ImmutableList<string>(),
-  defaultSettings: ImmutableMap(),
+  defaultSettings: ImmutableMap<string, any>(),
   extensions: ImmutableMap(),
   greentext: false,
   promoPanel: PromoPanelRecord(),