use rtk query api for profile settings

This commit is contained in:
f0x 2023-01-04 15:31:13 +00:00
parent f4362d9dfa
commit d579b4476d
6 changed files with 19 additions and 13 deletions

View file

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

View file

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

View file

@ -50,6 +50,6 @@ function instanceBasedQuery(args, api, extraOptions) {
module.exports = createApi({
reducerPath: "api",
baseQuery: instanceBasedQuery,
tagTypes: ["Emojis"],
tagTypes: ["Emojis", "User"],
endpoints: () => ({})
});

View file

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

View file

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

View file

@ -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>