use rtk query api for profile settings

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>
 	);

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)
+				return mutationQuery(mutationData);
-					.then(unwrapRes)
-					.then((_data) => {
-						updatedFields.forEach((field) => field.reset());
-					});
 			}
 		},
 	];

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: () => ({})
 });

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"}]
 	})
 });
 

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;
 }

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>