add save functionality for announcement channel changes

package.json

@@ -44,6 +44,7 @@
     "highcharts": "^10.3.1",
     "highcharts-react-official": "^3.1.0",
     "jwt-decode": "^3.1.2",
+    "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.38",
     "next": "13.0.2",
@@ -70,6 +71,7 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/d3-force": "^3.0.4",
+    "@types/lodash": "^4.14.202",
     "@types/papaparse": "^5.3.8",
     "@types/testing-library__user-event": "^4.2.0",
     "autoprefixer": "^10.4.13",

src/components/announcements/create/publicMessageContainer/TcPublicMessageContainer.tsx

@@ -1,17 +1,17 @@
 import React, { useContext, useEffect, useState } from 'react';
 import TcText from '../../../shared/TcText';
-import { MdAnnouncement, MdExpandMore } from 'react-icons/md';
+import { MdAnnouncement } from 'react-icons/md';
 import TcIconContainer from '../TcIconContainer';
 import TcSelect from '../../../shared/TcSelect';
-import { FormControl, InputLabel } from '@mui/material';
+import { FormControl, FormHelperText, InputLabel } from '@mui/material';
 import TcInput from '../../../shared/TcInput';
 import TcPublicMessagePreviewDialog from './TcPublicMessagePreviewDialog';
 import { ChannelContext } from '../../../../context/ChannelContext';
 import TcPlatformChannelList from '../../../communitySettings/platform/TcPlatformChannelList';
 import { IGuildChannels } from '../../../../utils/types';
 import { DiscordData } from '../../../../pages/announcements/edit-announcements';
 import TcPermissionHints from '../../../global/TcPermissionHints';
-import { useToken } from '../../../../context/TokenContext';
+import TcButton from '../../../shared/TcButton';
 
 export interface FlattenedChannel {
   id: string;
@@ -26,7 +26,7 @@ export interface ITcPublicMessageContainerProps {
     selectedChannels,
   }: {
     message: string;
-    selectedChannels: FlattenedChannel[];
+    selectedChannels: FlattenedChannel[] | [];
   }) => void;
 }
 
@@ -38,7 +38,9 @@ function TcPublicMessageContainer({
   const channelContext = useContext(ChannelContext);
 
   const { channels, selectedSubChannels } = channelContext;
-  const { community } = useToken();
+  const [hasInteracted, setHasInteracted] = useState<boolean>(false);
+  const [showError, setShowError] = useState<boolean>(false);
+  const [isDropdownVisible, setIsDropdownVisible] = useState<boolean>(false);
 
   const flattenChannels = (channels: IGuildChannels[]): FlattenedChannel[] => {
     let flattened: FlattenedChannel[] = [];
@@ -62,6 +64,8 @@ function TcPublicMessageContainer({
   const [selectedChannels, setSelectedChannels] = useState<FlattenedChannel[]>(
     []
   );
+  const [confirmedSelectedChannels, setConfirmedSelectedChannels] =
+    useState<boolean>(false);
 
   useEffect(() => {
     setSelectedChannels(flattenChannels(channels));
@@ -77,8 +81,12 @@ function TcPublicMessageContainer({
     selectedChannels.length > 0 && message.length > 0;
 
   useEffect(() => {
-    handlePublicAnnouncements({ message, selectedChannels });
-  }, [message, selectedChannels]);
+    if (confirmedSelectedChannels) {
+      handlePublicAnnouncements({ message, selectedChannels });
+    } else {
+      handlePublicAnnouncements({ message, selectedChannels: [] });
+    }
+  }, [message, selectedChannels, confirmedSelectedChannels]);
 
   useEffect(() => {
     if (isEdit && publicAnnouncementsData) {
@@ -92,13 +100,24 @@ function TcPublicMessageContainer({
             label: channel.name,
           })
         );
-
+        setConfirmedSelectedChannels(true);
         setSelectedChannels(formattedChannels);
         setMessage(publicAnnouncementsData.template);
       }
     }
   }, [isEdit, publicAnnouncementsData]);
 
+  const handleSaveChannels = () => {
+    setConfirmedSelectedChannels(true);
+    setIsDropdownVisible(false);
+    setShowError(hasInteracted && selectedChannels.length === 0);
+  };
+
+  const toggleDropdownVisibility = () => {
+    setHasInteracted(true);
+    setIsDropdownVisible(!isDropdownVisible);
+  };
+
   return (
     <div className="space-y-3">
       <div className="flex flex-col md:flex-row md:justify-between md:items-center space-y-1 md:space-y-0">
@@ -115,14 +134,6 @@ function TcPublicMessageContainer({
         />
       </div>
       <div className="space-y-1.5">
-        {/* <div>
-          <TcText text="Send message to:" variant="subtitle1" />
-          <TcText
-            text="Our bot will deliver the announcement across chosen channels with the necessary access to share the specified message."
-            variant="caption"
-            className="text-gray-400"
-          />
-        </div> */}
         <FormControl variant="filled" fullWidth size="medium">
           <InputLabel id="select-standard-label">Select Channels</InputLabel>
           <TcSelect
@@ -131,6 +142,8 @@ function TcPublicMessageContainer({
             id="select-standard-label"
             label="Platform"
             value={selectedChannels}
+            open={isDropdownVisible}
+            onOpen={toggleDropdownVisibility}
             renderValue={(selected) =>
               (selected as FlattenedChannel[])
                 .map((channel) => `#${channel.label}`)
@@ -142,8 +155,25 @@ function TcPublicMessageContainer({
                 <TcPlatformChannelList refreshTrigger={false} />
               </div>
               <TcPermissionHints />
+              <div className="flex justify-end">
+                <TcButton
+                  text="Save"
+                  variant="contained"
+                  sx={{ minWidth: '12rem' }}
+                  onClick={handleSaveChannels}
+                />
+              </div>
             </div>
           </TcSelect>
+          {showError && (
+            <FormHelperText>
+              <TcText
+                text="Please select at least one channel."
+                variant="caption"
+                className="text-red-500"
+              />
+            </FormHelperText>
+          )}
         </FormControl>
         <div className="flex flex-col">
           <TcText text="Write message here:" variant="subtitle1" />