added dynamic input based on graph

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"
       }

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-name">{assetName.split("_").join(" ")}</div>
-          <div className="assets-date">{uploadedOn}</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">

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,14 +162,27 @@ const CardsContainer: React.FC = () => {
             views={asset.views}
             onSelectCard={handleCardSelect}
           />
-        ))}
+        ))} */}
-        {/* <RenderOverlay> */}
+        {models.length > 0 &&
-          {selectedCard && (
+          models.map((assetDetail) => (
-            <AssetPreview
+            <Card
-              selectedCard={selectedCard}
+              key={assetDetail._id}
-              setSelectedCard={setSelectedCard}
+              assetName={assetDetail?.filename}
+              uploadedOn={assetDetail.uploadDate.toString()}
+              price={36500}
+              rating={4.5}
+              views={500}
+              onSelectCard={handleCardSelect}
+              image={assetDetail.thumbnail}
             />
-          )}
+          ))}
+        {/* <RenderOverlay> */}
+        {selectedCard && (
+          <AssetPreview
+            selectedCard={selectedCard}
+            setSelectedCard={setSelectedCard}
+          />
+        )}
         {/* </RenderOverlay> */}
       </div>
     </div>

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);
+  }
+};

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};