From d3de5d165883e198c8dc739a45302c027ee0235c Mon Sep 17 00:00:00 2001
From: Nagaraj Jyoti <90248052+idealgeek007@users.noreply.github.com>
Date: Mon, 14 Oct 2024 07:41:46 +0530
Subject: [PATCH 1/4] Resolve unexpected auto toggle of show more button

---
 src/components/Testimonials/index.jsx | 30 +++++++++++++++++----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/Testimonials/index.jsx b/src/components/Testimonials/index.jsx
index d87d868..88cd898 100644
--- a/src/components/Testimonials/index.jsx
+++ b/src/components/Testimonials/index.jsx
@@ -31,25 +31,33 @@ const tweets = [
 ];
 
 export function Testimonials() {
-  const [isMobile, setIsMobile] = useState(null);
+  const [isMobile, setIsMobile] = useState(typeof window !== 'undefined' ? window.innerWidth < 768 : false);
   const [showAll, setShowAll] = useState(false);
 
   useEffect(() => {
     const handleResize = () => {
-      setIsMobile(window.innerWidth < 768);
+      const wasMobile = isMobile;
+      const isCurrentlyMobile = window.innerWidth < 768;
 
-      // Reset showAll to false when switching to mobile
-      if (window.innerWidth < 768) {
+      // Update the mobile state if it has changed
+      setIsMobile(isCurrentlyMobile);
+
+      // Only reset showAll if transitioning between mobile and desktop
+      if (wasMobile !== isCurrentlyMobile) {
         setShowAll(false);
       }
     };
 
-    // Set initial value for isMobile
+    // Initial call to set the state based on current window size
     handleResize();
 
     window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
+    
+    // Cleanup on component unmount
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [isMobile]);
 
   const visibleTweetsCount = isMobile ? (showAll ? tweets.length : 8) : tweets.length;
 
@@ -74,7 +82,7 @@ export function Testimonials() {
         </div>
       </Container>
       <div className="mx-auto mt-16 max-w-2xl px-8 sm:px-8 lg:mt-20 lg:max-w-none">
-        <div className="masonry sm:columns-1 md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5 column-gap-6">
+        <div className="masonry sm:columns-1 md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5 gap-6">
           {tweets.slice(0, visibleTweetsCount).map((tweetId) => (
             <Tweet key={tweetId} id={tweetId} />
           ))}
@@ -83,9 +91,9 @@ export function Testimonials() {
         {isMobile && (
           <div className="mt-8 text-center">
             <Button 
-            variant="solid" 
-            color="green" 
-            onClick={toggleTweets}
+              variant="solid" 
+              color="green" 
+              onClick={toggleTweets}
             >
               {showAll ? 'Show Less' : 'Show More'}
             </Button>

From 6ccdf7d25b91b18e3e93866bee8a6f95348bbd69 Mon Sep 17 00:00:00 2001
From: Nagaraj Jyoti <90248052+idealgeek007@users.noreply.github.com>
Date: Mon, 14 Oct 2024 16:12:55 +0530
Subject: [PATCH 2/4] Update index.jsx

---
 src/components/Testimonials/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Testimonials/index.jsx b/src/components/Testimonials/index.jsx
index 88cd898..80c8bbe 100644
--- a/src/components/Testimonials/index.jsx
+++ b/src/components/Testimonials/index.jsx
@@ -82,7 +82,7 @@ export function Testimonials() {
         </div>
       </Container>
       <div className="mx-auto mt-16 max-w-2xl px-8 sm:px-8 lg:mt-20 lg:max-w-none">
-        <div className="masonry sm:columns-1 md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5 gap-6">
+        <div className="masonry sm:columns-1 md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5 column-gap-6">
           {tweets.slice(0, visibleTweetsCount).map((tweetId) => (
             <Tweet key={tweetId} id={tweetId} />
           ))}

From 9da25d3afaea4b19553e45b7c00827f7f0aa029b Mon Sep 17 00:00:00 2001
From: Nagaraj <nagarajkj7@gmail.com>
Date: Mon, 14 Oct 2024 16:36:37 +0530
Subject: [PATCH 3/4] optimized and resolved the tweet display error on mobile
 screens

---
 src/components/Testimonials/index.jsx | 20 ++++----------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/src/components/Testimonials/index.jsx b/src/components/Testimonials/index.jsx
index 80c8bbe..8c6f203 100644
--- a/src/components/Testimonials/index.jsx
+++ b/src/components/Testimonials/index.jsx
@@ -31,33 +31,21 @@ const tweets = [
 ];
 
 export function Testimonials() {
-  const [isMobile, setIsMobile] = useState(typeof window !== 'undefined' ? window.innerWidth < 768 : false);
+  const [isMobile, setIsMobile] = useState(false); // Initialize as false
   const [showAll, setShowAll] = useState(false);
 
   useEffect(() => {
     const handleResize = () => {
-      const wasMobile = isMobile;
-      const isCurrentlyMobile = window.innerWidth < 768;
-
-      // Update the mobile state if it has changed
-      setIsMobile(isCurrentlyMobile);
-
-      // Only reset showAll if transitioning between mobile and desktop
-      if (wasMobile !== isCurrentlyMobile) {
-        setShowAll(false);
-      }
+      setIsMobile(window.innerWidth < 768);
     };
-
-    // Initial call to set the state based on current window size
     handleResize();
 
     window.addEventListener('resize', handleResize);
     
-    // Cleanup on component unmount
     return () => {
       window.removeEventListener('resize', handleResize);
     };
-  }, [isMobile]);
+  }, []);
 
   const visibleTweetsCount = isMobile ? (showAll ? tweets.length : 8) : tweets.length;
 
@@ -82,7 +70,7 @@ export function Testimonials() {
         </div>
       </Container>
       <div className="mx-auto mt-16 max-w-2xl px-8 sm:px-8 lg:mt-20 lg:max-w-none">
-        <div className="masonry sm:columns-1 md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5 column-gap-6">
+        <div className="masonry sm:columns-1 md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5 gap-6">
           {tweets.slice(0, visibleTweetsCount).map((tweetId) => (
             <Tweet key={tweetId} id={tweetId} />
           ))}

From 327354f795d243ba1a9340a741da766810f21662 Mon Sep 17 00:00:00 2001
From: Nagaraj <nagarajkj7@gmail.com>
Date: Mon, 14 Oct 2024 16:44:10 +0530
Subject: [PATCH 4/4] Resolve state issue with the button

---
 src/components/Testimonials/index.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Testimonials/index.jsx b/src/components/Testimonials/index.jsx
index 8c6f203..7d1c86d 100644
--- a/src/components/Testimonials/index.jsx
+++ b/src/components/Testimonials/index.jsx
@@ -41,7 +41,7 @@ export function Testimonials() {
     handleResize();
 
     window.addEventListener('resize', handleResize);
-    
+
     return () => {
       window.removeEventListener('resize', handleResize);
     };
@@ -70,7 +70,7 @@ export function Testimonials() {
         </div>
       </Container>
       <div className="mx-auto mt-16 max-w-2xl px-8 sm:px-8 lg:mt-20 lg:max-w-none">
-        <div className="masonry sm:columns-1 md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5 gap-6">
+        <div className="masonry sm:columns-1 md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5 column-gap-6">
           {tweets.slice(0, visibleTweetsCount).map((tweetId) => (
             <Tweet key={tweetId} id={tweetId} />
           ))}