From 11471bb6295d14ac4f87de3f69cdc454b5aa5030 Mon Sep 17 00:00:00 2001 From: Justin Miller Date: Fri, 4 Oct 2019 15:35:11 -0400 Subject: [PATCH] JM - Added attention grabbing CSS to the calendar date. Also made it so the date value displayed is based on the data relevant to the wish instead of hardcoded --- ui/src/wishList/wish/index.js | 126 +++++++++++++++-------------- ui/src/wishList/wish/index.test.js | 40 +++++++++ ui/src/wishList/wish/styles.scss | 21 ++++- 3 files changed, 124 insertions(+), 63 deletions(-) diff --git a/ui/src/wishList/wish/index.js b/ui/src/wishList/wish/index.js index c90b951..3e489c9 100644 --- a/ui/src/wishList/wish/index.js +++ b/ui/src/wishList/wish/index.js @@ -1,77 +1,83 @@ import React from 'react' import './styles.scss' import ImgPlaceholder from '../imgPlaceholder' -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faChevronRight } from '@fortawesome/free-solid-svg-icons' +import {FontAwesomeIcon} from '@fortawesome/react-fontawesome' +import {faChevronRight} from '@fortawesome/free-solid-svg-icons' import Rocket from '../../assets/images/icn_To_Go_Rocket_130x130.png' import Alien from '../../assets/images/icn_To_Meet_Alien_White_Inside_130x130.png' import Astronaut from '../../assets/images/icn_To_Be_Astronaut_130x130.png' import Telescope from '../../assets/images/icn_To_See_Telescope_White_Inside_130x130.png' -const Wish = ({ wish, history }) => { - const { child, sponsor, details } = wish +const Wish = ({wish, history}) => { + const {child, sponsor, details} = wish - const handleWishClick = id => { - const url = `/wish-summary/${id}` - history.push(url) - } + const isToday = date => { + let paramDate = new Date(date); + let today = new Date(); + return paramDate.getDate() === today.getDate() && paramDate.getMonth() === today.getMonth() && paramDate.getFullYear() === today.getFullYear(); + } + + const handleWishClick = id => { + const url = `/wish-summary/${id}` + history.push(url) + } - const getImageSource = wish => { - switch (wish.type.toLowerCase()) { - case 'go': - return Rocket - case 'meet': - return Alien - case 'be': - return Astronaut - case 'have': - return Telescope - default: - return '' + const getImageSource = wish => { + switch (wish.type.toLowerCase()) { + case 'go': + return Rocket + case 'meet': + return Alien + case 'be': + return Astronaut + case 'have': + return Telescope + default: + return '' + } } - } - const getWishType = wish => { - switch (wish.type.toLowerCase()) { - case 'go': - return 'To Go' - case 'meet': - return 'To Meet' - case 'be': - return 'To Be' - case 'have': - return 'To Have' - default: - return '' + const getWishType = wish => { + switch (wish.type.toLowerCase()) { + case 'go': + return 'To Go' + case 'meet': + return 'To Meet' + case 'be': + return 'To Be' + case 'have': + return 'To Have' + default: + return '' + } } - } - return ( -
  • handleWishClick(wish._id)}> -
    18
    - {child.image ? ( - child - ) : ( - - )} -
    -

    - {child.name} - Age {child.age} from {child.hometown} -

    - {details} -
    - {sponsor.logo ? ( - Sponsor - ) : ( -

    Add Sponsor

    - )} -
    - {wish.type} - {getWishType(wish)} -
    - -
    • - ) + return ( +
  • handleWishClick(wish._id)}> +
    {new Date(wish.createdAt).getDate()}
    + {child.image ? ( + child + ) : ( + + )} +
    +

    + {child.name} - Age {child.age} from {child.hometown} +

    + {details} +
    + {sponsor.logo ? ( + Sponsor + ) : ( +

    Add Sponsor

    + )} +
    + {wish.type}/ + {getWishType(wish)} +
    + +
    • +) } export default Wish diff --git a/ui/src/wishList/wish/index.test.js b/ui/src/wishList/wish/index.test.js index 329aa11..4277488 100644 --- a/ui/src/wishList/wish/index.test.js +++ b/ui/src/wishList/wish/index.test.js @@ -26,6 +26,46 @@ describe('Wish tests', () => { }) }) +describe('isToday', () => { + let wish; + let historyMock; + + beforeEach(() => { + wish = { + child: { + name: 'Jerel Weber', + age: 5, + hometown: 'North Robertside', + illness: 'SMTP' + }, + sponsor: { + links: [] + }, + _id: '5d0528c11170183ea576e3da', + type: 'be', + details: 'overriding calculating Shirt', + __v: 0, + createdAt: new Date() + } + + historyMock = { push: jest.fn() }; + }) + + it('should return true if passed in date equals current date', () => { + const testWish = Wish({wish, historyMock}); + + expect(JSON.stringify(testWish)).toContain('date-now'); + }) + + it('should return true if passed in date equals current date', () => { + const oldDate = new Date().getDate() - 2; + wish.createdAt = oldDate; + const testWish = Wish({wish, historyMock}); + + expect(JSON.stringify(testWish)).not.toContain('date-now'); + }) +}) + describe('handle wish click', () => { const wish = { child: { diff --git a/ui/src/wishList/wish/styles.scss b/ui/src/wishList/wish/styles.scss index dad7383..9c33d3b 100644 --- a/ui/src/wishList/wish/styles.scss +++ b/ui/src/wishList/wish/styles.scss @@ -10,11 +10,9 @@ box-shadow: 0 8px 6px -6px $light-gray; margin-bottom: 0.6em; - .date { + .date, .date-now { width: 2.5em; height: 2.5em; - border: 0.4em solid $medium-blue; - border-top: 1em solid $medium-blue; border-radius: .5em; font-weight: bold; display: flex; @@ -23,6 +21,23 @@ font-size: 1.2em; } + .date { + border: 0.4em solid $medium-blue; + border-top: 1em solid $medium-blue; + } + + .date-now { + border: 0.4em solid $yellow; + border-top: 1em solid $yellow; + animation: border-pulsate 2s infinite; + } + + @keyframes border-pulsate { + 0% { border-color: $red; } + 50% { border-color: $medium-blue; } + 100% { border-color: $red; } + } + .summary { font-size: .7em; }