Refactor (deptagency#402)

* fixes to themeContext and enable themes in production themeContext needed to wait until there's a window before initializing the theme. Also added a listener to OS theme changes when using OS theme so it updates without refresh. * style fixes WIP * fix select so it doesn't show a bunch of whitespace to the left if an icon isn't provided * fix select z-indexing and darkmode styles * align select content to left * Add Theme select to My Profile Also write a new Select component with a more standard API. * jk about fullWidth * nope * add support for uncontrolled use of Select * make it possible to log out on mobile * remove unused import * Update card-form.tsx * fix dark mode styles * update BankAccountForm countries Select input * address feedback * make this less annoying on screen readers * remove dead code * clean up dead code * don't blow up when no options are provided. * Select refactor + a bunch of cleanup in the purchase flows. * lord this is so much better * fix redirect after signup * Use PaymentProvider & context (deptagency#404) * Actually use PaymentProvider and context and start removing prop drilling * keep chipping away * getting close * so close * hoooooo boy * time for finishing touches * add missing prop and make file name consistent with export * urlFor * remove props that are already defaulted * urlFor * one more * same thing * fix redeem styles * remove unused import * make sure we're comparing the same keys * remove unused import * cms seed: stagger pack release times by 1 minute for sortability * cypress tests for releases page * clean up redundant logic * rename select-input -> select * rename key -> value in SelectOptions * simplify text-input and currency-input small variant styles * Delete button-group.tsx
kfarrelly · Apr 11, 2022 · 1ef79bc · 1ef79bc
1 parent 177dac8
commit 1ef79bc
Show file tree

Hide file tree

Showing 55 changed files with 583 additions and 1,246 deletions.
diff --git a/apps/cms/scripts/seed-data/factories.mjs b/apps/cms/scripts/seed-data/factories.mjs
@@ -57,7 +57,10 @@ Factory.define('pack')
   .attr('nft_distribution', 'one-of-each')
   .attr('nfts_per_pack', null)
   .attr('price', 1000)
-  .attr('released_at', new Date().toISOString())
+  .sequence('released_at', (seq) => 
+    // stagger release times by 1 minute for sortability
+    new Date(Date.now() + 1000 * 60 * seq).toISOString()
+  )
   .attr('type', ['idx'], (idx) => {
     const types = ['free', 'redeem', 'purchase', 'auction']
     return types[idx % types.length]

diff --git a/apps/cms/scripts/utils.mjs b/apps/cms/scripts/utils.mjs
@@ -4,7 +4,6 @@ import axios from 'axios'
 import 'dotenv/config'
 import path from 'node:path'
 import { exec } from 'node:child_process'
-import { readFile } from 'node:fs'
 import { createInterface } from 'node:readline'
 import * as stream from 'node:stream'
 import PureImage from 'pureimage'

diff --git a/apps/web-e2e/src/integration/04-releases.spec.ts b/apps/web-e2e/src/integration/04-releases.spec.ts
@@ -0,0 +1,40 @@
+import { stringify } from 'query-string'
+
+describe('releases page', () => {
+  it('should render', () => {
+    cy.visit('/releases')
+    cy.location('pathname').should('eq', '/releases')
+    cy.get('input[value="Newest"]').should('exist')
+    cy.get('[href="/releases/pack-7"]').should('be.visible')
+  })
+  it('should respect filter query params', () => {
+    const query = {
+      priceHigh: '45600',
+      priceLow: '123',
+      sortMode: 'Oldest',
+      showAuction: 'true',
+      showPurchase: 'false',
+      showAuctionUpcoming: 'false',
+      showAuctionActive: 'false',
+      showAuctionExpired: 'false',
+      showAuctionReserveMet: 'true',
+    }
+    cy.visit(`/releases?${stringify(query)}`)
+    cy.location('pathname').should('eq', '/releases')
+    cy.get('input[value="$1.23"]').should('exist')
+    cy.get('input[value="$456.00"]').should('exist')
+    cy.get('input[value="Oldest"]').should('exist')
+    cy.get('button[aria-checked="false"]').contains('Purchase').should('exist')
+    cy.get('button[aria-checked="true"]').contains('Auction').should('exist')
+    cy.get('button[aria-checked="false"]')
+      .contains('Starting soon')
+      .should('exist')
+    cy.get('button[aria-checked="false"]')
+      .contains('Auction is live')
+      .should('exist')
+    cy.get('button[aria-checked="false"]').contains('Has ended').should('exist')
+    cy.get('button[aria-checked="true"]')
+      .contains('Reserve met')
+      .should('exist')
+  })
+})
diff --git a/apps/web-e2e/src/support/commands.ts b/apps/web-e2e/src/support/commands.ts
@@ -13,10 +13,8 @@ import { configure } from '@testing-library/cypress'
 configure({})
 
 /*
- *
  * Custom command for initiating the creation of a user
- * @example cy.createUser()
- *
+ * @example cy.createUser({ ... })
  */
 Cypress.Commands.add(
   'createUser',
@@ -28,10 +26,8 @@ Cypress.Commands.add(
 )
 
 /*
- *
  * Custom command for cleaning up test users
- * @example cy.cleanupUser()
- *
+ * @example cy.cleanupUser('user@email.com')
  */
 Cypress.Commands.add('cleanupUser', (email: string) => {
   return cy.exec('node ./src/utils/cleanupUser.js', {
@@ -40,10 +36,8 @@ Cypress.Commands.add('cleanupUser', (email: string) => {
 })
 
 /*
- *
  * Custom command for verifying a user's email
- * @example cy.verifyEmail()
- *
+ * @example cy.verifyEmail('user@email.com')
  */
 Cypress.Commands.add('verifyEmail', (email: string) => {
   return cy.exec('node ./src/utils/cleanupUser.js', {

diff --git a/apps/web/src/components/auth-inputs/auth-inputs.tsx b/apps/web/src/components/auth-inputs/auth-inputs.tsx
@@ -12,7 +12,7 @@ import useTranslation from 'next-translate/useTranslation'
 import React, { ReactNode, useEffect, useState } from 'react'
 import { useDropzone } from 'react-dropzone'
 
-import Select, { SelectOption } from '../select-input/select-input'
+import Select, { SelectOption } from '../select/select'
 
 import css from './auth-inputs.module.css'
 
@@ -59,7 +59,7 @@ export function Currency({
           Object.keys(currencyConversions).includes(dineroCurrencyKey)
         )
         .map((targetCurrency) => ({
-          key: targetCurrency,
+          value: targetCurrency,
           label: targetCurrency,
         }))
       setOptions(intersection)
@@ -125,15 +125,15 @@ export function Language({
 
         setOptions(
           i18nStateLanguages.map((language) => ({
-            key: language.languages_code,
+            value: language.languages_code,
             label: language.label,
           }))
         )
       } catch {
         // if service fails, at least let them set English
         setOptions([
           {
-            key: DEFAULT_LANG,
+            value: DEFAULT_LANG,
             label: t('common:global.language'),
           },
         ])
@@ -273,9 +273,7 @@ export function ProfileImage({
             <div className={css.profileImageChange}>
               <div {...getRootProps()}>
                 <input {...getInputProps()} />
-                <Button size="small" type="button">
-                  {t('common:actions.Change')}
-                </Button>
+                <Button size="small">{t('common:actions.Change')}</Button>
               </div>
               <Button
                 className={css.profileImageRemove}
@@ -292,9 +290,7 @@ export function ProfileImage({
           ) : (
             <div {...getRootProps()}>
               <input {...getInputProps()} />
-              <Button size="small" type="button">
-                {t('common:actions.Select Image')}
-              </Button>
+              <Button size="small">{t('common:actions.Select Image')}</Button>
             </div>
           )}
         </div>

diff --git a/apps/web/src/components/button-group.tsx b/apps/web/src/components/button-group.tsx
diff --git a/apps/web/src/components/collectibles/no-collectibles-content.tsx b/apps/web/src/components/collectibles/no-collectibles-content.tsx
@@ -7,11 +7,11 @@ import CollectiblePlaceholder from '@/components/collectibles/collectible-placeh
 import Heading from '@/components/heading'
 
 export interface NoCollectiblesContentProps {
-  handleRedirect(): void
+  onRedirect(): void
 }
 
 export default function NoCollectiblesContent({
-  handleRedirect,
+  onRedirect,
 }: NoCollectiblesContentProps) {
   const { t } = useTranslation()
   return (
@@ -28,7 +28,7 @@ export default function NoCollectiblesContent({
         {t('collection:viewer.startCollection')}
       </Heading>
 
-      <Button onClick={handleRedirect}>
+      <Button onClick={onRedirect}>
         {t('collection:viewer.Find Something Cool')}
       </Button>
     </div>

diff --git a/apps/web/src/components/collectibles/set-header.tsx b/apps/web/src/components/collectibles/set-header.tsx
@@ -5,7 +5,7 @@ import css from './collection-header.module.css'
 
 import AppLink from '@/components/app-link/app-link'
 import Heading from '@/components/heading'
-import { urls } from '@/utils/urls'
+import { urlFor, urls } from '@/utils/urls'
 
 export interface SetHeaderProps {
   set: SetBase
@@ -18,16 +18,14 @@ export default function SetHeader({
   collectionSlug,
   collectionName,
 }: SetHeaderProps) {
+  const myCollectionUrl = urlFor(urls.myCollection, { collectionSlug })
   return (
     <div className={css.root}>
       <Heading className={css.heading}>{set.name}</Heading>
       <Trans
         components={[
           <p className={css.subHeading} key={0} />,
-          <AppLink
-            key={1}
-            href={urls.myCollection.replace(':collectionSlug', collectionSlug)}
-          />,
+          <AppLink key={1} href={myCollectionUrl} />,
         ]}
         i18nKey="collection:collectionPage.Part of Collection"
         values={{ name: collectionName }}

diff --git a/apps/web/src/components/currency-input/currency-input.tsx b/apps/web/src/components/currency-input/currency-input.tsx
@@ -55,32 +55,15 @@ export default function CurrencyInput({
     />
   )
   return label ? (
-    <label htmlFor={id} className={css.labelContainer}>
-      <span
-        className={clsx(css.label, {
-          [css.labelSmall]: variant === 'small',
-        })}
-      >
-        {label}
-      </span>
-      {error && (
-        <span
-          className={clsx(css.errorText, {
-            [css.errorTextSmall]: variant === 'small',
-          })}
-        >
-          {error}
-        </span>
-      )}
-      {!error && helpText && (
-        <span
-          className={clsx(css.helpText, {
-            [css.helpTextSmall]: variant === 'small',
-          })}
-        >
-          {helpText}
-        </span>
-      )}
+    <label
+      htmlFor={id}
+      className={clsx(css.labelContainer, {
+        [css.small]: variant === 'small',
+      })}
+    >
+      <span className={css.label}>{label}</span>
+      {error && <span className={css.errorText}>{error}</span>}
+      {!error && helpText && <span className={css.helpText}>{helpText}</span>}
       {inputField}
     </label>
   ) : (

diff --git a/apps/web/src/components/login-panel/login-panel.module.css b/apps/web/src/components/login-panel/login-panel.module.css
@@ -1,15 +1,14 @@
 .root {
-  /* Base */
   @apply relative mx-auto;
   /* Tablet + */
-  @apply md:max-w-520 md:overflow-hidden md:rounded-xl;
+  @apply md:overflow-hidden;
 }
 
 .buttonContainer {
-  /* Base */
-  @apply flex flex-col px-8 py-12 space-y-8;
+  @apply flex flex-col px-8 py-12 mx-auto space-y-8;
   /* Mobile + */
   @apply sm:p-16;
+  @apply md:max-w-520;
 }
 
 .button img {
@@ -25,10 +24,7 @@
 }
 
 .featuredBottom {
-  /* Base */
-  @apply relative px-8 py-12 mx-auto;
-  /* Mobile + */
-  @apply sm:px-24;
+  @apply relative py-12 mx-auto;
 }
 
 .featuredBottomText {

diff --git a/apps/web/src/components/pack-grid/pack-item.module.css b/apps/web/src/components/pack-grid/pack-item.module.css
@@ -1,5 +1,5 @@
 .root {
-  @apply relative w-full h-full p-0 text-black duration-300 bg-white border rounded-md opacity-100 border-base-border shadow-medium;
+  @apply relative w-full h-full p-0 duration-300 rounded-md opacity-100 text-base-textPrimary bg-base-bgCard shadow-medium dark:border-0;
 }
 
 .column {
@@ -23,7 +23,7 @@
 }
 
 .informationWrapper {
-  @apply text-center rounded-b-sm text-base-textPrimary bg-base-bg;
+  @apply text-center rounded-b-sm text-base-textPrimary;
 }
 
 .information {

diff --git a/apps/web/src/components/profile/my-profile-nav.tsx b/apps/web/src/components/profile/my-profile-nav.tsx
@@ -8,7 +8,7 @@ import Button from '../button'
 import css from './my-profile-nav.module.css'
 
 import AppLink from '@/components/app-link/app-link'
-import Select, { SelectOption } from '@/components/select-input/select-input'
+import Select, { SelectOption } from '@/components/select/select'
 import { useAuth } from '@/contexts/auth-context'
 import { useRedemption } from '@/contexts/redemption-context'
 import useAdmin from '@/hooks/use-admin'
@@ -45,25 +45,25 @@ export default function ProfileNav({ screen }: ProfileNavProps) {
   }, [auth, push, setRedeemable])
 
   const navItems = [
-    { key: urls.myProfile, label: t('common:pageTitles.My Profile') },
-    { key: urls.myProfileSecurity, label: t('common:pageTitles.Security') },
+    { value: urls.myProfile, label: t('common:pageTitles.My Profile') },
+    { value: urls.myProfileSecurity, label: t('common:pageTitles.Security') },
     {
-      key: urls.myProfilePaymentMethods,
+      value: urls.myProfilePaymentMethods,
       label: t('common:pageTitles.Payment Methods'),
     },
     {
-      key: urls.myProfileTransactions,
+      value: urls.myProfileTransactions,
       label: t('common:pageTitles.Transactions'),
     },
     {
-      key: urls.myProfileImportNFT,
+      value: urls.myProfileImportNFT,
       label: t('common:pageTitles.Import NFT'),
     },
   ] as SelectOption[]
 
   if (isAdmin) {
     navItems.push({
-      key: urls.admin.index,
+      value: urls.admin.index,
       label: t('common:pageTitles.Admin'),
     })
   }
@@ -81,7 +81,7 @@ export default function ProfileNav({ screen }: ProfileNavProps) {
           options={[
             ...navItems,
             {
-              key: LOG_OUT,
+              value: LOG_OUT,
               label: t('common:actions.Sign Out'),
             },
           ]}
@@ -90,15 +90,15 @@ export default function ProfileNav({ screen }: ProfileNavProps) {
       </div>
       <div className={css.desktopWrapper}>
         <ul className={css.listWrapper}>
-          {navItems.map(({ key, label }) => (
+          {navItems.map(({ value, label }) => (
             <li
               className={clsx(css.listItem, {
                 [css.listItemActive]:
-                  key === pathname || `${key}/add` === pathname,
+                  value === pathname || `${value}/add` === pathname,
               })}
-              key={key}
+              key={value}
             >
-              <AppLink href={key}>{label}</AppLink>
+              <AppLink href={value}>{label}</AppLink>
             </li>
           ))}
         </ul>