fixed ui and refactored days left calculations

Author: mrowe009

src/components/Card.js

@@ -97,7 +97,7 @@ const useStyles = createUseStyles(theme => ({
     '&::before': cardTitle(theme.spacing(2), 'AMEX')
   },
   mini: {
-    padding: '2px 6px',
+    padding: '4px 10px',
     boxShadow: 'none',
     borderRadius: '6px',
     '&::before': {

src/modules/home/util.js

@@ -19,7 +19,7 @@ export const useHomeViewStyles = createUseStyles(theme => ({
     margin: theme.spacing(0, 'auto'),
     display: 'flex',
     flexDirection: 'column',
-    justifyContent: 'space-evenly',
+    justifyContent: 'space-around',
     position: 'relative',
     background: theme.linearGradient('var(--ion-color-primary)', 'var(--ion-color-secondary)'),
     boxShadow: '0px 4px 10px -4px var(--black)',
@@ -30,12 +30,10 @@ export const useHomeViewStyles = createUseStyles(theme => ({
     paddingBottom: theme.spacing(7)
   },
   dueDateContainer: {
-    width: '70%',
+    width: '100%',
     padding: theme.spacing(1, 0),
     margin: theme.spacing(2, 'auto'),
-    backgroundColor: 'var(--alpha25)',
     borderRadius: 'var(--borderRadius)',
-    boxShadow: '0px 2px 5px -2px var(--black)',
     '& > .swiper-pagination': {
       bottom: '5px'
     }
@@ -76,7 +74,6 @@ export const useHomeHooks = () => {
       )(cards),
     [cards]
   )
-  console.log(daysLeft)
 
   return {
     amountLeft,

src/modules/home/views/HomeView.js

@@ -50,12 +50,11 @@ const Home = () => {
           <IonSlide key={c._id} className={classes.slide}>
             <Card small type={c.type} className={classes.miniCard} />
             <IonText align="left">
-              <p>{c.name}</p>
+              <p variant="subtitle1">{c.name}</p>
               <p variant="caption" color="textSecondary">
                 {c.text}
               </p>
             </IonText>
-            <div />
           </IonSlide>
         ))(daysLeft)}
       </IonSlides>

src/utils/helper.js

@@ -5,4 +5,4 @@ export const useToolbarTransition = () => {
   const scrollHandler = useCallback(e => toggleStyle(e.detail.scrollTop > 30), [])
 
   return { toolbarTransition, scrollHandler }
-}
+}

src/utils/normalizer.js

@@ -1,24 +1,31 @@
 import dayjs from 'dayjs'
+import cond from 'lodash/fp/cond'
+import some from 'lodash/fp/some'
+import isEqual from 'lodash/fp/isEqual'
 import replace from 'lodash/fp/replace'
+import stubTrue from 'lodash/fp/stubTrue'
 
 export const formatDate = (date, format = 'M/D/YYYY') => dayjs(date).format(format)
 
 export const pluralize = (count, string) => (1 === count ? string : `${string}s`)
 
+export const or = (...func) => val => some(f => f(val))(func)
+
+export const customConstant = text => count => ({ text, count })
+
+const _determineDays = cond([
+  [or(isEqual(15), isEqual(0)), customConstant('Submit Payment Today')],
+  [isEqual(1), customConstant('Payment Due Tomorrow')],
+  [stubTrue, v => customConstant(`${v >= 15 ? v - 15 : v} days left`)(v)]
+])
+
 export const calculateDays = dueDate => {
   const now = new Date()
   const nextPaymentDate =
     dayjs().date() <= dueDate ? dayjs().set('date', dueDate) : dayjs().set('date', dueDate).add(1, 'month')
   const difference = dayjs(nextPaymentDate).diff(now, 'day')
 
-  if (difference === 15 || difference === 0) {
-    return 'Submit Payment Today'
-  }
-
-  const _daysLeftCount = difference >= 15 ? difference - 15 : difference
-
-  if (_daysLeftCount === 1) return 'Payment Due Tomorrow'
-  return { count: _daysLeftCount, text: `${_daysLeftCount} days left` }
+  return _determineDays(difference)
 }
 
 export const currency = number => `$${(number / 100).toFixed(2)}`