#49 Feat/query all ever gifted punks (#51)

* rename ever gifted to currently gifted * filter active punks * add graph commands * fix active punk calculation * fix: get all punk & code cleanup * move variable back to code as it causes render issues * add back code removed by autoformat * fix issue with hours overlapping on small device * non-zero tenants * all ever gifted option for smaller views Co-authored-by: nazariyv <[email protected]>
re-nft · May 1, 2021 · 900c810 · 900c810 · vercel · May 1, 2021
1 parent 4e40bcc
commit 900c810
Show file tree

Hide file tree

Showing 9 changed files with 227 additions and 127 deletions.
diff --git a/components/filters/index.js b/components/filters/index.js
@@ -13,6 +13,8 @@ export default function Filters() {
     switch (e.target.value.toLowerCase()) {
       case 'all ever gifted':
         return FILTERS.ALL_EVER_GIFTED;
+      case 'all currently gifted':
+        return FILTERS.ALL_CURRENTLY_GIFTED;
       case 'gifted to me':
         return FILTERS.GIFTED_TO_ME;
       case 'gifted by me':
@@ -40,7 +42,8 @@ export default function Filters() {
             name="tabs"
             className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
           >
-            <option defaultValue>All Ever Gifted</option>
+            <option>All Ever Gifted</option>
+            <option defaultValue>All Currently Gifted</option>
             <option>Gifted To Me</option>
             <option>Gifted By Me</option>
             <option>Owned By Me</option>
@@ -49,6 +52,16 @@ export default function Filters() {
         <div className="hidden sm:block">
           <div className="border-b border-gray-200 mb-8 pb-4">
             <nav className="-mb-px flex space-x-8" aria-label="Tabs">
+              <span
+                className={`cursor-pointer ${
+                  activeFilter === FILTERS.ALL_CURRENTLY_GIFTED
+                    ? activeClassName
+                    : defaultClassName
+                }`}
+                onClick={() => setActiveFilter(FILTERS.ALL_CURRENTLY_GIFTED)}
+              >
+                All Currently Gifted
+              </span>
               <span
                 className={`cursor-pointer ${
                   activeFilter === FILTERS.ALL_EVER_GIFTED
@@ -57,7 +70,7 @@ export default function Filters() {
                 }`}
                 onClick={() => setActiveFilter(FILTERS.ALL_EVER_GIFTED)}
               >
-                All Currently Gifted
+                All Ever Gifted
               </span>
               <span
                 className={`cursor-pointer ${

diff --git a/components/grid/index.js b/components/grid/index.js
@@ -19,17 +19,23 @@ ListItemPunk.propTypes = {
 };
 
 export default function Grid({ setModalOpen }) {
-  const { giftedPunks, iGiftedPunks, giftedToMePunks, ownedPunks } = useContext(
-    PunkContext
-  );
+  const {
+    giftedPunks,
+    iGiftedPunks,
+    giftedToMePunks,
+    ownedPunks,
+    allGiftedPunks,
+  } = useContext(PunkContext);
   const { activeFilter } = useContext(FiltersContext);
 
   const punks = useMemo(() => {
     switch (activeFilter) {
       case FILTERS.I_GIFTED_TENANT_RIGHTS:
         return iGiftedPunks;
-      case FILTERS.ALL_EVER_GIFTED:
+      case FILTERS.ALL_CURRENTLY_GIFTED:
         return giftedPunks;
+      case FILTERS.ALL_EVER_GIFTED:
+        return allGiftedPunks;
       case FILTERS.GIFTED_TO_ME:
         return giftedToMePunks;
       case FILTERS.OWNED_BY_ME:

diff --git a/components/punk-item/index.js b/components/punk-item/index.js
@@ -12,14 +12,41 @@ const defaultClassName =
 const activeClassName =
   'ring-2 ring-offset-2 ring-purple-500 cursor-not-allowed ' + baseClassName;
 
+const monthNames = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+function formatAMPM(date) {
+  let hours = date.getHours();
+  let minutes = date.getMinutes();
+  const ampm = hours >= 12 ? 'pm' : 'am';
+  hours = hours % 12;
+  hours = hours || 12; // the hour '0' should be '12'
+  minutes = minutes < 10 ? '0' + minutes : minutes;
+  const strTime = hours + ':' + minutes + ' ' + ampm;
+  return strTime;
+}
+
 export default function Punk({ punk, setModalOpen }) {
   const { activePunk, setActivePunk } = useContext(PunkContext);
 
   const handleClick = useCallback(() => {
     setActivePunk(punk);
     setModalOpen(true);
   }, [setActivePunk]);
-
+  const startDate = new Date(punk.start * 1000);
+  const endDate = new Date(punk.end * 1000);
   return (
     <div>
       <div
@@ -37,20 +64,49 @@ export default function Punk({ punk, setModalOpen }) {
           className="group-hover:opacity-75 object-cover pointer-events-none"
         />
       </div>
-      <p className="mt-2 block text-sm font-medium text-gray-900 truncate pointer-events-none">
+      <p className="mt-4 pb-2 mb-4 block text-2xl font-medium text-gray-900 truncate pointer-events-none flex justify-center border-b-2 border-gray-500">
         #{punk.punkID}
       </p>
       {punk.tenant && (
         <>
-          <p className="block text-sm font-medium text-gray-500 pointer-events-none">
-            Offered to {short(punk.tenant)} for {punk.rentLengthInDays} days
-          </p>
-          <p className="block text-sm font-medium text-gray-500 pointer-events-none">
-            Tenant occupied on {String(new Date(punk.start * 1000))}
-          </p>
-          <p className="block text-sm font-medium text-gray-500 pointer-events-none">
-            Lease expires on {String(new Date(punk.end * 1000))}
+          <p className="block text-sm font-medium pointer-events-none lg:grid grid-cols-2">
+            <span className="cols-1 text-gray-500  text-sm lg:flex items-center justify-start">
+              Offered to{' '}
+            </span>
+            <span className="cols-1 text-sm lg:flex items-center justify-end font-bold">
+              {short(punk.tenant)}
+            </span>
           </p>
+          <div className="mt-4 grid grid-cols-3 gap-1">
+            <p className="cols-1 pointer-events-none">
+              <span className="flex items-start justify-start flex-col">
+                <span className="font-semibold">
+                  {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>
+            </p>
+            <p className="cols-1 flex justify-center items-center pointer-events-none">
+              -
+            </p>
+            <p className="cols-1 pointer-events-none">
+              <span className="flex items-end justify-end flex-col">
+                <span className="font-semibold">
+                  {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>
+            </p>
+          </div>
+          <div className="flex justify-center items-center mt-2 font-medium flex-col">
+            <p className="pointer-events-none">{punk.rentLengthInDays} days</p>
+          </div>
         </>
       )}
     </div>

diff --git a/contexts/filters.js b/contexts/filters.js
@@ -2,14 +2,15 @@ import React, { createContext, useState } from 'react';
 import PropTypes from 'prop-types';
 
 export const FILTERS = {
+  ALL_CURRENTLY_GIFTED: 'ALL_CURRENTLY_GIFTED',
   ALL_EVER_GIFTED: 'ALL_EVER_GIFTED',
   I_GIFTED_TENANT_RIGHTS: 'I_GIFTED_TENANT_RIGHTS',
   GIFTED_TO_ME: 'GIFTED_TO_ME',
   OWNED_BY_ME: 'OWNED_BY_ME',
 };
 
 const DefaultFilters = {
-  activeFilter: FILTERS.ALL_EVER_GIFTED,
+  activeFilter: FILTERS.ALL_CURRENTLY_GIFTED,
 };
 
 const FiltersContext = createContext(DefaultFilters);