Merge pull request #32 from logicalmechanism/staging

Staging

CHANGELOG.md

@@ -1,6 +1,47 @@
 # Changelog
 
-## pre-alpha-Unreleased
+## alpha-unreleased
+
+### Added
+
+### Fixed
+
+### Changed
+
+### Removed
+
+## alpha-06-08-24
+
+### Added
+
+- **app**: added wire frame folder to hold penpot design wire frames
+- **app**: added default image gimp file
+- **app**: added error image for images that do not load properly
+- **app**: added filter.ts file to hold all the thread filters
+- **app**: added my friends and top threads filters
+
+### Fixed
+
+- **app**: fixed the background scrolling issue for open modals
+- **app**: fixed blurred images not being centered and jumping in size
+- **cogno-project**: fixed cogno.forum readme link
+- **app**: fixed blurred images auto going into loading.. when refreshing the forum
+
+### Changed
+
+- **app**: changed medium-text to dark-text
+- **app**: changed the blues around in the colors
+- **app**: changed the roundedness of the wallet connect button
+- **app**: changed inputs to disable grammerly automatically
+- **app**: changed help text to be always on the right hand side of the help icon
+- **app**: changed refresh cogno button location to the navbar, refresh cogno -> refresh
+- **app**: changed what is being searched inside the thread list
+
+### Removed
+
+- **app**: removed medium colors
+
+## alpha-23-07-24
 
 *main is now set up for cicd so staging branch will contain new updates*
 
@@ -36,7 +77,6 @@
 - **app**: fixed text on buttons for the threadlist for dynamic screen sizes
 - **app**: fixed the cogno token not be reset when changing accounts
 
-
 ### Changed
 
 - **headless**: changed the cogno creation, removal, and updating by adding in guards to prevent accidental changes

README.md

@@ -6,7 +6,7 @@ Welcome to Congo, a fully on-chain social media platform.
 
 Cogno is a collection of smart contracts for UTxO-based cognomens and on-chain threads. Each Cogno acts as a user profile. Each thread is an on-chain message, functioning as a public chat room, discussion forum, news and article aggregator, image board, and permanent storage for textual posts. Altogether, they form a fully decentralized, completely public social media platform, running entirely on the Cardano blockchain.
 
