Logic refactoring

pages/HottestSongs.tsx

@@ -31,6 +31,7 @@ const {Text,Title} = Typography;
 
 // context imports
 import { WalletContext } from "../src/contexts/WalletContext";
+import {SelectedSongProvider} from '../src/contexts/selectedSong'
 
 // custom-components imports
 import MintSongButton from "../src/components/MintSongButton/MintSongButton";
@@ -58,12 +59,17 @@ const HottestSongs: React.FC = () => {
   const [isFetchingBanner, setIsFetchingBanner] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
 
-  // const {
-    //   loading: isLoadingAllMusic,
-    //   data: allMusicConnection,
-  //   error: allMusicError,
-  // } = useQuery<GetAllMusic>(GET_ALL_MUSIC, { variables: {} });
-
+  const {
+    loading: isLoadingAllMusic,
+    data: allMusicConnection,
+    error: allMusicError,
+  } = useQuery<GetAllMusic>(GET_ALL_MUSIC, {
+    variables: {
+      currentTime: Math.floor(Date.now() / 1000).toString(),
+    },
+  });
+
+
   // function to handle toggling of minting modal
   const handleModal = () => {
     setDisplayModal(!displayModal);
@@ -209,9 +215,12 @@ const HottestSongs: React.FC = () => {
         isVisible={displayModal}
         isMinting={isMinting}
       /> 
+      <SelectedSongProvider>
       {isPlaying && <AdBanner imageUrl="" />}
-      <SongList playSong={handlePlaySong}/>
-      {isPlaying && <StickyPlayer selectedSong={selectedSong}/>}
+      <SongList isLoadingMusic={isLoadingAllMusic} dataSource={allMusicConnection?.musicNFTs||[]} />
+      {/* {isPlaying && <StickyPlayer selectedSong={selectedSong}/>} */}
+      <StickyPlayer selectedSong={selectedSong}/>
+      </SelectedSongProvider>
 
     </div>
   );

src/components/Mintmodal/MintModal.tsx

@@ -6,7 +6,7 @@ import { UploadOutlined } from "@ant-design/icons";
 // types
 import {ModalProps} from './MintModal.types'
 // custom-components
-import {MintForm} from './MintForm'
+import MintForm from './MintForm/MintForm'
 
 
 const MintModal: React.FC<ModalProps> = ({

src/components/SongList/SongList.tsx

@@ -1,4 +1,4 @@
-import {useState,useEffect} from 'react'
+import {useState,useEffect,useContext} from 'react'
 
 // graphql imports
 import { useQuery } from "@apollo/client";
@@ -18,78 +18,73 @@ import {SongListProps} from './SongList.types'
 // custom-component imports
 import { TitleNode,SongNode } from './ListItemNodes';
 
-
-const SongList: React.FC<SongListProps> = ({playSong}) => {
-  const {
-    loading: isLoadingAllMusic,
-    data: allMusicConnection,
-    error: allMusicError,
-  } = useQuery<GetAllMusic>(GET_ALL_MUSIC, {
-    variables: {
-      currentTime: Math.floor(Date.now() / 1000).toString(),
-    },
-  });
-
-  // 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 = (
-    <Menu
-      items={[
-        {
-          label: (
-            <Radio.Group onChange={onChangePrice} value={price}>
-              <Space direction="vertical">
-                <Radio value={"100MATIC"}>100 MATIC and under</Radio>
-                <Radio value={"200MATIC"}>200 MATIC and under</Radio>
-                <Radio value={"300MATIC"}>500 MATIC and under</Radio>
-              </Space>
-            </Radio.Group>
-          ),
-          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 = (
-    <Menu
-      items={[
-        {
-          label: (
-            <Radio.Group onChange={onChangeViews} value={views}>
-              <Space direction="vertical">
-                <Radio value={"1000Views"}>1000 views and under</Radio>
-                <Radio value={"10kViews"}>10K views and under</Radio>
-                <Radio value={"50kViews"}>50K views and under</Radio>
-                <Radio value={"100kViews"}>100K views and under</Radio>
-                <Radio value={"1MViews"}>1 million+ views</Radio>
-              </Space>
-            </Radio.Group>
-          ),
-          key: "1",
-        },
-      ]}
-    />
-  );
+// context imports
+import {SelectedSongContext} from '../../contexts/selectedSong'
+
+const SongList: React.FC<SongListProps> = ({dataSource,isLoadingMusic}) => {
+
+  const targetSong = useContext(SelectedSongContext)
+
+//   // 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 = (
+//     <Menu
+//       items={[
+//         {
+//           label: (
+//             <Radio.Group onChange={onChangePrice} value={price}>
+//               <Space direction="vertical">
+//                 <Radio value={"100MATIC"}>100 MATIC and under</Radio>
+//                 <Radio value={"200MATIC"}>200 MATIC and under</Radio>
+//                 <Radio value={"300MATIC"}>500 MATIC and under</Radio>
+//               </Space>
+//             </Radio.Group>
+//           ),
+//           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 = (
+//     <Menu
+//       items={[
+//         {
+//           label: (
+//             <Radio.Group onChange={onChangeViews} value={views}>
+//               <Space direction="vertical">
+//                 <Radio value={"1000Views"}>1000 views and under</Radio>
+//                 <Radio value={"10kViews"}>10K views and under</Radio>
+//                 <Radio value={"50kViews"}>50K views and under</Radio>
+//                 <Radio value={"100kViews"}>100K views and under</Radio>
+//                 <Radio value={"1MViews"}>1 million+ views</Radio>
+//               </Space>
+//             </Radio.Group>
+//           ),
+//           key: "1",
+//         },
+//       ]}
+//     />
+//   );
 
   return (
     <>
       {/* start dropdowns */}
-      <div className="flex flex-row items-center mb-3">
+      {/* <div className="flex flex-row items-center mb-3">
         <span>Filter by</span>
         <Dropdown overlay={priceFilterMenu} trigger={["click"]}>
           <a onClick={(e) => e.preventDefault()}>
@@ -106,22 +101,22 @@ const SongList: React.FC<SongListProps> = ({playSong}) => {
               <DownOutlined />
             </Space>
           </a>
-        </Dropdown>
-      </div>
+        </Dropdown> 
+      </div> */}
       {/* end dropdowns */}
 
       {/* songlist */}
     <List
-       loading={isLoadingAllMusic}
+       loading={isLoadingMusic}
        style={{
-          width: "700px",
+          width: "100%",
           alignSelf: "center",
           border: "1px solid #e5e5e5",
           borderRadius: "20px",
           padding: "1em",
         }}
        itemLayout="horizontal"
-       dataSource={allMusicConnection?.musicNFTs}
+       dataSource={dataSource}
        renderItem={(item) => (
           <List.Item>
             <List.Item.Meta
@@ -130,7 +125,7 @@ const SongList: React.FC<SongListProps> = ({playSong}) => {
               }
               description={`Burna Boy`}
             />
-            <SongNode assetUri={item.assetUri} playSong={playSong}  />
+            <SongNode assetUri={item.assetUri} playSong={targetSong.playSong}  />
           </List.Item>
         )}/>
     </>

src/components/SongList/SongList.types.ts

@@ -1,5 +1,9 @@
+import { GetAllMusic_musicNFTs } from "../../graph-ql/queries/GET_ALL_MUSIC/__generated__/GetAllMusic";
+
 interface SongListProps{
-    playSong:(uri:string)=>void
+    // playSong:(uri:string)=>void,
+    dataSource: GetAllMusic_musicNFTs[],
+    isLoadingMusic:boolean
   }
 
   export type {SongListProps}

src/components/StickyPlayer/StickyPlayer.tsx

@@ -1,20 +1,29 @@
+import {useContext} from 'react'
+
 // antd imports
 import {Typography} from 'antd'
 const {Text,Title} = Typography;
 
+//context imports
+import {SelectedSongContext} from '../../contexts/selectedSong'
+
 // type imports
 import {songShape,StickyPlayerProps} from './StickyPlayer.types'
 
 
   const StickyPlayer: React.FC<StickyPlayerProps> = ({selectedSong}) =>{
-    console.log(selectedSong)
+
+    const {isPlaying,currentSong} = useContext(SelectedSongContext);
+
+    if(!isPlaying) return <div></div>
+
     return(
       <div style={{background:'#ffffff',boxShadow:'1px 0px 12px 1px rgba(0,0,0,0.35)',zIndex:'2',position:'fixed',bottom:'1em',left:'1em',display:'flex',maxWidth:'500px',flexDirection:'column',padding:'.7em 1em'}}>
        <div style={{display:'flex',flexDirection:'column'}}>
-        <Title style={{margin:'0'}} level={5}>{selectedSong?.name}</Title>
-        <Text type="secondary">{selectedSong?.artist}</Text>
+        <Title style={{margin:'0'}} level={5}>{currentSong.name}</Title>
+        <Text type="secondary">{currentSong?.artist}</Text>
         </div> 
-        <audio autoPlay loop controls src={`${selectedSong?.url}`}>
+        <audio autoPlay loop controls src={`${currentSong?.url}`}>
         </audio>
       </div>
     )

src/contexts/selectedSong.js

@@ -0,0 +1,40 @@
+import React, {createContext,useState} from 'react'
+
+export const SelectedSongContext = createContext();
+
+
+
+export function SelectedSongProvider({children}){
+    const [isPlaying,setIsPlaying] = useState(false);
+    const [currentSong,setCurrentSong] = useState({});
+
+    const playSong = async(songId) =>{
+        console.log(songId)
+        setIsPlaying(true);
+        try{
+        //   setIsFetchingBanner(true);
+          //set local state
+          setCurrentSong({
+            name:'Last last',
+            artist: 'Burna Boy',
+            url: songId
+          })
+        }catch(err){
+        //   setIsFetchingBanner(false);
+        }
+          // set selected Song state
+          // set banner place holder to start loading while fetching image from ipfs
+
+    }
+
+    const value ={
+        isPlaying,
+        currentSong,
+        playSong
+    }
+
+    return <SelectedSongContext.Provider value={value}>
+        {children}
+        </SelectedSongContext.Provider>
+}
+

tsconfig.json

@@ -23,7 +23,7 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx" ],
-  "exclude": [
+, "src/contexts/selectedSong.js"  "exclude": [
     "node_modules"
   ]
 }