#3172: Add dayClick prop, events are links

NCI-Agency · Sep 4, 2020 · 01a4b05 · 01a4b05
1 parent f745e9a
commit 01a4b05
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 34 deletions.
diff --git a/client/src/components/Calendar/Calendar.js b/client/src/components/Calendar/Calendar.js
@@ -14,7 +14,7 @@ import { useHistory } from "react-router-dom"
  * @param {string[]} views - what view types you want to use
  * @param {function} eventClick - what should happen when event is clicked on calendar
  */
-const Calendar = ({ events, views, eventClick }) => {
+const Calendar = ({ events, views, eventClick, dayClick }) => {
   const [state, dispatch] = useReducer(reducer, initState)
   return (
     <div className="Calendar">
@@ -28,6 +28,7 @@ const Calendar = ({ events, views, eventClick }) => {
           viewYear={state.viewDate}
           events={events}
           eventClick={eventClick}
+          dayClick={dayClick}
         />
       )}
       {state.view === VIEWS.MONTHLY && (
@@ -37,6 +38,7 @@ const Calendar = ({ events, views, eventClick }) => {
           dispatcher={dispatch}
           events={events}
           eventClick={eventClick}
+          dayClick={dayClick}
         />
       )}
     </div>
@@ -46,7 +48,8 @@ const Calendar = ({ events, views, eventClick }) => {
 Calendar.propTypes = {
   events: PropTypes.arrayOf(PropTypes.object),
   views: PropTypes.arrayOf(PropTypes.string),
-  eventClick: PropTypes.func
+  eventClick: PropTypes.func,
+  dayClick: PropTypes.func
 }
 
 // See which available views selected
@@ -60,13 +63,24 @@ function parseViewsOptions(views) {
 }
 
 // FIXME: remove this
-export const CalendarWrapper = () => {
+export const CalendarWrapperToTest = () => {
   const views = ["Monthly", "Yearly"]
   const history = useHistory()
   const eventClickMemo = useCallback(event => history.push(event.url), [
     history
   ])
-  return <Calendar events={events} eventClick={eventClickMemo} views={views} />
+  const dayClickMemo = useCallback(
+    dayInfo => console.log(dayInfo.dailyEvents),
+    []
+  )
+  return (
+    <Calendar
+      events={events}
+      eventClick={eventClickMemo}
+      views={views}
+      dayClick={dayClickMemo}
+    />
+  )
 }
 
 export default Calendar
diff --git a/client/src/components/Calendar/Views/MonthDay.js b/client/src/components/Calendar/Views/MonthDay.js
@@ -1,27 +1,33 @@
 import styled from "@emotion/styled"
+import { format } from "date-fns"
 import PropTypes from "prop-types"
 import React from "react"
 import { countToHeatBgc } from "../utils/helpers"
-
 const MonthDay = ({
-  dayName,
+  date,
   dailyEvents,
   eventClick,
-  onClick,
+  dayClick,
   selected,
   sameMonth
 }) => {
   return (
     <MonthDayBox
       selected={selected}
       // FIXME: maybe go to daily view when implemented
-      onClick={onClick}
+      onClick={() => dayClick({ date, dailyEvents })}
       bgc={countToHeatBgc(dailyEvents.length, { low: 1, mid: 2, color: "red" })}
     >
-      <DayNameBox sameMonth={sameMonth}>{dayName}</DayNameBox>
+      <DayNameBox sameMonth={sameMonth}>{format(date, "d")}</DayNameBox>
       <DayEventsBox>
         {dailyEvents.map(event => (
-          <DayEventBox onClick={() => eventClick(event)} key={event.title}>
+          <DayEventBox
+            onClick={e => {
+              eventClick(event)
+              e.stopPropagation()
+            }}
+            key={event.title}
+          >
             {event.title}
           </DayEventBox>
         ))}
@@ -58,8 +64,9 @@ const DayEventsBox = styled.div`
   justify-content: center;
   align-items: center;
 `
-const DayEventBox = styled.div`
+const DayEventBox = styled.a`
   color: blue;
+  display: block;
   &:not(:first-of-type) {
     border-top: 1px dashed black;
     margin-top: 4px;
@@ -70,10 +77,10 @@ const DayEventBox = styled.div`
 `
 
 MonthDay.propTypes = {
-  dayName: PropTypes.string,
+  date: PropTypes.object,
   dailyEvents: PropTypes.arrayOf(PropTypes.object),
   eventClick: PropTypes.func,
-  onClick: PropTypes.func,
+  dayClick: PropTypes.func,
   selected: PropTypes.bool,
   sameMonth: PropTypes.bool
 }

diff --git a/client/src/components/Calendar/Views/MonthlyView.js b/client/src/components/Calendar/Views/MonthlyView.js
@@ -1,10 +1,8 @@
 import styled from "@emotion/styled"
-import { changeSelectedDay } from "components/Calendar/actions"
 import { getDayNames, renderDayNames } from "components/Calendar/utils/helpers"
 import MonthDay from "components/Calendar/Views/MonthDay"
 import {
   addDays,
-  format,
   isSameDay,
   isSameMonth,
   startOfMonth,
@@ -16,6 +14,7 @@ import React from "react"
 const MonthlyView = ({
   events,
   eventClick,
+  dayClick,
   viewMonth,
   selectedDay,
   dispatcher,
@@ -54,16 +53,15 @@ const MonthlyView = ({
     for (let i = 0; i < numOfDays; i++) {
       const selected = isSameDay(curDay, selectedDay)
       const sameMonth = isSameMonth(curDay, theMonth)
-      const dayName = format(curDay, "d")
       const preventClosureDate = curDay
       const dailyEvents = events.filter(event =>
         isSameDay(event.start, preventClosureDate)
       )
       week.push(
         <MonthDay
-          key={dayName}
-          dayName={dayName}
-          onClick={() => dispatcher(changeSelectedDay(preventClosureDate))}
+          key={preventClosureDate}
+          date={preventClosureDate}
+          dayClick={dayClick}
           selected={selected}
           dailyEvents={dailyEvents}
           eventClick={eventClick}
@@ -78,6 +76,7 @@ const MonthlyView = ({
 MonthlyView.propTypes = {
   events: PropTypes.arrayOf(PropTypes.object),
   eventClick: PropTypes.func,
+  dayClick: PropTypes.func,
   viewMonth: PropTypes.object,
   selectedDay: PropTypes.object,
   dispatcher: PropTypes.func,

diff --git a/client/src/components/Calendar/Views/YearDay.js b/client/src/components/Calendar/Views/YearDay.js
@@ -4,7 +4,7 @@ import { format } from "date-fns"
 import PropTypes from "prop-types"
 import React, { useEffect, useRef, useState } from "react"
 
-const YearDay = ({ dailyEvents, eventClick, date, sameYear }) => {
+const YearDay = ({ dailyEvents, eventClick, dayClick, date, sameYear }) => {
   const [showTooltip, setShowTooltip] = useState(false)
   const [tooltipLeft, setTooltipLeft] = useState(true)
   const dayNode = useRef(null)
@@ -29,8 +29,7 @@ const YearDay = ({ dailyEvents, eventClick, date, sameYear }) => {
         setShowTooltip(sameYear)
       }}
       onMouseLeave={() => setShowTooltip(false)}
-      // FIXME: Add when clicked go to daily view maybe
-      onClick={() => console.log("daily View")}
+      onClick={() => dayClick({ date, dailyEvents })}
       date={format(date, "dd/MM/yyyy")}
       bgc={countToHeatBgc(dailyEvents.length, { low: 1, mid: 2, color: "red" })}
       data-same-year={sameYearAttr}
@@ -61,6 +60,7 @@ const YearDay = ({ dailyEvents, eventClick, date, sameYear }) => {
 YearDay.propTypes = {
   dailyEvents: PropTypes.arrayOf(PropTypes.object),
   eventClick: PropTypes.func,
+  dayClick: PropTypes.func,
   date: PropTypes.object,
   sameYear: PropTypes.bool
 }
@@ -89,16 +89,17 @@ const DayHoverInfo = styled.div`
   left: ${props => (props.tooltipLeft ? "0" : "auto")};
   right: ${props => (props.tooltipLeft ? "auto" : "0")};
   transform: ${props =>
-    props.tooltipLeft ? "translate(-95%, -95%)" : "translate(95%, -95%)"};
+    props.tooltipLeft ? "translate(-90%, -90%)" : "translate(90%, -90%)"};
   border-radius: 8px;
   padding: 5px 5px;
   min-width: 140px;
   min-height: 50px;
   z-index: 20;
 `
 
-const DayEventTitle = styled.div`
+const DayEventTitle = styled.a`
   color: blue;
+  display: block;
   border-top: 1px dashed black;
 `
 

diff --git a/client/src/components/Calendar/Views/YearlyView.js b/client/src/components/Calendar/Views/YearlyView.js
@@ -12,7 +12,13 @@ import PropTypes from "prop-types"
 import React, { useMemo } from "react"
 import { getMonthNames, renderMonthNames } from "../utils/helpers"
 
-const YearlyView = ({ events, eventClick, viewYear, weekStartsOn }) => {
+const YearlyView = ({
+  events,
+  eventClick,
+  dayClick,
+  viewYear,
+  weekStartsOn
+}) => {
   const getDays = useMemo(() => {
     // get 1st of January
     const firstDayOfTheYear = startOfYear(viewYear)
@@ -47,14 +53,15 @@ const YearlyView = ({ events, eventClick, viewYear, weekStartsOn }) => {
             sameYear={sameYear}
             date={preventClosureDate}
             eventClick={eventClick}
+            dayClick={dayClick}
           />
         )
         curDay = addDays(curDay, 1)
       }
       return week
     }
     return yearDays
-  }, [viewYear, events, eventClick, weekStartsOn])
+  }, [viewYear, events, eventClick, dayClick, weekStartsOn])
 
   return (
     <YearlyViewBox>
@@ -71,6 +78,7 @@ const YearlyView = ({ events, eventClick, viewYear, weekStartsOn }) => {
 YearlyView.propTypes = {
   events: PropTypes.arrayOf(PropTypes.object),
   eventClick: PropTypes.func,
+  dayClick: PropTypes.func,
   viewYear: PropTypes.object,
   weekStartsOn: PropTypes.number
 }

diff --git a/client/src/components/Calendar/utils/constants.js b/client/src/components/Calendar/utils/constants.js
@@ -7,9 +7,9 @@ const VIEWS = {
 }
 // we will add opacity so not closing the paranthesis
 export const COLOR_NAMES_TO_RGB = {
-  red: "rgb(255, 0, 0, ",
-  blue: "rgb(0, 0, 255, ",
-  green: "rgb(0, 255, 0, ",
+  red: "rgb(155, 0, 0, ",
+  blue: "rgb(0, 0, 155, ",
+  green: "rgb(0, 155, 0, ",
   pink: "rgb(255, 192, 203, ",
   orange: "rgb(255, 165, 0, ",
   brown: "rgb(165, 42, 42, "

diff --git a/client/src/components/Calendar/utils/dummyData.js b/client/src/components/Calendar/utils/dummyData.js
@@ -2,7 +2,7 @@ import { addDays } from "date-fns"
 
 const events = []
 
-for (let i = 0; i < 200; i++) {
+for (let i = 0; i < 500; i++) {
   const rDate = getRandomDate()
   events.push({
     title: `event-${i} title`,

diff --git a/client/src/components/Calendar/utils/helpers.js b/client/src/components/Calendar/utils/helpers.js
@@ -49,8 +49,8 @@ export function countToHeatBgc(count, scale) {
   } else if (count <= scale.low) {
     return `${COLOR_NAMES_TO_RGB[scale.color]}0.25)`
   } else if (count <= scale.mid) {
-    return `${COLOR_NAMES_TO_RGB[scale.color]}0.6)`
+    return `${COLOR_NAMES_TO_RGB[scale.color]}0.5)`
   } else {
-    return scale.color
+    return `${COLOR_NAMES_TO_RGB[scale.color]}1.0)`
   }
 }
diff --git a/client/src/pages/Routing.js b/client/src/pages/Routing.js
@@ -1,5 +1,5 @@
 import AppContext from "components/AppContext"
-import { CalendarWrapper } from "components/Calendar/Calendar"
+import { CalendarWrapperToTest } from "components/Calendar/Calendar"
 import AuthorizationGroupEdit from "pages/admin/authorizationgroup/Edit"
 import AuthorizationGroupNew from "pages/admin/authorizationgroup/New"
 import AuthorizationGroupShow from "pages/admin/authorizationgroup/Show"
@@ -52,7 +52,7 @@ const Routing = () => {
       <Route path={PAGE_URLS.SEARCH} component={Search} />
       <Route path={PAGE_URLS.ROLLUP} component={RollupShow} />
       <Route path={PAGE_URLS.HELP} component={Help} />
-      <Route path="/Calendar" component={CalendarWrapper} />
+      <Route path="/Calendar" component={CalendarWrapperToTest} />
       <Route
         path={PAGE_URLS.REPORTS}
         render={({ match: { url } }) => (