added dynamic input based on graph

2025-03-28 18:20:59 +05:30 · 2025-03-28 18:20:59 +05:30 · 1f05dd087e
parent 49af0ea3c9 b3b077c80d
commit 1f05dd087e
5 changed files with 102 additions and 29 deletions
--- a/app/package-lock.json
+++ b/app/package-lock.json
@ -2018,7 +2018,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"
      },
@ -2030,7 +2030,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"
@ -4137,7 +4137,6 @@
      "version": "10.4.0",
      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
-      "license": "MIT",
      "peer": true,
      "dependencies": {
        "@babel/code-frame": "^7.10.4",
@ -4264,25 +4263,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",
@ -9007,7 +9006,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",
@ -9875,7 +9874,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"
      }
@ -15225,7 +15224,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",
@ -20684,7 +20683,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",
@ -20727,7 +20726,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"
      },
@ -20739,7 +20738,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",
@ -21226,7 +21225,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",
@ -22285,7 +22284,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"
      }
--- 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,
@ -15,6 +15,7 @@ interface CardProps {
  price: number;
  rating: number;
  views: number;
+  image: string;
  onSelectCard: (cardData: {
    assetName: string;
    uploadedOn: string;
@ -30,6 +31,7 @@ const Card: React.FC<CardProps> = ({
  price,
  rating,
  views,
+  image,
  onSelectCard,
 }) => {
  const handleCardSelect = () => {
@ -42,12 +44,19 @@ const Card: React.FC<CardProps> = ({
        <DownloadIcon />
      </div>
      <div className="image-container">
-        <img src={assetImage} alt={assetName} />
+        <img src={image} alt={assetName} />
      </div>
      <div className="assets-container">
        <div className="name-container">
-          <div className="assets-name">{assetName}</div>
-          <div className="assets-date">{uploadedOn}</div>
+          <div className="assets-name">{assetName.split("_").join(" ")}</div>
+          <div className="assets-date">
+            Uploaded on -{" "}
+            {new Date(uploadedOn).toLocaleDateString("en-GB", {
+              day: "2-digit",
+              month: "short",
+              year: "2-digit",
+            })}
+          </div>
        </div>
        <div className="details">
          <div className="content">
--- 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<ModelData[]>([]);
+
  const array = [
    {
      id: 1,
@ -120,12 +136,23 @@ const CardsContainer: React.FC = () => {
  }) => {
    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 (
    <div className="cards-container-container">
      <div className="header">Products You May Like</div>
      <div className="cards-wrapper-container">
-        {array.map((asset) => (
+        {/* {array.map((asset) => (
          <Card
            key={asset.id}
            assetName={asset.name}
@ -135,6 +162,19 @@ const CardsContainer: React.FC = () => {
            views={asset.views}
            onSelectCard={handleCardSelect}
          />
+        ))} */}
+        {models.length > 0 &&
+          models.map((assetDetail) => (
+            <Card
+              key={assetDetail._id}
+              assetName={assetDetail?.filename}
+              uploadedOn={assetDetail.uploadDate.toString()}
+              price={36500}
+              rating={4.5}
+              views={500}
+              onSelectCard={handleCardSelect}
+              image={assetDetail.thumbnail}
+            />
          ))}
        {/* <RenderOverlay> */}
        {selectedCard && (
--- a/app/src/services/marketplace/fetchAssets.ts
+++ 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);
+  }
+};
--- 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};