#48 Chore/sorting cryptopunks (#52)

* add timestamp sorting * add timestamp sorting to cryptopunks * remove timestamp, sortby tenancydates * fix ordering to desc * format code * timestamp sorting fix & add date to be shown Co-authored-by: nazariyv <[email protected]>
re-nft · May 3, 2021 · cc32083 · cc32083 · vercel · May 3, 2021
1 parent f77f131
commit cc32083
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 9 deletions.
diff --git a/components/punk-item/index.js b/components/punk-item/index.js
@@ -81,12 +81,17 @@ export default function Punk({ punk, setModalOpen }) {
             <p className="cols-1 pointer-events-none">
               <span className="flex items-start justify-start flex-col">
                 <span className="font-semibold">
-                  {monthNames[startDate.getMonth()]}
+                  {startDate.getDate()} {monthNames[startDate.getMonth()]}
                 </span>
                 <span className="text-xl font-bold">
                   {startDate.getFullYear()}
                 </span>
-                <span className="font-medium text-left text-xs lg:text-base" style={{ minWidth: '4rem' }}>{formatAMPM(startDate)}</span>
+                <span
+                  className="font-medium text-left text-xs lg:text-base"
+                  style={{ minWidth: '4rem' }}
+                >
+                  {formatAMPM(startDate)}
+                </span>
               </span>
             </p>
             <p className="cols-1 flex justify-center items-center pointer-events-none">
@@ -95,12 +100,17 @@ export default function Punk({ punk, setModalOpen }) {
             <p className="cols-1 pointer-events-none">
               <span className="flex items-end justify-end flex-col">
                 <span className="font-semibold">
-                  {monthNames[endDate.getMonth()]}
+                  {endDate.getDate()} {monthNames[endDate.getMonth()]}
                 </span>
                 <span className="text-xl font-bold">
                   {endDate.getFullYear()}
                 </span>
-                <span className="font-medium text-xs lg:text-base text-right" style={{ minWidth: '4rem' }}>{formatAMPM(endDate)}</span>
+                <span
+                  className="font-medium text-xs lg:text-base text-right"
+                  style={{ minWidth: '4rem' }}
+                >
+                  {formatAMPM(endDate)}
+                </span>
               </span>
             </p>
           </div>

diff --git a/contexts/punk.js b/contexts/punk.js
@@ -10,7 +10,7 @@ import blockies from 'ethereum-blockies';
 import { request } from 'graphql-request';
 import { ethers } from 'ethers';
 
-import { parsePackedRentData } from '../utils';
+import { parsePackedRentData, sortByTimestamp } from '../utils';
 import {
   queryAllPunks,
   queryProvenancyOfPunk,
@@ -133,7 +133,7 @@ export function PunkProvider({ children }) {
       queryProvenancyOfPunk(punk.punkID),
       'issue fetching punk"s provenance'
     ).then((result) => {
-      if (result) return result.map(mapToPunk);
+      if (result) return result.sort(sortByTimestamp).map(mapToPunk);
       return [];
     });
   }, []);
@@ -171,10 +171,13 @@ export function PunkProvider({ children }) {
     // TODO: only pulls this once. add a poller
     getProvenances(queryAllPunks, 'issue fetching all punks').then((result) => {
       if (result) {
-        setAllGiftedPunks(result.filter(filterNonZeroTenant).map(mapToPunk));
+        const sortedResult = result.sort(sortByTimestamp);
+        setAllGiftedPunks(
+          sortedResult.filter(filterNonZeroTenant).map(mapToPunk)
+        );
         // todo: create punks and then filter. that way we will not perform
         // todo: the end computation twice
-        setGiftedPunks(result.filter(filterCurrentPunk).map(mapToPunk));
+        setGiftedPunks(sortedResult.filter(filterCurrentPunk).map(mapToPunk));
       }
     });
 
@@ -221,7 +224,7 @@ export function PunkProvider({ children }) {
   );
 }
 
-PunkContext.propTypes = {
+PunkProvider.propTypes = {
   children: PropTypes.node,
 };
 

diff --git a/generated/schema.ts b/generated/schema.ts
@@ -231,4 +231,5 @@ export class Provenance extends Entity {
   set tenancyDates(value: string) {
     this.set("tenancyDates", Value.fromString(value));
   }
+
 }
diff --git a/utils/index.js b/utils/index.js
@@ -71,3 +71,10 @@ export const formatAMPM = (date) => {
   const strTime = hours + ':' + minutes + ' ' + ampm;
   return strTime;
 };
+
+export function sortByTimestamp(a, b, asc = false) {
+  if (asc) {
+    return a.tenancyDates.start - b.tenancyDates.start;
+  }
+  return b.tenancyDates.start - a.tenancyDates.start;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -231,4 +231,5 @@ export class Provenance extends Entity { @@
       set tenancyDates(value: string) {
         this.set("tenancyDates", Value.fromString(value));
       }
     }