From 968e39a157c5c32354c463dfcc7649c3e9175167 Mon Sep 17 00:00:00 2001 From: mujeex Date: Mon, 12 Sep 2022 09:32:44 +0100 Subject: [PATCH 01/18] feat: can view owned music NFT --- pages/profile.tsx | 53 +++++++++++++++ src/components/Header/header.tsx | 33 ++++++--- src/components/MintSong/MintSong.tsx | 1 + .../ProfilePage/MusicTab/MusicTab.tsx | 68 +++++++++++++++++++ src/components/SongList/SongList.tsx | 4 -- 5 files changed, 145 insertions(+), 14 deletions(-) create mode 100644 pages/profile.tsx create mode 100644 src/components/ProfilePage/MusicTab/MusicTab.tsx diff --git a/pages/profile.tsx b/pages/profile.tsx new file mode 100644 index 00000000..f0d8de60 --- /dev/null +++ b/pages/profile.tsx @@ -0,0 +1,53 @@ + +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"; + + + +const Profile: NextPage = () => { + + + return ( +
+
+
+ + + + + + + + + Subscription + + +
+
+ ); +}; + +export default Profile; + +const Music: React.FC = () =>{ + console.log('render Music') + return( +
+ Music Content tab +
+ ) +} + +const Advertisment: React.FC = () =>{ + console.log('render advertisement') + return( +
+ Advertisement Content tab +
+ ) +} + diff --git a/src/components/Header/header.tsx b/src/components/Header/header.tsx index 5a08608c..217a6618 100644 --- a/src/components/Header/header.tsx +++ b/src/components/Header/header.tsx @@ -26,6 +26,10 @@ function Header() { router.push("/"); }; + const navigateProfilePage = () => { + router.push("/profile"); + }; + let correctNetwork; if(chain?.network === 'maticmum' || !isConnected){ @@ -46,23 +50,32 @@ function Header() { {/* Ad marketplace */} -
- {/* LINK TO ADVERTISEMENT PAGE */} - {!useRouter().pathname.includes("adMarketPlace") ? ( - - ) : ( - - )} + Music + + + +
{correctNetwork} diff --git a/src/components/MintSong/MintSong.tsx b/src/components/MintSong/MintSong.tsx index d4f19c62..49ced83f 100644 --- a/src/components/MintSong/MintSong.tsx +++ b/src/components/MintSong/MintSong.tsx @@ -119,6 +119,7 @@ const MintSong: React.FC = () =>{ const advNftID = resCreateMusicWithAdv.events?.[2].args ?.tokenId as BigNumber; + // connect to zora contract const zoraModuleManager = ZoraModuleManager__factory.connect( ZoraModuleManagerAddr, signer diff --git a/src/components/ProfilePage/MusicTab/MusicTab.tsx b/src/components/ProfilePage/MusicTab/MusicTab.tsx new file mode 100644 index 00000000..397049f9 --- /dev/null +++ b/src/components/ProfilePage/MusicTab/MusicTab.tsx @@ -0,0 +1,68 @@ +// antd imports +import {List,Typography} from 'antd' +const {Text,Title} = Typography; + +// graphql imports +import { useQuery } from "@apollo/client"; +import { GET_ALL_MUSIC } from "../../../graph-ql/queries/GET_ALL_MUSIC/getAllMusic"; +import { GetAllMusic } from "../../../graph-ql/queries/GET_ALL_MUSIC/__generated__/GetAllMusic"; +import { fetchIpfs } from "../../../services/ipfs/fetchIpfs"; + +// wagmi imports +import {useAccount} from 'wagmi' + + +const MusicTab: React.FC = () =>{ + + const {address} = useAccount() + + const { + loading: isLoadingAllMusic, + data: allMusicConnection, + error: allMusicError, + } = useQuery(GET_ALL_MUSIC, { + variables: { + currentTime: Math.floor(Date.now() / 1000).toString(), + }, + }); + console.log(allMusicConnection) + + const userOwnedMusic = allMusicConnection?.musicNFTs?.filter(music=>{ + // alphabets in music.creator.id ( address ) are + // returned as lowercase for reasons I don't know + return music.creator.id === address?.toLowerCase() + }) + + // const songsWithExpiredAds = + + return( +
+ Listed + { + + return ( + + } + description={`Burna Boy`} + /> + {/* */} + + )} + }/> +
+ ) +} + +export default MusicTab \ No newline at end of file diff --git a/src/components/SongList/SongList.tsx b/src/components/SongList/SongList.tsx index edcdc74a..b7fc3638 100644 --- a/src/components/SongList/SongList.tsx +++ b/src/components/SongList/SongList.tsx @@ -26,10 +26,6 @@ const SongList: React.FC = ({ playSong }) => { return ( <> - - - - {/* songlist */} Date: Mon, 12 Sep 2022 09:48:35 +0100 Subject: [PATCH 02/18] refactor: remove filters for adlist --- pages/adMarketPlace/index.tsx | 88 +++-------------------------------- 1 file changed, 6 insertions(+), 82 deletions(-) diff --git a/pages/adMarketPlace/index.tsx b/pages/adMarketPlace/index.tsx index 677a45a6..0222b1b7 100644 --- a/pages/adMarketPlace/index.tsx +++ b/pages/adMarketPlace/index.tsx @@ -6,7 +6,6 @@ import { DownOutlined } from "@ant-design/icons"; import { Button, Dropdown, Menu, Space, Radio, Typography, List } from "antd"; import type { RadioChangeEvent } from "antd"; -import { useRouter } from "next/router"; import { GetAllAsks, GetAllAsks_asks, @@ -16,11 +15,12 @@ import { useQuery } from "@apollo/client"; import { AdvNFTAddr, ZoraAskAddr } from "../../src/env"; import { useEffect, useState } from "react"; import { AdvNftMetaData } from "../../src/types/AdvNFTData"; + // custom-component imports import AdModal from "../../src/components/AdModal/AdModal"; import { NFTStorage, File } from "nft.storage"; -import { WalletContext } from "../../src/contexts/WalletContext"; + import { AdvNFT__factory, ZoraAsk__factory, @@ -36,8 +36,8 @@ const client = new NFTStorage({ }); const AdMarketPlace: React.FC = () => { - const walletContext = useContext(WalletContext); - const router = useRouter(); + + const [selectedAdv, setSelectedAdv] = useState(); const [showModal, setShowModal] = useState(false); const [isCreatingAd, setIsCreatingAd] = useState(false); @@ -46,9 +46,7 @@ const AdMarketPlace: React.FC = () => { setShowModal(!showModal); }; - const navigateBack = () => { - router.push("/adMarketPlace"); - }; + const handleAdForm = async (formData: any) => { try { @@ -149,87 +147,13 @@ const Adlist: React.FC = ({ onRentClick }) => { }, }); - // add useState hooks here - const [price, setPrice] = useState("100MATIC"); - const [views, setViews] = useState("100kViews"); const {getWeb3Provider,web3Provider} = useContext(WalletContext) - const onChangePrice = (e: RadioChangeEvent) => { - console.log("radio checked", e.target.value); - setPrice(e.target.value); - }; - - // menu items for price dropdown filter - const priceFilterMenu = ( - - - 100 MATIC and under - 200 MATIC and under - 500 MATIC and under - - - ), - key: "1", - }, - ]} - /> - ); - - const onChangeViews = (e: RadioChangeEvent) => { - console.log("radio checked", e.target.value); - setViews(e.target.value); - }; - - // menu items for number of view dropdown filter - const viewsFilterMenu = ( - - - 1000 views and under - 10K views and under - 50K views and under - 100K views and under - 1 million+ views - - - ), - key: "1", - }, - ]} - /> - ); + return ( <> - {/* start dropdowns */} - - {/* end dropdowns */} Date: Mon, 12 Sep 2022 11:50:56 +0100 Subject: [PATCH 03/18] refactor: move adList to own file --- pages/adMarketPlace/index.tsx | 115 ++---------------- .../MarketPlacePage/Adlist/Adlist.tsx | 115 ++++++++++++++++++ .../MarketPlacePage/Adlist/Adlist.types.ts | 10 ++ 3 files changed, 138 insertions(+), 102 deletions(-) create mode 100644 src/components/MarketPlacePage/Adlist/Adlist.tsx create mode 100644 src/components/MarketPlacePage/Adlist/Adlist.types.ts diff --git a/pages/adMarketPlace/index.tsx b/pages/adMarketPlace/index.tsx index 0222b1b7..640621ec 100644 --- a/pages/adMarketPlace/index.tsx +++ b/pages/adMarketPlace/index.tsx @@ -1,34 +1,32 @@ -import { useContext } from "react"; -import Header from "../../src/components/Header/header"; +import { useState } from "react"; // antd imports -import { DownOutlined } from "@ant-design/icons"; -import { Button, Dropdown, Menu, Space, Radio, Typography, List } from "antd"; -import type { RadioChangeEvent } from "antd"; +import { Typography} from "antd"; +const { Title, Text } = Typography; import { - GetAllAsks, GetAllAsks_asks, } from "../../src/graph-ql/queries/GET_ALL_ASKS/__generated__/GetAllAsks"; -import { GET_ALL_ASKS } from "../../src/graph-ql/queries/GET_ALL_ASKS/getAllAsks"; -import { useQuery } from "@apollo/client"; + import { AdvNFTAddr, ZoraAskAddr } from "../../src/env"; -import { useEffect, useState } from "react"; import { AdvNftMetaData } from "../../src/types/AdvNFTData"; // custom-component imports import AdModal from "../../src/components/AdModal/AdModal"; +import Header from "../../src/components/Header/header"; +import Adlist from "../../src/components/MarketPlacePage/Adlist/Adlist"; + +// wagmi imports +import {useSigner} from 'wagmi' import { NFTStorage, File } from "nft.storage"; import { AdvNFT__factory, ZoraAsk__factory, - ZoraModuleManager__factory, } from "../../src/contracts"; -import { fetchIpfs } from "../../src/services/ipfs/fetchIpfs"; -const { Title, Text } = Typography; + // create client instance for nft.storage const client = new NFTStorage({ @@ -41,6 +39,7 @@ const AdMarketPlace: React.FC = () => { const [selectedAdv, setSelectedAdv] = useState(); const [showModal, setShowModal] = useState(false); const [isCreatingAd, setIsCreatingAd] = useState(false); + const {data: signer} = useSigner() const handleAdModal = () => { setShowModal(!showModal); @@ -66,14 +65,13 @@ const AdMarketPlace: React.FC = () => { const metadataHash = await client.storeBlob( new Blob([JSON.stringify(advNftDataObj)]) ); - const signer = (await walletContext.getWeb3Provider()).getSigner(); + const adNft = AdvNFT__factory.connect(AdvNFTAddr, signer); const zoraAsks = ZoraAsk__factory.connect(ZoraAskAddr, signer); const zeroAddr = "0x0000000000000000000000000000000000000000"; console.log(selectedAdv); if (!selectedAdv?.token.id) { throw new Error("Failed to get selected adv id"); - return; } console.log("handleAdForm: Filling Zora Asks"); @@ -113,6 +111,7 @@ const AdMarketPlace: React.FC = () => { setShowModal(true); }; + return ( <>
@@ -131,93 +130,5 @@ const AdMarketPlace: React.FC = () => { ); }; -interface AdlistProp { - onHandleModal: () => void; - onRentClick: (advNft: GetAllAsks_asks) => void; -} - -const Adlist: React.FC = ({ onRentClick }) => { - const { - loading: isLoadingAllAsks, - data: allAsksConnection, - error: allAskError, - } = useQuery(GET_ALL_ASKS, { - variables: { - nftContractAddr: AdvNFTAddr.toLowerCase(), - }, - }); - - - const {getWeb3Provider,web3Provider} = useContext(WalletContext) - - - - return ( - <> - - { - return ( - onRentClick(item)}>Rent Ad Space - } - > - } - title={} - description="TODO: fetch desc from ipfs" - /> - - ); - }} - /> - - ); -}; - -interface TitleProps { - item: GetAllAsks_asks; -} - -const TitleNode: React.FC = ({ item }) => { - const [metaData, setMetaData] = useState(); - - const fetchMetaData = async () => { - const advMetaData = await fetchIpfs( - item.token.metaDataHash - ); - setMetaData(advMetaData); - }; - useEffect(() => { - fetchMetaData(); - }, [item]); - return ( -
- - {metaData?.name} - - - {item.token.id} - -
- ); -}; export default AdMarketPlace; diff --git a/src/components/MarketPlacePage/Adlist/Adlist.tsx b/src/components/MarketPlacePage/Adlist/Adlist.tsx new file mode 100644 index 00000000..74d1c1c4 --- /dev/null +++ b/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 = ({ onRentClick }) => { + + const { openConnectModal } = useConnectModal(); + const { isConnected } = useAccount() + + const { + loading: isLoadingAllAsks, + data: allAsksConnection, + error: allAskError, + } = useQuery(GET_ALL_ASKS, { + variables: { + nftContractAddr: AdvNFTAddr.toLowerCase(), + }, + }); + + return ( + <> + + { + return ( + onRentClick(item) : openConnectModal}>Rent Ad Space + } + > + } + description="TODO: fetch desc from ipfs" + /> + + ); + }} + /> + + ); + }; + + interface TitleProps { + item: GetAllAsks_asks; + } + + const TitleNode: React.FC = ({ item }) => { + const [metaData, setMetaData] = useState(); + + console.log(metaData) + + const fetchMetaData = async () => { + const advMetaData = await fetchIpfs( + item.token.metaDataHash + ); + console.log(advMetaData) + setMetaData(advMetaData); + }; + + useEffect(() => { + fetchMetaData(); + }, [item]); + + return ( +
+ + {metaData?.name} + + + {item.token.id} + +
+ ); + }; + + + export default Adlist \ No newline at end of file diff --git a/src/components/MarketPlacePage/Adlist/Adlist.types.ts b/src/components/MarketPlacePage/Adlist/Adlist.types.ts new file mode 100644 index 00000000..71f153d3 --- /dev/null +++ b/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} \ No newline at end of file From b9d7c0b9f3e5b3de7cebc003ab482628fcc8a7b7 Mon Sep 17 00:00:00 2001 From: mujeex Date: Tue, 13 Sep 2022 11:26:35 +0100 Subject: [PATCH 04/18] fetch music with expiry date --- pages/profile.tsx | 8 ----- .../ProfilePage/MusicTab/MusicTab.tsx | 29 +++++------------ src/components/Shared/ListItem/ListItem.tsx | 31 +++++++++++++++++++ src/components/SongList/ListItemNodes.tsx | 1 + .../__generated__/GetAllMusic.ts | 1 + .../queries/GET_ALL_MUSIC/getAllMusic.ts | 20 ++++++++++++ src/hooks/useMetadata/useMetadata.tsx | 25 +++++++++++++++ 7 files changed, 86 insertions(+), 29 deletions(-) create mode 100644 src/components/Shared/ListItem/ListItem.tsx create mode 100644 src/hooks/useMetadata/useMetadata.tsx diff --git a/pages/profile.tsx b/pages/profile.tsx index f0d8de60..11d8d43b 100644 --- a/pages/profile.tsx +++ b/pages/profile.tsx @@ -33,14 +33,6 @@ const Profile: NextPage = () => { export default Profile; -const Music: React.FC = () =>{ - console.log('render Music') - return( -
- Music Content tab -
- ) -} const Advertisment: React.FC = () =>{ console.log('render advertisement') diff --git a/src/components/ProfilePage/MusicTab/MusicTab.tsx b/src/components/ProfilePage/MusicTab/MusicTab.tsx index 397049f9..8f0576ad 100644 --- a/src/components/ProfilePage/MusicTab/MusicTab.tsx +++ b/src/components/ProfilePage/MusicTab/MusicTab.tsx @@ -4,10 +4,13 @@ const {Text,Title} = Typography; // graphql imports import { useQuery } from "@apollo/client"; -import { GET_ALL_MUSIC } from "../../../graph-ql/queries/GET_ALL_MUSIC/getAllMusic"; +import { GET_ALL_MUSIC, GET_ALL_MUSIC_WITH_ADSPACE } from "../../../graph-ql/queries/GET_ALL_MUSIC/getAllMusic"; import { GetAllMusic } from "../../../graph-ql/queries/GET_ALL_MUSIC/__generated__/GetAllMusic"; import { fetchIpfs } from "../../../services/ipfs/fetchIpfs"; +// custom-components imports +import ListItem from '../../Shared/ListItem/ListItem'; + // wagmi imports import {useAccount} from 'wagmi' @@ -20,12 +23,8 @@ const MusicTab: React.FC = () =>{ loading: isLoadingAllMusic, data: allMusicConnection, error: allMusicError, - } = useQuery(GET_ALL_MUSIC, { - variables: { - currentTime: Math.floor(Date.now() / 1000).toString(), - }, - }); - console.log(allMusicConnection) + } = useQuery(GET_ALL_MUSIC_WITH_ADSPACE); + const userOwnedMusic = allMusicConnection?.musicNFTs?.filter(music=>{ // alphabets in music.creator.id ( address ) are @@ -33,11 +32,10 @@ const MusicTab: React.FC = () =>{ return music.creator.id === address?.toLowerCase() }) - // const songsWithExpiredAds = return(
- Listed + Listed { }} itemLayout="horizontal" dataSource={userOwnedMusic} - renderItem={(item) =>{ - - return ( - - } - description={`Burna Boy`} - /> - {/* */} - - )} - }/> + renderItem={(item) => }/>
) } diff --git a/src/components/Shared/ListItem/ListItem.tsx b/src/components/Shared/ListItem/ListItem.tsx new file mode 100644 index 00000000..a36221b6 --- /dev/null +++ b/src/components/Shared/ListItem/ListItem.tsx @@ -0,0 +1,31 @@ + +// antd imports +import {List,Typography} from 'antd'; +const {Text,Title} = Typography; + +// hooks imports +import { useMusicMetadata } from '../../../hooks/useMetadata/useMetadata'; + +// types imports +import { GetAllMusic_musicNFTs } from '../../../graph-ql/queries/GET_ALL_MUSIC/__generated__/GetAllMusic'; + +interface ListItemProps{ + item: GetAllMusic_musicNFTs +} + +const ListItem: React.FC = ({item})=>{ + + const music = useMusicMetadata(item); + + return ( + + {music?.body.title}} + description={ {`${Number(item.advNfts[0].expirationDuration)/86400} Days Left`} } + /> + {/* */} + + ) +} + +export default ListItem \ No newline at end of file diff --git a/src/components/SongList/ListItemNodes.tsx b/src/components/SongList/ListItemNodes.tsx index fb6aaec0..4ba84714 100644 --- a/src/components/SongList/ListItemNodes.tsx +++ b/src/components/SongList/ListItemNodes.tsx @@ -7,6 +7,7 @@ const { Title } = Typography; import { MusicNftMetaData } from "../../types/MusicNFTData"; import { fetchIpfs } from "../../services/ipfs/fetchIpfs"; import { GetAllMusic_musicNFTs } from "../../graph-ql/queries/GET_ALL_MUSIC/__generated__/GetAllMusic"; + interface TitleProps { musicItem: GetAllMusic_musicNFTs; } diff --git a/src/graph-ql/queries/GET_ALL_MUSIC/__generated__/GetAllMusic.ts b/src/graph-ql/queries/GET_ALL_MUSIC/__generated__/GetAllMusic.ts index b3b80587..01472f33 100644 --- a/src/graph-ql/queries/GET_ALL_MUSIC/__generated__/GetAllMusic.ts +++ b/src/graph-ql/queries/GET_ALL_MUSIC/__generated__/GetAllMusic.ts @@ -8,6 +8,7 @@ // ==================================================== export interface GetAllMusic_musicNFTs_advNfts { + expirationDuration: string; __typename: "AdvNFT"; assetHash: string; } diff --git a/src/graph-ql/queries/GET_ALL_MUSIC/getAllMusic.ts b/src/graph-ql/queries/GET_ALL_MUSIC/getAllMusic.ts index c2cfbe79..3d70253d 100644 --- a/src/graph-ql/queries/GET_ALL_MUSIC/getAllMusic.ts +++ b/src/graph-ql/queries/GET_ALL_MUSIC/getAllMusic.ts @@ -5,6 +5,26 @@ export const GET_ALL_MUSIC = gql` musicNFTs{ advNfts(where:{expirationTime_gt:$currentTime}){ assetHash + expirationDuration + } + id + creator { + id + } + owner { + id + } + metaDataUri + assetUri + } +}` + + +export const GET_ALL_MUSIC_WITH_ADSPACE = gql` + query GetAllMusic{ + musicNFTs{ + advNfts{ + expirationDuration } id creator { diff --git a/src/hooks/useMetadata/useMetadata.tsx b/src/hooks/useMetadata/useMetadata.tsx new file mode 100644 index 00000000..17b56ac8 --- /dev/null +++ b/src/hooks/useMetadata/useMetadata.tsx @@ -0,0 +1,25 @@ +import {useEffect, useState} from 'react' +import { fetchIpfs } from '../../services/ipfs/fetchIpfs'; +import { GetAllMusic_musicNFTs } from "../../graph-ql/queries/GET_ALL_MUSIC/__generated__/GetAllMusic"; +import { MusicNftMetaData } from "../../types/MusicNFTData"; + +export const useMusicMetadata = (item:GetAllMusic_musicNFTs) =>{ + +const [music, setMusic] = useState(); + + const fetchMetaData = async () => { + const musicMetaData = await fetchIpfs( + item.metaDataUri + ); + setMusic(musicMetaData); + }; + + useEffect(() => { + fetchMetaData(); + }, []); + + return music; +} + + + \ No newline at end of file From b5644d6da084943f120e5053c88e3a116df55343 Mon Sep 17 00:00:00 2001 From: mujeex Date: Wed, 14 Sep 2022 13:58:54 +0100 Subject: [PATCH 05/18] refactor: move music fetching logic into custom-hook --- .../ProfilePage/MusicTab/MusicTab.tsx | 63 ++++++++----------- .../ProfilePage/hooks/useFetchUserMusic.tsx | 27 ++++++++ src/components/Shared/ListItem/ListItem.tsx | 10 ++- .../queries/GET_ALL_MUSIC/getAllMusic.ts | 7 ++- 4 files changed, 65 insertions(+), 42 deletions(-) create mode 100644 src/components/ProfilePage/hooks/useFetchUserMusic.tsx diff --git a/src/components/ProfilePage/MusicTab/MusicTab.tsx b/src/components/ProfilePage/MusicTab/MusicTab.tsx index 8f0576ad..09093511 100644 --- a/src/components/ProfilePage/MusicTab/MusicTab.tsx +++ b/src/components/ProfilePage/MusicTab/MusicTab.tsx @@ -1,55 +1,46 @@ // antd imports -import {List,Typography} from 'antd' -const {Text,Title} = Typography; +import {List,Typography,Button} from 'antd' +const {Title} = Typography; -// graphql imports -import { useQuery } from "@apollo/client"; -import { GET_ALL_MUSIC, GET_ALL_MUSIC_WITH_ADSPACE } from "../../../graph-ql/queries/GET_ALL_MUSIC/getAllMusic"; -import { GetAllMusic } from "../../../graph-ql/queries/GET_ALL_MUSIC/__generated__/GetAllMusic"; -import { fetchIpfs } from "../../../services/ipfs/fetchIpfs"; // custom-components imports import ListItem from '../../Shared/ListItem/ListItem'; -// wagmi imports -import {useAccount} from 'wagmi' + +// custom-hooks imports +import useFetchUserMusic from '../hooks/useFetchUserMusic'; const MusicTab: React.FC = () =>{ - const {address} = useAccount() + return( + + ) +} - const { - loading: isLoadingAllMusic, - data: allMusicConnection, - error: allMusicError, - } = useQuery(GET_ALL_MUSIC_WITH_ADSPACE); +export default MusicTab - const userOwnedMusic = allMusicConnection?.musicNFTs?.filter(music=>{ - // alphabets in music.creator.id ( address ) are - // returned as lowercase for reasons I don't know - return music.creator.id === address?.toLowerCase() - }) +const MusicCategory: React.FC = ()=>{ + const {music,isLoading,error} = useFetchUserMusic() - return( -
- Listed + // TODO: Create error-boundary to catch error when thrown + if(error){ + throw new Error('Problem caught while fetching music Category') + } + + return( +
+ Expired }/> -
- ) + dataSource={music} + renderItem={(item) =>List} item={item}/> }/> + +
+ ) } -export default MusicTab \ No newline at end of file diff --git a/src/components/ProfilePage/hooks/useFetchUserMusic.tsx b/src/components/ProfilePage/hooks/useFetchUserMusic.tsx new file mode 100644 index 00000000..70fa3f74 --- /dev/null +++ b/src/components/ProfilePage/hooks/useFetchUserMusic.tsx @@ -0,0 +1,27 @@ +import { useAccount } from "wagmi"; +import {useQuery} from '@apollo/client' +import { GetAllMusic } from "../../../graph-ql/queries/GET_ALL_MUSIC/__generated__/GetAllMusic"; +import { GET_USER_MUSIC } from "../../../graph-ql/queries/GET_ALL_MUSIC/getAllMusic"; + + const useFetchUserMusic = () =>{ + + const {address} = useAccount() + + const { + loading: isLoading, + data: allMusic, + error: error, + } = useQuery(GET_USER_MUSIC,{ + variables: { + userAddress: address?.toLowerCase() + }, + }); + + const music = allMusic?.musicNFTs + + return {music,isLoading,error} + } + + + export default useFetchUserMusic + diff --git a/src/components/Shared/ListItem/ListItem.tsx b/src/components/Shared/ListItem/ListItem.tsx index a36221b6..70908071 100644 --- a/src/components/Shared/ListItem/ListItem.tsx +++ b/src/components/Shared/ListItem/ListItem.tsx @@ -8,19 +8,23 @@ import { useMusicMetadata } from '../../../hooks/useMetadata/useMetadata'; // types imports import { GetAllMusic_musicNFTs } from '../../../graph-ql/queries/GET_ALL_MUSIC/__generated__/GetAllMusic'; +import { ReactNode } from 'react'; interface ListItemProps{ item: GetAllMusic_musicNFTs + extra: ReactNode } -const ListItem: React.FC = ({item})=>{ +const ListItem: React.FC = ({item,extra=null})=>{ const music = useMusicMetadata(item); return ( - + {music?.body.title}} + title={{music?.body.title}} description={ {`${Number(item.advNfts[0].expirationDuration)/86400} Days Left`} } /> {/* */} diff --git a/src/graph-ql/queries/GET_ALL_MUSIC/getAllMusic.ts b/src/graph-ql/queries/GET_ALL_MUSIC/getAllMusic.ts index 3d70253d..58a3928a 100644 --- a/src/graph-ql/queries/GET_ALL_MUSIC/getAllMusic.ts +++ b/src/graph-ql/queries/GET_ALL_MUSIC/getAllMusic.ts @@ -20,9 +20,10 @@ export const GET_ALL_MUSIC = gql` }` -export const GET_ALL_MUSIC_WITH_ADSPACE = gql` - query GetAllMusic{ - musicNFTs{ + +export const GET_USER_MUSIC = gql` + query GetAllMusic($userAddress:String){ + musicNFTs(where:{owner:$userAddress}){ advNfts{ expirationDuration } From 31a9f2cfe50657ef4e6d7967e94ad5934882c7e6 Mon Sep 17 00:00:00 2001 From: mujeex Date: Thu, 15 Sep 2022 07:42:50 +0100 Subject: [PATCH 06/18] feat: fetch expired ad spaces --- .../ProfilePage/MusicTab/MusicTab.tsx | 41 ++++++++++++++++--- .../ProfilePage/hooks/useFetchExpiredAds.tsx | 28 +++++++++++++ .../ProfilePage/hooks/useFetchUserMusic.tsx | 6 +-- src/graph-ql/graphql-schema.json | 4 +- .../__generated__/GetUserExpiredAdspaces.ts | 35 ++++++++++++++++ src/graph-ql/queries/GET_ALL_ADS/getAllAds.ts | 15 +++++++ .../__generated__/GetAllMusic.ts | 2 +- .../__generated__/GetUserListedMusic.ts | 41 +++++++++++++++++++ .../queries/GET_ALL_MUSIC/getAllMusic.ts | 4 +- 9 files changed, 163 insertions(+), 13 deletions(-) create mode 100644 src/components/ProfilePage/hooks/useFetchExpiredAds.tsx create mode 100644 src/graph-ql/queries/GET_ALL_ADS/__generated__/GetUserExpiredAdspaces.ts create mode 100644 src/graph-ql/queries/GET_ALL_ADS/getAllAds.ts create mode 100644 src/graph-ql/queries/GET_ALL_MUSIC/__generated__/GetUserListedMusic.ts diff --git a/src/components/ProfilePage/MusicTab/MusicTab.tsx b/src/components/ProfilePage/MusicTab/MusicTab.tsx index 09093511..5c128d5b 100644 --- a/src/components/ProfilePage/MusicTab/MusicTab.tsx +++ b/src/components/ProfilePage/MusicTab/MusicTab.tsx @@ -5,6 +5,7 @@ const {Title} = Typography; // custom-components imports import ListItem from '../../Shared/ListItem/ListItem'; +import useFetchExpiredAds from '../hooks/useFetchExpiredAds'; // custom-hooks imports @@ -14,16 +15,45 @@ import useFetchUserMusic from '../hooks/useFetchUserMusic'; const MusicTab: React.FC = () =>{ return( - + <> + + + ) } export default MusicTab -const MusicCategory: React.FC = ()=>{ - const {music,isLoading,error} = useFetchUserMusic() +const ListedCategory: React.FC = ()=>{ + + const {music,isLoading,error} = useFetchUserMusic() + console.log(music) + + // TODO: Create error-boundary to catch error when thrown + if(error){ + throw new Error('Problem caught while fetching music Category') + } + + return( +
+ Listed + {/* List} item={item}/> }/> */} + +
+ ) +} + +const ExpiredCategory: React.FC = ()=>{ + + const {ads,isLoading,error} = useFetchExpiredAds() + console.log(ads) // TODO: Create error-boundary to catch error when thrown if(error){ @@ -37,8 +67,9 @@ const MusicCategory: React.FC = ()=>{ loading={isLoading} className={"self-center p-4 max-w-3xl rounded-xl border-slate-800"} itemLayout="horizontal" - dataSource={music} - renderItem={(item) =>List} item={item}/> }/> + dataSource={ads} + renderItem={(item) =>List} item={item}/> + }/> ) diff --git a/src/components/ProfilePage/hooks/useFetchExpiredAds.tsx b/src/components/ProfilePage/hooks/useFetchExpiredAds.tsx new file mode 100644 index 00000000..ba5a02e8 --- /dev/null +++ b/src/components/ProfilePage/hooks/useFetchExpiredAds.tsx @@ -0,0 +1,28 @@ +import { useAccount } from "wagmi"; +import {useQuery} from '@apollo/client' +import { GetUserExpiredAdspaces } from "../../../graph-ql/queries/GET_ALL_ADS/__generated__/GetUserExpiredAdspaces"; +import { GET_USER_EXPIRED_ADSPACES } from "../../../graph-ql/queries/GET_ALL_ADS/getAllAds"; + + const useFetchExpiredAds = () =>{ + + const {address} = useAccount() + + const { + loading: isLoading, + data: allAds, + error: error, + } = useQuery(GET_USER_EXPIRED_ADSPACES,{ + variables: { + userAddress:'0x485a3fbc66ccddcd0bf65c7f4a318d08878d411b', + expirationTime: 0 + }, + }); + + const ads = allAds?.advNFTs + + return {ads,isLoading,error} + } + + + export default useFetchExpiredAds + diff --git a/src/components/ProfilePage/hooks/useFetchUserMusic.tsx b/src/components/ProfilePage/hooks/useFetchUserMusic.tsx index 70fa3f74..8e73fc33 100644 --- a/src/components/ProfilePage/hooks/useFetchUserMusic.tsx +++ b/src/components/ProfilePage/hooks/useFetchUserMusic.tsx @@ -1,7 +1,7 @@ import { useAccount } from "wagmi"; import {useQuery} from '@apollo/client' -import { GetAllMusic } from "../../../graph-ql/queries/GET_ALL_MUSIC/__generated__/GetAllMusic"; -import { GET_USER_MUSIC } from "../../../graph-ql/queries/GET_ALL_MUSIC/getAllMusic"; +import { GetUserListedMusic } from "../../../graph-ql/queries/GET_ALL_MUSIC/__generated__/GetUserListedMusic"; +import { GET_USER_LISTED_MUSIC } from "../../../graph-ql/queries/GET_ALL_MUSIC/getAllMusic"; const useFetchUserMusic = () =>{ @@ -11,7 +11,7 @@ import { GET_USER_MUSIC } from "../../../graph-ql/queries/GET_ALL_MUSIC/getAllMu loading: isLoading, data: allMusic, error: error, - } = useQuery(GET_USER_MUSIC,{ + } = useQuery(GET_USER_LISTED_MUSIC,{ variables: { userAddress: address?.toLowerCase() }, diff --git a/src/graph-ql/graphql-schema.json b/src/graph-ql/graphql-schema.json index 46e166cf..3bf7fd41 100644 --- a/src/graph-ql/graphql-schema.json +++ b/src/graph-ql/graphql-schema.json @@ -6877,11 +6877,11 @@ }, { "name": "timestamp", - "description": "Timestamp of the block if available, format depends on the chain", + "description": "Integer representation of the timestamp stored in blocks for the chain", "args": [], "type": { "kind": "SCALAR", - "name": "String", + "name": "Int", "ofType": null }, "isDeprecated": false, diff --git a/src/graph-ql/queries/GET_ALL_ADS/__generated__/GetUserExpiredAdspaces.ts b/src/graph-ql/queries/GET_ALL_ADS/__generated__/GetUserExpiredAdspaces.ts new file mode 100644 index 00000000..7ad04874 --- /dev/null +++ b/src/graph-ql/queries/GET_ALL_ADS/__generated__/GetUserExpiredAdspaces.ts @@ -0,0 +1,35 @@ +/* tslint:disable */ +/* eslint-disable */ +// @generated +// This file was automatically generated and should not be edited. + +// ==================================================== +// GraphQL query operation: GetUserExpiredAdspaces +// ==================================================== + +export interface GetUserExpiredAdspaces_advNFTs_musicNFT { + __typename: "MusicNFT"; + metaDataUri: string; + assetUri: string; +} + +export interface GetUserExpiredAdspaces_advNFTs_owner { + __typename: "User"; + id: string; +} + +export interface GetUserExpiredAdspaces_advNFTs { + __typename: "AdvNFT"; + musicNFT: GetUserExpiredAdspaces_advNFTs_musicNFT; + expirationDuration: any; + owner: GetUserExpiredAdspaces_advNFTs_owner; +} + +export interface GetUserExpiredAdspaces { + advNFTs: GetUserExpiredAdspaces_advNFTs[]; +} + +export interface GetUserExpiredAdspacesVariables { + userAddress?: string | null; + expirationTime?: any | null; +} diff --git a/src/graph-ql/queries/GET_ALL_ADS/getAllAds.ts b/src/graph-ql/queries/GET_ALL_ADS/getAllAds.ts new file mode 100644 index 00000000..bf37b1e4 --- /dev/null +++ b/src/graph-ql/queries/GET_ALL_ADS/getAllAds.ts @@ -0,0 +1,15 @@ +import { gql } from "@apollo/client"; + +export const GET_USER_EXPIRED_ADSPACES = gql` +query GetUserExpiredAdspaces($userAddress:String,$expirationTime:BigInt){ + advNFTs(where:{owner:$userAddress,expirationTime:$expirationTime}){ + musicNFT{ + metaDataUri + assetUri + } + expirationDuration + owner{ + id + } + } +}` \ No newline at end of file diff --git a/src/graph-ql/queries/GET_ALL_MUSIC/__generated__/GetAllMusic.ts b/src/graph-ql/queries/GET_ALL_MUSIC/__generated__/GetAllMusic.ts index 01472f33..85fa16d8 100644 --- a/src/graph-ql/queries/GET_ALL_MUSIC/__generated__/GetAllMusic.ts +++ b/src/graph-ql/queries/GET_ALL_MUSIC/__generated__/GetAllMusic.ts @@ -8,9 +8,9 @@ // ==================================================== export interface GetAllMusic_musicNFTs_advNfts { - expirationDuration: string; __typename: "AdvNFT"; assetHash: string; + expirationDuration: any; } export interface GetAllMusic_musicNFTs_creator { diff --git a/src/graph-ql/queries/GET_ALL_MUSIC/__generated__/GetUserListedMusic.ts b/src/graph-ql/queries/GET_ALL_MUSIC/__generated__/GetUserListedMusic.ts new file mode 100644 index 00000000..cae57478 --- /dev/null +++ b/src/graph-ql/queries/GET_ALL_MUSIC/__generated__/GetUserListedMusic.ts @@ -0,0 +1,41 @@ +/* tslint:disable */ +/* eslint-disable */ +// @generated +// This file was automatically generated and should not be edited. + +// ==================================================== +// GraphQL query operation: GetUserListedMusic +// ==================================================== + +export interface GetUserListedMusic_musicNFTs_advNfts { + __typename: "AdvNFT"; + expirationDuration: any; +} + +export interface GetUserListedMusic_musicNFTs_creator { + __typename: "User"; + id: string; +} + +export interface GetUserListedMusic_musicNFTs_owner { + __typename: "User"; + id: string; +} + +export interface GetUserListedMusic_musicNFTs { + __typename: "MusicNFT"; + advNfts: GetUserListedMusic_musicNFTs_advNfts[]; + id: string; + creator: GetUserListedMusic_musicNFTs_creator; + owner: GetUserListedMusic_musicNFTs_owner; + metaDataUri: string; + assetUri: string; +} + +export interface GetUserListedMusic { + musicNFTs: GetUserListedMusic_musicNFTs[]; +} + +export interface GetUserListedMusicVariables { + userAddress?: string | null; +} diff --git a/src/graph-ql/queries/GET_ALL_MUSIC/getAllMusic.ts b/src/graph-ql/queries/GET_ALL_MUSIC/getAllMusic.ts index 58a3928a..544db9d7 100644 --- a/src/graph-ql/queries/GET_ALL_MUSIC/getAllMusic.ts +++ b/src/graph-ql/queries/GET_ALL_MUSIC/getAllMusic.ts @@ -21,8 +21,8 @@ export const GET_ALL_MUSIC = gql` -export const GET_USER_MUSIC = gql` - query GetAllMusic($userAddress:String){ +export const GET_USER_LISTED_MUSIC = gql` + query GetUserListedMusic($userAddress:String){ musicNFTs(where:{owner:$userAddress}){ advNfts{ expirationDuration From 707ab33c1f0591a252b0f1e4c77b35a78daadb6f Mon Sep 17 00:00:00 2001 From: mujeex Date: Thu, 15 Sep 2022 07:55:02 +0100 Subject: [PATCH 07/18] fix: update graphql query types --- src/components/ProfilePage/MusicTab/MusicTab.tsx | 14 +++++++------- src/components/Shared/ListItem/ListItem.tsx | 6 +++--- src/hooks/useMetadata/useMetadata.tsx | 4 ++-- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/ProfilePage/MusicTab/MusicTab.tsx b/src/components/ProfilePage/MusicTab/MusicTab.tsx index 5c128d5b..ac47a132 100644 --- a/src/components/ProfilePage/MusicTab/MusicTab.tsx +++ b/src/components/ProfilePage/MusicTab/MusicTab.tsx @@ -16,8 +16,8 @@ const MusicTab: React.FC = () =>{ return( <> - - + + ) } @@ -39,12 +39,12 @@ const ListedCategory: React.FC = ()=>{ return(
Listed - {/* List} item={item}/> }/> */} + renderItem={(item) =>List} item={item}/> }/>
) @@ -63,13 +63,13 @@ const ExpiredCategory: React.FC = ()=>{ return(
Expired - List} item={item}/> - }/> + renderItem={(item) =>List} item={item}/> */} + {/* }/> */}
) diff --git a/src/components/Shared/ListItem/ListItem.tsx b/src/components/Shared/ListItem/ListItem.tsx index 70908071..8fe40597 100644 --- a/src/components/Shared/ListItem/ListItem.tsx +++ b/src/components/Shared/ListItem/ListItem.tsx @@ -7,11 +7,11 @@ const {Text,Title} = Typography; import { useMusicMetadata } from '../../../hooks/useMetadata/useMetadata'; // types imports -import { GetAllMusic_musicNFTs } from '../../../graph-ql/queries/GET_ALL_MUSIC/__generated__/GetAllMusic'; +import { GetUserListedMusic_musicNFTs, } from '../../../graph-ql/queries/GET_ALL_MUSIC/__generated__/GetUserListedMusic'; import { ReactNode } from 'react'; interface ListItemProps{ - item: GetAllMusic_musicNFTs + item: GetUserListedMusic_musicNFTs extra: ReactNode } @@ -25,7 +25,7 @@ const ListItem: React.FC = ({item,extra=null})=>{ > {music?.body.title}} - description={ {`${Number(item.advNfts[0].expirationDuration)/86400} Days Left`} } + description={ {`${Number(item?.advNfts[0].expirationDuration)/86400} Days Left`} } /> {/* */} diff --git a/src/hooks/useMetadata/useMetadata.tsx b/src/hooks/useMetadata/useMetadata.tsx index 17b56ac8..5f316ab0 100644 --- a/src/hooks/useMetadata/useMetadata.tsx +++ b/src/hooks/useMetadata/useMetadata.tsx @@ -1,9 +1,9 @@ import {useEffect, useState} from 'react' import { fetchIpfs } from '../../services/ipfs/fetchIpfs'; -import { GetAllMusic_musicNFTs } from "../../graph-ql/queries/GET_ALL_MUSIC/__generated__/GetAllMusic"; +import { GetUserListedMusic_musicNFTs } from "../../graph-ql/queries/GET_ALL_MUSIC/__generated__/GetUserListedMusic"; import { MusicNftMetaData } from "../../types/MusicNFTData"; -export const useMusicMetadata = (item:GetAllMusic_musicNFTs) =>{ +export const useMusicMetadata = (item:GetUserListedMusic_musicNFTs) =>{ const [music, setMusic] = useState(); From cfea5ca7a2628dbd7ce1e9b7781f8a6b171c01b5 Mon Sep 17 00:00:00 2001 From: mujeex Date: Sat, 17 Sep 2022 16:29:54 +0100 Subject: [PATCH 08/18] refactor: replace static address with currentAddress --- src/components/ProfilePage/MusicTab/MusicTab.tsx | 3 ++- src/components/ProfilePage/hooks/useFetchExpiredAds.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/ProfilePage/MusicTab/MusicTab.tsx b/src/components/ProfilePage/MusicTab/MusicTab.tsx index ac47a132..80a98761 100644 --- a/src/components/ProfilePage/MusicTab/MusicTab.tsx +++ b/src/components/ProfilePage/MusicTab/MusicTab.tsx @@ -57,9 +57,10 @@ const ExpiredCategory: React.FC = ()=>{ // TODO: Create error-boundary to catch error when thrown if(error){ - throw new Error('Problem caught while fetching music Category') + throw new Error('Problem caught while fetching expired ads') } + return(
Expired diff --git a/src/components/ProfilePage/hooks/useFetchExpiredAds.tsx b/src/components/ProfilePage/hooks/useFetchExpiredAds.tsx index ba5a02e8..fe4c5603 100644 --- a/src/components/ProfilePage/hooks/useFetchExpiredAds.tsx +++ b/src/components/ProfilePage/hooks/useFetchExpiredAds.tsx @@ -13,7 +13,7 @@ import { GET_USER_EXPIRED_ADSPACES } from "../../../graph-ql/queries/GET_ALL_ADS error: error, } = useQuery(GET_USER_EXPIRED_ADSPACES,{ variables: { - userAddress:'0x485a3fbc66ccddcd0bf65c7f4a318d08878d411b', + userAddress:address?.toLowerCase(), expirationTime: 0 }, }); From 7c19ba5ed738cc9e3442d3de12bc12db01ccb42b Mon Sep 17 00:00:00 2001 From: mujeex Date: Sun, 18 Sep 2022 16:25:49 +0100 Subject: [PATCH 09/18] feat: query for user listed adspaces --- pages/adMarketPlace/index.tsx | 138 ++---------------- .../AdModal/AdModalForm/AdModalForm.types.ts | 5 +- .../ProfilePage/MusicTab/MusicTab.tsx | 36 +++-- .../ProfilePage/hooks/useFetchUserMusic.tsx | 17 ++- .../ExpiredMusicItem/ExpiredMusicItem.tsx | 35 +++++ src/components/Shared/ListItem/ListItem.tsx | 1 + src/components/SongList/SongList.tsx | 4 - src/graph-ql/graphql-schema.json | 15 -- .../GET_UNSOLD/__generated__/GetUserUnsold.ts | 58 ++++++++ src/graph-ql/queries/GET_UNSOLD/getUnsold.ts | 30 ++++ src/hooks/useMetadata/useMetadata.tsx | 4 + 11 files changed, 179 insertions(+), 164 deletions(-) create mode 100644 src/components/Shared/ExpiredMusicItem/ExpiredMusicItem.tsx create mode 100644 src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnsold.ts diff --git a/pages/adMarketPlace/index.tsx b/pages/adMarketPlace/index.tsx index add42104..a4a79719 100644 --- a/pages/adMarketPlace/index.tsx +++ b/pages/adMarketPlace/index.tsx @@ -1,45 +1,17 @@ -<<<<<<< HEAD -import { useState } from "react"; +import React, { useCallback, useEffect, useState } from "react"; -======= import Header from "../../src/components/Header/header"; import { useConnectModal } from "@rainbow-me/rainbowkit"; ->>>>>>> main // antd imports -import { Typography} from "antd"; +import { Typography,List,Button} from "antd"; const { Title, Text } = Typography; -<<<<<<< HEAD -import { - GetAllAsks_asks, -} from "../../src/graph-ql/queries/GET_ALL_ASKS/__generated__/GetAllAsks"; - -import { AdvNFTAddr, ZoraAskAddr } from "../../src/env"; -======= import { useQuery } from "@apollo/client"; import { AdvNFTAddr, MarketPlaceAddr } from "../../src/env"; -import React, { useCallback, useEffect, useState } from "react"; ->>>>>>> main import { AdvNftMetaData } from "../../src/types/AdvNFTData"; // custom-component imports import AdModal from "../../src/components/AdModal/AdModal"; -<<<<<<< HEAD -import Header from "../../src/components/Header/header"; -import Adlist from "../../src/components/MarketPlacePage/Adlist/Adlist"; - -// wagmi imports -import {useSigner} from 'wagmi' - -import { NFTStorage, File } from "nft.storage"; - -import { - AdvNFT__factory, - ZoraAsk__factory, -} from "../../src/contracts"; - - -======= import { useSigner } from "wagmi"; import { fetchIpfs } from "../../src/services/ipfs/fetchIpfs"; @@ -51,37 +23,27 @@ import { GET_UNSOLD } from "../../src/graph-ql/queries/GET_UNSOLD/getUnsold"; import { AdvNFT__factory, MarketPlace__factory } from "../../src/contracts"; import { NFTStorage } from "nft.storage"; import { AdModalFormValues } from "../../src/components/AdModal/AdModalForm/AdModalForm.types"; ->>>>>>> main // create client instance for nft.storage const client = new NFTStorage({ token: process.env.NEXT_PUBLIC_NFT_STORAGE_TOKEN ?? "", }); -const { Title } = Typography; - -const AdMarketPlace: React.FC = () => { -<<<<<<< HEAD - const [selectedAdv, setSelectedAdv] = useState(); -======= +const AdMarketPlace: React.FC = () => { + const { data: signer } = useSigner(); const [selectedAdv, setSelectedAdv] = useState(); ->>>>>>> main const [showModal, setShowModal] = useState(false); const [isCreatingAd, setIsCreatingAd] = useState(false); - const {data: signer} = useSigner() + const handleAdModal = () => { setShowModal(!showModal); }; -<<<<<<< HEAD - -======= const handleAdForm = async (formData: AdModalFormValues) => { console.log("hemlo"); ->>>>>>> main try { setIsCreatingAd(true); @@ -102,10 +64,6 @@ const AdMarketPlace: React.FC = () => { const metadataHash = await client.storeBlob( new Blob([JSON.stringify(advNftDataObj)]) ); -<<<<<<< HEAD - -======= ->>>>>>> main const adNft = AdvNFT__factory.connect(AdvNFTAddr, signer); const marketPlace = MarketPlace__factory.connect(MarketPlaceAddr, signer); @@ -138,7 +96,6 @@ const AdMarketPlace: React.FC = () => { const handleRentClick = (advNft: GetUnsold_marketItems) => { setSelectedAdv(advNft); - setShowModal(true); }; @@ -160,8 +117,7 @@ const AdMarketPlace: React.FC = () => { ); }; -<<<<<<< HEAD -======= + interface AdlistProp { onHandleModal: () => void; onRentClick: (advNft: GetUnsold_marketItems) => void; @@ -177,86 +133,10 @@ const Adlist: React.FC = ({ onRentClick }) => { }, }); - // add useState hooks here - const [price, setPrice] = useState("100MATIC"); - const [views, setViews] = useState("100kViews"); - - const onChangePrice = (e: RadioChangeEvent) => { - console.log("radio checked", e.target.value); - setPrice(e.target.value); - }; - - // menu items for price dropdown filter - const priceFilterMenu = ( - - - 100 MATIC and under - 200 MATIC and under - 500 MATIC and under - - - ), - key: "1", - }, - ]} - /> - ); - - const onChangeViews = (e: RadioChangeEvent) => { - console.log("radio checked", e.target.value); - setViews(e.target.value); - }; - - // menu items for number of view dropdown filter - const viewsFilterMenu = ( - - - 1000 views and under - 10K views and under - 50K views and under - 100K views and under - 1 million+ views - - - ), - key: "1", - }, - ]} - /> - ); + return ( <> - {/* start dropdowns */} - - {/* end dropdowns */} - = ({ item }) => { + const [metaData, setMetaData] = useState(); + const fetchMetaData = useCallback(async () => { const advMetaData = await fetchIpfs( item.token.metaDataHash @@ -307,6 +189,7 @@ const TitleNode: React.FC = ({ item }) => { useEffect(() => { fetchMetaData(); }, [fetchMetaData, item]); + return (
@@ -324,6 +207,5 @@ const TitleNode: React.FC<TitleProps> = ({ item }) => { </div> ); }; ->>>>>>> main export default AdMarketPlace; diff --git a/src/components/AdModal/AdModalForm/AdModalForm.types.ts b/src/components/AdModal/AdModalForm/AdModalForm.types.ts index bf5fc4dd..2bc5498b 100644 --- a/src/components/AdModal/AdModalForm/AdModalForm.types.ts +++ b/src/components/AdModal/AdModalForm/AdModalForm.types.ts @@ -1,9 +1,10 @@ -export type AdModalFormValues = { +type AdModalFormValues = { bannerImage: File[]; }; + interface AdModalFormProps { onHandleAdForm: (values: AdModalFormValues) => void; isCreatingAd: boolean; } -export type { AdModalFormProps } \ No newline at end of file +export type { AdModalFormProps, AdModalFormValues} \ No newline at end of file diff --git a/src/components/ProfilePage/MusicTab/MusicTab.tsx b/src/components/ProfilePage/MusicTab/MusicTab.tsx index 80a98761..fa76b944 100644 --- a/src/components/ProfilePage/MusicTab/MusicTab.tsx +++ b/src/components/ProfilePage/MusicTab/MusicTab.tsx @@ -2,19 +2,23 @@ import {List,Typography,Button} from 'antd' const {Title} = Typography; +// wagmi imports +import { useSigner } from 'wagmi'; + +// contract imports +import { AdvNFT__factory, MarketPlace__factory } from '../../../contracts'; +import { AdvNFTAddr, MarketPlaceAddr } from '../../../env'; // custom-components imports import ListItem from '../../Shared/ListItem/ListItem'; import useFetchExpiredAds from '../hooks/useFetchExpiredAds'; - // custom-hooks imports import useFetchUserMusic from '../hooks/useFetchUserMusic'; const MusicTab: React.FC = () =>{ - - return( + return ( <> <ListedCategory /> <ExpiredCategory /> @@ -28,9 +32,21 @@ export default MusicTab const ListedCategory: React.FC = ()=>{ - const {music,isLoading,error} = useFetchUserMusic() + const {music,isLoading,error} = useFetchUserMusic() console.log(music) + const {data:signer} = useSigner() + + const removeAdSpace=()=>{ + // call add removing service here. + + // connect to music nft smart-contract + // const adNft = AdvNFT__factory.connect(AdvNFTAddr, signer); + // adNft.createAdSpace() + // const market = MarketPlace__factory.connect(MarketPlaceAddr, signer) + // market.removeFromSale() + } + // TODO: Create error-boundary to catch error when thrown if(error){ throw new Error('Problem caught while fetching music Category') @@ -39,12 +55,12 @@ const ListedCategory: React.FC = ()=>{ return( <div className='mt-7'> <Title level={3}>Listed - List} item={item}/> }/> + renderItem={(item) =>De-List} item={item}/> }/> */}
) @@ -64,15 +80,17 @@ const ExpiredCategory: React.FC = ()=>{ return(
Expired - {/* List} item={item}/> */} - {/* }/> */} + renderItem={(item) =>De-List} item={item}/> + }/>
) } + + diff --git a/src/components/ProfilePage/hooks/useFetchUserMusic.tsx b/src/components/ProfilePage/hooks/useFetchUserMusic.tsx index 8e73fc33..6b8ea4f5 100644 --- a/src/components/ProfilePage/hooks/useFetchUserMusic.tsx +++ b/src/components/ProfilePage/hooks/useFetchUserMusic.tsx @@ -1,7 +1,8 @@ import { useAccount } from "wagmi"; import {useQuery} from '@apollo/client' -import { GetUserListedMusic } from "../../../graph-ql/queries/GET_ALL_MUSIC/__generated__/GetUserListedMusic"; -import { GET_USER_LISTED_MUSIC } from "../../../graph-ql/queries/GET_ALL_MUSIC/getAllMusic"; + +import { GET_UNSOLD, GET_USER_UNSOLD } from "../../../graph-ql/queries/GET_UNSOLD/getUnsold"; +import { GetUserUnsold } from "../../../graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnsold"; const useFetchUserMusic = () =>{ @@ -9,15 +10,19 @@ import { GET_USER_LISTED_MUSIC } from "../../../graph-ql/queries/GET_ALL_MUSIC/g const { loading: isLoading, - data: allMusic, + data: allAsk, error: error, - } = useQuery(GET_USER_LISTED_MUSIC,{ + } = useQuery(GET_USER_UNSOLD,{ variables: { - userAddress: address?.toLowerCase() + sellerAddress: address?.toLowerCase() }, }); + + + - const music = allMusic?.musicNFTs + const music = allAsk?.marketItems + console.log(error) return {music,isLoading,error} } diff --git a/src/components/Shared/ExpiredMusicItem/ExpiredMusicItem.tsx b/src/components/Shared/ExpiredMusicItem/ExpiredMusicItem.tsx new file mode 100644 index 00000000..3c9d8472 --- /dev/null +++ b/src/components/Shared/ExpiredMusicItem/ExpiredMusicItem.tsx @@ -0,0 +1,35 @@ + +// antd imports +import {List,Typography} from 'antd'; +const {Text,Title} = Typography; + +// hooks imports +import { useMusicMetadata } from '../../../hooks/useMetadata/useMetadata'; + +// types imports +import { GetUserExpiredAdspaces_advNFTs, } from '../../../graph-ql/queries/GET_ALL_ADS/__generated__/GetUserExpiredAdspaces'; +import { ReactNode } from 'react'; + +interface ListItemProps{ + item: GetUserExpiredAdspaces_advNFTs + extra: ReactNode +} + +const ExpiredMusicItem: React.FC = ({item,extra=null})=>{ + + // const music = useMusicMetadata(item); + console.log(item) + + return ( + + {music?.body.title}} + // description={ {`${Number(item?.advNfts[0].expirationDuration)/86400} Days Left`} } + /> + + ) +} + +export default ExpiredMusicItem \ No newline at end of file diff --git a/src/components/Shared/ListItem/ListItem.tsx b/src/components/Shared/ListItem/ListItem.tsx index 8fe40597..2a8eeaf8 100644 --- a/src/components/Shared/ListItem/ListItem.tsx +++ b/src/components/Shared/ListItem/ListItem.tsx @@ -17,6 +17,7 @@ interface ListItemProps{ const ListItem: React.FC = ({item,extra=null})=>{ + console.log('music data',item); const music = useMusicMetadata(item); return ( diff --git a/src/components/SongList/SongList.tsx b/src/components/SongList/SongList.tsx index f5ee9703..659422ac 100644 --- a/src/components/SongList/SongList.tsx +++ b/src/components/SongList/SongList.tsx @@ -22,10 +22,6 @@ const SongList: React.FC = ({ playSong }) => { return ( <> -<<<<<<< HEAD -======= - {/* songlist */} ->>>>>>> main >>>>>> main } ], "inputFields": null, diff --git a/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnsold.ts b/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnsold.ts new file mode 100644 index 00000000..e9f328eb --- /dev/null +++ b/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnsold.ts @@ -0,0 +1,58 @@ +/* tslint:disable */ +/* eslint-disable */ +// @generated +// This file was automatically generated and should not be edited. + +// ==================================================== +// GraphQL query operation: GetUserUnsold +// ==================================================== + +export interface GetUserUnsold_marketItems_token_musicNFT_creator { + __typename: "User"; + id: string; +} + +export interface GetUserUnsold_marketItems_token_musicNFT_owner { + __typename: "User"; + id: string; +} + +export interface GetUserUnsold_marketItems_token_musicNFT { + __typename: "MusicNFT"; + id: string; + creator: GetUserUnsold_marketItems_token_musicNFT_creator; + owner: GetUserUnsold_marketItems_token_musicNFT_owner; + metaDataUri: string; + assetUri: string; +} + +export interface GetUserUnsold_marketItems_token_owner { + __typename: "User"; + id: string; +} + +export interface GetUserUnsold_marketItems_token { + __typename: "AdvNFT"; + id: string; + musicNFT: GetUserUnsold_marketItems_token_musicNFT; + metaDataHash: string; + assetHash: string; + owner: GetUserUnsold_marketItems_token_owner; + expirationDuration: any; +} + +export interface GetUserUnsold_marketItems { + __typename: "MarketItem"; + itemId: any; + owner: any; + price: any; + token: GetUserUnsold_marketItems_token; +} + +export interface GetUserUnsold { + marketItems: GetUserUnsold_marketItems[]; +} + +export interface GetUserUnsoldVariables { + sellerAddress?: any | null; +} diff --git a/src/graph-ql/queries/GET_UNSOLD/getUnsold.ts b/src/graph-ql/queries/GET_UNSOLD/getUnsold.ts index c1f942e8..ed1f1fe5 100644 --- a/src/graph-ql/queries/GET_UNSOLD/getUnsold.ts +++ b/src/graph-ql/queries/GET_UNSOLD/getUnsold.ts @@ -27,4 +27,34 @@ export const GET_UNSOLD = gql` expirationDuration } } +}` + + +export const GET_USER_UNSOLD = gql` + query GetUserUnsold($sellerAddress:String) { + marketItems(where:{seller:$sellerAddress}){ + itemId + owner + price + token{ + id + musicNFT{ + id + creator { + id + } + owner { + id + } + metaDataUri + assetUri + } + metaDataHash + assetHash + owner{ + id + } + expirationDuration + } + } }` \ No newline at end of file diff --git a/src/hooks/useMetadata/useMetadata.tsx b/src/hooks/useMetadata/useMetadata.tsx index 5f316ab0..233864a8 100644 --- a/src/hooks/useMetadata/useMetadata.tsx +++ b/src/hooks/useMetadata/useMetadata.tsx @@ -3,6 +3,10 @@ import { fetchIpfs } from '../../services/ipfs/fetchIpfs'; import { GetUserListedMusic_musicNFTs } from "../../graph-ql/queries/GET_ALL_MUSIC/__generated__/GetUserListedMusic"; import { MusicNftMetaData } from "../../types/MusicNFTData"; + +// accept metadata directly + + export const useMusicMetadata = (item:GetUserListedMusic_musicNFTs) =>{ const [music, setMusic] = useState(); From b1161c70a35a835bc1a7aa5136d0b6cbaefa992c Mon Sep 17 00:00:00 2001 From: mujeex Date: Sun, 18 Sep 2022 18:53:44 +0100 Subject: [PATCH 10/18] feat: create hook for fetching market metadata --- .../ProfilePage/MusicTab/MusicListItem.tsx | 38 +++++++++++++++++++ .../ProfilePage/MusicTab/MusicTab.tsx | 20 ++++++---- .../ProfilePage/hooks/useFetchUserMusic.tsx | 4 -- src/components/SongList/SongListItem.tsx | 2 + .../queries/GET_ALL_MUSIC/getAllMusic.ts | 3 -- src/graph-ql/queries/GET_UNSOLD/getUnsold.ts | 3 ++ src/hooks/useMetadata/useMarketMetadata.tsx | 29 ++++++++++++++ 7 files changed, 85 insertions(+), 14 deletions(-) create mode 100644 src/components/ProfilePage/MusicTab/MusicListItem.tsx create mode 100644 src/hooks/useMetadata/useMarketMetadata.tsx diff --git a/src/components/ProfilePage/MusicTab/MusicListItem.tsx b/src/components/ProfilePage/MusicTab/MusicListItem.tsx new file mode 100644 index 00000000..590d9122 --- /dev/null +++ b/src/components/ProfilePage/MusicTab/MusicListItem.tsx @@ -0,0 +1,38 @@ + +// antd imports +import {List,Typography} from 'antd'; +const {Text,Title} = Typography; + +// hooks imports +import { useMusicMetadata } from '../../../hooks/useMetadata/useMetadata'; + +// types imports +import { GetUserUnsold_marketItems } from '../../../graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnsold'; +import { ReactNode } from 'react'; +import { useMarketMetadata } from '../../../hooks/useMetadata/useMarketMetadata'; + + +interface ListItemProps{ + item: GetUserUnsold_marketItems + extra: ReactNode +} + +const MusicListItem: React.FC = ({item,extra=null})=>{ + + console.log('from musiclistitem',item) + const music = useMarketMetadata(item); + + return ( + + {music?.body.title}} + description={ {`${Number(item?.advNfts[0].expirationDuration)/86400} Days Left`} } + /> + {/* */} + + ) +} + +export default MusicListItem \ No newline at end of file diff --git a/src/components/ProfilePage/MusicTab/MusicTab.tsx b/src/components/ProfilePage/MusicTab/MusicTab.tsx index fa76b944..1d3e8343 100644 --- a/src/components/ProfilePage/MusicTab/MusicTab.tsx +++ b/src/components/ProfilePage/MusicTab/MusicTab.tsx @@ -11,9 +11,10 @@ import { AdvNFTAddr, MarketPlaceAddr } from '../../../env'; // custom-components imports import ListItem from '../../Shared/ListItem/ListItem'; -import useFetchExpiredAds from '../hooks/useFetchExpiredAds'; +import MusicListItem from './MusicListItem'; // custom-hooks imports +import useFetchExpiredAds from '../hooks/useFetchExpiredAds'; import useFetchUserMusic from '../hooks/useFetchUserMusic'; @@ -34,17 +35,20 @@ const ListedCategory: React.FC = ()=>{ const {music,isLoading,error} = useFetchUserMusic() console.log(music) + console.log(error) const {data:signer} = useSigner() - const removeAdSpace=()=>{ + const removeAdSpace=(item)=>{ + + // call add removing service here. // connect to music nft smart-contract // const adNft = AdvNFT__factory.connect(AdvNFTAddr, signer); // adNft.createAdSpace() - // const market = MarketPlace__factory.connect(MarketPlaceAddr, signer) - // market.removeFromSale() + const market = MarketPlace__factory.connect(MarketPlaceAddr, signer) + market.removeFromSale(item.itemId) } // TODO: Create error-boundary to catch error when thrown @@ -55,13 +59,13 @@ const ListedCategory: React.FC = ()=>{ return(
Listed - {/* De-List} item={item}/> }/> */} - + renderItem={(item) =>removeAdSpace(item)}>De-List} item={item}/> }/>
) } @@ -94,3 +98,5 @@ const ExpiredCategory: React.FC = ()=>{ + + diff --git a/src/components/ProfilePage/hooks/useFetchUserMusic.tsx b/src/components/ProfilePage/hooks/useFetchUserMusic.tsx index 6b8ea4f5..44d87544 100644 --- a/src/components/ProfilePage/hooks/useFetchUserMusic.tsx +++ b/src/components/ProfilePage/hooks/useFetchUserMusic.tsx @@ -17,12 +17,8 @@ import { GetUserUnsold } from "../../../graph-ql/queries/GET_UNSOLD/__generated_ sellerAddress: address?.toLowerCase() }, }); - - - const music = allAsk?.marketItems - console.log(error) return {music,isLoading,error} } diff --git a/src/components/SongList/SongListItem.tsx b/src/components/SongList/SongListItem.tsx index d6a586b2..1b481d01 100644 --- a/src/components/SongList/SongListItem.tsx +++ b/src/components/SongList/SongListItem.tsx @@ -4,6 +4,7 @@ import { fetchIpfs, ipfsToHttps } from "../../services/ipfs/fetchIpfs"; import { MusicNftMetaData } from "../../types/MusicNFTData"; import styled from "styled-components"; import Image from "next/image"; + type Props = { musicNft: GetAllMusic_musicNFTs; onPlaySong: () => void; @@ -30,6 +31,7 @@ const SongListItemStyled = styled.div` color: #042440; } `; + const SongListItem = ({ musicNft, onPlaySong }: Props) => { const [metaData, setMetaData] = useState(); useEffect(() => { diff --git a/src/graph-ql/queries/GET_ALL_MUSIC/getAllMusic.ts b/src/graph-ql/queries/GET_ALL_MUSIC/getAllMusic.ts index 19980712..0137eb70 100644 --- a/src/graph-ql/queries/GET_ALL_MUSIC/getAllMusic.ts +++ b/src/graph-ql/queries/GET_ALL_MUSIC/getAllMusic.ts @@ -5,7 +5,6 @@ export const GET_ALL_MUSIC = gql` musicNFTs{ advNfts(where:{expirationTime_gt:$currentTime}){ assetHash -<<<<<<< HEAD expirationDuration } id @@ -27,9 +26,7 @@ export const GET_USER_LISTED_MUSIC = gql` musicNFTs(where:{owner:$userAddress}){ advNfts{ expirationDuration -======= metaDataHash ->>>>>>> main } id creator { diff --git a/src/graph-ql/queries/GET_UNSOLD/getUnsold.ts b/src/graph-ql/queries/GET_UNSOLD/getUnsold.ts index ed1f1fe5..ccbaa852 100644 --- a/src/graph-ql/queries/GET_UNSOLD/getUnsold.ts +++ b/src/graph-ql/queries/GET_UNSOLD/getUnsold.ts @@ -48,6 +48,9 @@ export const GET_USER_UNSOLD = gql` } metaDataUri assetUri + advNfts{ + expirationDuration + } } metaDataHash assetHash diff --git a/src/hooks/useMetadata/useMarketMetadata.tsx b/src/hooks/useMetadata/useMarketMetadata.tsx new file mode 100644 index 00000000..8f2a3e1d --- /dev/null +++ b/src/hooks/useMetadata/useMarketMetadata.tsx @@ -0,0 +1,29 @@ +import {useEffect, useState} from 'react' +import { fetchIpfs } from '../../services/ipfs/fetchIpfs'; +import { GetUserUnsold_marketItems, GetUserUnsold_marketItems_token_musicNFT} from "../../graph-ql/queries/GET_UNSOLD//__generated__/GetUserUnsold"; + + + +// accept metadata directly + + +export const useMarketMetadata = (item:GetUserUnsold_marketItems) =>{ + +const [music, setMusic] = useState(); + + const fetchMetaData = async () => { + const musicMetaData = await fetchIpfs( + item.token.musicNFT.metaDataUri + ); + setMusic(musicMetaData); + }; + + useEffect(() => { + fetchMetaData(); + }, []); + + return music; +} + + + \ No newline at end of file From fbb0fbcf659c2b744e5105c709b2c1f10b2cab1f Mon Sep 17 00:00:00 2001 From: mujeex Date: Sun, 18 Sep 2022 21:42:58 +0100 Subject: [PATCH 11/18] feat: remove and renew adspace --- .../ProfilePage/MusicTab/MusicListItem.tsx | 2 +- .../ProfilePage/MusicTab/MusicTab.tsx | 66 ++++++++++++++----- .../__generated__/GetAllMusic.ts | 4 -- .../__generated__/GetUserListedMusic.ts | 1 + .../GET_UNSOLD/__generated__/GetUserUnsold.ts | 10 ++- src/graph-ql/queries/GET_UNSOLD/getUnsold.ts | 1 + 6 files changed, 62 insertions(+), 22 deletions(-) diff --git a/src/components/ProfilePage/MusicTab/MusicListItem.tsx b/src/components/ProfilePage/MusicTab/MusicListItem.tsx index 590d9122..83c145f3 100644 --- a/src/components/ProfilePage/MusicTab/MusicListItem.tsx +++ b/src/components/ProfilePage/MusicTab/MusicListItem.tsx @@ -28,7 +28,7 @@ const MusicListItem: React.FC = ({item,extra=null})=>{ > {music?.body.title}} - description={ {`${Number(item?.advNfts[0].expirationDuration)/86400} Days Left`} } + description={ {`${Number(item?.token.expirationDuration)/86400} Days Left`} } /> {/* */} diff --git a/src/components/ProfilePage/MusicTab/MusicTab.tsx b/src/components/ProfilePage/MusicTab/MusicTab.tsx index 1d3e8343..38049e70 100644 --- a/src/components/ProfilePage/MusicTab/MusicTab.tsx +++ b/src/components/ProfilePage/MusicTab/MusicTab.tsx @@ -1,3 +1,5 @@ +import {useState} from 'react'; + // antd imports import {List,Typography,Button} from 'antd' const {Title} = Typography; @@ -19,10 +21,20 @@ import useFetchUserMusic from '../hooks/useFetchUserMusic'; const MusicTab: React.FC = () =>{ + + const [expired,setExpired] = useState([]) + + const moveToExpired=(item)=>{ + console.log(item) + const copyState = expired.slice() + copyState.push(item); + setExpired(copyState) + } + return ( <> - - + + ) } @@ -30,27 +42,45 @@ const MusicTab: React.FC = () =>{ export default MusicTab +interface ListedProps{ + onExpire: (item:object)=>void +} -const ListedCategory: React.FC = ()=>{ +const ListedCategory: React.FC = ({onExpire})=>{ const {music,isLoading,error} = useFetchUserMusic() - console.log(music) - console.log(error) + const [isRemovingSale, setIsRemovingSale] = useState(false) const {data:signer} = useSigner() - const removeAdSpace=(item)=>{ - + const removeAdSpace= async(item)=>{ // call add removing service here. - - // connect to music nft smart-contract - // const adNft = AdvNFT__factory.connect(AdvNFTAddr, signer); - // adNft.createAdSpace() const market = MarketPlace__factory.connect(MarketPlaceAddr, signer) - market.removeFromSale(item.itemId) + try{ + setIsRemovingSale(true) + const res = await market.removeFromSale(item.itemId); + onExpire(item) + setIsRemovingSale(false) + console.log(res) + }catch(err){ + console.log(err) + setIsRemovingSale(false) + } + } + const renewAdSpace = async(item)=>{ + // call add removing service here. + console.log(item) + const market = MarketPlace__factory.connect(MarketPlaceAddr, signer) + try{ + const res = await market.createMarketSale(MarketPlaceAddr,item.itemId); + console.log(res) + }catch(err){ + console.log(err) + } + } // TODO: Create error-boundary to catch error when thrown if(error){ throw new Error('Problem caught while fetching music Category') @@ -65,12 +95,16 @@ const ListedCategory: React.FC = ()=>{ className={"self-center p-4 max-w-3xl rounded-xl border-slate-800"} itemLayout="horizontal" dataSource={music} - renderItem={(item) =>removeAdSpace(item)}>De-List} item={item}/> }/> + renderItem={(item) =>renewAdSpace(item)}>{`${item?.forSale?'De-list':'List'}`}} item={item}/> }/>
) } -const ExpiredCategory: React.FC = ()=>{ +interface ExpiredProps{ + dataSource: Array +} + +const ExpiredCategory: React.FC = ({dataSource})=>{ const {ads,isLoading,error} = useFetchExpiredAds() console.log(ads) @@ -88,8 +122,8 @@ const ExpiredCategory: React.FC = ()=>{ loading={isLoading} className={"self-center p-4 max-w-3xl rounded-xl border-slate-800"} itemLayout="horizontal" - dataSource={ads} - renderItem={(item) =>De-List} item={item}/> + dataSource={dataSource} + renderItem={(item) =>De-List} item={item}/> }/> diff --git a/src/graph-ql/queries/GET_ALL_MUSIC/__generated__/GetAllMusic.ts b/src/graph-ql/queries/GET_ALL_MUSIC/__generated__/GetAllMusic.ts index 4344653f..85fa16d8 100644 --- a/src/graph-ql/queries/GET_ALL_MUSIC/__generated__/GetAllMusic.ts +++ b/src/graph-ql/queries/GET_ALL_MUSIC/__generated__/GetAllMusic.ts @@ -10,11 +10,7 @@ export interface GetAllMusic_musicNFTs_advNfts { __typename: "AdvNFT"; assetHash: string; -<<<<<<< HEAD expirationDuration: any; -======= - metaDataHash: string; ->>>>>>> main } export interface GetAllMusic_musicNFTs_creator { diff --git a/src/graph-ql/queries/GET_ALL_MUSIC/__generated__/GetUserListedMusic.ts b/src/graph-ql/queries/GET_ALL_MUSIC/__generated__/GetUserListedMusic.ts index cae57478..c759e47c 100644 --- a/src/graph-ql/queries/GET_ALL_MUSIC/__generated__/GetUserListedMusic.ts +++ b/src/graph-ql/queries/GET_ALL_MUSIC/__generated__/GetUserListedMusic.ts @@ -10,6 +10,7 @@ export interface GetUserListedMusic_musicNFTs_advNfts { __typename: "AdvNFT"; expirationDuration: any; + metaDataHash: string; } export interface GetUserListedMusic_musicNFTs_creator { diff --git a/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnsold.ts b/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnsold.ts index e9f328eb..f73f30a7 100644 --- a/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnsold.ts +++ b/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnsold.ts @@ -17,6 +17,11 @@ export interface GetUserUnsold_marketItems_token_musicNFT_owner { id: string; } +export interface GetUserUnsold_marketItems_token_musicNFT_advNfts { + __typename: "AdvNFT"; + expirationDuration: any; +} + export interface GetUserUnsold_marketItems_token_musicNFT { __typename: "MusicNFT"; id: string; @@ -24,6 +29,7 @@ export interface GetUserUnsold_marketItems_token_musicNFT { owner: GetUserUnsold_marketItems_token_musicNFT_owner; metaDataUri: string; assetUri: string; + advNfts: GetUserUnsold_marketItems_token_musicNFT_advNfts[]; } export interface GetUserUnsold_marketItems_token_owner { @@ -36,6 +42,7 @@ export interface GetUserUnsold_marketItems_token { id: string; musicNFT: GetUserUnsold_marketItems_token_musicNFT; metaDataHash: string; + forSale: any; assetHash: string; owner: GetUserUnsold_marketItems_token_owner; expirationDuration: any; @@ -46,6 +53,7 @@ export interface GetUserUnsold_marketItems { itemId: any; owner: any; price: any; + forSale: boolean; token: GetUserUnsold_marketItems_token; } @@ -54,5 +62,5 @@ export interface GetUserUnsold { } export interface GetUserUnsoldVariables { - sellerAddress?: any | null; + sellerAddress?: string | null; } diff --git a/src/graph-ql/queries/GET_UNSOLD/getUnsold.ts b/src/graph-ql/queries/GET_UNSOLD/getUnsold.ts index ccbaa852..8d295fd1 100644 --- a/src/graph-ql/queries/GET_UNSOLD/getUnsold.ts +++ b/src/graph-ql/queries/GET_UNSOLD/getUnsold.ts @@ -36,6 +36,7 @@ export const GET_USER_UNSOLD = gql` itemId owner price + forSale token{ id musicNFT{ From b4a15f11c901b1c13a2482b7e730d01312413b35 Mon Sep 17 00:00:00 2001 From: mujeex Date: Mon, 19 Sep 2022 13:09:27 +0100 Subject: [PATCH 12/18] feat: fetch ads for advertiser --- pages/profile.tsx | 3 +- .../AdvertisementTab/AdvertismentTab.tsx | 66 +++++++++++++++++++ .../ProfilePage/hooks/useFetchUserMusic.tsx | 4 +- .../__generated__/GetAdvertiserAds.ts | 29 ++++++++ src/graph-ql/queries/GET_ALL_ADS/getAllAds.ts | 15 ++++- .../GET_UNSOLD/__generated__/GetUserUnsold.ts | 1 - 6 files changed, 113 insertions(+), 5 deletions(-) create mode 100644 src/components/ProfilePage/AdvertisementTab/AdvertismentTab.tsx create mode 100644 src/graph-ql/queries/GET_ALL_ADS/__generated__/GetAdvertiserAds.ts diff --git a/pages/profile.tsx b/pages/profile.tsx index 11d8d43b..3608bb34 100644 --- a/pages/profile.tsx +++ b/pages/profile.tsx @@ -5,6 +5,7 @@ import {Tabs} from 'antd' // component imports import MusicTab from "../src/components/ProfilePage/MusicTab/MusicTab"; +import AdvertisementTab from "../src/components/ProfilePage/AdvertisementTab/AdvertismentTab"; @@ -20,7 +21,7 @@ const Profile: NextPage = () => { - + Subscription diff --git a/src/components/ProfilePage/AdvertisementTab/AdvertismentTab.tsx b/src/components/ProfilePage/AdvertisementTab/AdvertismentTab.tsx new file mode 100644 index 00000000..69939db5 --- /dev/null +++ b/src/components/ProfilePage/AdvertisementTab/AdvertismentTab.tsx @@ -0,0 +1,66 @@ +import {useState} from 'react'; + +// antd imports +import {List,Typography,Button} from 'antd' +const {Title} = Typography; + +import {useQuery} from '@apollo/client' + +// wagmi imports +import { useAccount, useSigner } from 'wagmi'; + +// contract imports +import { AdvNFT__factory, MarketPlace__factory } from '../../../contracts'; +import { AdvNFTAddr, MarketPlaceAddr } from '../../../env'; + +// custom-components imports +import ListItem from '../../Shared/ListItem/ListItem'; +// import MusicListItem from './MusicListItem'; + + +import { GET_ADVERTISER_ADS } from '../../../graph-ql/queries/GET_ALL_ADS/getAllAds'; +import { GetAdvertiserAds } from '../../../graph-ql/queries/GET_ALL_ADS/__generated__/GetAdvertiserAds'; + + +const AdvertisementTab: React.FC = () =>{ + +// query for data +// pass data to components +// fetchMetadata uri's for ad music +// replace image with new + + +const {address} = useAccount() + +const { + loading: isLoading, + data: allAds, + error: error, + } = useQuery(GET_ADVERTISER_ADS,{ + variables: { + advertiserAddress: address?.toLowerCase(), + }, + }); + + console.log(allAds) + + + + return ( + <> + + + + ) +} + +export default AdvertisementTab + + + + + + + + + diff --git a/src/components/ProfilePage/hooks/useFetchUserMusic.tsx b/src/components/ProfilePage/hooks/useFetchUserMusic.tsx index 44d87544..d582c448 100644 --- a/src/components/ProfilePage/hooks/useFetchUserMusic.tsx +++ b/src/components/ProfilePage/hooks/useFetchUserMusic.tsx @@ -1,7 +1,7 @@ import { useAccount } from "wagmi"; import {useQuery} from '@apollo/client' -import { GET_UNSOLD, GET_USER_UNSOLD } from "../../../graph-ql/queries/GET_UNSOLD/getUnsold"; +import { GET_USER_UNSOLD } from "../../../graph-ql/queries/GET_UNSOLD/getUnsold"; import { GetUserUnsold } from "../../../graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnsold"; const useFetchUserMusic = () =>{ @@ -14,7 +14,7 @@ import { GetUserUnsold } from "../../../graph-ql/queries/GET_UNSOLD/__generated_ error: error, } = useQuery(GET_USER_UNSOLD,{ variables: { - sellerAddress: address?.toLowerCase() + sellerAddress:address?.toLowerCase() }, }); diff --git a/src/graph-ql/queries/GET_ALL_ADS/__generated__/GetAdvertiserAds.ts b/src/graph-ql/queries/GET_ALL_ADS/__generated__/GetAdvertiserAds.ts new file mode 100644 index 00000000..e7087ba8 --- /dev/null +++ b/src/graph-ql/queries/GET_ALL_ADS/__generated__/GetAdvertiserAds.ts @@ -0,0 +1,29 @@ +/* tslint:disable */ +/* eslint-disable */ +// @generated +// This file was automatically generated and should not be edited. + +// ==================================================== +// GraphQL query operation: GetAdvertiserAds +// ==================================================== + +export interface GetAdvertiserAds_advNFTs_musicNFT { + __typename: "MusicNFT"; + metaDataUri: string; + assetUri: string; +} + +export interface GetAdvertiserAds_advNFTs { + __typename: "AdvNFT"; + musicNFT: GetAdvertiserAds_advNFTs_musicNFT; + assetHash: string; + expirationDuration: any; +} + +export interface GetAdvertiserAds { + advNFTs: GetAdvertiserAds_advNFTs[]; +} + +export interface GetAdvertiserAdsVariables { + advertiserAddress?: string | null; +} diff --git a/src/graph-ql/queries/GET_ALL_ADS/getAllAds.ts b/src/graph-ql/queries/GET_ALL_ADS/getAllAds.ts index bf37b1e4..7f8ef645 100644 --- a/src/graph-ql/queries/GET_ALL_ADS/getAllAds.ts +++ b/src/graph-ql/queries/GET_ALL_ADS/getAllAds.ts @@ -12,4 +12,17 @@ query GetUserExpiredAdspaces($userAddress:String,$expirationTime:BigInt){ id } } -}` \ No newline at end of file +}` + +export const GET_ADVERTISER_ADS = gql` +query GetAdvertiserAds($advertiserAddress:String){ + advNFTs(where:{owner:$advertiserAddress,assetHash_not:""}){ + musicNFT{ + metaDataUri + assetUri + } + assetHash + expirationDuration + } +}` + diff --git a/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnsold.ts b/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnsold.ts index f73f30a7..6e7a35f8 100644 --- a/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnsold.ts +++ b/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnsold.ts @@ -42,7 +42,6 @@ export interface GetUserUnsold_marketItems_token { id: string; musicNFT: GetUserUnsold_marketItems_token_musicNFT; metaDataHash: string; - forSale: any; assetHash: string; owner: GetUserUnsold_marketItems_token_owner; expirationDuration: any; From 5434dd2bc809d41ed6b0b22937fc3c25b5d050d3 Mon Sep 17 00:00:00 2001 From: mujeex Date: Mon, 19 Sep 2022 14:17:02 +0100 Subject: [PATCH 13/18] feat: add functions for managing ad --- .../AdvertisementTab/AdvertismentTab.tsx | 80 ++++++++++++++++++- 1 file changed, 78 insertions(+), 2 deletions(-) diff --git a/src/components/ProfilePage/AdvertisementTab/AdvertismentTab.tsx b/src/components/ProfilePage/AdvertisementTab/AdvertismentTab.tsx index 69939db5..bb07b668 100644 --- a/src/components/ProfilePage/AdvertisementTab/AdvertismentTab.tsx +++ b/src/components/ProfilePage/AdvertisementTab/AdvertismentTab.tsx @@ -20,8 +20,16 @@ import ListItem from '../../Shared/ListItem/ListItem'; import { GET_ADVERTISER_ADS } from '../../../graph-ql/queries/GET_ALL_ADS/getAllAds'; import { GetAdvertiserAds } from '../../../graph-ql/queries/GET_ALL_ADS/__generated__/GetAdvertiserAds'; +import { asyncStore } from '../../../services/ipfs/nftstorage'; +import { NFTStorage } from 'nft.storage'; +import { AdvNftMetaData } from '../../../types/AdvNFTData'; +// create client instance for nft.storage +const client = new NFTStorage({ + token: process.env.NEXT_PUBLIC_NFT_STORAGE_TOKEN ?? "", +}); + const AdvertisementTab: React.FC = () =>{ // query for data @@ -31,6 +39,10 @@ const AdvertisementTab: React.FC = () =>{ const {address} = useAccount() +const {data:signer} = useSigner() +const [isBurningAd,setIsBurningAd] = useState(false) +const [isReplacingAd,setIsReplacingAd] = useState(false) +const [selectedAd, setSelectedAd] = useState({}) const { loading: isLoading, @@ -42,14 +54,78 @@ const { }, }); - console.log(allAds) + const burnAdHandler = async() =>{ + const adNftContract = AdvNFT__factory.connect(AdvNFTAddr,signer); + try{ + setIsBurningAd(true) + const res = await adNftContract.burn(selectedAd.tokenId) + setIsBurningAd(false) + }catch(err:any){ + console.log(err) + setIsBurningAd(false) + throw new Error('Error while buring Ads',err) + } + } + + + const replaceAdHandler = async(formData:any)=>{ + + formData.bannerImage[0].originFileObj + + const { hash: adImageHash, storePromise: storeAdImagePromise } = + await asyncStore(client, formData.bannerImage[0].originFileObj); + + const advNftDataObj: AdvNftMetaData = { + description: `Adv nft for NFT`, + mimeType: "image/jpeg", + name: `${selectedAd?.token.id} ADV NFT`, + version: "", + external_url: formData.adUrl, + }; + + const { hash: metaDataHash, storePromise: storeMetaDataPromise } = + await asyncStore(client, new Blob([JSON.stringify(advNftDataObj)])); + + const adNftContract = AdvNFT__factory.connect(AdvNFTAddr, signer); + const marketPlaceContract = MarketPlace__factory.connect(MarketPlaceAddr, signer); + try{ + setIsReplacingAd(true); + + console.log("handleAdForm: Creating Market Sale"); + + await marketPlaceContract + .createMarketSale(AdvNFTAddr, selectedAd?.token.id, { + value: selectedAd?.price, + }) + .then((e) => e.wait()); + // invoke contract func and mint song nft with ad nft + + console.log("handleAdForm: Updating adv banner"); + const updateHashPromise = adNftContract + .updateHash(selectedAd?.token.id, metaDataHash, adImageHash) + .then((e) => e.wait()); + + await Promise.all([ + updateHashPromise, + storeAdImagePromise, + storeMetaDataPromise, + ]); + + setIsReplacingAd(false) + }catch(err:any){ + console.log(err) + setIsReplacingAd(false) + throw new Error('Error while replacing Ads',err) + } + } + + console.log(allAds) return ( <> - ) } From dcae832bc9c636ba7dd2c1cacc7bc8f83aeb65b1 Mon Sep 17 00:00:00 2001 From: mujeex Date: Tue, 20 Sep 2022 11:52:11 +0100 Subject: [PATCH 14/18] feat: add section for unlisted adspaces --- pages/ad-marketplace/index.tsx | 2 + src/components/Header/header.tsx | 9 +++ .../ProfilePage/MusicTab/MusicTab.tsx | 71 ++++++++++++++++++- .../__generated__/GetUserUnlisted.ts | 65 +++++++++++++++++ src/graph-ql/queries/GET_UNSOLD/getUnsold.ts | 36 +++++++++- 5 files changed, 180 insertions(+), 3 deletions(-) create mode 100644 src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnlisted.ts diff --git a/pages/ad-marketplace/index.tsx b/pages/ad-marketplace/index.tsx index dd207434..70a5eabe 100644 --- a/pages/ad-marketplace/index.tsx +++ b/pages/ad-marketplace/index.tsx @@ -5,6 +5,7 @@ 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"; @@ -143,6 +144,7 @@ const Adlist: React.FC = ({ onRentClick }) => { nftContractAddr: AdvNFTAddr.toLowerCase(), }, }); + const [selectedSong, setSelectedSong] = useState>(); diff --git a/src/components/Header/header.tsx b/src/components/Header/header.tsx index b2567045..8f94efdc 100644 --- a/src/components/Header/header.tsx +++ b/src/components/Header/header.tsx @@ -67,6 +67,15 @@ function Header() { Ad Marketplace + + + diff --git a/src/components/ProfilePage/MusicTab/MusicTab.tsx b/src/components/ProfilePage/MusicTab/MusicTab.tsx index 38049e70..1bc64fe5 100644 --- a/src/components/ProfilePage/MusicTab/MusicTab.tsx +++ b/src/components/ProfilePage/MusicTab/MusicTab.tsx @@ -4,8 +4,11 @@ import {useState} from 'react'; import {List,Typography,Button} from 'antd' const {Title} = Typography; +// apollo imports +import {useQuery} from '@apollo/client'; + // wagmi imports -import { useSigner } from 'wagmi'; +import { useAccount, useSigner } from 'wagmi'; // contract imports import { AdvNFT__factory, MarketPlace__factory } from '../../../contracts'; @@ -18,6 +21,9 @@ import MusicListItem from './MusicListItem'; // custom-hooks imports import useFetchExpiredAds from '../hooks/useFetchExpiredAds'; import useFetchUserMusic from '../hooks/useFetchUserMusic'; +import { GET_USER_UNLISTED_ADS, GET_USER_UNSOLD } from '../../../graph-ql/queries/GET_UNSOLD/getUnsold'; +import { GetUserUnsold } from '../../../graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnsold'; +import { GetUserUnlisted } from '../../../graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnlisted'; const MusicTab: React.FC = () =>{ @@ -34,6 +40,7 @@ const MusicTab: React.FC = () =>{ return ( <> + ) @@ -42,6 +49,9 @@ const MusicTab: React.FC = () =>{ export default MusicTab + + + interface ListedProps{ onExpire: (item:object)=>void } @@ -95,11 +105,68 @@ const ListedCategory: React.FC = ({onExpire})=>{ className={"self-center p-4 max-w-3xl rounded-xl border-slate-800"} itemLayout="horizontal" dataSource={music} - renderItem={(item) =>renewAdSpace(item)}>{`${item?.forSale?'De-list':'List'}`}} item={item}/> }/> + renderItem={(item) =>renewAdSpace(item)}>Unlist} item={item}/> }/> ) } + +// UNLISTED CATEGORY +const UnListedCategory: React.FC = ()=>{ + +const {data:signer} = useSigner() +const [isRemovingSale, setIsRemovingSale] = useState(false) + + +const {address} = useAccount() + +const { + loading: isLoading, + data: allAsk, + error: error, + } = useQuery(GET_USER_UNLISTED_ADS,{ + variables: { + sellerAddress:address?.toLowerCase() + }, + }); + + const music = allAsk?.marketItems + + + + const renewAdSpace = async(item)=>{ + // call add removing service here. + console.log(item) + const market = MarketPlace__factory.connect(MarketPlaceAddr, signer) + try{ + const res = await market.createMarketSale(MarketPlaceAddr,item.itemId); + console.log(res) + }catch(err){ + console.log(err) + } + } +// TODO: Create error-boundary to catch error when thrown +if(error){ + throw new Error('Problem caught while fetching music Category') +} + +return( +
+ Un-Listed + + renewAdSpace(item)}>List} item={item}/> }/> +
+) +} + + + + interface ExpiredProps{ dataSource: Array } diff --git a/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnlisted.ts b/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnlisted.ts new file mode 100644 index 00000000..e7e9c652 --- /dev/null +++ b/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnlisted.ts @@ -0,0 +1,65 @@ +/* tslint:disable */ +/* eslint-disable */ +// @generated +// This file was automatically generated and should not be edited. + +// ==================================================== +// GraphQL query operation: GetUserUnlisted +// ==================================================== + +export interface GetUserUnlisted_marketItems_token_musicNFT_creator { + __typename: "User"; + id: string; +} + +export interface GetUserUnlisted_marketItems_token_musicNFT_owner { + __typename: "User"; + id: string; +} + +export interface GetUserUnlisted_marketItems_token_musicNFT_advNfts { + __typename: "AdvNFT"; + expirationDuration: any; +} + +export interface GetUserUnlisted_marketItems_token_musicNFT { + __typename: "MusicNFT"; + id: string; + creator: GetUserUnlisted_marketItems_token_musicNFT_creator; + owner: GetUserUnlisted_marketItems_token_musicNFT_owner; + metaDataUri: string; + assetUri: string; + advNfts: GetUserUnlisted_marketItems_token_musicNFT_advNfts[]; +} + +export interface GetUserUnlisted_marketItems_token_owner { + __typename: "User"; + id: string; +} + +export interface GetUserUnlisted_marketItems_token { + __typename: "AdvNFT"; + id: string; + musicNFT: GetUserUnlisted_marketItems_token_musicNFT; + metaDataHash: string; + assetHash: string; + owner: GetUserUnlisted_marketItems_token_owner; + expirationDuration: any; +} + +export interface GetUserUnlisted_marketItems { + __typename: "MarketItem"; + itemId: any; + owner: any; + price: any; + forSale: boolean; + token: GetUserUnlisted_marketItems_token; +} + +export interface GetUserUnlisted { + marketItems: GetUserUnlisted_marketItems[]; +} + +export interface GetUserUnlistedVariables { + sellerAddress?: string | null; +} diff --git a/src/graph-ql/queries/GET_UNSOLD/getUnsold.ts b/src/graph-ql/queries/GET_UNSOLD/getUnsold.ts index 8d295fd1..404b465f 100644 --- a/src/graph-ql/queries/GET_UNSOLD/getUnsold.ts +++ b/src/graph-ql/queries/GET_UNSOLD/getUnsold.ts @@ -32,7 +32,41 @@ export const GET_UNSOLD = gql` export const GET_USER_UNSOLD = gql` query GetUserUnsold($sellerAddress:String) { - marketItems(where:{seller:$sellerAddress}){ + marketItems(where:{seller:$sellerAddress,deleted:false}){ + itemId + owner + price + forSale + token{ + id + musicNFT{ + id + creator { + id + } + owner { + id + } + metaDataUri + assetUri + advNfts{ + expirationDuration + } + } + metaDataHash + assetHash + owner{ + id + } + expirationDuration + } + } +}` + + +export const GET_USER_UNLISTED_ADS = gql` + query GetUserUnlisted($sellerAddress:String) { + marketItems(where:{seller:$sellerAddress,deleted:true}){ itemId owner price From 0e2938b1b1279b71755968118c59483e23eec691 Mon Sep 17 00:00:00 2001 From: mujeex Date: Tue, 20 Sep 2022 14:22:26 +0100 Subject: [PATCH 15/18] feat: show loading icon when fetching songlist at homepage --- src/components/SongList/SongList.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/SongList/SongList.tsx b/src/components/SongList/SongList.tsx index a9aa2568..38e86c0b 100644 --- a/src/components/SongList/SongList.tsx +++ b/src/components/SongList/SongList.tsx @@ -6,15 +6,24 @@ import { GetAllMusic } from "../../graph-ql/queries/GET_ALL_MUSIC/__generated__/ // types import { SongListProps } from "./SongList.types"; +// antd imports +import {Spin} from 'antd' + import SongListItem from "./SongListItem"; const SongList: React.FC = ({ playSong }) => { - const { data: allMusicConnection } = useQuery(GET_ALL_MUSIC, { + const { loading: isLoading, data: allMusicConnection } = useQuery(GET_ALL_MUSIC, { variables: { currentTime: Math.floor(Date.now() / 1000).toString(), }, }); + if(isLoading){ + return( + + ) + } + return ( <>
From fae0aa5dc5580758ab1da9f39b52658a4b05af41 Mon Sep 17 00:00:00 2001 From: mujeex Date: Tue, 20 Sep 2022 14:46:23 +0100 Subject: [PATCH 16/18] refactor: add query for delete ads --- .../ProfilePage/MusicTab/MusicListItem.tsx | 15 +++++++++++++-- .../ProfilePage/MusicTab/MusicTab.tsx | 19 ++----------------- .../__generated__/GetUserUnlisted.ts | 1 + .../GET_UNSOLD/__generated__/GetUserUnsold.ts | 1 + src/graph-ql/queries/GET_UNSOLD/getUnsold.ts | 2 ++ 5 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/ProfilePage/MusicTab/MusicListItem.tsx b/src/components/ProfilePage/MusicTab/MusicListItem.tsx index 83c145f3..19017a80 100644 --- a/src/components/ProfilePage/MusicTab/MusicListItem.tsx +++ b/src/components/ProfilePage/MusicTab/MusicListItem.tsx @@ -19,8 +19,19 @@ interface ListItemProps{ const MusicListItem: React.FC = ({item,extra=null})=>{ - console.log('from musiclistitem',item) const music = useMarketMetadata(item); + let isAd = false; + +if(item.token.assetHash!== ""){ + isAd=true; +} + +const descriptionNode = ( + <> + {`${Number(item?.token.expirationDuration)/86400} Days Left`} + {isAd?Adspace is occupied:null} + +) return ( = ({item,extra=null})=>{ > {music?.body.title}} - description={ {`${Number(item?.token.expirationDuration)/86400} Days Left`} } + description={descriptionNode} /> {/* */} diff --git a/src/components/ProfilePage/MusicTab/MusicTab.tsx b/src/components/ProfilePage/MusicTab/MusicTab.tsx index 1bc64fe5..4407f0dc 100644 --- a/src/components/ProfilePage/MusicTab/MusicTab.tsx +++ b/src/components/ProfilePage/MusicTab/MusicTab.tsx @@ -52,11 +52,8 @@ export default MusicTab -interface ListedProps{ - onExpire: (item:object)=>void -} -const ListedCategory: React.FC = ({onExpire})=>{ +const ListedCategory: React.FC= ()=>{ const {music,isLoading,error} = useFetchUserMusic() const [isRemovingSale, setIsRemovingSale] = useState(false) @@ -70,7 +67,6 @@ const ListedCategory: React.FC = ({onExpire})=>{ try{ setIsRemovingSale(true) const res = await market.removeFromSale(item.itemId); - onExpire(item) setIsRemovingSale(false) console.log(res) }catch(err){ @@ -80,17 +76,6 @@ const ListedCategory: React.FC = ({onExpire})=>{ } - const renewAdSpace = async(item)=>{ - // call add removing service here. - console.log(item) - const market = MarketPlace__factory.connect(MarketPlaceAddr, signer) - try{ - const res = await market.createMarketSale(MarketPlaceAddr,item.itemId); - console.log(res) - }catch(err){ - console.log(err) - } - } // TODO: Create error-boundary to catch error when thrown if(error){ throw new Error('Problem caught while fetching music Category') @@ -105,7 +90,7 @@ const ListedCategory: React.FC = ({onExpire})=>{ className={"self-center p-4 max-w-3xl rounded-xl border-slate-800"} itemLayout="horizontal" dataSource={music} - renderItem={(item) =>renewAdSpace(item)}>Unlist} item={item}/> }/> + renderItem={(item) =>removeAdSpace(item)}>Unlist} item={item}/> }/>
) } diff --git a/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnlisted.ts b/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnlisted.ts index e7e9c652..e09a4dac 100644 --- a/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnlisted.ts +++ b/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnlisted.ts @@ -52,6 +52,7 @@ export interface GetUserUnlisted_marketItems { itemId: any; owner: any; price: any; + sold: boolean; forSale: boolean; token: GetUserUnlisted_marketItems_token; } diff --git a/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnsold.ts b/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnsold.ts index 6e7a35f8..c01cafc8 100644 --- a/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnsold.ts +++ b/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnsold.ts @@ -52,6 +52,7 @@ export interface GetUserUnsold_marketItems { itemId: any; owner: any; price: any; + sold: boolean; forSale: boolean; token: GetUserUnsold_marketItems_token; } diff --git a/src/graph-ql/queries/GET_UNSOLD/getUnsold.ts b/src/graph-ql/queries/GET_UNSOLD/getUnsold.ts index 404b465f..b437fe3c 100644 --- a/src/graph-ql/queries/GET_UNSOLD/getUnsold.ts +++ b/src/graph-ql/queries/GET_UNSOLD/getUnsold.ts @@ -36,6 +36,7 @@ export const GET_USER_UNSOLD = gql` itemId owner price + sold forSale token{ id @@ -70,6 +71,7 @@ export const GET_USER_UNLISTED_ADS = gql` itemId owner price + sold forSale token{ id From 36665df8f5c29af10d52d79b07325fe6a43b168d Mon Sep 17 00:00:00 2001 From: mujeex Date: Tue, 20 Sep 2022 16:17:46 +0100 Subject: [PATCH 17/18] feat: cant unlist if ad exist --- src/components/ProfilePage/MusicTab/MusicListItem.tsx | 4 ++-- src/components/ProfilePage/MusicTab/MusicTab.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ProfilePage/MusicTab/MusicListItem.tsx b/src/components/ProfilePage/MusicTab/MusicListItem.tsx index 19017a80..67f393fa 100644 --- a/src/components/ProfilePage/MusicTab/MusicListItem.tsx +++ b/src/components/ProfilePage/MusicTab/MusicListItem.tsx @@ -25,11 +25,11 @@ const MusicListItem: React.FC = ({item,extra=null})=>{ if(item.token.assetHash!== ""){ isAd=true; } - const descriptionNode = ( <> {`${Number(item?.token.expirationDuration)/86400} Days Left`} - {isAd?Adspace is occupied:null} +
+ {isAd?Adspace has 1 AD:null} ) diff --git a/src/components/ProfilePage/MusicTab/MusicTab.tsx b/src/components/ProfilePage/MusicTab/MusicTab.tsx index 4407f0dc..e9f8bba3 100644 --- a/src/components/ProfilePage/MusicTab/MusicTab.tsx +++ b/src/components/ProfilePage/MusicTab/MusicTab.tsx @@ -90,7 +90,7 @@ const ListedCategory: React.FC= ()=>{ className={"self-center p-4 max-w-3xl rounded-xl border-slate-800"} itemLayout="horizontal" dataSource={music} - renderItem={(item) =>removeAdSpace(item)}>Unlist} item={item}/> }/> + renderItem={(item) =>removeAdSpace(item)}>{`${item.sold?'Unlist(Ad-exists)':'Unlist'}`}} item={item}/> }/> ) } From 0bfdfa67f0d23d7b0e1104869bb83c69a4c72ec3 Mon Sep 17 00:00:00 2001 From: mujeex Date: Tue, 20 Sep 2022 16:38:50 +0100 Subject: [PATCH 18/18] refactor: add seller field to query --- src/components/ProfilePage/MusicTab/MusicTab.tsx | 15 +++++++++------ .../GET_UNSOLD/__generated__/GetUserUnlisted.ts | 1 + src/graph-ql/queries/GET_UNSOLD/getUnsold.ts | 1 + 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/ProfilePage/MusicTab/MusicTab.tsx b/src/components/ProfilePage/MusicTab/MusicTab.tsx index e9f8bba3..3876d6e3 100644 --- a/src/components/ProfilePage/MusicTab/MusicTab.tsx +++ b/src/components/ProfilePage/MusicTab/MusicTab.tsx @@ -11,21 +11,20 @@ import {useQuery} from '@apollo/client'; import { useAccount, useSigner } from 'wagmi'; // contract imports -import { AdvNFT__factory, MarketPlace__factory } from '../../../contracts'; -import { AdvNFTAddr, MarketPlaceAddr } from '../../../env'; +import { MarketPlace__factory } from '../../../contracts'; +import { MarketPlaceAddr } from '../../../env'; // custom-components imports -import ListItem from '../../Shared/ListItem/ListItem'; import MusicListItem from './MusicListItem'; // custom-hooks imports import useFetchExpiredAds from '../hooks/useFetchExpiredAds'; import useFetchUserMusic from '../hooks/useFetchUserMusic'; -import { GET_USER_UNLISTED_ADS, GET_USER_UNSOLD } from '../../../graph-ql/queries/GET_UNSOLD/getUnsold'; -import { GetUserUnsold } from '../../../graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnsold'; +import { GET_USER_UNLISTED_ADS } from '../../../graph-ql/queries/GET_UNSOLD/getUnsold'; import { GetUserUnlisted } from '../../../graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnlisted'; + const MusicTab: React.FC = () =>{ const [expired,setExpired] = useState([]) @@ -120,11 +119,15 @@ const { const renewAdSpace = async(item)=>{ + + + + // call add removing service here. console.log(item) const market = MarketPlace__factory.connect(MarketPlaceAddr, signer) try{ - const res = await market.createMarketSale(MarketPlaceAddr,item.itemId); + const res = await market.createMarketItem(MarketPlaceAddr,item.itemId, item.price); console.log(res) }catch(err){ console.log(err) diff --git a/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnlisted.ts b/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnlisted.ts index e09a4dac..f87b8977 100644 --- a/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnlisted.ts +++ b/src/graph-ql/queries/GET_UNSOLD/__generated__/GetUserUnlisted.ts @@ -53,6 +53,7 @@ export interface GetUserUnlisted_marketItems { owner: any; price: any; sold: boolean; + seller: any; forSale: boolean; token: GetUserUnlisted_marketItems_token; } diff --git a/src/graph-ql/queries/GET_UNSOLD/getUnsold.ts b/src/graph-ql/queries/GET_UNSOLD/getUnsold.ts index b437fe3c..02c00d49 100644 --- a/src/graph-ql/queries/GET_UNSOLD/getUnsold.ts +++ b/src/graph-ql/queries/GET_UNSOLD/getUnsold.ts @@ -72,6 +72,7 @@ export const GET_USER_UNLISTED_ADS = gql` owner price sold + seller forSale token{ id