From d579b4476d0b6cffb5c2e45ea1c4af7791846bb6 Mon Sep 17 00:00:00 2001
From: f0x <f0x@cthu.lu>
Date: Wed, 4 Jan 2023 15:31:13 +0000
Subject: [PATCH] use rtk query api for profile settings

---
 web/source/settings/components/form/inputs.jsx | 3 +--
 web/source/settings/lib/form/submit.js         | 8 +-------
 web/source/settings/lib/query/base.js          | 2 +-
 web/source/settings/lib/query/user-settings.js | 9 ++++++++-
 web/source/settings/style.css                  | 2 +-
 web/source/settings/user/profile.js            | 8 +++++++-
 6 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/web/source/settings/components/form/inputs.jsx b/web/source/settings/components/form/inputs.jsx
index 611ac671a..1081ead75 100644
--- a/web/source/settings/components/form/inputs.jsx
+++ b/web/source/settings/components/form/inputs.jsx
@@ -81,13 +81,12 @@ function Checkbox({label, field, ...inputProps}) {
 	return (
 		<div className="form-field checkbox">
 			<label>
-				{label}
 				<input
 					type="checkbox"
 					checked={value}
 					onChange={onChange}
 					{...inputProps}
-				/>
+				/> {label}
 			</label>
 		</div>
 	);
diff --git a/web/source/settings/lib/form/submit.js b/web/source/settings/lib/form/submit.js
index 3851b5aed..8a2a1fad7 100644
--- a/web/source/settings/lib/form/submit.js
+++ b/web/source/settings/lib/form/submit.js
@@ -20,8 +20,6 @@
 
 const syncpipe = require("syncpipe");
 
-const { unwrapRes } = require("../query/lib");
-
 module.exports = function useFormSubmit(form, [mutationQuery, result]) {
 	return [
 		result,
@@ -45,11 +43,7 @@ module.exports = function useFormSubmit(form, [mutationQuery, result]) {
 			]);
 
 			if (updatedFields.length > 0) {
-				return mutationQuery(mutationData)
-					.then(unwrapRes)
-					.then((_data) => {
-						updatedFields.forEach((field) => field.reset());
-					});
+				return mutationQuery(mutationData);
 			}
 		},
 	];
diff --git a/web/source/settings/lib/query/base.js b/web/source/settings/lib/query/base.js
index a782be54a..a0b7ba346 100644
--- a/web/source/settings/lib/query/base.js
+++ b/web/source/settings/lib/query/base.js
@@ -50,6 +50,6 @@ function instanceBasedQuery(args, api, extraOptions) {
 module.exports = createApi({
 	reducerPath: "api",
 	baseQuery: instanceBasedQuery,
-	tagTypes: ["Emojis"],
+	tagTypes: ["Emojis", "User"],
 	endpoints: () => ({})
 });
\ No newline at end of file
diff --git a/web/source/settings/lib/query/user-settings.js b/web/source/settings/lib/query/user-settings.js
index a374d049f..ed517f899 100644
--- a/web/source/settings/lib/query/user-settings.js
+++ b/web/source/settings/lib/query/user-settings.js
@@ -24,13 +24,20 @@
 const base = require("./base");
 
 const endpoints = (build) => ({
+	verifyCredentials: build.query({
+		query: () => ({
+			url: `/api/v1/accounts/verify_credentials`
+		}),
+		providesTags: [{type: "User", id: "SELF"}]
+	}),
 	updateCredentials: build.mutation({
 		query: (formData) => ({
 			method: "PATCH",
 			url: `/api/v1/accounts/update_credentials`,
 			asForm: true,
 			body: formData
-		})
+		}),
+		invalidatesTags: [{type: "User", id: "SELF"}]
 	})
 });
 
diff --git a/web/source/settings/style.css b/web/source/settings/style.css
index 1e9621e4e..6f2f136fa 100644
--- a/web/source/settings/style.css
+++ b/web/source/settings/style.css
@@ -341,7 +341,7 @@ section.with-sidebar > div, section.with-sidebar > form {
 	font-weight: bold;
 }
 
-.form-field.file {
+.form-field.file label {
 	width: 100%;
 	display: flex;
 }
diff --git a/web/source/settings/user/profile.js b/web/source/settings/user/profile.js
index 158624174..f9bab9623 100644
--- a/web/source/settings/user/profile.js
+++ b/web/source/settings/user/profile.js
@@ -40,10 +40,12 @@ const {
 
 const FakeProfile = require("../components/fake-profile");
 const MutationButton = require("../components/form/mutation-button");
+const Loading = require("../components/loading");
 
 module.exports = function UserProfile() {
 	const allowCustomCSS = Redux.useSelector(state => state.instances.current.configuration.accounts.allow_custom_css);
-	const profile = Redux.useSelector(state => state.user.profile);
+	// const profile = Redux.useSelector(state => state.user.profile);
+	const {data: profile = {}, isLoading} = query.useVerifyCredentialsQuery();
 
 	/*
 		User profile update form keys
@@ -75,6 +77,10 @@ module.exports = function UserProfile() {
 
 	const [result, submitForm] = useFormSubmit(form, query.useUpdateCredentialsMutation());
 
+	if (isLoading) {
+		return <Loading/>;
+	}
+
 	return (
 		<form className="user-profile" onSubmit={submitForm}>
 			<h1>Profile</h1>