-The Cogno ecosystem is entirely open-source and available online at [www.cogno.forum](www.cogno.forum), locally via yarn, or in a headless mode using a fully synced Cardano node. The system is designed to never be controlled by anyone, shut down, censored, or turned off. It lives forever on the Cardano blockchain. Moderation and curation happen at the user level, so each user defines who and what they want to see on their Cogno display, allowing users to block harmful users and threads. Cogno is free to use, with the only payment being the transaction fee required by the Cardano blockchain.
+The Cogno ecosystem is entirely open-source and available online at [cogno.forum](https://www.cogno.forum/), locally via yarn, or in a headless mode using a fully synced Cardano node. The system is designed to never be controlled by anyone, shut down, censored, or turned off. It lives forever on the Cardano blockchain. Moderation and curation happen at the user level, so each user defines who and what they want to see on their Cogno display, allowing users to block harmful users and threads. Cogno is free to use, with the only payment being the transaction fee required by the Cardano blockchain.
 
 Cogno, as a social media platform, is unique in that content creators who produce popular content that garners interaction via comments will be paid for their content through the minimum required ADA on the thread UTxO. If the content creator chooses to do so, they may remove their thread and reward themselves with the additional ADA placed onto the UTxO from other users commenting on the thread. Once a thread has been spent, it is removed from the live platform and only exists as old-chain history. Cogno does not display old history and only shows the current UTxO set.
 

app/components/BlurImage.tsx

@@ -1,23 +1,33 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 
 interface BlurImageProps {
   imageUrl: string;
+  // the width and height of the image
+  width?: number;
+  height?: number;
 }
 
-const BlurImage: React.FC<BlurImageProps> = ({ imageUrl }) => {
+const parseImageUrl = (url: string): string => {
+  // Support for Arweave and IPFS for now
+  if (url.startsWith('ar://')) {
+    return `https://arweave.net/${url.slice(5)}`;
+  } else if (url.startsWith('ipfs://')) {
+    return `https://ipfs.io/ipfs/${url.slice(7)}`;
+  }
+  // Add more URL parsing logic here if needed
+  return url;
+};
+
+const BlurImage: React.FC<BlurImageProps> = ({ imageUrl, width = 420, height = 420 }) => {
   const [isBlurred, setIsBlurred] = useState(true);
   const [loadedImageUrl, setLoadedImageUrl] = useState('/default-420x420.png'); // default placeholder for quicker loading times
+  const [isLoadingImage, setisLoadingImage] = useState(false); // show a loading text when the image being lazy loaded
 
-  useEffect(() => {
-    let finalUrl = imageUrl;
-    // catch the prefixes then do proper parsing
-    if (imageUrl.startsWith('ar://')) {
-      finalUrl = `https://arweave.net/${imageUrl.slice(5)}`;
-    } else if (imageUrl.startsWith('ipfs://')) {
-      finalUrl = `https://ipfs.io/ipfs/${imageUrl.slice(7)}`;
-    } // other image url types can go here
 
+  useEffect(() => {
+    const finalUrl = parseImageUrl(imageUrl);
     if (!isBlurred) {
+      setisLoadingImage(true);
       // Load the image when unblurring
       setLoadedImageUrl(finalUrl);
     } else {
@@ -26,21 +36,51 @@ const BlurImage: React.FC<BlurImageProps> = ({ imageUrl }) => {
     }
   }, [isBlurred, imageUrl]);
 
-  const toggleBlur = () => {
-    setIsBlurred(!isBlurred);
+  const handleImageLoad = () => {
+    setisLoadingImage(false);
+  };
+
+  const handleImageError = () => {
+    setisLoadingImage(false);
+    setLoadedImageUrl('/error-420x420.png');
   };
 
+  const toggleBlur = useCallback(() => {
+    setIsBlurred(prev => !prev);
+  }, []);
+
   return (
-    <div className="relative max-w-full max-h-full overflow-hidden">
-      <img
-        src={loadedImageUrl}
-        alt="Invalid Image"
-        className={`transition duration-500 max-w-full max-h-full object-cover ${isBlurred ? 'blur-2xl' : 'blur-none'}`}
-        onClick={toggleBlur}
-        loading='lazy'
-      />
-      {isBlurred && (
-        <div className="absolute inset-0 flex items-center justify-center dark-bg bg-opacity-50 light-text cursor-pointer" onClick={toggleBlur}>
+    <div 
+      className="relative overflow-hidden"
+      style={{ width: `${width}px`, height: `${height}px` }}
+    >
+      <div className="relative w-full h-full flex items-center justify-center">
+        <img
+          src={loadedImageUrl}
+          alt="Invalid Image"
+          className={`transition duration-500 max-w-full max-h-full object-contain ${isBlurred ? 'blur-2xl' : 'blur-none'}`}
+          onClick={toggleBlur}
+          onLoad={handleImageLoad}
+          onError={handleImageError}
+          loading='lazy'
+        />
+      </div>
+
+      {/* If the image is loading then show the loading text */}
+      {isLoadingImage && (
+        <div className="absolute inset-0 flex items-center justify-center dark-bg bg-opacity-50 light-text">
+          Loading...
+        </div>
+      )}
+
+      {/* if blurred and not loading then show the click to unblur text */}
+      {isBlurred && !isLoadingImage && (
+        <div 
+          className="absolute inset-0 flex items-center justify-center dark-bg bg-opacity-50 light-text cursor-pointer" 
+          onClick={toggleBlur}
+          role="button"
+          aria-label="Click to unblur the image"
+        >
           Click To Unblur
         </div>
       )}

app/components/CardanoWallet/CardanoWallet.tsx

@@ -11,7 +11,7 @@ interface CardanoWalletProps {
 }
 
 export const CardanoWallet: React.FC<CardanoWalletProps> = ({
-  label = 'Connect',
+  label = 'Connect Wallet',
   onConnected,
 }) => {
   const wallets = useWalletList();
@@ -41,7 +41,7 @@ export const CardanoWallet: React.FC<CardanoWalletProps> = ({
     />
   </button>
   <div
-    className={`absolute text-center w-60 ${bgClass} ${hideMenuList ? 'hidden' : ''}`}
+    className={`absolute rounded text-center w-60 ${bgClass} ${hideMenuList ? 'hidden' : ''}`}
   >
     {!connected && wallets.length > 0 ? (
       <>

app/components/CardanoWallet/MenuItem.tsx

@@ -10,10 +10,10 @@ interface MenuItemProps {
 export const MenuItem: React.FC<MenuItemProps> = ({ icon, label, action, active }) => {
   return (
     <div
-      className="opacity-80 hover:opacity-100 blue-bg-hover flex fex-col items-center justify-center cursor-pointer px-1 py-1"
+      className="opacity-80 hover:opacity-100 blue-bg-hover flex fex-col items-center justify-center cursor-pointer px-1 py-1 rounded"
       onClick={action}
     >
-      <span className="text-xl flex">
+      <span className="text-xl flex dark-text font-semibold">
         {icon && <img src={icon} alt="" className="h-5 m-1" />}
         {label
           .split(' ')

app/components/FAQ.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 
 const FAQ: React.FC = () => {
   const faqs = [
@@ -94,25 +94,28 @@ const FAQ: React.FC = () => {
     },
   ];
 
-
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
 
-  const toggleActiveIndex = (index: number) => {
-    setActiveIndex(activeIndex === index ? null : index);
-  };
+  const toggleActiveIndex = useCallback((index: number) => {
+    setActiveIndex(prevIndex => (prevIndex === index ? null : index));
+  }, []);
 
   const handleBackToTop = () => {
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
   return (
-    <div className="mx-auto w-full">
+    <section className="mx-auto w-full">
       <h1 className='text-3xl text-center my-2 font-extrabold light-text'>FAQ</h1>
+
+      {/* loop all the faq and display them */}
       {faqs.map((faq, index) => (
         <div key={index} className="mb-4 w-full">
           <div
             className="flex justify-between items-center p-4 cursor-pointer w-full"
             onClick={() => toggleActiveIndex(index)}
+            aria-expanded={activeIndex === index}
+            aria-controls={`faq-content-${index}`}
           >
             <p className="text-xl font-extrabold light-text">{faq.question}</p>
             <svg
@@ -129,8 +132,8 @@ const FAQ: React.FC = () => {
             </svg>
           </div>
           {activeIndex === index && (
-            <div className="light-bg py-2 px-4 w-full">
-              <p className="dark-text break-words w-full text-lg">{faq.answer}</p>
+            <div id={`faq-content-${index}`} className="light-bg py-2 px-4 w-full">
+              <p className="dark-text font-semibold break-words w-full text-lg">{faq.answer}</p>
             </div>
           )}
         </div>
@@ -141,7 +144,7 @@ const FAQ: React.FC = () => {
       >
         Back to Top
       </button>
-    </div>
+    </section>
   );
 };
 

app/components/NavBar.tsx

@@ -1,54 +1,76 @@
 import Link from 'next/link';
-import { useState } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { CardanoWallet } from '../components/CardanoWallet';
 import { Profile } from '../components/Profile';
 import { BrowserWallet, UTxO } from '@meshsdk/core';
-import { useRouter } from 'next/router';
 
 interface NavBarProps {
   cogno: UTxO | null;
   connected: boolean;
   network: number | null;
   wallet: BrowserWallet;
   refreshCogno: () => void; // Function to update cogno
+  refreshCognoAndThreads: () => void; // function to update everything
 }
 
-const NavBar: React.FC<NavBarProps> = ({ cogno, connected, network, wallet, refreshCogno }) => {
-  const router = useRouter();
+const networkFlag: number = parseInt(process.env.NEXT_PUBLIC_NETWORK_FLAG || '-1')
+
+const NavBar: React.FC<NavBarProps> = ({ cogno, connected, network, wallet, refreshCogno, refreshCognoAndThreads }) => {
   const [isProfileModalOpen, setProfileModalOpen] = useState(false);
-  const toggleProfileModal = () => setProfileModalOpen(!isProfileModalOpen);
+  const toggleProfileModal = useCallback(() => setProfileModalOpen(prev => !prev), []);
 
+  useEffect(() => {
+    if (isProfileModalOpen) {
+      document.body.classList.add('overflow-hidden');
+    } else {
+      document.body.classList.remove('overflow-hidden');
+    }
 
-  const navigateToAbout = () => {
-    router.push('/about');
-  }
+    // Cleanup function to remove the class if the component unmounts
+    return () => {
+      document.body.classList.remove('overflow-hidden');
+    };
+  }, [isProfileModalOpen]);
 
   return (
     <nav className="light-bg py-1 w-full">
       <div className="flex items-center">
         <div className="flex mx-5">
+          {/* Custom Cardano Wallet Connector */}
           <CardanoWallet />
-          {connected && network !== parseInt(process.env.NEXT_PUBLIC_NETWORK_FLAG!) && (
+
+          {/* If connected and on correct network then should profile and cogno finder */}
+          {connected && network !== networkFlag && (
             <>
-              <button className="blue-bg blue-bg-hover dark-text font-bold rounded py-2 px-5 ml-2" onClick={toggleProfileModal}>
+              <button
+                className="blue-bg blue-bg-hover dark-text font-bold rounded py-2 px-5 ml-2"
+                onClick={toggleProfileModal}
+              >
                 Profile
               </button>
-              {connected && cogno ?
-                (
-                  <div className='medium-text font-bold py-2 px-4 mx-2 h-8 hidden md:block'>
-                    <p>Cogno Found</p>
-                  </div>
-                ) :
-                (
-                  <div className='medium-text font-bold py-2 px-4 mx-2 h-8 hidden md:block'>
-                    <p>Cogno Not Found</p>
-                  </div>
-                )
-              }
+              <div className='dark-text font-bold py-2 px-4 mx-2 h-8 hidden md:block'>
+                <p>{cogno ? 'Cogno Found' : 'Cogno Not Found'}</p>
+              </div>
             </>
           )}
         </div>
+
+        <div className="flex-grow"></div>
+        <div className="w-auto">
+        {connected && network !== networkFlag && (
+          <button
+            className="px-5 py-2 green-bg dark-text text-base font-bold rounded green-bg-hover"
+            type="button"
+            onClick={refreshCognoAndThreads}
+          >
+            Refresh
+          </button>
+        )}
+
+        </div>
         <div className="flex-grow"></div>
+
+        {/* Links */}
         <div className='dark-text blue-text-hover font-bold py-1 px-4 mx-2 h-8 hidden md:block'>
           <Link href='/forum'>cogno.forum - alpha</Link>
         </div>
@@ -58,7 +80,17 @@ const NavBar: React.FC<NavBarProps> = ({ cogno, connected, network, wallet, refr
           </Link>
         </div>
       </div>
-      {isProfileModalOpen && <Profile cogno={cogno} network={network} wallet={wallet} onClose={toggleProfileModal} refreshCogno={refreshCogno}/>}
+
+      {/* Profile modal */}
+      {isProfileModalOpen && (
+        <Profile 
+          cogno={cogno} 
+          network={network}
+          wallet={wallet} 
+          onClose={toggleProfileModal} 
+          refreshCogno={refreshCogno}
+        />
+      )}
     </nav>
   );
 };