groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(web): remove typescript

Browse Source
This commit is contained in:
Ali BARIN
2024-02-27 15:23:23 +00:00
parent 636870a075
commit b3ae2d2748
337 changed files with 2067 additions and 4997 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
packages/web/src/components/ChooseAppAndEventSubstep/index.tsx → packages/web/src/components/ChooseAppAndEventSubstep/index.jsx
View File

@@ -7,49 +7,22 @@ import ListItem from '@mui/material/ListItem';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import Chip from '@mui/material/Chip';
import type { IApp, IStep, ISubstep, ITrigger, IAction } from 'types';
import useFormatMessage from 'hooks/useFormatMessage';
import useApps from 'hooks/useApps';
import { EditorContext } from 'contexts/Editor';
import FlowSubstepTitle from 'components/FlowSubstepTitle';
type ChooseAppAndEventSubstepProps = {
substep: ISubstep;
expanded?: boolean;
onExpand: () => void;
onCollapse: () => void;
onChange: ({ step }: { step: IStep }) => void;
onSubmit: () => void;
step: IStep;
};
const optionGenerator = (app: {
name: string;
key: string;
}): { label: string; value: string } => ({
label: app.name as string,
value: app.key as string,
const optionGenerator = (app) => ({
label: app.name,
value: app.key,
});
const eventOptionGenerator = (app: {
name: string;
key: string;
type?: string;
}): { label: string; value: string; type: string } => ({
label: app.name as string,
value: app.key as string,
type: app?.type as string,
const eventOptionGenerator = (app) => ({
label: app.name,
value: app.key,
type: app?.type,
});
const getOption = <T extends { value: string }>(
options: T[],
selectedOptionValue?: string
) => options.find((option) => option.value === selectedOptionValue);
function ChooseAppAndEventSubstep(
props: ChooseAppAndEventSubstepProps
): React.ReactElement {
const getOption = (options, selectedOptionValue) =>
options.find((option) => option.value === selectedOptionValue);
function ChooseAppAndEventSubstep(props) {
const {
substep,
expanded = false,
@@ -59,49 +32,38 @@ function ChooseAppAndEventSubstep(
onSubmit,
onChange,
} = props;
const formatMessage = useFormatMessage();
const editorContext = React.useContext(EditorContext);
const isTrigger = step.type === 'trigger';
const isAction = step.type === 'action';
const { apps } = useApps({
onlyWithTriggers: isTrigger,
onlyWithActions: isAction,
});
const app = apps?.find((currentApp: IApp) => currentApp.key === step.appKey);
const app = apps?.find((currentApp) => currentApp.key === step.appKey);
const appOptions = React.useMemo(
() => apps?.map((app) => optionGenerator(app)) || [],
[apps]
[apps],
);
const actionsOrTriggers: Array<ITrigger | IAction> =
(isTrigger ? app?.triggers : app?.actions) || [];
const actionsOrTriggers = (isTrigger ? app?.triggers : app?.actions) || [];
const actionOrTriggerOptions = React.useMemo(
() => actionsOrTriggers.map((trigger) => eventOptionGenerator(trigger)),
[app?.key]
[app?.key],
);
const selectedActionOrTrigger = actionsOrTriggers.find(
(actionOrTrigger: IAction | ITrigger) => actionOrTrigger.key === step?.key
(actionOrTrigger) => actionOrTrigger.key === step?.key,
);
const isWebhook =
isTrigger && (selectedActionOrTrigger as ITrigger)?.type === 'webhook';
const isWebhook = isTrigger && selectedActionOrTrigger?.type === 'webhook';
const { name } = substep;
const valid: boolean = !!step.key && !!step.appKey;
const valid = !!step.key && !!step.appKey;
// placeholders
const onEventChange = React.useCallback(
(event: React.SyntheticEvent, selectedOption: unknown) => {
(event, selectedOption) => {
if (typeof selectedOption === 'object') {
// TODO: try to simplify type casting below.
const typedSelectedOption = selectedOption as { value: string };
const option: { value: string } = typedSelectedOption;
const eventKey = option?.value as string;
const typedSelectedOption = selectedOption;
const option = typedSelectedOption;
const eventKey = option?.value;
if (step.key !== eventKey) {
onChange({
step: {
@@ -112,17 +74,15 @@ function ChooseAppAndEventSubstep(
}
}
},
[step, onChange]
[step, onChange],
);
const onAppChange = React.useCallback(
(event: React.SyntheticEvent, selectedOption: unknown) => {
(event, selectedOption) => {
if (typeof selectedOption === 'object') {
// TODO: try to simplify type casting below.
const typedSelectedOption = selectedOption as { value: string };
const option: { value: string } = typedSelectedOption;
const appKey = option?.value as string;
const typedSelectedOption = selectedOption;
const option = typedSelectedOption;
const appKey = option?.value;
if (step.appKey !== appKey) {
onChange({
step: {
@@ -135,11 +95,9 @@ function ChooseAppAndEventSubstep(
}
}
},
[step, onChange]
[step, onChange],
);
const onToggle = expanded ? onCollapse : onExpand;
return (
<React.Fragment>
<FlowSubstepTitle
@@ -200,7 +158,7 @@ function ChooseAppAndEventSubstep(
{isWebhook && (
<Chip
label={formatMessage(
'flowEditor.instantTriggerType'
'flowEditor.instantTriggerType',
)}
/>
)}
@@ -237,11 +195,11 @@ function ChooseAppAndEventSubstep(
</Box>
)}
{isTrigger && (selectedActionOrTrigger as ITrigger)?.pollInterval && (
{isTrigger && selectedActionOrTrigger?.pollInterval && (
<TextField
label={formatMessage('flowEditor.pollIntervalLabel')}
value={formatMessage('flowEditor.pollIntervalValue', {
minutes: (selectedActionOrTrigger as ITrigger)?.pollInterval,
minutes: selectedActionOrTrigger?.pollInterval,
})}
sx={{ mt: 2 }}
fullWidth
@@ -264,5 +222,4 @@ function ChooseAppAndEventSubstep(
</React.Fragment>
);
}
export default ChooseAppAndEventSubstep;