added a collapse all details

PotLock · Jan 14, 2025 · 0f97db8 · 0f97db8
1 parent 309e5b0
commit 0f97db8
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 39 deletions.
diff --git a/next.config.js b/next.config.js
@@ -3,7 +3,24 @@ const nextConfig = {
   reactStrictMode: true,
   images: {
     dangerouslyAllowSVG: true,
-    domains: ['ipfs.near.social', 'another-domain.com', 'i.near.social', 'robohash.org'],
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'ipfs.near.social',
+      },
+      {
+        protocol: 'https',
+        hostname: 'another-domain.com',
+      },
+      {
+        protocol: 'https',
+        hostname: 'i.near.social',
+      },
+      {
+        protocol: 'https',
+        hostname: 'robohash.org',
+      },
+    ],
   },
 };
 

diff --git a/src/components/CompetitionCard.js b/src/components/CompetitionCard.js
@@ -3,7 +3,7 @@ import Image from 'next/image';
 import { ListContract } from '../config';
 import { FaTwitter } from 'react-icons/fa';
 
-const CompetitionCard = ({ competition, listLink, profiles, wallet }) => {
+const CompetitionCard = ({ competition, listLink, profiles, wallet, isAllCommentsVisible }) => {
   const [listDetails, setListDetails] = useState(null);
   const [approvedRegistrations, setApprovedRegistrations] = useState([]);
   const [isContentVisible, setIsContentVisible] = useState(false);
@@ -40,6 +40,11 @@ const CompetitionCard = ({ competition, listLink, profiles, wallet }) => {
     fetchListDetails();
   }, [listLink, wallet]);
 
+  useEffect(() => {
+    setCommentVisibility(Array(competition.content.length).fill(isAllCommentsVisible));
+    setIsContentVisible(isAllCommentsVisible);
+  }, [isAllCommentsVisible, competition.content.length]);
+
   const displayName = listDetails?.name || competition.name;
   const backdrop = listDetails?.cover_image_url || '';
 
@@ -60,6 +65,11 @@ const CompetitionCard = ({ competition, listLink, profiles, wallet }) => {
     );
   };
 
+  const toggleAllComments = () => {
+    const allVisible = commentVisibility.every(visible => visible);
+    setCommentVisibility(Array(competition.content.length).fill(!allVisible));
+  };
+
   return (
     <div className={`flex-1 border border-gray-200 rounded-lg p-4 relative bg-white shadow-md transition-all duration-300 ${isContentVisible ? 'h-auto' : 'h-16'}`}>
       <div className="flex items-center justify-between">
@@ -95,32 +105,31 @@ const CompetitionCard = ({ competition, listLink, profiles, wallet }) => {
       </div>
       {isContentVisible && (
         <div className="mt-4">
+          <button onClick={toggleAllComments} className="mb-2 text-blue-500 underline">
+            {commentVisibility.every(visible => visible) ? 'Collapse All' : 'Expand All'}
+          </button>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
-            {competition.content.map((item, index) => {
-              console.log('Item Comment:', item.comment);
-
-              return (
-                <div key={index} className="border p-2 rounded hover:bg-gray-100">
-                  <strong
-                    role="button"
-                    onClick={() => toggleCommentVisibility(index)}
-                    className="cursor-pointer"
-                  >
-                    {item.name}
-                  </strong>
-                  {commentVisibility[index] && (
-                    <div className="mt-2 text-sm text-gray-600">
-                      {item.comment}
-                    </div>
-                  )}
-                  {item.twitterLink && (
-                    <a href={item.twitterLink} target="_blank" rel="noopener noreferrer" className="ml-2">
-                      <FaTwitter size={16} />
-                    </a>
-                  )}
-                </div>
-              );
-            })}
+            {competition.content.map((item, index) => (
+              <div key={index} className="border p-2 rounded hover:bg-gray-100">
+                <strong
+                  role="button"
+                  onClick={() => item.comment && toggleCommentVisibility(index)}
+                  className={`cursor-pointer ${!item.comment && 'cursor-default'}`}
+                >
+                  {item.name}
+                </strong>
+                {commentVisibility[index] && item.comment && (
+                  <div className="mt-2 text-sm text-gray-600">
+                    {item.comment}
+                  </div>
+                )}
+                {item.twitterLink && (
+                  <a href={item.twitterLink} target="_blank" rel="noopener noreferrer" className="ml-2">
+                    <FaTwitter size={16} />
+                  </a>
+                )}
+              </div>
+            ))}
           </div>
           {listLink && (
             <div className="mt-4">

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -23,6 +23,12 @@ const categoryColors = {
 const LandingPage = () => {
   const { wallet } = useContext(NearContext);
   const [profiles, setProfiles] = useState({});
+  const [expandedCompetition, setExpandedCompetition] = useState(null);
+  const [selectedCategory, setSelectedCategory] = useState('All');
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedCompetitors, setSelectedCompetitors] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [isAllCommentsVisible, setIsAllCommentsVisible] = useState(false);
 
   useEffect(() => {
     const fetchProfiles = async () => {
@@ -46,27 +52,20 @@ const LandingPage = () => {
       }, {});
 
       setProfiles(profilesMap);
+      setLoading(false);
     };
 
     fetchProfiles();
   }, [wallet]);
 
-  const [expandedCompetition, setExpandedCompetition] = useState(null);
-  const [selectedCategory, setSelectedCategory] = useState('All');
-  const [searchTerm, setSearchTerm] = useState('');
-  const [selectedCompetitors, setSelectedCompetitors] = useState([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    // Simulate data loading
-    const timer = setTimeout(() => setLoading(false), 1000);
-    return () => clearTimeout(timer);
-  }, []);
-
   const toggleCompetition = (id) => {
     setExpandedCompetition(expandedCompetition === id ? null : id);
   };
 
+  const toggleAllComments = () => {
+    setIsAllCommentsVisible(!isAllCommentsVisible);
+  };
+
   const categories = ['All', ...new Set(importedCompetitionsData.flatMap(group => group.competitions.map(comp => comp.category)))];
   const competitors = ['All', ...new Set(importedCompetitionsData.flatMap(group => group.competitions.flatMap(comp => comp.content.map(item => item.name))))];
 
@@ -280,6 +279,9 @@ const LandingPage = () => {
           />
         </section>
 
+        <button onClick={toggleAllComments} className="mb-4 text-blue-500 underline">
+          {isAllCommentsVisible ? 'Collapse All Details' : 'Expand All Details'}
+        </button>
         {loading ? (
           <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '200px' }}>
             <p>Loading...</p>
@@ -294,6 +296,7 @@ const LandingPage = () => {
                   listLink={competition.listLink}
                   profiles={profiles}
                   wallet={wallet}
+                  isAllCommentsVisible={isAllCommentsVisible}
                 />
               ))}
             </div>