changed styling and behavior for wallet view

README.md

@@ -4,7 +4,8 @@
 
 - [ ] Auto refresh user info when user added into a group
 - [ ] Add billing
-- [ ] Add Wallet
+- [x] Add Wallet
+- [ ] Add Card details
 - [ ] Implement Notifications
 - [ ] Add Routing Transitions
 

src/modules/navigation/Navigation.js

@@ -8,6 +8,7 @@ import LoginView from 'modules/authentication/views/LoginView'
 import HomeView from 'modules/home/views/HomeView'
 import WalletView from 'modules/wallet/views/WalletView'
 import NewCardView from 'modules/wallet/views/NewCardView'
+import CardDetailsView from 'modules/wallet/views/CardDetailsView'
 // import BillsView from 'modules/bills/views/BillsView'
 // import NewBillView from 'modules/bills/views/NewBillView'
 import NewTransactionView from 'modules/transaction/views/NewTransactionView'
@@ -39,6 +40,7 @@ export const Navigation = () => {
         <PageRoute path={routes.home} component={HomeView} />
         <PageRoute path={routes.wallet} component={WalletView} />
         <PageRoute path={routes.newCard} component={NewCardView} />
+        <PageRoute path={routes.cardView()} component={CardDetailsView} />
         {/* <PageRoute path={routes.bills} component={BillsView} /> */}
         <PageRoute path={routes.profile} component={ProfileView} />
         <PageRoute path={routes.updateAccount} component={UpdateAccountView} />

src/modules/wallet/util.js

@@ -24,9 +24,11 @@ export const initialNewCard = {
 export const useWalletStyles = createUseStyles(theme => ({
   container: {
     marginTop: theme.spacing(2.5),
-    '& .swiper-container': {
-      overflow: 'visible'
-    }
+    paddingBottom: theme.spacing(10),
+    gap: theme.spacing(2),
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'column'
   },
   icons: {
     fontSize: theme.spacing(3)

src/modules/wallet/views/CardDetailsView.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+import { PageContainer } from 'template'
+
+const CardDetails = () => {
+  return <PageContainer>hello</PageContainer>
+}
+
+export default CardDetails

src/modules/wallet/views/WalletView.js

@@ -1,75 +1,39 @@
-import React, { useCallback, useRef, useMemo } from 'react'
-import { IonAlert, IonSlides, IonSlide } from '@ionic/react'
-import { useToggle, useLongPress } from 'react-use'
+import React from 'react'
+import { IonItem } from '@ionic/react'
 import map from 'lodash/fp/map'
 
 import { useWalletStyles } from '../util'
 import { useWallet } from '../hooks'
 import routes from 'routes'
 import { Fab, Card } from 'components'
 import { PageContainer } from 'template'
-import { hash } from 'utils'
-import { useUpdateUser } from 'modules/user'
-
-const slideOpts = {
-  slidesPerView: 1.1,
-  initialSlide: 0,
-  spaceBetween: 20,
-  centeredSlides: true
-}
+import { SlideInLeft } from 'animation'
 
 const Wallet = () => {
   const classes = useWalletStyles()
-  const ref = useRef()
   const { cards, defaultCard, loading } = useWallet()
-  const [setDefaultAlert, toggleDefaultAlert] = useToggle(false)
-  const key = useMemo(() => hash(JSON.stringify(cards)), [cards])
-
-  const openPopover = useCallback(() => toggleDefaultAlert(true), [toggleDefaultAlert])
-  const closePopover = useCallback(() => toggleDefaultAlert(false), [toggleDefaultAlert])
-
-  const [updateUser] = useUpdateUser()
-
-  const setCardAsDefault = useCallback(async () => {
-    const index = await ref?.current?.getActiveIndex()
-    updateUser({ defaultCard: cards[index].id })
-  }, [ref, cards, updateUser])
-
-  const longPressEvent = useLongPress(openPopover, { delay: 500 })
-
-  const alertButtons = useMemo(
-    () => [
-      { text: 'No', role: 'cancel' },
-      { text: 'Yes', handler: setCardAsDefault }
-    ],
-    [setCardAsDefault]
-  )
 
   return (
     <PageContainer className={classes.container}>
-      <IonSlides key={key} ref={ref} options={slideOpts} onIonSlideDrag={longPressEvent.onTouchEnd}>
-        {!loading && cards.length === 0 && (
-          <div className={classes.emptyWallet}>
-            <h6 align="center">No Cards added</h6>
-          </div>
-        )}
-        {map(card => (
-          <IonSlide key={card.id}>
-            <div {...(defaultCard !== card.id && longPressEvent)}>
-              <Card isDefault={defaultCard === card.id} {...card} />
-            </div>
-          </IonSlide>
-        ))(cards)}
-      </IonSlides>
+      {!loading && cards.length === 0 && (
+        <div className={classes.emptyWallet}>
+          <h6 align="center">No Cards added</h6>
+        </div>
+      )}
+      {map(card => (
+        <IonItem
+          key={card.id}
+          // detail
+          lines="none"
+          color="transparent"
+          routerAnimation={SlideInLeft}
+          // routerLink={routes.cardView(card.id)}
+        >
+          <Card isDefault={defaultCard === card.id} {...card} />
+        </IonItem>
+      ))(cards)}
 
       <Fab routerLink={routes.newCard} />
-
-      <IonAlert
-        isOpen={setDefaultAlert}
-        onDidDismiss={closePopover}
-        message="Set Card as Default?"
-        buttons={alertButtons}
-      />
     </PageContainer>
   )
 }

src/routes.js

@@ -4,6 +4,7 @@ const routes = {
   home: '/home',
   wallet: '/wallet',
   newCard: '/new-card',
+  cardView: (id = ':id') => `/card-details/${id}`,
   bills: '/bills',
   newBill: '/new-bill',
   profile: '/profile',