Save and fetch preferences from Pleroma

app/gabsocial/actions/preferences.js

@@ -1,6 +1,11 @@
 import api from '../api';
+import { fetchMeSuccess } from 'gabsocial/actions/me';
+import { debounce } from 'lodash';
+import { showAlertForError } from './alerts';
 
 export const MASTO_PREFS_FETCH_SUCCESS = 'MASTO_PREFS_FETCH_SUCCESS';
+export const PREFERENCE_CHANGE         = 'PREFERENCE_CHANGE';
+export const PREFERENCE_SAVE           = 'PREFERENCE_SAVE';
 
 export const FE_NAME = 'soapbox_fe';
 
@@ -21,3 +26,37 @@ export function mastoFetchPrefsSuccess(prefs) {
     prefs,
   };
 }
+
+export function changePreference(path, value) {
+  return dispatch => {
+    dispatch({
+      type: PREFERENCE_CHANGE,
+      path,
+      value,
+    });
+
+    dispatch(savePreferences());
+  };
+};
+
+const debouncedSave = debounce((dispatch, getState) => {
+  if (!getState().get('me')) return;
+  if (getState().getIn(['preferences', 'saved'])) return;
+
+  const data = getState().get('preferences').delete('saved').toJS();
+
+  api(getState).patch('/api/v1/accounts/update_credentials', {
+    pleroma_settings_store: {
+      [FE_NAME]: data,
+    },
+  }).then(response => {
+    dispatch({ type: PREFERENCE_SAVE });
+    dispatch(fetchMeSuccess(response.data));
+  }).catch(error => {
+    dispatch(showAlertForError(error));
+  });
+}, 5000, { trailing: true });
+
+export function savePreferences() {
+  return (dispatch, getState) => debouncedSave(dispatch, getState);
+};

app/gabsocial/actions/theme.js

@@ -1,7 +0,0 @@
-export const SET_THEME = 'SET_THEME';
-
-export function setTheme(theme) {
-  return (dispatch, getState) => {
-    dispatch({ type: SET_THEME, theme });
-  };
-}

app/gabsocial/containers/gabsocial.js

@@ -41,7 +41,7 @@ const mapStateToProps = (state) => {
   return {
     showIntroduction,
     me,
-    theme: state.getIn(['settings', 'theme']),
+    theme: state.getIn(['preferences', 'theme']),
   };
 };
 

app/gabsocial/features/preferences/index.js

@@ -4,7 +4,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { changeSetting } from 'gabsocial/actions/settings';
+import { changePreference } from 'gabsocial/actions/preferences';
 import Column from '../ui/components/column';
 
 const messages = defineMessages({
@@ -42,10 +42,6 @@ class Preferences extends ImmutablePureComponent {
     this.state = { isLoading: false };
   }
 
-  componentWillMount() {
-    // this.props.dispatch(fetchPreferences());
-  }
-
   getFormData = (form) => {
     return Object.fromEntries(
       Array.from(form).map(i => [i.name, i.value])
@@ -54,7 +50,7 @@ class Preferences extends ImmutablePureComponent {
 
   onThemeChange = e => {
     const { dispatch } = this.props;
-    dispatch(changeSetting(['theme'], e.target.value));
+    dispatch(changePreference(['theme'], e.target.value));
   }
 
   render() {
@@ -74,7 +70,7 @@ class Preferences extends ImmutablePureComponent {
                       name='user[setting_theme]'
                       id='user_setting_theme'
                       onChange={this.onThemeChange}
-                      value={settings.get('theme')}
+                      defaultValue={settings.get('theme')}
                     >
                       {Object.keys(themes).map(theme => (
                         <option key={theme} value={theme}>

app/gabsocial/reducers/preferences.js

@@ -1,9 +1,15 @@
-import { MASTO_PREFS_FETCH_SUCCESS, FE_NAME } from 'gabsocial/actions/preferences';
+import {
+  MASTO_PREFS_FETCH_SUCCESS,
+  PREFERENCE_CHANGE,
+  PREFERENCE_SAVE,
+  FE_NAME,
+} from 'gabsocial/actions/preferences';
 import { ME_FETCH_SUCCESS } from 'gabsocial/actions/me';
 
 import { Map as ImmutableMap, fromJS } from 'immutable';
 
 const initialState = ImmutableMap({
+  saved: true,
   posting: ImmutableMap({
     default: ImmutableMap({
       visibility: 'public',
@@ -18,6 +24,7 @@ const initialState = ImmutableMap({
     }),
   }),
   auto_play_gif: false,
+  theme: 'lime',
 });
 
 export function mastoPrefsToMap(prefs) {
@@ -36,6 +43,12 @@ export default function preferences(state = initialState, action) {
     const me = fromJS(action.me);
     const fePrefs = me.getIn(['pleroma', 'settings_store', FE_NAME]);
     return state.merge(fePrefs);
+  case PREFERENCE_CHANGE:
+    return state
+      .setIn(action.path, action.value)
+      .set('saved', false);
+  case PREFERENCE_SAVE:
+    return state.set('saved', true);
   default:
     return state;
   }

app/gabsocial/reducers/settings.js

@@ -3,7 +3,6 @@ import { NOTIFICATIONS_FILTER_SET } from '../actions/notifications';
 import { STORE_HYDRATE } from '../actions/store';
 import { EMOJI_USE } from '../actions/emojis';
 import { LIST_DELETE_SUCCESS, LIST_FETCH_FAIL } from '../actions/lists';
-import { SET_THEME } from '../actions/theme';
 import { Map as ImmutableMap, fromJS } from 'immutable';
 import uuid from '../uuid';
 
@@ -84,8 +83,6 @@ const initialState = ImmutableMap({
   trends: ImmutableMap({
     show: true,
   }),
-
-  theme: 'lime',
 });
 
 const defaultColumns = fromJS([
@@ -117,8 +114,6 @@ export default function settings(state = initialState, action) {
     return action.error.response.status === 404 ? filterDeadListColumns(state, action.id) : state;
   case LIST_DELETE_SUCCESS:
     return filterDeadListColumns(state, action.id);
-  case SET_THEME:
-    return state.set('theme', action.theme);
   default:
     return state;
   }