Fix/public page view (#360)

* update announcements * replace Tctext * update oci * update url * update * fix * fix public page view * fix * fix * fix public view page --------- Co-authored-by: Cyrille <[email protected]>
TogetherCrew · Dec 11, 2024 · c561fd3 · c561fd3
1 parent e62dd59
commit c561fd3
Show file tree

Hide file tree

Showing 8 changed files with 193 additions and 80 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -53,7 +53,7 @@
     "moment-timezone": "^0.5.38",
     "next": "^14.2.18",
     "next-router-mock": "^0.9.9",
-    "oci-js-sdk": "^1.6.1",
+    "oci-js-sdk": "^1.6.3",
     "papaparse": "^5.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

diff --git a/src/pages/announcements/index.tsx b/src/pages/announcements/index.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { Link, Stack, Typography } from '@mui/material';
 import moment from 'moment';
 import Image from 'next/image';
 import router from 'next/router';
@@ -18,7 +19,6 @@ import TcBoxContainer from '../../components/shared/TcBox/TcBoxContainer';
 import TcButton from '../../components/shared/TcButton';
 import TcDatePickerPopover from '../../components/shared/TcDatePickerPopover';
 import TcPagination from '../../components/shared/TcPagination';
-import TcText from '../../components/shared/TcText';
 import { useToken } from '../../context/TokenContext';
 import { defaultLayout } from '../../layouts/defaultLayout';
 import { StorageService } from '../../services/StorageService';
@@ -195,11 +195,27 @@ function Index() {
             <div className='flex max-h-[97dvh] min-h-[97dvh] flex-col justify-between space-y-4 p-4 md:p-10'>
               <div className='min-h-[calc(100vh-100px)] flex-grow overflow-auto'>
                 <div className='flex flex-col space-y-3 md:flex-row md:items-center md:justify-between md:space-y-0'>
-                  <TcText text='Announcement Scheduling' variant='h5' />
+                  <Stack spacing={1}>
+                    <Typography variant='h5'>
+                      Announcement Scheduling
+                    </Typography>
+                    <Typography variant='body2' className='text-left'>
+                      smart announcements allow you to send targeted messages to
+                      specific user segments.{' '}
+                      <Link
+                        className='font-bold'
+                        color='primary'
+                        href='https://togethercrew.gitbook.io/onboarding/~/changes/NV24DFt4YIMi4FKjX30S/features/smart-announcements'
+                        target='_blank'
+                      >
+                        Learn more
+                      </Link>
+                    </Typography>
+                  </Stack>
                   <TcButton
                     text='Create Announcement'
                     startIcon={<BsPlus />}
-                    variant='outlined'
+                    variant='contained'
                     onClick={() =>
                       router.push('/announcements/create-new-announcements')
                     }
@@ -239,16 +255,16 @@ function Index() {
                   </div>
                 ) : (
                   <div className='mx-auto flex h-[65dvh] w-9/12 flex-col justify-center text-center md:w-4/12'>
-                    <TcText
-                      text='No announcements yet'
-                      variant='h6'
-                      fontWeight='bold'
-                    />
-                    <TcText
-                      text='Your announcements will show up for the month and timezone selected once you create them'
+                    <Typography variant='h6' fontWeight='bold'>
+                      No announcements yet
+                    </Typography>
+                    <Typography
                       variant='body2'
                       className='text-gray-400'
-                    />
+                    >
+                      Your announcements will show up for the month and timezone
+                      selected once you create them{' '}
+                    </Typography>
                   </div>
                 )}
               </div>

diff --git a/src/pages/not-found.tsx b/src/pages/not-found.tsx
@@ -0,0 +1,68 @@
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+
+import notFounded from '../assets/svg/404.svg';
+import tcLogo from '../assets/svg/tc-logo.svg';
+import TcButton from '../components/shared/TcButton';
+
+const NotFound = () => {
+  const router = useRouter();
+
+  return (
+    <div className='container'>
+      <div className='mx-auto flex px-3 py-4 md:w-8/12 md:px-0 md:py-4'>
+        <Image alt='Image Alt' src={tcLogo} />
+      </div>
+      <div className='flex flex-col items-center justify-center p-3 md:mt-8 md:flex-row md:space-x-8 md:p-0'>
+        <div className='hidden md:relative md:block md:h-[214px] md:w-[248px]'>
+          <Image
+            alt='Image Alt'
+            src={notFounded}
+            layout='fill'
+            objectFit='contain'
+          />
+        </div>
+        <div className='space-y-8'>
+          <h1 className='text-3xl font-bold'>
+            Oops! We’re sorry, we couldn’t find <br /> the page you’re looking
+            for.
+          </h1>
+          <div className='space-y-3'>
+            <p className='text-md font-bold'>What could have caused this?</p>
+            <div className='space-y-2'>
+              <p className='text-base'>
+                The link you clicked might be old and does not work anymore.
+              </p>
+              <p className='text-sm'>
+                Or you might have accidentally typed the wrong URL in the
+                address bar.
+              </p>
+            </div>
+          </div>
+          <div className='space-y-3'>
+            <p className='text-md font-bold'>What you can do</p>
+            <p className='text-sm'>
+              You might retype the URL or try some helpful links instead:
+            </p>
+          </div>
+          <div className='flex flex-col justify-between space-y-2 md:flex-row md:space-x-2 md:space-y-0'>
+            <TcButton
+              text='Community Insights'
+              variant='outlined'
+              onClick={() => router.push('/')}
+              className='py-2 md:w-1/2'
+            />
+            <TcButton
+              onClick={() => router.push('/centric')}
+              variant='outlined'
+              text='Connect your community'
+              className='py-2 md:w-1/2'
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;
diff --git a/src/pages/reputation-score/index.tsx b/src/pages/reputation-score/index.tsx
@@ -86,7 +86,7 @@ function ReputationScore() {
                         color='primary'
                         onClick={() =>
                           router.push(
-                            `/reputation-score/${dynamicNFTModuleInfo?.metadata[0]?.tokenId}/${address}/score`
+                            `/reputation-score/score?tokenId=${dynamicNFTModuleInfo?.metadata[0]?.tokenId}&address=${address}`
                           )
                         }
                         disabled={!isConnected}

diff --git a/src/pages/reputation-score/mint.tsx b/src/pages/reputation-score/mint.tsx
@@ -73,6 +73,7 @@ function Mint() {
         address,
         conf.APP_DEVELOPER_PUBLIC_ADDRESS as `0x${string}`
       );
+
       setUserProfile(result);
       setLoading(false);
     } catch (error) {
@@ -168,9 +169,8 @@ const AttestationSection: React.FC<AttestationSectionProps> = ({
   isLoading,
   userProfile,
 }) => {
-
   const handleNavigation = () => {
-    const url = 'https://identity-on-chain-platform.pages.dev/permissions';
+    const url = 'https://app.logid.xyz/permissions';
     window.open(url, '_blank');
   };
   return (
@@ -246,7 +246,7 @@ const MintSection: React.FC<MintSectionProps> = ({
 
   const { address } = useAccount();
   const { dynamicNFTModuleInfo } = useAppStore();
-  const { data: hasMinted } = useReadContract({
+  const { data: hasMinted, refetch } = useReadContract({
     address: engagementContract?.address as `0x${string}`,
     abi: engagementContract?.abi as Abi,
     functionName: 'balanceOf',
@@ -259,10 +259,39 @@ const MintSection: React.FC<MintSectionProps> = ({
     isPending,
   } = useWriteContract();
 
-  const { isPending: isWaiting } = useWaitForTransactionReceipt({
+  const handleMintNFT = async () => {
+    try {
+      await writeContractAsync({
+        address: engagementContract?.address as `0x${string}`,
+        abi: engagementContract?.abi as Abi,
+        functionName: 'mint',
+        args: [address, dynamicNFTModuleInfo.metadata[0].tokenId, 1, '0x0'],
+      });
+    } catch (error: any) {
+      console.error('Mint failed:', error);
+    }
+  };
+
+  const {
+    data: receipt,
+    isSuccess,
+    isError,
+    isFetching: isWaitingForReceiptConfirmation,
+  } = useWaitForTransactionReceipt({
     hash: transactionHash,
   });
 
+  useEffect(() => {
+    if (receipt && isSuccess) {
+      showMessage(
+        'Your Reputation NFT has been successfully minted!',
+        'success'
+      );
+
+      refetch();
+    }
+  }, [receipt, isSuccess, isError]);
+
   return (
     <Stack className='space-y-4'>
       <Stack className='space-y-2 px-4 pb-[1rem] pt-4 md:px-10'>
@@ -315,26 +344,16 @@ const MintSection: React.FC<MintSectionProps> = ({
           <Button
             variant='contained'
             color='primary'
-            onClick={async () => {
-              try {
-                await writeContractAsync({
-                  address: engagementContract?.address as `0x${string}`,
-                  abi: engagementContract?.abi as Abi,
-                  functionName: 'mint',
-                  args: [
-                    address,
-                    dynamicNFTModuleInfo.metadata[0].tokenId,
-                    1,
-                    '0x0',
-                  ],
-                });
-              } catch (error: any) {
-                console.error('Mint failed:', error);
-              }
-            }}
-            disabled={isPending || !dynamicNFTModuleInfo?.metadata[0]?.tokenId}
+            onClick={handleMintNFT}
+            disabled={
+              isPending ||
+              isWaitingForReceiptConfirmation ||
+              !dynamicNFTModuleInfo?.metadata[0]?.tokenId
+            }
           >
-            {isPending ? 'Minting...' : 'Mint Reputation Score'}
+            {isPending || isWaitingForReceiptConfirmation
+              ? 'Minting...'
+              : 'Mint Reputation Score'}
           </Button>
         )}
       </Stack>
@@ -346,7 +365,7 @@ const UserProfileBox: React.FC<UserProfileBoxProps> = ({ profile }) => {
   const router = useRouter();
 
   const handleNavigation = () => {
-    const url = 'https://identity-on-chain-platform.pages.dev/permissions';
+    const url = 'https://app.logid.xyz/permissions';
     router.push(url);
   };
 

diff --git a/src/pages/reputation-score/[...score].tsx → src/pages/reputation-score/score.tsx b/src/pages/reputation-score/[...score].tsx → src/pages/reputation-score/score.tsx
@@ -1,5 +1,6 @@
+'use client';
+
 import React, { useEffect, useState } from 'react';
-import { useRouter } from 'next/router';
 import { FiShare2 } from 'react-icons/fi';
 
 import GaugeChart from '@/components/global/GaugeChart';
@@ -14,54 +15,43 @@ import { useSnackbar } from '@/context/SnackbarContext';
 const ScorePage = () => {
   const { showMessage } = useSnackbar();
   const { retrieveReputationScore } = useAppStore();
-  const router = useRouter();
 
   const [communityName, setCommunityName] = useState<string | null>(null);
   const [reputationScore, setReputationScore] = useState<number | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
-  const [tokenId, setTokenId] = useState<string | null>(null);
-  const [address, setAddress] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    const parseUrl = () => {
-      const pathSegments = router.asPath.split('/');
-      const tokenIndex = pathSegments.indexOf('reputation-score') + 1;
-
-      if (tokenIndex > 0 && tokenIndex + 1 < pathSegments.length) {
-        setTokenId(pathSegments[tokenIndex]);
-        setAddress(pathSegments[tokenIndex + 1]);
+    const fetchReputationScore = async (tokenId: string, address: string) => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const score = await retrieveReputationScore({ tokenId, address });
+
+        setReputationScore(score.reputationScore ?? 0);
+        setCommunityName(score.communityName);
+      } catch (err) {
+        console.error('Error fetching reputation score:', err);
+        setError('Failed to fetch reputation score.');
+      } finally {
+        setLoading(false);
       }
     };
 
-    parseUrl();
-  }, [router.asPath]);
+    // Use URLSearchParams to extract query parameters
+    const params = new URLSearchParams(window.location.search);
+    const tokenId = params.get('tokenId');
+    const address = params.get('address');
 
-  useEffect(() => {
-    if (tokenId && address) {
-      const fetchReputationScore = async () => {
-        setLoading(true);
-        try {
-          console.log('Fetching reputation score for:', { tokenId, address });
-
-          const score = await retrieveReputationScore({
-            tokenId,
-            address,
-          });
-
-          console.log('Reputation Score Retrieved:', score);
-          setReputationScore(score.reputationScore ?? 0);
-          setCommunityName(score.communityName);
-        } catch (error) {
-          console.error('Error fetching reputation score:', error);
-          showMessage('Failed to load reputation score.', 'error');
-        } finally {
-          setLoading(false);
-        }
-      };
-
-      fetchReputationScore();
+    if (!tokenId || !address) {
+      setError('Invalid URL format. Missing tokenId or address.');
+      setLoading(false);
+      return;
     }
-  }, [tokenId, address]);
+
+    fetchReputationScore(tokenId, address);
+  }, [retrieveReputationScore]);
 
   const gaugeOptions = {
     chart: {
@@ -129,6 +119,17 @@ const ScorePage = () => {
     return <SimpleBackdrop />;
   }
 
+  if (error) {
+    return (
+      <div className='flex min-h-screen items-center justify-center bg-gray-100'>
+        <div className='max-w-xl rounded-lg bg-white p-6 shadow-lg'>
+          <h1 className='text-2xl font-bold text-red-600'>Error</h1>
+          <p className='mt-4 text-gray-600'>{error}</p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <>
       <SEO titleTemplate='Daily Report Reputation Score' />