From f906558dbab0191f065f8771fa352d1680539f3e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 17 Dec 2022 13:05:50 -0600
Subject: [PATCH] Theme editor: allow saving theme

---
 app/soapbox/actions/admin.ts                  |  14 +++
 app/soapbox/features/soapbox-config/index.tsx |  14 +--
 app/soapbox/features/theme-editor/index.tsx   | 108 ++++++++++++------
 3 files changed, 88 insertions(+), 48 deletions(-)

diff --git a/app/soapbox/actions/admin.ts b/app/soapbox/actions/admin.ts
index 02af5e87a..3cd5a25ba 100644
--- a/app/soapbox/actions/admin.ts
+++ b/app/soapbox/actions/admin.ts
@@ -103,6 +103,19 @@ const updateConfig = (configs: Record<string, any>[]) =>
       });
   };
 
+const updateSoapboxConfig = (data: Record<string, any>) =>
+  (dispatch: AppDispatch, _getState: () => RootState) => {
+    const params = [{
+      group: ':pleroma',
+      key: ':frontend_configurations',
+      value: [{
+        tuple: [':soapbox_fe', data],
+      }],
+    }];
+
+    return dispatch(updateConfig(params));
+  };
+
 const fetchMastodonReports = (params: Record<string, any>) =>
   (dispatch: AppDispatch, getState: () => RootState) =>
     api(getState)
@@ -585,6 +598,7 @@ export {
   ADMIN_USERS_UNSUGGEST_FAIL,
   fetchConfig,
   updateConfig,
+  updateSoapboxConfig,
   fetchReports,
   closeReports,
   fetchUsers,
diff --git a/app/soapbox/features/soapbox-config/index.tsx b/app/soapbox/features/soapbox-config/index.tsx
index 2c70d6d55..39c859ef1 100644
--- a/app/soapbox/features/soapbox-config/index.tsx
+++ b/app/soapbox/features/soapbox-config/index.tsx
@@ -2,7 +2,7 @@ import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
 import React, { useState, useEffect, useMemo } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { updateConfig } from 'soapbox/actions/admin';
+import { updateSoapboxConfig } from 'soapbox/actions/admin';
 import { uploadMedia } from 'soapbox/actions/media';
 import snackbar from 'soapbox/actions/snackbar';
 import List, { ListItem } from 'soapbox/components/list';
@@ -99,18 +99,8 @@ const SoapboxConfig: React.FC = () => {
     setJsonValid(true);
   };
 
-  const getParams = () => {
-    return [{
-      group: ':pleroma',
-      key: ':frontend_configurations',
-      value: [{
-        tuple: [':soapbox_fe', data.toJS()],
-      }],
-    }];
-  };
-
   const handleSubmit: React.FormEventHandler = (e) => {
-    dispatch(updateConfig(getParams())).then(() => {
+    dispatch(updateSoapboxConfig(data.toJS())).then(() => {
       setLoading(false);
       dispatch(snackbar.success(intl.formatMessage(messages.saved)));
     }).catch(() => {
diff --git a/app/soapbox/features/theme-editor/index.tsx b/app/soapbox/features/theme-editor/index.tsx
index ae83a975d..c1b8c97a1 100644
--- a/app/soapbox/features/theme-editor/index.tsx
+++ b/app/soapbox/features/theme-editor/index.tsx
@@ -1,14 +1,19 @@
 import React, { useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
+import { updateSoapboxConfig } from 'soapbox/actions/admin';
+import { getHost } from 'soapbox/actions/instance';
+import snackbar from 'soapbox/actions/snackbar';
+import { fetchSoapboxConfig } from 'soapbox/actions/soapbox';
 import List, { ListItem } from 'soapbox/components/list';
-import { Column } from 'soapbox/components/ui';
-import { useSoapboxConfig } from 'soapbox/hooks';
+import { Button, Column, Form, FormActions } from 'soapbox/components/ui';
+import { useAppDispatch, useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
 
 import Palette, { ColorGroup } from './components/palette';
 
 const messages = defineMessages({
   title: { id: 'admin.theme.title', defaultMessage: 'Theme' },
+  saved: { id: 'theme_editor.saved', defaultMessage: 'Theme updated!' },
 });
 
 interface IThemeEditor {
@@ -17,12 +22,17 @@ interface IThemeEditor {
 /** UI for editing Tailwind theme colors. */
 const ThemeEditor: React.FC<IThemeEditor> = () => {
   const intl = useIntl();
+  const dispatch = useAppDispatch();
+
   const soapbox = useSoapboxConfig();
+  const host = useAppSelector(state => getHost(state));
+  const rawConfig = useAppSelector(state => state.soapbox);
 
   const [colors, setColors] = useState(soapbox.colors.toJS() as any);
+  const [submitting, setSubmitting] = useState(false);
 
   const updateColors = (key: string) => {
-    return (newColors: any) => {
+    return (newColors: ColorGroup) => {
       setColors({
         ...colors,
         [key]: {
@@ -33,45 +43,71 @@ const ThemeEditor: React.FC<IThemeEditor> = () => {
     };
   };
 
+  const updateTheme = async () => {
+    const params = rawConfig.set('colors', colors).toJS();
+    await dispatch(updateSoapboxConfig(params));
+  };
+
+  const handleSubmit = async() => {
+    setSubmitting(true);
+
+    try {
+      await dispatch(fetchSoapboxConfig(host));
+      await updateTheme();
+      dispatch(snackbar.success(intl.formatMessage(messages.saved)));
+      setSubmitting(false);
+    } catch (e) {
+      setSubmitting(false);
+    }
+  };
+
   return (
     <Column label={intl.formatMessage(messages.title)}>
-      <List>
-        <PaletteListItem
-          label='Primary'
-          palette={colors.primary}
-          onChange={updateColors('primary')}
-        />
+      <Form onSubmit={handleSubmit}>
+        <List>
+          <PaletteListItem
+            label='Primary'
+            palette={colors.primary}
+            onChange={updateColors('primary')}
+          />
 
-        <PaletteListItem
-          label='Secondary'
-          palette={colors.secondary}
-          onChange={updateColors('secondary')}
-        />
+          <PaletteListItem
+            label='Secondary'
+            palette={colors.secondary}
+            onChange={updateColors('secondary')}
+          />
 
-        <PaletteListItem
-          label='Accent'
-          palette={colors.accent}
-          onChange={updateColors('accent')}
-        />
+          <PaletteListItem
+            label='Accent'
+            palette={colors.accent}
+            onChange={updateColors('accent')}
+          />
 
-        <PaletteListItem
-          label='Gray'
-          palette={colors.gray}
-          onChange={updateColors('gray')}
-        />
+          <PaletteListItem
+            label='Gray'
+            palette={colors.gray}
+            onChange={updateColors('gray')}
+          />
 
-        <PaletteListItem
-          label='Success'
-          palette={colors.success}
-          onChange={updateColors('success')}
-        />
+          <PaletteListItem
+            label='Success'
+            palette={colors.success}
+            onChange={updateColors('success')}
+          />
 
-        <PaletteListItem
-          label='Danger'
-          palette={colors.danger}
-          onChange={updateColors('danger')}
-        />
-      </List>
+          <PaletteListItem
+            label='Danger'
+            palette={colors.danger}
+            onChange={updateColors('danger')}
+          />
+        </List>
+
+        <FormActions>
+          <Button type='submit' theme='primary' disabled={submitting}>
+            <FormattedMessage id='theme_editor.save' defaultMessage='Save theme' />
+          </Button>
+        </FormActions>
+      </Form>
     </Column>
   );
 };