From 86fa133c5091f8ed0a50ab6a0ece5c6e30cc6059 Mon Sep 17 00:00:00 2001
From: julia <midnight@trainwit.ch>
Date: Wed, 25 Dec 2024 11:40:11 +0000
Subject: [PATCH] [bugfix] Store /api/web/settings state locally for
 persistence (#2)

This also prevents the 'Can't verify CSRF token authenticity' errors that popup whenever you modify a 'web setting', such as the column layout.

~~NB: There is something funky going on. This works 99% of the time and sometimes doesn't?~~ Fixed now, there was two bits of stuff in verify_state doing the same thing, removed the duplicate.

Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/2
Co-authored-by: julia <midnight@trainwit.ch>
Co-committed-by: julia <midnight@trainwit.ch>
---
 app/javascript/flavours/glitch/actions/settings.js |  5 ++---
 public/verify-state.js                             | 14 ++++++++++++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/app/javascript/flavours/glitch/actions/settings.js b/app/javascript/flavours/glitch/actions/settings.js
index 120ae133e..fa0d0f5b6 100644
--- a/app/javascript/flavours/glitch/actions/settings.js
+++ b/app/javascript/flavours/glitch/actions/settings.js
@@ -26,9 +26,8 @@ const debouncedSave = debounce((dispatch, getState) => {
 
   const data = getState().get('settings').filter((_, path) => path !== 'saved').toJS();
 
-  api(getState).put('/api/web/settings', { data })
-    .then(() => dispatch({ type: SETTING_SAVE }))
-    .catch(error => dispatch(showAlertForError(error)));
+  localStorage.setItem('web_settings', JSON.stringify(data));
+  dispatch({ type: SETTING_SAVE });
 }, 5000, { trailing: true });
 
 export function saveSettings() {
diff --git a/public/verify-state.js b/public/verify-state.js
index 8a12d8bdd..6b2aab14a 100644
--- a/public/verify-state.js
+++ b/public/verify-state.js
@@ -6,14 +6,20 @@ async function loadState() {
   const domain = localStorage.getItem('domain');
   const access_token = localStorage.getItem('access_token');
   const storedState = localStorage.getItem('initial_state');
+  const webSettings = localStorage.getItem('web_settings');
 
   if (!domain || !access_token) {
     window.location.href = '/login.html';
     return;
   }
 
+  /* We try to load the initial state now to prevent a race between us and mastodon */
   if (storedState && window.location.pathname !== '/prepare.html') {
-    document.getElementById('initial-state').textContent = storedState;
+    const state = JSON.parse(storedState);
+    if (webSettings) {
+      state.settings = JSON.parse(webSettings);
+    }
+    document.getElementById('initial-state').textContent = JSON.stringify(state);
   }
 
   const apiUrl = `${protocol}${domain}/api`;
@@ -1092,8 +1098,12 @@ async function loadState() {
     ],
   };
 
+  if (webSettings) {
+    state.settings = JSON.parse(webSettings);
+  }
+
   const json = JSON.stringify(state);
   if (window.location.pathname !== '/prepare.html') document.getElementById('initial-state').textContent = json;
   localStorage.setItem("initial_state", json);
   if (window.location.pathname === '/prepare.html') window.location.href = '/';
-}
\ No newline at end of file
+}