From 30d396f50542e01c9d2e299a44c45baccb95719c Mon Sep 17 00:00:00 2001
From: Pratyush Joshi <86593014+PratyushJoshi@users.noreply.github.com>
Date: Thu, 26 Oct 2023 17:38:43 +0530
Subject: [PATCH 1/2] Update Channels.tsx

This code will allow the user to create a maximum of three channels, display the current channel count, and show an alert when the user attempts to create more channels beyond the limit. In this code, I've integrated react-toastify to display toast notifications for the channel creation limit. The error toast will be shown at the top-right corner of the screen and will automatically close after 5 seconds.
---
 src/pages/Channels.tsx | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/pages/Channels.tsx b/src/pages/Channels.tsx
index f890a54..3a59031 100644
--- a/src/pages/Channels.tsx
+++ b/src/pages/Channels.tsx
@@ -1,5 +1,7 @@
 import { useState } from 'react';
 import { FaPlus } from 'react-icons/fa';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 import ChannelCard from '../features/Channels/ChannelCard';
 import { getCreatedChannels } from '../features/Channels/channelsSlice';
@@ -7,6 +9,8 @@ import CreateChannel from '../features/Channels/CreateChannel';
 import { selectUser } from '../features/User/userSlice';
 import { useAppSelector } from '../lib/store';
 
+const MAX_CHANNELS = 3; // Maximum channels per user
+
 const Channels = () => {
   const [openForm, setOpenForm] = useState(false);
   const user = useAppSelector(selectUser);
@@ -14,6 +18,25 @@ const Channels = () => {
     getCreatedChannels(state, user?.id ?? ""),
   );
 
+  const channelCount = channels.length;
+
+  const canCreateChannel = channelCount < MAX_CHANNELS;
+
+  const handleCreateChannelClick = () => {
+    if (canCreateChannel) {
+      setOpenForm(true);
+    } else {
+      // Show a toast notification instead of alert
+      toast.error("You've reached the maximum limit of channels (3).", {
+        position: "top-right",
+        autoClose: 5000, // Close after 5 seconds
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+      });
+    }
+  };
+
   return (
     <>
       <section className="space-y-4 px-16 py-8">
@@ -27,11 +50,14 @@ const Channels = () => {
             <button
               type="button"
               className="flex h-12 w-12 items-center justify-center rounded-full bg-dark-700 p-2"
-              onClick={() => setOpenForm(true)}
+              onClick={handleCreateChannelClick}
             >
               <FaPlus size={30} />
             </button>
             <span>Create a channel</span>
+            <p>
+              You've created {channelCount} out of {MAX_CHANNELS} channels.
+            </p>
           </div>
           {channels.map((channel) => (
             <div
@@ -44,6 +70,7 @@ const Channels = () => {
         </div>
       </section>
       {openForm && <CreateChannel close={() => setOpenForm(false)} />}
+      <ToastContainer />
     </>
   );
 };

From bea663f4b28bb3ef6005d77bfee4ecbc536dedff Mon Sep 17 00:00:00 2001
From: Hein Thant <hthant00chk@gmail.com>
Date: Thu, 26 Oct 2023 19:26:00 +0630
Subject: [PATCH 2/2] Update Channels.tsx

---
 src/pages/Channels.tsx | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/pages/Channels.tsx b/src/pages/Channels.tsx
index 3a59031..2739b93 100644
--- a/src/pages/Channels.tsx
+++ b/src/pages/Channels.tsx
@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { FaPlus } from 'react-icons/fa';
-import { ToastContainer, toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
+import { toast } from 'react-hot-toast';
 
 import ChannelCard from '../features/Channels/ChannelCard';
 import { getCreatedChannels } from '../features/Channels/channelsSlice';
@@ -27,13 +26,7 @@ const Channels = () => {
       setOpenForm(true);
     } else {
       // Show a toast notification instead of alert
-      toast.error("You've reached the maximum limit of channels (3).", {
-        position: "top-right",
-        autoClose: 5000, // Close after 5 seconds
-        hideProgressBar: false,
-        closeOnClick: true,
-        pauseOnHover: true,
-      });
+      toast.error("You've reached the maximum limit of channels (3).");
     }
   };