Apply new eslint rules; default to prettier for styling

This commit is contained in:
DaneEveritt 2022-06-26 15:13:52 -04:00
parent f22cce8881
commit dc84af9937
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
218 changed files with 3876 additions and 3564 deletions

View file

@ -22,9 +22,9 @@ interface Props {
const VariableBox = ({ variable }: Props) => {
const FLASH_KEY = `server:startup:${variable.envVariable}`;
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const [ loading, setLoading ] = useState(false);
const [ canEdit ] = usePermissions([ 'startup.update' ]);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const [loading, setLoading] = useState(false);
const [canEdit] = usePermissions(['startup.update']);
const { clearFlashes, clearAndAddHttpError } = useFlash();
const { mutate } = getServerStartup(uuid);
@ -33,35 +33,42 @@ const VariableBox = ({ variable }: Props) => {
clearFlashes(FLASH_KEY);
updateStartupVariable(uuid, variable.envVariable, value)
.then(([ response, invocation ]) => mutate(data => ({
...data,
invocation,
variables: (data.variables || []).map(v => v.envVariable === response.envVariable ? response : v),
}), false))
.catch(error => {
.then(([response, invocation]) =>
mutate(
(data) => ({
...data,
invocation,
variables: (data.variables || []).map((v) =>
v.envVariable === response.envVariable ? response : v
),
}),
false
)
)
.catch((error) => {
console.error(error);
clearAndAddHttpError({ error, key: FLASH_KEY });
})
.then(() => setLoading(false));
}, 500);
const useSwitch = variable.rules.some(v => v === 'boolean' || v === 'in:0,1');
const selectValues = variable.rules.find(v => v.startsWith('in:'))?.split(',') || [];
const useSwitch = variable.rules.some((v) => v === 'boolean' || v === 'in:0,1');
const selectValues = variable.rules.find((v) => v.startsWith('in:'))?.split(',') || [];
return (
<TitledGreyBox
title={
<p css={tw`text-sm uppercase`}>
{!variable.isEditable &&
<span css={tw`bg-neutral-700 text-xs py-1 px-2 rounded-full mr-2 mb-1`}>Read Only</span>
}
{!variable.isEditable && (
<span css={tw`bg-neutral-700 text-xs py-1 px-2 rounded-full mr-2 mb-1`}>Read Only</span>
)}
{variable.name}
</p>
}
>
<FlashMessageRender byKey={FLASH_KEY} css={tw`mb-2 md:mb-4`}/>
<FlashMessageRender byKey={FLASH_KEY} css={tw`mb-2 md:mb-4`} />
<InputSpinner visible={loading}>
{useSwitch ?
{useSwitch ? (
<>
<Switch
readOnly={!canEdit || !variable.isEditable}
@ -74,26 +81,30 @@ const VariableBox = ({ variable }: Props) => {
}}
/>
</>
:
) : (
<>
{selectValues.length > 0 ?
{selectValues.length > 0 ? (
<>
<Select
onChange={e => setVariableValue(e.target.value)}
onChange={(e) => setVariableValue(e.target.value)}
name={variable.envVariable}
defaultValue={variable.serverValue}
disabled={!canEdit || !variable.isEditable}
>
{selectValues.map(selectValue => (
<option key={selectValue.replace('in:', '')} value={selectValue.replace('in:', '')}>{selectValue.replace('in:', '')}</option>
{selectValues.map((selectValue) => (
<option
key={selectValue.replace('in:', '')}
value={selectValue.replace('in:', '')}
>
{selectValue.replace('in:', '')}
</option>
))}
</Select>
</>
:
) : (
<>
<Input
onKeyUp={e => {
onKeyUp={(e) => {
if (canEdit && variable.isEditable) {
setVariableValue(e.currentTarget.value);
}
@ -104,13 +115,11 @@ const VariableBox = ({ variable }: Props) => {
placeholder={variable.defaultValue}
/>
</>
}
)}
</>
}
)}
</InputSpinner>
<p css={tw`mt-1 text-xs text-neutral-300`}>
{variable.description}
</p>
<p css={tw`mt-1 text-xs text-neutral-300`}>{variable.description}</p>
</TitledGreyBox>
);
};