mirrors/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2025-11-10 12:37:29 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions

checklist performance improvements

Browse source
This commit is contained in:
f0x 2023-01-30 23:46:20 +01:00
commit 4367960fe4
3 changed files with 120 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

80
web/source/settings/lib/form/check-list.jsx
View file

@ -22,26 +22,12 @@ const React = require("react");
const syncpipe = require("syncpipe");
const { createSlice } = require("@reduxjs/toolkit");
const { reducer, actions } = createSlice({
const slice = createSlice({
name: "checklist",
initialState: {},
reducers: {
create: (state, { payload }) => {
const { entries, uniqueKey, defaultValue } = payload;
return syncpipe(entries, [
(_) => _.map((entry) => {
let key = entry[uniqueKey];
return [
key,
{
...entry,
key,
checked: state[key]?.checked ?? entry.checked ?? defaultValue
}
];
}),
(_) => Object.fromEntries(_)
]);
return createState(payload, state);
},
updateAll: (state, { payload: value }) => {
return syncpipe(state, [
@ -62,26 +48,40 @@ const { reducer, actions } = createSlice({
}
});
const { reducer: reducer2, actions } = slice;
function reducer() {
console.log("REDUCING", ...arguments);
return reducer2(...arguments);
}
function createState({ entries, uniqueKey, defaultValue }, oldState) {
console.log("creating state", oldState);
return syncpipe(entries, [
(_) => _.map((entry) => {
let key = entry[uniqueKey];
return [
key,
{
...entry,
key,
checked: oldState?.[key]?.checked ?? entry.checked ?? defaultValue
}
];
}),
(_) => Object.fromEntries(_)
]);
}
module.exports = function useCheckListInput({ name }, { entries, uniqueKey = "key", defaultValue = false }) {
const [state, dispatch] = React.useReducer(reducer, {});
const [state, dispatch] = React.useReducer(reducer, null, () => createState({ entries, uniqueKey, defaultValue }));
const [someSelected, setSomeSelected] = React.useState(false);
const [toggleAllState, setToggleAllState] = React.useState(0);
const toggleAllRef = React.useRef(null);
React.useEffect(() => {
/*
entries changed, update state,
re-using old state if available for key
*/
dispatch(actions.create({ entries, uniqueKey, defaultValue }));
/* eslint-disable-next-line react-hooks/exhaustive-deps */
}, [entries]);
console.log(state);
React.useEffect(() => {
performance.mark("GoToSocial-useCheckListInput-useEffect-start");
/* Updates (un)check all checkbox, based on shortcode checkboxes
Can be 0 (not checked), 1 (checked) or 2 (indeterminate)
*/
@ -108,8 +108,20 @@ module.exports = function useCheckListInput({ name }, { entries, uniqueKey = "ke
setToggleAllState(all ? 1 : 0);
toggleAllRef.current.indeterminate = false;
}
performance.mark("GoToSocial-useCheckListInput-useEffect-finish");
performance.measure("GoToSocial-useCheckListInput-useEffect-processed", "GoToSocial-useCheckListInput-useEffect-start", "GoToSocial-useCheckListInput-useEffect-finish");
}, [state, toggleAllRef]);
const reset = React.useCallback(
() => dispatch(actions.updateAll(defaultValue)),
[defaultValue]
);
const onChange = React.useCallback(
(key, value) => dispatch(actions.update({ key, value })),
[]
);
return React.useMemo(() => {
function toggleAll(e) {
let selectAll = e.target.checked;
@ -122,14 +134,6 @@ module.exports = function useCheckListInput({ name }, { entries, uniqueKey = "ke
setToggleAllState(selectAll);
}
function reset() {
dispatch(actions.updateAll(defaultValue));
}
function onChange(key, value) {
dispatch(actions.update({ key, value }));
}
function selectedValues() {
return syncpipe(state, [
(_) => Object.values(_),
@ -154,5 +158,5 @@ module.exports = function useCheckListInput({ name }, { entries, uniqueKey = "ke
onChange: toggleAll
}
});
}, [defaultValue, name, someSelected, state, toggleAllState]);
}, [name, onChange, reset, someSelected, state, toggleAllState]);
};

37
web/source/settings/lib/form/text.jsx
View file

@ -20,14 +20,41 @@
const React = require("react");
module.exports = function useTextInput({ name, Name }, { validator, defaultValue = "", dontReset = false } = {}) {
module.exports = function useTextInput({ name, Name }, {
defaultValue = "",
dontReset = false,
validator,
initValidation: _initValidation
} = {}) {
const [text, setText] = React.useState(defaultValue);
const [valid, setValid] = React.useState(true);
const textRef = React.useRef(null);
const initValidation = React.useRef(_initValidation); // memoize forever
const [validation, setValidation] = React.useState(_initValidation ?? "");
const [_isValidating, startValidation] = React.useTransition();
const valid = validation == "";
const isFirstUpdate = React.useRef(true);
function onChange(e) {
let input = e.target.value;
setText(input);
if (validator) {
startValidation(() => {
let validatorMsg = (isFirstUpdate.current && initValidation.current)
? initValidation.current
: validator(input);
if (isFirstUpdate.current) {
isFirstUpdate.current = false;
return; // No need to update anything
}
setValidation(validatorMsg);
});
}
}
function reset() {
@ -38,11 +65,9 @@ module.exports = function useTextInput({ name, Name }, { validator, defaultValue
React.useEffect(() => {
if (validator && textRef.current) {
let res = validator(text);
setValid(res == "");
textRef.current.setCustomValidity(res);
textRef.current.setCustomValidity(validation);
}
}, [text, textRef, validator]);
}, [validation, validator]);
// Array / Object hybrid, for easier access in different contexts
return Object.assign([