Skip to content

Commit 587cd65

Browse files
jihea-parkjihea-park
committed
[#noissue] Refactor ApplicationCombinedList
1 parent 2cb0235 commit 587cd65

File tree

2 files changed

+212
-185
lines changed

2 files changed

+212
-185
lines changed

‎web-frontend/src/main/v3/packages/ui/src/components/Application/ApplicationCombinedList.tsx‎

Lines changed: 13 additions & 185 deletions
Original file line numberDiff line numberDiff line change
@@ -1,201 +1,29 @@
1-
import { Popover, PopoverClose, PopoverContent, PopoverTrigger, Separator } from '../ui';
2-
import { ApplicationItem, ApplicationList, ApplicationVirtualList } from './ApplicationList';
31
import { APP_SETTING_KEYS, ApplicationType } from '@pinpoint-fe/ui/src/constants';
4-
import { LuStar, LuStarOff } from 'react-icons/lu';
5-
import { cn } from '../../lib/utils';
6-
import { Toaster } from '../ui/toaster';
7-
import { useToast } from '../../lib/use-toast';
8-
import { VirtualSearchList } from '../VirtualList';
92
import { useLocalStorage } from '@pinpoint-fe/ui/src/hooks';
10-
import { RxCaretSort } from 'react-icons/rx';
11-
import { ServerIcon } from './ServerIcon';
3+
import {
4+
ApplicationCombinedListForCommon,
5+
ApplicationCombinedListForCommonProps,
6+
} from './ApplicationCombinedListForCommon';
127

13-
export interface ApplicationCombinedListProps {
8+
export interface ApplicationCombinedListProps extends ApplicationCombinedListForCommonProps {
149
triggerClassName?: string;
15-
contentClassName?: string;
16-
open?: boolean;
17-
disabled?: boolean;
18-
selectedApplication?: ApplicationType | null;
19-
selectPlaceHolder?: string;
20-
addFavoriteMessage?: string;
21-
removeFavoriteMessage?: string;
22-
onClickApplication?: (application: ApplicationType) => void;
2310
}
2411

25-
export const ApplicationCombinedList = ({
26-
triggerClassName,
27-
contentClassName,
28-
open,
29-
disabled,
30-
selectedApplication,
31-
selectPlaceHolder = 'Select your application.',
32-
addFavoriteMessage = 'Added to favorites.',
33-
removeFavoriteMessage = 'Removed from favorites.',
34-
onClickApplication,
35-
}: ApplicationCombinedListProps) => {
36-
const { toast } = useToast();
12+
export const ApplicationCombinedList = (props: ApplicationCombinedListProps) => {
3713
const [favoriteList, setFavoriteList] = useLocalStorage<ApplicationType[]>(
3814
APP_SETTING_KEYS.FAVORLIITE_APPLICATION_LIST,
3915
[],
4016
);
4117

42-
const isFavoriteApplication = (application: ApplicationType) => {
43-
return favoriteList.find((favoriteApp: ApplicationType) => {
44-
return (
45-
favoriteApp.applicationName === application.applicationName &&
46-
favoriteApp?.serviceType === application?.serviceType
47-
);
48-
});
49-
};
50-
51-
const handleClickItem = (application: ApplicationType) => {
52-
onClickApplication?.(application);
53-
};
54-
55-
const handleClickFavorite = (
56-
e: React.MouseEvent,
57-
application: ApplicationType,
58-
option?: { disableToast: boolean },
59-
) => {
60-
e.stopPropagation();
61-
62-
if (isFavoriteApplication(application)) {
63-
setFavoriteList(
64-
favoriteList.filter(
65-
(favoriteApp: ApplicationType) =>
66-
!(
67-
favoriteApp.applicationName === application.applicationName &&
68-
favoriteApp?.serviceType === application?.serviceType
69-
),
70-
),
71-
);
72-
!option?.disableToast &&
73-
toast({
74-
description: (
75-
<div className="flex items-center gap-1 text-xs">
76-
<LuStarOff />
77-
{removeFavoriteMessage}
78-
</div>
79-
),
80-
variant: 'small',
81-
});
82-
} else {
83-
setFavoriteList(
84-
[...favoriteList, application].sort((a, b) => {
85-
if (a.applicationName && b.applicationName) {
86-
return a.applicationName.localeCompare(b.applicationName);
87-
}
88-
return 1;
89-
}),
90-
);
91-
!option?.disableToast &&
92-
toast({
93-
description: (
94-
<div className="flex items-center gap-2 text-xs">
95-
<LuStar className="fill-emerald-400 stroke-emerald-400" />
96-
{addFavoriteMessage}
97-
</div>
98-
),
99-
variant: 'small',
100-
});
101-
}
18+
const handleClickFavorite = (newFavoriteList: ApplicationType[]) => {
19+
setFavoriteList(newFavoriteList);
10220
};
10321

10422
return (
105-
<Popover defaultOpen={open}>
106-
<PopoverTrigger
107-
className={cn('w-80 min-w-80 border-b-1 text-sm disabled:opacity-50', triggerClassName)}
108-
disabled={disabled}
109-
>
110-
<div className="flex items-center w-full p-1 pt-2">
111-
{selectedApplication ? (
112-
<div className="flex items-center flex-1 gap-2 overflow-hidden group/applist-input">
113-
<ServerIcon className="w-6" application={selectedApplication} />
114-
<div className="truncate">{selectedApplication.applicationName}</div>
115-
<div
116-
className="flex-none hidden w-5 h-5 ml-auto cursor-pointer group-hover/applist-input:block"
117-
onClick={(e) => handleClickFavorite(e, selectedApplication, { disableToast: true })}
118-
>
119-
<LuStar
120-
className={cn('opacity-50 pb-0.5', {
121-
'fill-emerald-400 stroke-emerald-400 opacity-70':
122-
isFavoriteApplication(selectedApplication),
123-
})}
124-
/>
125-
</div>
126-
</div>
127-
) : (
128-
selectPlaceHolder
129-
)}
130-
<RxCaretSort className="w-4 h-4 ml-auto opacity-50" />
131-
</div>
132-
</PopoverTrigger>
133-
<PopoverContent className={cn('w-80 p-0 text-sm !z-[2001]', contentClassName)}>
134-
<VirtualSearchList
135-
inputClassName="focus-visible:ring-0 border-none shadow-none"
136-
placeHolder="Input application name"
137-
>
138-
{(props) => {
139-
return (
140-
<div>
141-
<Separator />
142-
<div className="p-2 text-xs font-semibold">Favorite List</div>
143-
<div className="h-48">
144-
<ApplicationVirtualList
145-
itemAs={PopoverClose}
146-
list={favoriteList}
147-
filterKeyword={props?.filterKeyword}
148-
onClickItem={handleClickItem}
149-
itemChild={(app) => {
150-
return (
151-
<>
152-
<ServerIcon application={app} />
153-
<div className="truncate">{app.applicationName}</div>
154-
<div
155-
className="flex-none w-6 h-6 ml-auto cursor-pointer"
156-
onClick={(e) => handleClickFavorite(e, app)}
157-
>
158-
<LuStar className=" fill-emerald-400 stroke-emerald-400" />
159-
</div>
160-
</>
161-
);
162-
}}
163-
/>
164-
</div>
165-
<Separator />
166-
<div className="p-2 text-xs font-semibold">Application List</div>
167-
<ApplicationList
168-
{...props}
169-
onClickItem={handleClickItem}
170-
itemAs={PopoverClose}
171-
itemChild={(application) => {
172-
const isFavorite = isFavoriteApplication(application);
173-
return (
174-
<>
175-
<ApplicationItem {...application} />
176-
<div
177-
className={cn('ml-auto h-6 w-6 cursor-pointer flex-none', {
178-
'[&>svg]:hover:fill-emerald-400 [&>svg]:hover:stroke-emerald-400':
179-
!isFavorite,
180-
})}
181-
onClick={(e) => handleClickFavorite(e, application)}
182-
>
183-
<LuStar
184-
className={cn({
185-
'fill-emerald-400 stroke-emerald-400': isFavorite,
186-
})}
187-
/>
188-
</div>
189-
</>
190-
);
191-
}}
192-
/>
193-
</div>
194-
);
195-
}}
196-
</VirtualSearchList>
197-
<Toaster duration={1000} />
198-
</PopoverContent>
199-
</Popover>
23+
<ApplicationCombinedListForCommon
24+
favoriteList={favoriteList}
25+
onClickFavorite={handleClickFavorite}
26+
{...props}
27+
/>
20028
);
20129
};

0 commit comments

Comments
 (0)