Skip to content

Commit 6853c5b

Browse files
nevo-davidnevo-david
committed
feat: add or edit modal fixes
1 parent 9567c4a commit 6853c5b

File tree

3 files changed

+61
-25
lines changed

3 files changed

+61
-25
lines changed

‎apps/frontend/src/components/launches/add.edit.model.tsx‎

Lines changed: 36 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
11
'use client';
22

33
import React, {
4-
FC,
5-
Fragment,
6-
MouseEventHandler,
7-
useCallback,
8-
useEffect,
9-
useMemo,
10-
useState,
4+
FC, Fragment, MouseEventHandler, useCallback, useEffect, useMemo, useRef, useState
115
} from 'react';
126
import dayjs from 'dayjs';
137
import { Integrations } from '@gitroom/frontend/components/launches/calendar.context';
@@ -52,6 +46,7 @@ import Image from 'next/image';
5246
import { weightedLength } from '@gitroom/helpers/utils/count.length';
5347
import { uniqBy } from 'lodash';
5448
import { Select } from '@gitroom/react/form/select';
49+
import { useClickOutside } from '@gitroom/frontend/components/layout/click.outside';
5550

5651
function countCharacters(text: string, type: string): number {
5752
if (type !== 'x') {
@@ -411,6 +406,8 @@ export const AddEditModal: FC<{
411406
});
412407
}, [data, postFor, selectedIntegrations]);
413408

