yakshave new form field structure
This commit is contained in:
f0x
parent
132c73883f
commit
027d2e4414
|
|
@ -50,7 +50,14 @@ module.exports = function useTextInput({name, Name}, {validator, defaultValue=""
|
|||
[name]: text,
|
||||
[`${name}Ref`]: textRef,
|
||||
[`set${Name}`]: setText,
|
||||
[`${name}Valid`]: valid
|
||||
[`${name}Valid`]: valid,
|
||||
|
||||
name,
|
||||
value: text,
|
||||
ref: textRef,
|
||||
setter: setText,
|
||||
valid,
|
||||
hasChanged: () => text != defaultValue
|
||||
}
|
||||
];
|
||||
};
|
||||
|
|
@ -20,16 +20,9 @@
|
|||
|
||||
const Promise = require("bluebird");
|
||||
|
||||
const { unwrapRes } = require("./lib");
|
||||
const base = require("./base");
|
||||
|
||||
function unwrap(res) {
|
||||
if (res.error != undefined) {
|
||||
throw res.error;
|
||||
} else {
|
||||
return res.data;
|
||||
}
|
||||
}
|
||||
|
||||
const endpoints = (build) => ({
|
||||
getAllEmoji: build.query({
|
||||
query: (params = {}) => ({
|
||||
|
|
@ -132,7 +125,7 @@ const endpoints = (build) => ({
|
|||
filter: `domain:${domain},shortcode:${emoji.shortcode}`,
|
||||
limit: 1
|
||||
}
|
||||
}).then(unwrap);
|
||||
}).then(unwrapRes);
|
||||
}).then(([lookup]) => {
|
||||
if (lookup == undefined) { throw "not found"; }
|
||||
|
||||
|
|
@ -152,7 +145,7 @@ const endpoints = (build) => ({
|
|||
url: `/api/v1/admin/custom_emojis/${lookup.id}`,
|
||||
asForm: true,
|
||||
body: body
|
||||
}).then(unwrap);
|
||||
}).then(unwrapRes);
|
||||
}).then((res) => {
|
||||
data.push([emoji.shortcode, res]);
|
||||
}).catch((e) => {
|
||||
|
|
|
|||
|
|
@ -20,5 +20,6 @@
|
|||
|
||||
module.exports = {
|
||||
...require("./base"),
|
||||
...require("./custom-emoji.js")
|
||||
...require("./custom-emoji.js"),
|
||||
...require("./user-settings")
|
||||
};
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
/*
|
||||
GoToSocial
|
||||
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
module.exports = {
|
||||
unwrapRes(res) {
|
||||
if (res.error != undefined) {
|
||||
throw res.error;
|
||||
} else {
|
||||
return res.data;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
/*
|
||||
GoToSocial
|
||||
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
// const Promise = require("bluebird");
|
||||
|
||||
// const { unwrapRes } = require("./lib");
|
||||
const base = require("./base");
|
||||
|
||||
const endpoints = (build) => ({
|
||||
updateCredentials: build.mutation({
|
||||
query: (formData) => ({
|
||||
method: "PATCH",
|
||||
url: `/api/v1/accounts/update_credentials`,
|
||||
asForm: true,
|
||||
body: formData
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
module.exports = base.injectEndpoints({endpoints});
|
||||
|
|
@ -21,59 +21,70 @@
|
|||
const React = require("react");
|
||||
const Redux = require("react-redux");
|
||||
|
||||
const Submit = require("../components/submit");
|
||||
|
||||
const api = require("../lib/api");
|
||||
const user = require("../redux/reducers/user").actions;
|
||||
const submit = require("../lib/submit");
|
||||
|
||||
const FakeProfile = require("../components/fake-profile");
|
||||
const { formFields } = require("../components/form-fields");
|
||||
const query = require("../lib/query");
|
||||
|
||||
const {
|
||||
TextInput,
|
||||
TextArea,
|
||||
Checkbox,
|
||||
File
|
||||
} = formFields(user.setProfileVal, (state) => state.user.profile);
|
||||
useTextInput
|
||||
} = require("../components/form");
|
||||
|
||||
const FakeProfile = require("../components/fake-profile");
|
||||
const syncpipe = require("syncpipe");
|
||||
const MutationButton = require("../components/mutation-button");
|
||||
|
||||
module.exports = function UserProfile() {
|
||||
const dispatch = Redux.useDispatch();
|
||||
const instance = Redux.useSelector(state => state.instances.current);
|
||||
const allowCustomCSS = Redux.useSelector(state => state.instances.current.configuration.accounts.allow_custom_css);
|
||||
const profile = Redux.useSelector(state => state.user.profile);
|
||||
|
||||
const allowCustomCSS = instance.configuration.accounts.allow_custom_css;
|
||||
/*
|
||||
User profile update form keys
|
||||
- bool bot
|
||||
- bool locked
|
||||
- string display_name
|
||||
- string note
|
||||
- file avatar
|
||||
- file header
|
||||
- string source[privacy]
|
||||
- bool source[sensitive]
|
||||
- string source[language]
|
||||
- string source[status_format]
|
||||
- bool enable_rss
|
||||
- string custom_css (if enabled)
|
||||
*/
|
||||
|
||||
const [errorMsg, setError] = React.useState("");
|
||||
const [statusMsg, setStatus] = React.useState("");
|
||||
const form = {
|
||||
display_name: useTextInput("displayName", {defaultValue: profile.display_name})
|
||||
};
|
||||
|
||||
const saveProfile = submit(
|
||||
() => dispatch(api.user.updateProfile()),
|
||||
{setStatus, setError}
|
||||
);
|
||||
const [result, submitForm] = useFormSubmit(form, query.useUpdateCredentialsMutation());
|
||||
|
||||
return (
|
||||
<div className="user-profile">
|
||||
<form className="user-profile" onSubmit={submitForm}>
|
||||
<h1>Profile</h1>
|
||||
<div className="overview">
|
||||
<FakeProfile/>
|
||||
{/* <FakeProfile/> */}
|
||||
<div className="files">
|
||||
<div>
|
||||
<h3>Header</h3>
|
||||
<File
|
||||
{/* <File
|
||||
id="header"
|
||||
fileType="image/*"
|
||||
/>
|
||||
/> */}
|
||||
</div>
|
||||
<div>
|
||||
<h3>Avatar</h3>
|
||||
<File
|
||||
{/* <File
|
||||
id="avatar"
|
||||
fileType="image/*"
|
||||
/> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FormTextInput
|
||||
label="Name"
|
||||
placeHolder="A GoToSocial user"
|
||||
field={form.display_name}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<TextInput
|
||||
{/* <TextInput
|
||||
id="display_name"
|
||||
name="Name"
|
||||
placeHolder="A GoToSocial user"
|
||||
|
|
@ -100,7 +111,74 @@ module.exports = function UserProfile() {
|
|||
<a href="https://docs.gotosocial.org/en/latest/user_guide/custom_css" target="_blank" className="moreinfolink" rel="noreferrer">Learn more about custom profile CSS (opens in a new tab)</a>
|
||||
</TextArea>
|
||||
}
|
||||
<Submit onClick={saveProfile} label="Save profile info" errorMsg={errorMsg} statusMsg={statusMsg} />
|
||||
</div>
|
||||
<Submit onClick={saveProfile} label="Save profile info" errorMsg={errorMsg} statusMsg={statusMsg} /> */}
|
||||
<MutationButton text="Save profile info" result={result}/>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
function FormTextInput({label, placeHolder, field}) {
|
||||
let [onChange, _reset, {value, ref}] = field;
|
||||
|
||||
return (
|
||||
<div className="form-field text">
|
||||
<label>
|
||||
{label}
|
||||
<input
|
||||
type="text"
|
||||
placeholder={placeHolder}
|
||||
{...{onChange, value, ref}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function useFormSubmit(form, [mutationQuery, result]) {
|
||||
return [
|
||||
result,
|
||||
function submitForm(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// transform the field definitions into an object with just their values
|
||||
let updatedFields = 0;
|
||||
const mutationData = syncpipe(form, [
|
||||
(_) => Object.entries(_),
|
||||
(_) => _.map(([key, field]) => {
|
||||
let data = field[2]; // [onChange, reset, {}]
|
||||
if (data.hasChanged()) {
|
||||
return [key, data.value];
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}),
|
||||
(_) => _.filter((value) => value != null),
|
||||
(_) => {
|
||||
updatedFields = _.length;
|
||||
return _;
|
||||
},
|
||||
(_) => Object.fromEntries(_)
|
||||
]);
|
||||
|
||||
if (updatedFields > 0) {
|
||||
return mutationQuery(mutationData);
|
||||
}
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
// function useForm(formSpec) {
|
||||
// const form = {};
|
||||
|
||||
// Object.entries(formSpec).forEach(([name, cfg]) => {
|
||||
// const [useTypedInput, defaultValue] = cfg;
|
||||
|
||||
// form[name] = useTypedInput(name, );
|
||||
// });
|
||||
|
||||
// form.submit = function submitForm() {
|
||||
|
||||
// };
|
||||
|
||||
// return form;
|
||||
// }
|
||||
Loading…
Reference in New Issue