From 9cee56e379a9520dd8c30f34b10b0a02ca105ca9 Mon Sep 17 00:00:00 2001
From: Elvyra <88881326+EepyElvyra@users.noreply.github.com>
Date: Thu, 23 Jan 2025 18:06:16 +0100
Subject: [PATCH] minor fixes

- switch from indices to IDs
- make indexes for the channel view unique
- Fix guilds shuffling around in the channel view by sorting them alphabetically
- Fix possibility to add elements twice from search modal by allowing to hide already added items from the search modal
- Remove invalid channels instead of just not rendering them.
---
 .../components/SettingArrayComponent.tsx      | 85 ++++++++++++-------
 src/components/SearchModal.tsx                |  6 +-
 2 files changed, 56 insertions(+), 35 deletions(-)

diff --git a/src/components/PluginSettings/components/SettingArrayComponent.tsx b/src/components/PluginSettings/components/SettingArrayComponent.tsx
index 5ccd2902c..bdaa6c4e0 100644
--- a/src/components/PluginSettings/components/SettingArrayComponent.tsx
+++ b/src/components/PluginSettings/components/SettingArrayComponent.tsx
@@ -68,7 +68,7 @@ export function SettingArrayComponent({
     id
 }: ISettingElementProps<PluginOptionArray>) {
     const [error, setError] = useState<string | null>(null);
-    const [items, setItems] = useState<string[]>([]);
+    const [items, setItems] = useState<string[]>(pluginSettings[id] || []);
     const [text, setText] = useState<string>("");
 
     useEffect(() => {
@@ -87,16 +87,12 @@ export function SettingArrayComponent({
     useEffect(() => {
         pluginSettings[id] = items;
         onChange(items);
-    }, [items, pluginSettings, id]);
+    }, [items]);
 
     useEffect(() => {
         onError(error !== null);
     }, [error]);
 
-    if (items.length === 0 && pluginSettings[id].length !== 0) {
-        setItems(pluginSettings[id]);
-    }
-
     function openSearchModal(val?: string) {
         return openModal(modalProps => (
             <SearchModal
@@ -105,16 +101,17 @@ export function SettingArrayComponent({
                 subText={"All selected items will be added to " + wordsToTitle(wordsFromCamel(id))}
                 searchType={option.type === OptionType.USERS ? "USERS" : option.type === OptionType.CHANNELS ? "CHANNELS" : "GUILDS"}
                 onSubmit={values => setItems([...items, ...values.map(v => v.id)])}
+                excludeIds={items}
             />
         ));
     }
 
-    const removeButton = (index: number) => {
+    const removeButton = (id: string) => {
         return (
             <Button
                 id={cl("remove-button")}
                 size={Button.Sizes.MIN}
-                onClick={() => removeItem(index)}
+                onClick={() => removeItem(id)}
                 style={
                     { background: "none", color: "red" }
                 }
@@ -134,17 +131,16 @@ export function SettingArrayComponent({
 
     };
 
-    const removeItem = (index: number) => {
+    const removeItem = (itemId: string) => {
         if (items.length === 1) {
             setItems([]);
-            pluginSettings[id] = [];
             return;
         }
-        setItems(items.filter((_, i) => i !== index));
+        setItems(items.filter(item => item !== itemId));
     };
 
     function renderGuildView() {
-        return items.map(item => GuildStore.getGuild(item))
+        return items.map(item => GuildStore.getGuild(item) || item)
             .map((guild, index) => (
                 <Flex
                     flexDirection="row"
@@ -154,15 +150,15 @@ export function SettingArrayComponent({
                         marginBottom: "8px"
                     }}
                 >
-                    {guild ? (
+                    {typeof guild !== "string" ? (
                         <div className={cl("name")} style={{ color: "var(--text-normal)" }}>
                             <span style={{ display: "inline-flex", alignItems: "center" }}>
                                 {guildIcon(guild)}
                                 <Text variant="text-sm/semibold" style={{ marginLeft: "4px" }}>{guild.name}</Text>
                             </span>
                         </div>
-                    ) : <Text variant="text-sm/semibold">{"Unknown Guild"}</Text>}
-                    {removeButton(index)}
+                    ) : <Text variant="text-sm/semibold">{`Unknown Guild (${guild})`}</Text>}
+                    {removeButton(typeof guild !== "string" ? guild.id : guild)}
                 </Flex>
             ));
     }
@@ -206,9 +202,14 @@ export function SettingArrayComponent({
         const channels: Record<string, Channel[]> = {};
         const dmChannels: Channel[] = [];
         const elements: React.JSX.Element[] = [];
+
+        // to not remove items while iterating
+        const invalidChannels: string[] = [];
+
         for (const item of items) {
             const channel = ChannelStore.getChannel(item);
             if (!channel) {
+                invalidChannels.push(item);
                 continue;
             }
             if (channel.isDM() || channel.isGroupDM()) {
@@ -221,6 +222,10 @@ export function SettingArrayComponent({
             channels[channel.guild_id].push(channel);
         }
 
+        for (const channel of invalidChannels) {
+            removeItem(channel);
+        }
+
         const userMention = (channel: Channel) => {
             return <UserMentionComponent
                 userId={channel.recipients[0]}
@@ -239,33 +244,40 @@ export function SettingArrayComponent({
             </span>;
         };
 
+        let idx = -1;
+
         if (dmChannels.length > 0) {
             elements.push(
                 <details>
                     <summary style={{ color: "var(--text-normal)", marginBottom: "8px" }}>DMs</summary>
                     <div style={{ paddingLeft: "16px" }}>
-                        {dmChannels.map((channel, index) => (
-                            <Flex
+                        {dmChannels.map(channel => {
+                            idx += 1;
+                            return <Flex
                                 flexDirection="row"
-                                key={index}
+                                key={idx}
                                 style={{
                                     gap: "1px",
                                     marginBottom: "8px",
                                 }}
                             >
                                 {channel.recipients.length === 1 ? userMention(channel) : gdmComponent(channel)}
-                                {removeButton(index)}
-                            </Flex>
-                        ))}
+                                {removeButton(channel.id)}
+                            </Flex>;
+                        })}
                     </div>
                 </details >
             );
         }
+
+        const guilds: { name: string; guild: React.JSX.Element }[] = [];
+
         Object.keys(channels).forEach(guildId => {
             const guild = GuildStore.getGuild(guildId);
-            elements.push(
+            guilds.push(
+                { name: guild?.name ?? `Unknown Guild (${guildId})`, guild: (
                 <details>
-                    {!guild ? <summary style={{ color: "var(--text-normal)", marginBottom: "8px" }}>Unknown Guild</summary> : (
+                    {!guild ? <summary style={{ color: "var(--text-normal)", marginBottom: "8px" }}>{`Unknown Guild (${guildId})`}</summary> : (
                         <summary style={{ color: "var(--text-normal)", marginBottom: "8px" }}>
                             <span style={{ display: "inline-flex", alignItems: "center" }}>
                                 {guildIcon(guild)}
@@ -274,26 +286,33 @@ export function SettingArrayComponent({
                         </summary>
                     )}
                     <div style={{ paddingLeft: "16px", color: "var(--text-normal)" }}>
-                        {channels[guildId].map((channel, index) => (
-                            <Flex
+                        {channels[guildId].map(channel => {
+                            idx += 1;
+                            return <Flex
                                 flexDirection="row"
-                                key={index}
+                                key={idx}
                                 style={{
                                     gap: "1px",
                                     marginBottom: "8px"
-                                }}
-                            >
+                                }}>
                                 <span style={{ display: "inline-flex", alignItems: "center" }}>
                                     {getChannelSymbol(channel.type)}
                                     <Text variant="text-sm/semibold" style={{ marginLeft: "4px" }}>{channel.name}</Text>
-                                    {removeButton(index)}
+                                    {removeButton(channel.id)}
                                 </span>
-                            </Flex>
-                        ))}
+                            </Flex>;
+                        })}
                     </div>
-                </details>
+                </details>) }
             );
         });
+
+        guilds.sort((a, b) => a.name.localeCompare(b.name));
+
+        for (const guild of guilds) {
+            elements.push(guild.guild);
+        }
+
         return elements;
     }
 
@@ -334,7 +353,7 @@ export function SettingArrayComponent({
                             ) : (
                                 <span style={{ color: "var(--text-normal)" }}>{item}</span>
                             )}
-                            {removeButton(index)}
+                            {removeButton(item)}
                         </Flex>
                     )) : option.type === OptionType.CHANNELS ?
                         renderChannelView() : renderGuildView()
diff --git a/src/components/SearchModal.tsx b/src/components/SearchModal.tsx
index ea9c7ce0a..dd83768fa 100644
--- a/src/components/SearchModal.tsx
+++ b/src/components/SearchModal.tsx
@@ -147,14 +147,16 @@ function searchTypeToText(type: string | string[]) {
  * @param {string} [props.input] - The initial input value for the search bar.
  * @param {("USERS" | "CHANNELS" | "GUILDS")[] | "USERS" | "CHANNELS" | "GUILDS" | "ALL"} [props.searchType="ALL"] - The type of items to search for.
  * @param {string} [props.subText] - Additional text to display below the heading.
+ * @param {string[]} [props.excludeIds] - An array of IDs to exclude from the search results.
  * @returns The rendered SearchModal component.
  */
-export default function SearchModal({ modalProps, onSubmit, input, searchType = "ALL", subText }: {
+export default function SearchModal({ modalProps, onSubmit, input, searchType = "ALL", subText, excludeIds }: {
     modalProps: ModalProps;
     onSubmit(selected: DestinationItem[]): void;
     input?: string;
     searchType?: ("USERS" | "CHANNELS" | "GUILDS")[] | "USERS" | "CHANNELS" | "GUILDS" | "ALL";
     subText?: string
+    excludeIds?: string[],
 }) {
     const UserIcon = React.memo(function ({
         user,
@@ -384,7 +386,7 @@ export default function SearchModal({ modalProps, onSubmit, input, searchType =
 
     const filterItems = (items: any[]) => {
         return items.filter(
-            item => item != null && resultTypes.includes(item.type)
+            item => item != null && resultTypes.includes(item.type) && (excludeIds != null && !excludeIds.includes(item.record.id))
         );
     };