Profile page

pages/ad-marketplace/index.tsx

@@ -1,14 +1,17 @@
+import React, { useCallback, useEffect, useState } from "react";
+
 import Header from "../../src/components/Header/header";
 import { useConnectModal } from "@rainbow-me/rainbowkit";
 // antd imports
 import { DownOutlined } from "@ant-design/icons";
 import { Dropdown, Menu, Space, Radio, Typography } from "antd";
+const {Title} = Typography;
 import type { RadioChangeEvent } from "antd";
 
 import { useQuery } from "@apollo/client";
 import { AdvNFTAddr, MarketPlaceAddr } from "../../src/env";
-import React, { useState } from "react";
 import { AdvNftMetaData } from "../../src/types/AdvNFTData";
+
 // custom-component imports
 import AdModal from "../../src/components/AdModal/AdModal";
 import { useSigner } from "wagmi";
@@ -29,14 +32,16 @@ import { MusicPlayerSub } from "../../src/subs/MusicPlayerSub";
 const client = new NFTStorage({
   token: process.env.NEXT_PUBLIC_NFT_STORAGE_TOKEN ?? "",
 });
-const { Title } = Typography;
+
 
 const AdMarketPlace: React.FC = () => {
+
   const { data: signer } = useSigner();
   const [selectedAdv, setSelectedAdv] = useState<GetUnsold_marketItems>();
   const [showModal, setShowModal] = useState<boolean>(false);
   const [isCreatingAd, setIsCreatingAd] = useState<boolean>(false);
 
+
   const handleAdModal = () => {
     setShowModal(!showModal);
   };
@@ -73,7 +78,6 @@ const AdMarketPlace: React.FC = () => {
 
       if (!selectedAdv?.token.id) {
         throw new Error("Failed to get selected adv id");
-        return;
       }
       console.log("handleAdForm: Creating Market Sale");
 
@@ -106,9 +110,9 @@ const AdMarketPlace: React.FC = () => {
 
   const handleRentClick = (advNft: GetUnsold_marketItems) => {
     setSelectedAdv(advNft);
-
     setShowModal(true);
   };
+
   return (
     <>
       <Header />
@@ -127,6 +131,7 @@ const AdMarketPlace: React.FC = () => {
   );
 };
 
+
 interface AdlistProp {
   onHandleModal: () => void;
   onRentClick: (advNft: GetUnsold_marketItems) => void;

pages/profile.tsx

@@ -0,0 +1,46 @@
+
+import type { NextPage } from "next";
+import Header from "../src/components/Header/header";
+import {Tabs} from 'antd'
+
+// component imports
+import MusicTab from "../src/components/ProfilePage/MusicTab/MusicTab";
+import AdvertisementTab from "../src/components/ProfilePage/AdvertisementTab/AdvertismentTab";
+
+
+
+const Profile: NextPage = () => {
+
+
+  return (
+    <div style={{ width: "100%", display: "flex", flexDirection: "column" }}>
+      <Header />
+      <div className="w-3/6 mx-80">
+      <Tabs>
+        <Tabs.TabPane  tab="Music" key="music">
+            <MusicTab/>
+        </Tabs.TabPane>
+        <Tabs.TabPane  tab="Advertisement" key="adverstisment">
+            <AdvertisementTab/>
+        </Tabs.TabPane>
+        <Tabs.TabPane  tab="Subscription" key="subscription">
+            Subscription
+        </Tabs.TabPane>
+     </Tabs>
+      </div>
+    </div>
+  );
+};
+
+export default Profile;
+
+
+const Advertisment: React.FC = () =>{
+    console.log('render advertisement')
+    return(
+        <div>
+            Advertisement Content tab
+        </div>
+    )
+}
+

src/components/AdModal/AdModalForm/AdModalForm.types.ts

@@ -1,12 +1,18 @@
+<<<<<<< HEAD
+type AdModalFormValues = {
+  bannerImage: File[];
+=======
 import { UploadFile } from "antd";
 
 export type AdModalFormValues = {
   bannerImage: UploadFile[];
   adUrl: string;
+>>>>>>> main
 };
+
 interface AdModalFormProps {
   onHandleAdForm: (values: AdModalFormValues) => void;
   isCreatingAd: boolean;
 }
 
-export type { AdModalFormProps }
+export type { AdModalFormProps, AdModalFormValues}

src/components/Header/header.tsx

@@ -20,6 +20,10 @@ function Header() {
     router.push("/");
   };
 
+  const navigateProfilePage = () => {
+    router.push("/profile");
+  };
+
   let correctNetwork;
 
   if (chain?.network === "tevmos" || !isConnected) {
@@ -63,6 +67,15 @@ function Header() {
                 Ad Marketplace
               </button>
             </Link>
+            <Link href="profile">
+              <button
+                className={`inline-block px-4 py-1 border font-medium text-base leading-tight rounded-full my-2 border-none ${
+                  pathname == "/ad-marketplace" ? "text-[#FF7E39]" : ""
+                }`}
+              >
+                Profile
+              </button>
+            </Link>
           </div>
         </div>
         <DarkModeToggle />

src/components/MarketPlacePage/Adlist/Adlist.tsx

@@ -0,0 +1,115 @@
+import {useEffect,useState} from 'react'
+
+// proptype imports
+import {AdlistProp} from './Adlist.types'
+
+// wagmi & rainbowkit imports
+import { useConnectModal } from '@rainbow-me/rainbowkit';
+import { useAccount } from 'wagmi';
+
+// antd imports
+import {Button, List, Typography} from 'antd'
+const {Title, Text} = Typography;
+
+// utility imports
+import { fetchIpfs } from '../../../services/ipfs/fetchIpfs';
+
+// graphql imports
+import { useQuery } from '@apollo/client';
+import { GetAllAsks, GetAllAsks_asks } from '../../../graph-ql/queries/GET_ALL_ASKS/__generated__/GetAllAsks';
+import { AdvNFTAddr } from '../../../env';
+import { GET_ALL_ASKS } from '../../../graph-ql/queries/GET_ALL_ASKS/getAllAsks';
+
+// types imports
+import { AdvNftMetaData } from '../../../types/AdvNFTData';
+
+
+const Adlist: React.FC<AdlistProp> = ({ onRentClick }) => {
+
+    const { openConnectModal } = useConnectModal();
+    const {  isConnected } = useAccount()
+
+    const {
+      loading: isLoadingAllAsks,
+      data: allAsksConnection,
+      error: allAskError,
+    } = useQuery<GetAllAsks>(GET_ALL_ASKS, {
+      variables: {
+        nftContractAddr: AdvNFTAddr.toLowerCase(),
+      },
+    });
+
+    return (
+      <>
+
+      <List
+        loading={isLoadingAllAsks}
+        style={{
+          width: "700px",
+          alignSelf: "center",
+          border: "1px solid #e5e5e5",
+          borderRadius: "20px",
+          padding: "1em",
+        }}
+        itemLayout="horizontal"
+        dataSource={allAsksConnection?.asks}
+        renderItem={(item) => {
+          return (
+            <List.Item
+            extra={
+              <Button onClick={isConnected  ?  () => onRentClick(item) : openConnectModal}>Rent Ad Space</Button>
+            }
+            >
+              <List.Item.Meta
+                title={<TitleNode item={item} />}
+                description="TODO: fetch desc from ipfs"
+              />
+            </List.Item>
+          );
+        }}
+      />
+        </>
+    );
+  };
+
+  interface TitleProps {
+    item: GetAllAsks_asks;
+  }
+
+  const TitleNode: React.FC<TitleProps> = ({ item }) => {
+    const [metaData, setMetaData] = useState<AdvNftMetaData>();
+
+    console.log(metaData)
+
+    const fetchMetaData = async () => {
+      const advMetaData = await fetchIpfs<AdvNftMetaData>(
+        item.token.metaDataHash
+      );
+      console.log(advMetaData)
+      setMetaData(advMetaData);
+    };
+
+    useEffect(() => {
+      fetchMetaData();
+    }, [item]);
+
+    return (
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <Title style={{ marginRight: "5px", marginBottom: "0px" }} level={5}>
+          {metaData?.name}
+        </Title>
+        <span
+          style={{
+            background: "#f4f4f4",
+            padding: "2px 6px",
+            borderRadius: "20px",
+          }}
+        >
+          {item.token.id}
+        </span>
+      </div>
+    );
+  };
+
+
+  export default Adlist

src/components/MarketPlacePage/Adlist/Adlist.types.ts

@@ -0,0 +1,10 @@
+import {
+  GetAllAsks_asks,
+} from "../../../graph-ql/queries/GET_ALL_ASKS/__generated__/GetAllAsks";
+
+interface AdlistProp {
+  onHandleModal: () => void;
+  onRentClick: (advNft: GetAllAsks_asks) => void;
+}
+
+export type {AdlistProp}

src/components/MintSong/MintSongModal/MintForm/MintForm.types.ts

@@ -1,5 +1,5 @@
 import { UploadFile } from "antd"
-export type MintMusicWAdFormValues = {
+type MintMusicWAdFormValues = {
   songName: string;
   artistName: string;
   adDurationDays: number;
@@ -13,4 +13,4 @@ interface FormProps {
   isMinting: boolean;
 }
 
-export type { FormProps }
+export type { FormProps, MintMusicWAdFormValues }

src/components/MintSong/MintSongModal/MintSongModal.types.ts

@@ -1,8 +1,8 @@
-import { MintMusicWAdFormValues } from "./MintForm/MintForm.types";
+import { MintMusicAdFormValues } from "./MintForm/MintForm.types";
 
 interface ModalProps {
   onHandleModal: () => void;
-  onHandleMintForm: (value: MintMusicWAdFormValues) => void;
+  onHandleMintForm: (value: MintMusicAdFormValues) => void;
   isVisible: boolean;
   isMinting: boolean;
 }