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

wip: Restructure twitter integration

Browse Source
This commit is contained in:
Faruk AYDIN
2022-10-04 23:09:50 +03:00
parent dc0e03245f
commit 8308265a62
21 changed files with 358 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
packages/web/src/components/ChooseAppAndEventSubstep/index.tsx
View File

@@ -15,7 +15,7 @@ import FlowSubstepTitle from 'components/FlowSubstepTitle';
import type { IApp, IStep, ISubstep } from '@automatisch/types';
type ChooseAppAndEventSubstepProps = {
substep: ISubstep,
substep: ISubstep;
expanded?: boolean;
onExpand: () => void;
onCollapse: () => void;
@@ -24,14 +24,17 @@ type ChooseAppAndEventSubstepProps = {
step: IStep;
};
const optionGenerator = (app: IApp): { label: string; value: string; } => ({
const optionGenerator = (app: IApp): { label: string; value: string } => ({
label: app.name as string,
value: app.key as string,
});
const getOption = (options: Record<string, unknown>[], appKey: IApp["key"]) => options.find(option => option.value === appKey as string) || null;
const getOption = (options: Record<string, unknown>[], appKey?: IApp['key']) =>
options.find((option) => option.value === (appKey as string)) || null;
function ChooseAppAndEventSubstep(props: ChooseAppAndEventSubstepProps): React.ReactElement {
function ChooseAppAndEventSubstep(
props: ChooseAppAndEventSubstepProps
): React.ReactElement {
const {
substep,
expanded = false,
@@ -47,59 +50,74 @@ function ChooseAppAndEventSubstep(props: ChooseAppAndEventSubstepProps): React.R
const isTrigger = step.type === 'trigger';
const { data } = useQuery(GET_APPS, { variables: { onlyWithTriggers: isTrigger }});
const { data } = useQuery(GET_APPS, {
variables: { onlyWithTriggers: isTrigger },
});
const apps: IApp[] = data?.getApps;
const app = apps?.find((currentApp: IApp) => currentApp.key === step.appKey);
const appOptions = React.useMemo(() => apps?.map((app) => optionGenerator(app)), [apps]);
const appOptions = React.useMemo(
() => apps?.map((app) => optionGenerator(app)),
[apps]
);
const actionsOrTriggers = isTrigger ? app?.triggers : app?.actions;
const actionOptions = React.useMemo(() => actionsOrTriggers?.map((trigger) => optionGenerator(trigger)) ?? [], [app?.key]);
const selectedActionOrTrigger = actionsOrTriggers?.find((actionOrTrigger) => actionOrTrigger.key === step?.key) || null;
const actionOptions = React.useMemo(
() => actionsOrTriggers?.map((trigger) => optionGenerator(trigger)) ?? [],
[app?.key]
);
const selectedActionOrTrigger =
actionsOrTriggers?.find(
(actionOrTrigger) => actionOrTrigger.key === step?.key
) || null;
const {
name,
} = substep;
const { name } = substep;
const valid: boolean = !!step.key && !!step.appKey;
// placeholders
const onEventChange = React.useCallback((event: React.SyntheticEvent, selectedOption: unknown) => {
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 onEventChange = React.useCallback(
(event: React.SyntheticEvent, selectedOption: unknown) => {
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;
if (step.key !== eventKey) {
onChange({
step: {
...step,
key: eventKey,
},
});
if (step.key !== eventKey) {
onChange({
step: {
...step,
key: eventKey,
},
});
}
}
}
}, [step, onChange]);
},
[step, onChange]
);
const onAppChange = React.useCallback((event: React.SyntheticEvent, selectedOption: unknown) => {
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 onAppChange = React.useCallback(
(event: React.SyntheticEvent, selectedOption: unknown) => {
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;
if (step.appKey !== appKey) {
onChange({
step: {
...step,
key: '',
appKey,
parameters: {},
},
});
if (step.appKey !== appKey) {
onChange({
step: {
...step,
key: '',
appKey,
parameters: {},
},
});
}
}
}
}, [step, onChange]);
},
[step, onChange]
);
const onToggle = expanded ? onCollapse : onExpand;
@@ -112,14 +130,26 @@ function ChooseAppAndEventSubstep(props: ChooseAppAndEventSubstepProps): React.R
valid={valid}
/>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<ListItem sx={{ pt: 2, pb: 3, flexDirection: 'column', alignItems: 'flex-start' }}>
<ListItem
sx={{
pt: 2,
pb: 3,
flexDirection: 'column',
alignItems: 'flex-start',
}}
>
<Autocomplete
fullWidth
disablePortal
disableClearable
disabled={editorContext.readOnly}
options={appOptions}
renderInput={(params) => <TextField {...params} label={formatMessage('flowEditor.chooseApp')} />}
renderInput={(params) => (
<TextField
{...params}
label={formatMessage('flowEditor.chooseApp')}
/>
)}
value={getOption(appOptions, step.appKey)}
onChange={onAppChange}
/>
@@ -137,7 +167,12 @@ function ChooseAppAndEventSubstep(props: ChooseAppAndEventSubstepProps): React.R
disableClearable
disabled={editorContext.readOnly}
options={actionOptions}
renderInput={(params) => <TextField {...params} label={formatMessage('flowEditor.chooseEvent')} />}
renderInput={(params) => (
<TextField
{...params}
label={formatMessage('flowEditor.chooseEvent')}
/>
)}
value={getOption(actionOptions, step.key)}
onChange={onEventChange}
/>
@@ -147,7 +182,9 @@ function ChooseAppAndEventSubstep(props: ChooseAppAndEventSubstepProps): React.R
{isTrigger && selectedActionOrTrigger?.pollInterval && (
<TextField
label={formatMessage('flowEditor.pollIntervalLabel')}
value={formatMessage('flowEditor.pollIntervalValue', { minutes: selectedActionOrTrigger.pollInterval })}
value={formatMessage('flowEditor.pollIntervalValue', {
minutes: selectedActionOrTrigger.pollInterval,
})}
sx={{ mt: 2 }}
fullWidth
disabled

71
packages/web/src/components/PowerInput/Suggestions.tsx
View File

@@ -24,13 +24,10 @@ const LIST_HEIGHT = 256;
const getPartialArray = (array: any[], length = array.length) => {
return array.slice(0, length);
}
};
const Suggestions = (props: SuggestionsProps) => {
const {
data,
onSuggestionClick = () => null,
} = props;
const { data, onSuggestionClick = () => null } = props;
const [current, setCurrent] = React.useState<number | null>(0);
const [listLength, setListLength] = React.useState<number>(SHORT_LIST_LENGTH);
@@ -40,41 +37,43 @@ const Suggestions = (props: SuggestionsProps) => {
const collapseList = () => {
setListLength(SHORT_LIST_LENGTH);
}
};
React.useEffect(() => {
setListLength(SHORT_LIST_LENGTH);
}, [current])
}, [current]);
return (
<Paper
elevation={5}
sx={{ width: '100%' }}
>
<Typography variant="subtitle2" sx={{ p: 2, }}>Variables</Typography>
<List
disablePadding
>
<Paper elevation={5} sx={{ width: '100%' }}>
<Typography variant="subtitle2" sx={{ p: 2 }}>
Variables
</Typography>
<List disablePadding>
{data.map((option: IStep, index: number) => (
<>
<ListItemButton
divider
onClick={() => setCurrent((currentIndex) => currentIndex === index ? null : index)}
sx={{ py: 0.5, }}
onClick={() =>
setCurrent((currentIndex) =>
currentIndex === index ? null : index
)
}
sx={{ py: 0.5 }}
>
<ListItemText
primary={option.name}
/>
<ListItemText primary={option.name} />
{!!option.output?.length && (
current === index ? <ExpandLess /> : <ExpandMore />
)}
{!!option.output?.length &&
(current === index ? <ExpandLess /> : <ExpandMore />)}
</ListItemButton>
<Collapse in={current === index} timeout="auto" unmountOnExit>
<List component="div" disablePadding sx={{ maxHeight: LIST_HEIGHT, overflowY: 'auto' }}>
{getPartialArray(option.output as any || [], listLength)
.map((suboption: any, index: number) => (
<List
component="div"
disablePadding
sx={{ maxHeight: LIST_HEIGHT, overflowY: 'auto' }}
>
{getPartialArray((option.output as any) || [], listLength).map(
(suboption: any, index: number) => (
<ListItemButton
sx={{ pl: 4 }}
divider
@@ -85,7 +84,7 @@ const Suggestions = (props: SuggestionsProps) => {
primaryTypographyProps={{
variant: 'subtitle1',
title: 'Property name',
sx: { fontWeight: 700 }
sx: { fontWeight: 700 },
}}
secondary={suboption.value || ''}
secondaryTypographyProps={{
@@ -95,24 +94,18 @@ const Suggestions = (props: SuggestionsProps) => {
}}
/>
</ListItemButton>
))
}
)
)}
</List>
{option.output?.length > listLength && (
<Button
fullWidth
onClick={expandList}
>
{(option.output?.length || 0) > listLength && (
<Button fullWidth onClick={expandList}>
Show all
</Button>
)}
{listLength === Infinity && (
<Button
fullWidth
onClick={collapseList}
>
<Button fullWidth onClick={collapseList}>
Show less
</Button>
)}
@@ -122,6 +115,6 @@ const Suggestions = (props: SuggestionsProps) => {
</List>
</Paper>
);
}
};
export default Suggestions;

35
packages/web/src/components/PowerInput/data.ts
View File

@@ -1,6 +1,7 @@
import type { IStep } from '@automatisch/types';
const joinBy = (delimiter = '.', ...args: string[]) => args.filter(Boolean).join(delimiter);
const joinBy = (delimiter = '.', ...args: string[]) =>
args.filter(Boolean).join(delimiter);
const process = (data: any, parentKey?: any, index?: number): any[] => {
if (typeof data !== 'object') {
@@ -8,14 +9,19 @@ const process = (data: any, parentKey?: any, index?: number): any[] => {
{
name: `${parentKey}.${index}`,
value: data,
}
]
},
];
}
const entries = Object.entries(data);
return entries.flatMap(([name, value]) => {
const fullName = joinBy('.', parentKey, (index as number)?.toString(), name);
const fullName = joinBy(
'.',
parentKey,
(index as number)?.toString(),
name
);
if (Array.isArray(value)) {
return value.flatMap((item, index) => process(item, fullName, index));
@@ -25,10 +31,12 @@ const process = (data: any, parentKey?: any, index?: number): any[] => {
return process(value, fullName);
}
return [{
name: fullName,
value,
}];
return [
{
name: fullName,
value,
},
];
});
};
@@ -39,12 +47,17 @@ export const processStepWithExecutions = (steps: IStep[]): any[] => {
.filter((step: IStep) => {
const hasExecutionSteps = !!step.executionSteps?.length;
return hasExecutionSteps
return hasExecutionSteps;
})
.map((step: IStep, index: number) => ({
id: step.id,
// TODO: replace with step.name once introduced
name: `${index + 1}. ${step.appKey?.charAt(0)?.toUpperCase() + step.appKey?.slice(1)}`,
output: process(step.executionSteps?.[0]?.dataOut || {}, `step.${step.id}`),
name: `${index + 1}. ${
(step.appKey || '').charAt(0)?.toUpperCase() + step.appKey?.slice(1)
}`,
output: process(
step.executionSteps?.[0]?.dataOut || {},
`step.${step.id}`
),
}));
};