diff --git a/apps/frontend/src/components/launches/add.edit.model.tsx b/apps/frontend/src/components/launches/add.edit.model.tsx index feb430d9..1440d9ef 100644 --- a/apps/frontend/src/components/launches/add.edit.model.tsx +++ b/apps/frontend/src/components/launches/add.edit.model.tsx @@ -111,14 +111,8 @@ export const AddEditModal: FC<{ // selected integrations to allow edit const [selectedIntegrations, setSelectedIntegrations] = useStateCallback< Integrations[] - >( - set - ? ints.filter( - (f) => - uniq(set.posts.flatMap((p) => p.integration.id)).indexOf(f.id) > -1 - ) - : [] - ); + >([]); + const integrations = useMemo(() => { if (!customer) { return ints; @@ -134,6 +128,28 @@ export const AddEditModal: FC<{ // hook to open a new modal const modal = useModals(); + const selectIntegrationsDefault = useMemo(() => { + if (!set) { + return []; + } + + const keepReference: Integrations[] = []; + const neededIntegrations = uniq(set.posts.flatMap((p) => p.integration.id)); + for (const i of ints) { + if (neededIntegrations.indexOf(i.id) > -1) { + keepReference.push(i); + } + } + + return keepReference; + }, [set]); + + useEffect(() => { + if (set?.posts) { + setSelectedIntegrations(selectIntegrationsDefault); + } + }, [selectIntegrationsDefault]); + // value of each editor const [value, setValue] = useState< Array<{ @@ -148,7 +164,7 @@ export const AddEditModal: FC<{ onlyValues ? onlyValues : set - ? set?.posts?.[0].value || [ + ? set?.posts?.[0]?.value || [ { content: '', }, @@ -683,7 +699,7 @@ Here are the things you can do: !f.disabled)} - selectedIntegrations={set ? selectedIntegrations : []} + selectedIntegrations={selectIntegrationsDefault} singleSelect={false} onChange={setSelectedIntegrations} isMain={true} diff --git a/apps/frontend/src/components/launches/calendar.tsx b/apps/frontend/src/components/launches/calendar.tsx index bfe6a718..3b40cf8e 100644 --- a/apps/frontend/src/components/launches/calendar.tsx +++ b/apps/frontend/src/components/launches/calendar.tsx @@ -551,9 +551,35 @@ export const CalendarColumn: FC<{ const addModal = useCallback(async () => { const signature = await (await fetch('/signatures/default')).json(); - const set = !sets.length ? undefined : await new Promise(() => { + const set: any = !sets.length + ? undefined + : await new Promise((resolve) => { + modal.openModal({ + title: t('select_set', 'Select a Set'), + closeOnClickOutside: true, + closeOnEscape: true, + withCloseButton: true, + onClose: () => resolve('exit'), + classNames: { + modal: 'bg-secondary text-textColor', + }, + children: ( + { + resolve(selectedSet); + modal.closeAll(); + }} + onContinueWithoutSet={() => { + resolve(undefined); + modal.closeAll(); + }} + /> + ), + }); + }); - }); + if (set === 'exit') return; modal.openModal({ closeOnClickOutside: false, @@ -583,6 +609,7 @@ export const CalendarColumn: FC<{ date={ randomHour ? getDate.hour(Math.floor(Math.random() * 24)) : getDate } + {...set?.content ? {set: JSON.parse(set.content)} : {}} reopenModal={() => ({})} /> ), @@ -939,3 +966,45 @@ export const Statistics = () => { ); }; + +const SetSelectionModal: FC<{ + sets: any[]; + onSelect: (set: any) => void; + onContinueWithoutSet: () => void; +}> = ({ sets, onSelect, onContinueWithoutSet }) => { + const t = useT(); + + return ( +
+
+ {t('choose_set_or_continue', 'Choose a set or continue without one')} +
+ +
+ {sets.map((set) => ( +
onSelect(set)} + className="p-3 border border-tableBorder rounded-lg cursor-pointer hover:bg-customColor31 transition-colors" + > +
{set.name}
+ {set.description && ( +
+ {set.description} +
+ )} +
+ ))} +
+ +
+ +
+
+ ); +}; diff --git a/apps/frontend/src/components/launches/providers/high.order.provider.tsx b/apps/frontend/src/components/launches/providers/high.order.provider.tsx index 6b55b5d6..d87f5d3b 100644 --- a/apps/frontend/src/components/launches/providers/high.order.provider.tsx +++ b/apps/frontend/src/components/launches/providers/high.order.provider.tsx @@ -177,7 +177,7 @@ export const withProvider = function ( // this is a smart function, it updates the global value without updating the states (too heavy) and set the settings validation const form = useValues( set?.set - ? set.set.posts.find((p) => p.integration.id === props.id).settings + ? set?.set?.posts?.find((p) => p?.integration?.id === props?.id)?.settings : existingData.settings, props.id, props.identifier,