some refactors (#56)

src/components/Sidebar/index.tsx

@@ -90,7 +90,7 @@ export const Sidebar = () => {
     'secondary market': [
       {
         label: 'Explore the Market',
-        route: '/market/marketplace',
+        route: '/marketplace',
         enabled: true,
         icon: <ExploreIcon />,
       },

src/contexts/regions/index.tsx

@@ -148,13 +148,9 @@ const RegionDataProvider = ({ children }: Props) => {
 
   const updateRegionName = (index: number, name: string) => {
     const _regions = [...regions];
-    const region = regions[index];
-    _regions[index] = {
-      ...region,
-      name,
-    };
+    _regions[index].name = name;
     setRegions(_regions);
-    localStorage.setItem(`region-${region.rawId}`, name);
+    localStorage.setItem(`region-${_regions[index].rawId}`, name);
   };
 
   const determineRegionLocation = (

src/models/index.ts

@@ -1,2 +1,2 @@
 export * from './consts';
-export * from './types';
+export * from './types';

src/models/types.ts

@@ -1,10 +1,8 @@
 import { ApiPromise } from '@polkadot/api';
 import { ContractPromise } from '@polkadot/api-contract';
 import { Signer } from '@polkadot/types/types';
-import { Balance, CoreIndex, TaskId, Timeslice } from 'coretime-utils';
-
-export { Listing } from './types/listing';
-export { RegionMetadata } from './types/regionMetadata';
+import { BN } from '@polkadot/util';
+import { Balance, ContextData, CoreIndex, RawRegionId, Region, TaskId, Timeslice } from 'coretime-utils';
 
 export type Percentage = number; // Percentage value between 0 and 1
 
@@ -110,3 +108,136 @@ export type SaleConfig = {
   /// The duration by which rewards for contributions to the InstaPool must be collected.
   contributionTimeout: Timeslice;
 };
+
+export class RegionMetadata {
+  public region: Region;
+
+  // Indicates the location of the region. It can either be on the Coretime chain or on the contracts
+  // chain as an xc-region.
+  public location: RegionLocation;
+
+  // u128 encoded RegionId.
+  //
+  // This is used for interacting with the xc-regions contract or when conducting cross-chain transfers,
+  // where `regionId` needs to be represented as a u128.
+  public rawId: RawRegionId;
+
+  // A user set name for the region.
+  public name: string | null;
+
+  // This is essentially the Coremask of the region, representing the frequency with which the region will
+  // be scheduled.
+  //
+  // A 100% Core Occupancy implies that the region occupies the entire Core.
+  public coreOccupancy: Percentage;
+
+  // Displays the current utilization of Coretime for the task assigned to the region.
+  //
+  // If no task is assigned, this value will be 0%, indicating that the Coretime is essentially being wasted.
+  public currentUsage: Percentage;
+
+  // Indicates the amount of time remaining until the region’s end, effectively showing the proportion of the
+  // region that has already been ‘consumed’ or utilized.
+  public consumed: Percentage;
+
+  // The task to which the region is assigned. If null, it means that the region is not assigned to
+  // any specific task.
+  public taskId: TaskId | null;
+
+  public static construct(
+    context: ContextData,
+    rawId: BN,
+    region: Region,
+    name: string,
+    regionLocation: RegionLocation,
+    task: number | null
+  ): RegionMetadata {
+    const currentUsage = 0;
+
+    return new RegionMetadata(
+      region,
+      regionLocation,
+      rawId,
+      name,
+      region.coreOccupancy(),
+      currentUsage,
+      region.consumed(context),
+      task
+    );
+  }
+
+  constructor(
+    region: Region,
+    location: RegionLocation,
+    rawId: RawRegionId,
+    name: string | null,
+    coreOccupancy: Percentage,
+    currentUsage: Percentage,
+    consumed: Percentage,
+    taskId: TaskId | null
+  ) {
+    this.region = region;
+    this.location = location;
+    this.rawId = rawId;
+    this.name = name;
+    this.coreOccupancy = coreOccupancy;
+    this.currentUsage = currentUsage;
+    this.consumed = consumed;
+    this.taskId = taskId;
+  }
+}
+
+
+export class Listing {
+  /// The reigon listed on sale.
+  public region: Region;
+  /// The percentage of the region that got consumed by now.
+  public regionConsumed: Percentage;
+  /// The percentage of the core the region ocucupies.
+  public regionCoreOccupancy: Percentage;
+  /// The seller of the region.
+  public seller: string;
+  /// The price per timeslice set by the seller.
+  public timeslicePrice: BN;
+  /// The current total price of the region.
+  public currentPrice: BN;
+  /// The recepient of the sale.
+  public saleRecepient: string | null;
+
+  public static construct(
+    context: ContextData,
+    region: Region,
+    seller: string,
+    timeslicePrice: BN,
+    currentPrice: BN,
+    saleRecepient: string | null
+  ): Listing {
+    return new Listing(
+      region,
+      region.consumed(context),
+      region.coreOccupancy(),
+      seller,
+      timeslicePrice,
+      currentPrice,
+      saleRecepient
+    );
+  }
+
+  constructor(
+    region: Region,
+    regionConsumed: Percentage,
+    regionCoreOccupancy: Percentage,
+    seller: string,
+    timeslicePrice: BN,
+    currentPrice: BN,
+    saleRecepient: string | null
+  ) {
+    this.region = region;
+    this.regionConsumed = regionConsumed;
+    this.regionCoreOccupancy = regionCoreOccupancy;
+    this.seller = seller;
+    this.timeslicePrice = timeslicePrice;
+    this.currentPrice = currentPrice;
+    this.saleRecepient = saleRecepient;
+  }
+}

src/pages/market/marketplace.tsx → src/pages/marketplace.tsx

@@ -8,13 +8,12 @@ import { ListingCard, MarketFilters, PurchaseModal } from '@/components';
 import { useMarket } from '@/contexts/market';
 import { Listing } from '@/models';
 
-const Page = () => {
+const Marketplace = () => {
   const { listedRegions, fetchMarket } = useMarket();
 
   const [purchaseModalOpen, openPurhcaseModal] = useState(false);
   const [selectedListing, setSelectedListing] = useState<Listing | null>(null);
-  const [filteredListings, setFilteredListings] =
-    useState<Listing[]>(listedRegions);
+  const [filteredListings, setFilteredListings] = useState<Listing[]>(listedRegions);
 
   const onPurchase = (listing: Listing) => {
     setSelectedListing(listing);
@@ -54,13 +53,13 @@ const Page = () => {
       />
       {filteredListings.length > 0 && (
         <Box
-          marginTop={'2rem'}
-          display={'flex'}
-          flexWrap={'wrap'}
-          justifyContent={'space-around'}
+          marginTop='2rem'
+          display='flex'
+          flexWrap='wrap'
+          justifyContent='space-around'
         >
           {filteredListings.map((listing, indx) => (
-            <Box key={indx} margin={'1em'}>
+            <Box key={indx} margin='1em'>
               <ListingCard
                 listing={listing}
                 readOnly={false}
@@ -84,4 +83,4 @@ const Page = () => {
   );
 };
 
-export default Page;
+export default Marketplace;