Resource Page Data Mapping #220
@@ -43,7 +43,7 @@ export default function CollectionTab({ className, products }) {
|
||||
<DataIteration
|
||||
datas={products}
|
||||
startLength={process.env.REACT_APP_ZERO_STATE}
|
||||
endLength={products.length}
|
||||
endLength={products?.length}
|
||||
>
|
||||
{({ datas }) => (
|
||||
<CollectionCard key={datas.uniqKey} collectionData={datas} />
|
||||
|
||||
+113
-111
@@ -1,9 +1,9 @@
|
||||
import React, { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import authProfilePic from "../../assets/images/auth-profile-picture.png";
|
||||
import profileBanner from "../../assets/images/profile-cover.png";
|
||||
import collections from "../../data/collectionplan_data.json";
|
||||
import marketPlace from "../../data/marketplace_data.json";
|
||||
// import authProfilePic from "../../assets/images/auth-profile-picture.png";
|
||||
// import profileBanner from "../../assets/images/profile-cover.png";
|
||||
// import collections from "../../data/collectionplan_data.json"; Should this be cleaned off?
|
||||
// import marketPlace from "../../data/marketplace_data.json";
|
||||
import products from "../../data/product_data.json";
|
||||
import Layout from "../Partials/Layout";
|
||||
import ActivitiesTab from "./ActivitiesTab";
|
||||
@@ -12,130 +12,132 @@ import CreatedTab from "./CreatedTab";
|
||||
import HiddenProductsTab from "./HiddenProductsTab";
|
||||
import OnSaleTab from "./OnSaleTab";
|
||||
import OwnTab from "./OwnTab";
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
|
||||
export default function Resources(props) {
|
||||
console.log('RESOURCES=>',props);
|
||||
const onSaleProducts = marketPlace.data;
|
||||
const CreatedSell = marketPlace.data;
|
||||
const CreatedBits = products.datas;
|
||||
// console.log("RESOURCES=>", props);
|
||||
// const mainProducts = products.datas;
|
||||
const ownProducts = products.datas;
|
||||
const collectionProducts = collections.data;
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
id: 1,
|
||||
name: "onsale",
|
||||
content: "On Sale",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "owned",
|
||||
content: "Owned",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "created",
|
||||
content: "Created",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "hidden",
|
||||
content: "Hidden",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "collection",
|
||||
content: "Collection",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "activity",
|
||||
content: "Activity",
|
||||
},
|
||||
];
|
||||
// Resource Props
|
||||
const __resources = props.MyResourceData;
|
||||
|
||||
// Collection Items
|
||||
const collectionProducts = __resources?.collectiondata?.data;
|
||||
const tab_categories = __resources?.tab_categories?.data;
|
||||
const onSaleProducts = __resources?.marketdata?.data;
|
||||
const CreatedSell = __resources?.marketdata?.data;
|
||||
const CreatedBits = __resources?.productdata?.data;
|
||||
|
||||
const [tab, setTab] = useState(tab_categories ? tab_categories[0]?.name : "");
|
||||
|
||||
const [tab, setTab] = useState(tabs[0].name);
|
||||
const tabHandler = (value) => {
|
||||
setTab(value);
|
||||
};
|
||||
|
||||
// Category Components
|
||||
const tabComponents = {
|
||||
onsale: <OnSaleTab products={onSaleProducts} />,
|
||||
owned: <OwnTab products={ownProducts} />,
|
||||
created: (
|
||||
<CreatedTab marketProducts={CreatedSell} mainProducts={CreatedBits} />
|
||||
),
|
||||
hidden: (
|
||||
<HiddenProductsTab
|
||||
marketProducts={CreatedSell}
|
||||
mainProducts={CreatedBits}
|
||||
/>
|
||||
),
|
||||
collection: <CollectionTab products={collectionProducts} />,
|
||||
activity: <ActivitiesTab />,
|
||||
};
|
||||
|
||||
const defaultTabComponent = <OnSaleTab products={onSaleProducts} />;
|
||||
|
||||
const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
|
||||
|
||||
// Tab Item Component
|
||||
const TabItem = ({ tabValue, isActive }) => {
|
||||
return (
|
||||
<li
|
||||
className={`relative group inline`}
|
||||
onClick={() => tabHandler(tabValue.name)}
|
||||
>
|
||||
<span
|
||||
className={`py-4 sm:border-b-none border-b group-hover:border-purple border-transparent lg:text-xl text-sm tracking-wide font-bold group-hover:text-purple text-dark-gray dark:text-white relative z-10 cursor-pointer ${
|
||||
isActive
|
||||
? "text-purple border-purple"
|
||||
: "text-dark-gray dark:text-white border-transparent"
|
||||
}`}
|
||||
>
|
||||
{tabValue.content}
|
||||
</span>
|
||||
<span
|
||||
className={`w-5 h-5 group-hover:bg-pink group-hover:text-white text-[10px] rounded-full absolute -top-2 -right-5 flex justify-center items-center ${
|
||||
isActive
|
||||
? "text-white bg-pink"
|
||||
: "text-thin-light-gray bg-[#F2B8FD]"
|
||||
}`}
|
||||
>
|
||||
16
|
||||
</span>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
// Tab List Component
|
||||
const TabList = ({ tabCategories }) => {
|
||||
return (
|
||||
<ul className="lg:flex lg:space-x-14 space-x-8">
|
||||
{tabCategories.length > 0 &&
|
||||
tabCategories?.map((tabValue, idx) => (
|
||||
<TabItem
|
||||
key={tabValue.id}
|
||||
tabValue={tabValue}
|
||||
isActive={tab === tabValue.name || (idx === 0 && tab === "")}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Layout>
|
||||
<div className="nft-authprofile-wrapper w-full">
|
||||
<div className="main-wrapper w-full">
|
||||
<div className="content-wrapper-profile-only w-full mb-6">
|
||||
<div className="auth-tab-content relative mb-10">
|
||||
<div className="lg:flex justify-between">
|
||||
<div className="tab-items">
|
||||
<ul className="lg:flex lg:space-x-14 space-x-8">
|
||||
{tabs &&
|
||||
tabs.length > 0 &&
|
||||
tabs.map((tabValue) => (
|
||||
<li
|
||||
key={tabValue.id}
|
||||
className="relative group inline"
|
||||
onClick={() => tabHandler(tabValue.name)}
|
||||
>
|
||||
<span
|
||||
className={`py-4 sm:border-b-none border-b group-hover:border-purple border-transparent lg:text-xl text-sm tracking-wide font-bold group-hover:text-purple text-dark-gray dark:text-white relative z-10 cursor-pointer ${
|
||||
tab === tabValue.name
|
||||
? "text-purple border-purple "
|
||||
: "text-dark-gray dark:text-white border-transparent "
|
||||
}`}
|
||||
>
|
||||
{tabValue.content}
|
||||
</span>
|
||||
<span
|
||||
className={`w-5 h-5 group-hover:bg-pink group-hover:text-white text-[10px] rounded-full absolute -top-2 -right-5 flex justify-center items-center ${
|
||||
tab === tabValue.name
|
||||
? "text-white bg-pink"
|
||||
: "text-thin-light-gray bg-[#F2B8FD]"
|
||||
}`}
|
||||
>
|
||||
16
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div style={{ transform: "translateY(-22px)" }}>
|
||||
<Link
|
||||
to="/upload-product"
|
||||
className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
|
||||
>
|
||||
Upload Product
|
||||
</Link>
|
||||
{props.MyResourceData.length == 0 ||
|
||||
Object.keys(props.MyResourceData).length == 0 ? (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<LoadingSpinner size={16} color="sky-blue" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="main-wrapper w-full">
|
||||
<div className="content-wrapper-profile-only w-full mb-6">
|
||||
<div className="auth-tab-content relative mb-10">
|
||||
<div className="lg:flex justify-between">
|
||||
<div className="tab-items">
|
||||
<ul className="lg:flex lg:space-x-14 space-x-8">
|
||||
<TabList tabCategories={tab_categories} />
|
||||
</ul>
|
||||
</div>
|
||||
<div style={{ transform: "translateY(-22px)" }}>
|
||||
<Link
|
||||
to="/upload-product"
|
||||
className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
|
||||
>
|
||||
Upload Product
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden lg:block w-full h-[1px] bg-[#DCD5FE] dark:bg-[#5356fb29] absolute top-[42px] left-0"></div>
|
||||
</div>
|
||||
<div className="hidden lg:block w-full h-[1px] bg-[#DCD5FE] dark:bg-[#5356fb29] absolute top-[42px] left-0"></div>
|
||||
</div>
|
||||
|
||||
<div className="tab-cotainer w-full mb-10">
|
||||
{selectedTabComponent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="tab-cotainer w-full mb-10">
|
||||
{tab === "onsale" ? (
|
||||
<OnSaleTab products={onSaleProducts} />
|
||||
) : tab === "owned" ? (
|
||||
<OwnTab products={ownProducts} />
|
||||
) : tab === "created" ? (
|
||||
<CreatedTab
|
||||
marketProducts={CreatedSell}
|
||||
mainProducts={CreatedBits}
|
||||
/>
|
||||
) : tab === "hidden" ? (
|
||||
<HiddenProductsTab
|
||||
marketProducts={CreatedSell}
|
||||
mainProducts={CreatedBits}
|
||||
/>
|
||||
) : tab === "collection" ? (
|
||||
<CollectionTab products={collectionProducts} />
|
||||
) : tab === "activity" ? (
|
||||
<ActivitiesTab />
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Layout>
|
||||
</>
|
||||
|
||||
+16
-19
@@ -1,24 +1,21 @@
|
||||
import React, { useContext, useState, useEffect } from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Resources from "../components/Resources";
|
||||
import {useSelector} from "react-redux";
|
||||
import usersService from "../services/UsersService";
|
||||
export default function ResourcePage() {
|
||||
const [MyResourceData, setMyResourceData] = useState([]);
|
||||
const api = new usersService();
|
||||
|
||||
const [MyResourceData, setMyResourceData] = useState([]);
|
||||
const api = new usersService();
|
||||
const getMyResourceData = async () => {
|
||||
try {
|
||||
const res = await api.getResourceList();
|
||||
setMyResourceData(res.data);
|
||||
} catch (error) {
|
||||
throw new Error("Error getting mode");
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
getMyResourceData();
|
||||
}, []);
|
||||
|
||||
const getMyResourceData = async () => {
|
||||
try {
|
||||
const res = await api.getResourceList();
|
||||
setMyResourceData(res.data);
|
||||
} catch (error) {
|
||||
console.log("Error getting mode");
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
getMyResourceData();
|
||||
}, []);
|
||||
|
||||
return <Resources
|
||||
MyResourceData={MyResourceData} />;
|
||||
}
|
||||
return <Resources MyResourceData={MyResourceData} />;
|
||||
}
|
||||
Reference in New Issue
Block a user