409+
useClickOutside(askClose);
410+
414411
return (
415412
<>
416413
{user?.tier?.ai && (
@@ -465,6 +462,22 @@ export const AddEditModal: FC<{
465462
</Select>
466463
)}
467464
<DatePicker onChange={setDateState} date={dateState} />
465+
{!selectedIntegrations.length && (
466+
<svg
467+
width="10"
468+
height="11"
469+
viewBox="0 0 10 11"
470+
fill="none"
471+
xmlns="http://www.w3.org/2000/svg"
472+
className="cursor-pointer"
473+
onClick={askClose}
474+
>
475+
<path
476+
d="M9.85403 9.64628C9.90048 9.69274 9.93733 9.74789 9.96247 9.80859C9.98762 9.86928 10.0006 9.93434 10.0006 10C10.0006 10.0657 9.98762 10.1308 9.96247 10.1915C9.93733 10.2522 9.90048 10.3073 9.85403 10.3538C9.80757 10.4002 9.75242 10.4371 9.69173 10.4622C9.63103 10.4874 9.56598 10.5003 9.50028 10.5003C9.43458 10.5003 9.36953 10.4874 9.30883 10.4622C9.24813 10.4371 9.19298 10.4002 9.14653 10.3538L5.00028 6.20691L0.854028 10.3538C0.760208 10.4476 0.63296 10.5003 0.500278 10.5003C0.367596 10.5003 0.240348 10.4476 0.146528 10.3538C0.0527077 10.26 2.61548e-09 10.1327 0 10C-2.61548e-09 9.86735 0.0527077 9.7401 0.146528 9.64628L4.2934 5.50003L0.146528 1.35378C0.0527077 1.25996 0 1.13272 0 1.00003C0 0.867352 0.0527077 0.740104 0.146528 0.646284C0.240348 0.552464 0.367596 0.499756 0.500278 0.499756C0.63296 0.499756 0.760208 0.552464 0.854028 0.646284L5.00028 4.79316L9.14653 0.646284C9.24035 0.552464 9.3676 0.499756 9.50028 0.499756C9.63296 0.499756 9.76021 0.552464 9.85403 0.646284C9.94785 0.740104 10.0006 0.867352 10.0006 1.00003C10.0006 1.13272 9.94785 1.25996 9.85403 1.35378L5.70715 5.50003L9.85403 9.64628Z"
477+
fill="currentColor"
478+
/>
479+
</svg>
480+
)}
468481
</div>
469482
</TopTitle>
470483

@@ -608,9 +621,6 @@ export const AddEditModal: FC<{
608621
id="add-edit-post-dialog-buttons"
609622
className="flex flex-row flex-wrap w-full h-full gap-[10px] justify-end items-center"
610623
>
611-
<Button className="rounded-[4px]" onClick={askClose}>
612-
Cancel
613-
</Button>
614624
<Submitted
615625
updateOrder={updateOrder}
616626
postId={existingData?.posts?.[0]?.id}
@@ -690,12 +700,22 @@ export const AddEditModal: FC<{
690700
)}
691701
>
692702
<div className="mx-[16px]">
693-
<TopTitle
694-
title=""
695-
expend={expend.show}
696-
collapse={expend.hide}
697-
shouldExpend={expend.expend}
698-
/>
703+
<TopTitle title="">
704+
<svg
705+
width="10"
706+
height="11"
707+
viewBox="0 0 10 11"
708+
fill="none"
709+
xmlns="http://www.w3.org/2000/svg"
710+
className="cursor-pointer"
711+
onClick={askClose}
712+
>
713+
<path
714+
d="M9.85403 9.64628C9.90048 9.69274 9.93733 9.74789 9.96247 9.80859C9.98762 9.86928 10.0006 9.93434 10.0006 10C10.0006 10.0657 9.98762 10.1308 9.96247 10.1915C9.93733 10.2522 9.90048 10.3073 9.85403 10.3538C9.80757 10.4002 9.75242 10.4371 9.69173 10.4622C9.63103 10.4874 9.56598 10.5003 9.50028 10.5003C9.43458 10.5003 9.36953 10.4874 9.30883 10.4622C9.24813 10.4371 9.19298 10.4002 9.14653 10.3538L5.00028 6.20691L0.854028 10.3538C0.760208 10.4476 0.63296 10.5003 0.500278 10.5003C0.367596 10.5003 0.240348 10.4476 0.146528 10.3538C0.0527077 10.26 2.61548e-09 10.1327 0 10C-2.61548e-09 9.86735 0.0527077 9.7401 0.146528 9.64628L4.2934 5.50003L0.146528 1.35378C0.0527077 1.25996 0 1.13272 0 1.00003C0 0.867352 0.0527077 0.740104 0.146528 0.646284C0.240348 0.552464 0.367596 0.499756 0.500278 0.499756C0.63296 0.499756 0.760208 0.552464 0.854028 0.646284L5.00028 4.79316L9.14653 0.646284C9.24035 0.552464 9.3676 0.499756 9.50028 0.499756C9.63296 0.499756 9.76021 0.552464 9.85403 0.646284C9.94785 0.740104 10.0006 0.867352 10.0006 1.00003C10.0006 1.13272 9.94785 1.25996 9.85403 1.35378L5.70715 5.50003L9.85403 9.64628Z"
715+
fill="currentColor"
716+
/>
717+
</svg>
718+
</TopTitle>
699719
</div>
700720
{!!selectedIntegrations.length && (
701721
<div className="flex-1 flex flex-col p-[16px] pt-0">

‎apps/frontend/src/components/launches/helpers/pick.platform.component.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -147,13 +147,6 @@ export const PickPlatforms: FC<{
147147
);
148148

149149
const handler = async ({ integrationsId }: { integrationsId: string[] }) => {
150-
console.log(
151-
'setSelectedIntegration',
152-
integrations,
153-
integrationsId,
154-
dayjs().unix()
155-
);
156-
157150
const selected = selectedIntegrations.map((p) => p.id);
158151
const notToRemove = selected.filter((p) => integrationsId.includes(p));
159152
const toAdd = integrationsId.filter((p) => !selected.includes(p));
@@ -225,7 +218,7 @@ export const PickPlatforms: FC<{
225218
>
226219
<path
227220
d="M10.3541 12.6463C10.4006 12.6927 10.4374 12.7479 10.4626 12.8086C10.4877 12.8693 10.5007 12.9343 10.5007 13C10.5007 13.0657 10.4877 13.1308 10.4626 13.1915C10.4374 13.2522 10.4006 13.3073 10.3541 13.3538C10.3077 13.4002 10.2525 13.4371 10.1918 13.4622C10.1311 13.4874 10.0661 13.5003 10.0004 13.5003C9.9347 13.5003 9.86964 13.4874 9.80894 13.4622C9.74825 13.4371 9.6931 13.4002 9.64664 13.3538L4.64664 8.35378C4.60015 8.30735 4.56328 8.2522 4.53811 8.1915C4.51295 8.13081 4.5 8.06574 4.5 8.00003C4.5 7.93433 4.51295 7.86926 4.53811 7.80856C4.56328 7.74786 4.60015 7.69272 4.64664 7.64628L9.64664 2.64628C9.74046 2.55246 9.86771 2.49976 10.0004 2.49976C10.1331 2.49976 10.2603 2.55246 10.3541 2.64628C10.448 2.7401 10.5007 2.86735 10.5007 3.00003C10.5007 3.13272 10.448 3.25996 10.3541 3.35378L5.70727 8.00003L10.3541 12.6463Z"
228-
fill="white"
221+
fill="currentColor"
229222
/>
230223
</svg>
231224
)}
@@ -347,7 +340,7 @@ export const PickPlatforms: FC<{
347340
>
348341
<path
349342
d="M5.64586 12.6463C5.5994 12.6927 5.56255 12.7479 5.53741 12.8086C5.51227 12.8693 5.49933 12.9343 5.49933 13C5.49933 13.0657 5.51227 13.1308 5.53741 13.1915C5.56255 13.2522 5.5994 13.3073 5.64586 13.3538C5.69231 13.4002 5.74746 13.4371 5.80816 13.4622C5.86886 13.4874 5.93391 13.5003 5.99961 13.5003C6.0653 13.5003 6.13036 13.4874 6.19106 13.4622C6.25175 13.4371 6.3069 13.4002 6.35336 13.3538L11.3534 8.35378C11.3998 8.30735 11.4367 8.2522 11.4619 8.1915C11.487 8.13081 11.5 8.06574 11.5 8.00003C11.5 7.93433 11.487 7.86926 11.4619 7.80856C11.4367 7.74786 11.3998 7.69272 11.3534 7.64628L6.35336 2.64628C6.25954 2.55246 6.13229 2.49976 5.99961 2.49976C5.86692 2.49976 5.73968 2.55246 5.64586 2.64628C5.55204 2.7401 5.49933 2.86735 5.49933 3.00003C5.49933 3.13272 5.55204 3.25996 5.64586 3.35378L10.2927 8.00003L5.64586 12.6463Z"
350-
fill="white"
343+
fill="currentColor"
351344
/>
352345
</svg>
353346
</div>

‎apps/frontend/src/components/layout/click.outside.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { useEffect } from 'react';
2+
3+
export const useClickOutside = (callback: () => Promise<void>) => {
4+
const handleClick = (event: MouseEvent) => {
5+
const selector = document.querySelector('#add-edit-modal');
6+
if (selector && !selector.contains(event.target as HTMLElement)) {
7+
callback();
8+
}
9+
};
10+
useEffect(() => {
11+
document
12+
.querySelector('.mantine-Modal-root')
13+
// @ts-ignore
14+
?.addEventListener('click', handleClick);
15+
16+
return () => {
17+
document
18+
.querySelector('.mantine-Modal-root')
19+
// @ts-ignore
20+
?.removeEventListener('click', handleClick);
21+
};
22+
});
23+
};

0 commit comments

Comments
 (0)