From e4ef26331f4ac209fa712cbe85570a98dac0519e Mon Sep 17 00:00:00 2001 From: Poovizhi99 Date: Fri, 28 Mar 2025 13:55:30 +0530 Subject: [PATCH 1/2] solved ui bugs marketplace --- app/src/modules/market/Card.tsx | 21 ++++-- app/src/modules/market/CardsContainer.tsx | 64 +++++++++++++++---- app/src/services/marketplace/fetchAssets.ts | 14 ++++ .../components/marketPlace/marketPlace.scss | 11 ++++ 4 files changed, 92 insertions(+), 18 deletions(-) create mode 100644 app/src/services/marketplace/fetchAssets.ts diff --git a/app/src/modules/market/Card.tsx b/app/src/modules/market/Card.tsx index 646fe39..b872dc0 100644 --- a/app/src/modules/market/Card.tsx +++ b/app/src/modules/market/Card.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect } from "react"; import { CommentsIcon, DownloadIcon, @@ -11,13 +11,14 @@ import assetImage from "../../assets/image/image.png"; interface CardProps { assetName: string; - uploadedOn: string; + uploadedOn: number; price: number; rating: number; views: number; + image: string; onSelectCard: (cardData: { assetName: string; - uploadedOn: string; + uploadedOn: number; price: number; rating: number; views: number; @@ -30,6 +31,7 @@ const Card: React.FC = ({ price, rating, views, + image, onSelectCard, }) => { const handleCardSelect = () => { @@ -42,12 +44,19 @@ const Card: React.FC = ({
- {assetName} + {assetName}
-
{assetName}
-
{uploadedOn}
+
{assetName.split("_").join(" ")}
+
+ Uploaded on -{" "} + {new Date(uploadedOn).toLocaleDateString("en-GB", { + day: "2-digit", + month: "short", + year: "2-digit", + })} +
diff --git a/app/src/modules/market/CardsContainer.tsx b/app/src/modules/market/CardsContainer.tsx index 96a47e4..67bf849 100644 --- a/app/src/modules/market/CardsContainer.tsx +++ b/app/src/modules/market/CardsContainer.tsx @@ -1,9 +1,25 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import Card from "./Card"; import AssetPreview from "./AssetPreview"; import RenderOverlay from "../../components/templates/Overlay"; +import { fetchAssets } from "../../services/marketplace/fetchAssets"; +interface ModelData { + CreatedBy: string; + animated: string | null; + category: string; + description: string; + filename: string; + isArchieve: boolean; + modelfileID: string; + tags: string; + thumbnail: string; + uploadDate: number; + _id: string; +} const CardsContainer: React.FC = () => { + const [models, setModels] = useState([]); + const array = [ { id: 1, @@ -105,7 +121,7 @@ const CardsContainer: React.FC = () => { const [selectedCard, setSelectedCard] = useState<{ assetName: string; - uploadedOn: string; + uploadedOn: number; price: number; rating: number; views: number; @@ -113,19 +129,30 @@ const CardsContainer: React.FC = () => { const handleCardSelect = (cardData: { assetName: string; - uploadedOn: string; + uploadedOn: number; price: number; rating: number; views: number; }) => { setSelectedCard(cardData); }; - + const getAllAssets = async () => { + try { + const assetsData = await fetchAssets(); + const reversedData = [...assetsData]?.reverse().slice(0, 8); + setModels(reversedData); + } catch (error) { + } finally { + } + }; + useEffect(() => { + getAllAssets(); + }, []); return (
Products You May Like
- {array.map((asset) => ( + {/* {array.map((asset) => ( { views={asset.views} onSelectCard={handleCardSelect} /> - ))} - {/* */} - {selectedCard && ( - 0 && + models.map((assetDetail) => ( + - )} + ))} + {/* */} + {selectedCard && ( + + )} {/* */}
diff --git a/app/src/services/marketplace/fetchAssets.ts b/app/src/services/marketplace/fetchAssets.ts new file mode 100644 index 0000000..3408252 --- /dev/null +++ b/app/src/services/marketplace/fetchAssets.ts @@ -0,0 +1,14 @@ +let BackEnd_url = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`; +export const fetchAssets = async () => { + try { + const response = await fetch(`${BackEnd_url}/api/v1/getAllAssets`); + if (!response.ok) { + throw new Error("Network response was not ok"); + } + const result = await response.json(); + return result; + } catch (error) { + console.log("error: ", error); + // throw new Error(error.message); + } +}; diff --git a/app/src/styles/components/marketPlace/marketPlace.scss b/app/src/styles/components/marketPlace/marketPlace.scss index cac366e..8df0896 100644 --- a/app/src/styles/components/marketPlace/marketPlace.scss +++ b/app/src/styles/components/marketPlace/marketPlace.scss @@ -8,6 +8,7 @@ background-color: var(--background-color-secondary); position: absolute; left: 0; + top: 0; padding: 100px 50px; padding-bottom: 32px; backdrop-filter: blur(6px); @@ -89,6 +90,7 @@ color: var(--text-color); font-weight: $medium-weight; font-size: $xlarge; + margin-bottom: 12px; } .cards-wrapper-container { @@ -122,7 +124,13 @@ .image-container { width: 100%; display: flex; + max-height: 180px; justify-content: center; + img{ + height: inherit; + width: 100%; + object-fit: cover; + } } .assets-container { @@ -133,6 +141,9 @@ display: flex; flex-direction: column; gap: 3px; + .assets-name{ + text-transform: capitalize; + } .asstes-container { font-weight: #{$bold-weight}; From b3b077c80d3c7911f3efe2a08136b3b3b0b3948c Mon Sep 17 00:00:00 2001 From: Vishnu Date: Fri, 28 Mar 2025 14:11:11 +0530 Subject: [PATCH 2/2] type error fix --- app/package-lock.json | 47 +++++++---------------- app/src/modules/market/Card.tsx | 4 +- app/src/modules/market/CardsContainer.tsx | 6 +-- 3 files changed, 19 insertions(+), 38 deletions(-) diff --git a/app/package-lock.json b/app/package-lock.json index 20fa0fc..c8210e0 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -2017,7 +2017,7 @@ "version": "0.8.1", "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==", - "devOptional": true, + "dev": true, "dependencies": { "@jridgewell/trace-mapping": "0.3.9" }, @@ -2029,7 +2029,7 @@ "version": "0.3.9", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz", "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==", - "devOptional": true, + "dev": true, "dependencies": { "@jridgewell/resolve-uri": "^3.0.3", "@jridgewell/sourcemap-codec": "^1.4.10" @@ -4128,25 +4128,6 @@ "url": "https://github.com/sponsors/gregberge" } }, - "node_modules/@testing-library/dom": { - "version": "10.4.0", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", - "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", - "peer": true, - "dependencies": { - "@babel/code-frame": "^7.10.4", - "@babel/runtime": "^7.12.5", - "@types/aria-query": "^5.0.1", - "aria-query": "5.3.0", - "chalk": "^4.1.0", - "dom-accessibility-api": "^0.5.9", - "lz-string": "^1.5.0", - "pretty-format": "^27.0.2" - }, - "engines": { - "node": ">=18" - } - }, "node_modules/@testing-library/jest-dom": { "version": "5.17.0", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz", @@ -4258,25 +4239,25 @@ "version": "1.0.11", "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz", "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==", - "devOptional": true + "dev": true }, "node_modules/@tsconfig/node12": { "version": "1.0.11", "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz", "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==", - "devOptional": true + "dev": true }, "node_modules/@tsconfig/node14": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz", "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==", - "devOptional": true + "dev": true }, "node_modules/@tsconfig/node16": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz", "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==", - "devOptional": true + "dev": true }, "node_modules/@turf/along": { "version": "7.2.0", @@ -8883,7 +8864,7 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==", - "devOptional": true + "dev": true }, "node_modules/cross-env": { "version": "7.0.3", @@ -9748,7 +9729,7 @@ "version": "4.0.2", "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", - "devOptional": true, + "dev": true, "engines": { "node": ">=0.3.1" } @@ -15092,7 +15073,7 @@ "version": "1.3.6", "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==", - "devOptional": true + "dev": true }, "node_modules/makeerror": { "version": "1.0.12", @@ -20535,7 +20516,7 @@ "version": "10.9.2", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz", "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==", - "devOptional": true, + "dev": true, "dependencies": { "@cspotcode/source-map-support": "^0.8.0", "@tsconfig/node10": "^1.0.7", @@ -20578,7 +20559,7 @@ "version": "8.3.4", "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz", "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==", - "devOptional": true, + "dev": true, "dependencies": { "acorn": "^8.11.0" }, @@ -20590,7 +20571,7 @@ "version": "4.1.3", "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==", - "devOptional": true + "dev": true }, "node_modules/tsconfig-paths": { "version": "3.15.0", @@ -21077,7 +21058,7 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==", - "devOptional": true + "dev": true }, "node_modules/v8-to-istanbul": { "version": "8.1.1", @@ -22136,7 +22117,7 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==", - "devOptional": true, + "dev": true, "engines": { "node": ">=6" } diff --git a/app/src/modules/market/Card.tsx b/app/src/modules/market/Card.tsx index b872dc0..91729e3 100644 --- a/app/src/modules/market/Card.tsx +++ b/app/src/modules/market/Card.tsx @@ -11,14 +11,14 @@ import assetImage from "../../assets/image/image.png"; interface CardProps { assetName: string; - uploadedOn: number; + uploadedOn: string; price: number; rating: number; views: number; image: string; onSelectCard: (cardData: { assetName: string; - uploadedOn: number; + uploadedOn: string; price: number; rating: number; views: number; diff --git a/app/src/modules/market/CardsContainer.tsx b/app/src/modules/market/CardsContainer.tsx index 67bf849..2704311 100644 --- a/app/src/modules/market/CardsContainer.tsx +++ b/app/src/modules/market/CardsContainer.tsx @@ -121,7 +121,7 @@ const CardsContainer: React.FC = () => { const [selectedCard, setSelectedCard] = useState<{ assetName: string; - uploadedOn: number; + uploadedOn: string; price: number; rating: number; views: number; @@ -129,7 +129,7 @@ const CardsContainer: React.FC = () => { const handleCardSelect = (cardData: { assetName: string; - uploadedOn: number; + uploadedOn: string; price: number; rating: number; views: number; @@ -168,7 +168,7 @@ const CardsContainer: React.FC = () => {