#3172: Fix default view issue, change header props

Reorganize code blocks better, add more comments

client/src/components/Calendar/Calendar.js

@@ -1,5 +1,3 @@
-// import PropTypes from "prop-types"
-import { changeView, changeViewDate } from "components/Calendar/actions"
 import VIEWS from "components/Calendar/utils/constants"
 // FIXME: Remove this random data
 import events from "components/Calendar/utils/dummyData"
@@ -21,12 +19,9 @@ const Calendar = ({ events, views, eventClick }) => {
   return (
     <div className="Calendar">
       <Header
-        title={state.title}
-        prevAction={() => state.prevAction(dispatch, state)}
-        nextAction={() => state.nextAction(dispatch, state)}
-        viewChangeAction={incView => dispatch(changeView(incView))}
-        todayAction={() => dispatch(changeViewDate(new Date()))}
-        views={parseViewsOptions()}
+        state={state}
+        dispatch={dispatch}
+        views={parseViewsOptions(views)}
       />
       {state.view === VIEWS.YEARLY && (
         <YearlyView
@@ -46,25 +41,23 @@ const Calendar = ({ events, views, eventClick }) => {
       )}
     </div>
   )
-  // See which available views selected
-  function parseViewsOptions() {
-    const parsedViews = Object.values(VIEWS).filter(view =>
-      views.includes(view)
-    )
-
-    if (parsedViews.length === 0) {
-      return ["Yearly", "Monthly"]
-    }
-    return parsedViews
-  }
 }
 
 Calendar.propTypes = {
   events: PropTypes.arrayOf(PropTypes.object),
   views: PropTypes.arrayOf(PropTypes.string),
   eventClick: PropTypes.func
 }
-export default Calendar
+
+// See which available views selected
+function parseViewsOptions(views) {
+  const parsedViews = Object.values(VIEWS).filter(view => views.includes(view))
+
+  if (parsedViews.length === 0) {
+    return ["Yearly", "Monthly"]
+  }
+  return parsedViews
+}
 
 // FIXME: remove this
 export const CalendarWrapper = () => {
@@ -75,3 +68,5 @@ export const CalendarWrapper = () => {
   ])
   return <Calendar events={events} eventClick={eventClickMemo} views={views} />
 }
+
+export default Calendar

client/src/components/Calendar/Views/Header.js

@@ -1,30 +1,27 @@
-/** @jsx jsx */
-import { css, jsx } from "@emotion/core"
 import styled from "@emotion/styled"
+import { changeView, changeViewDate } from "components/Calendar/actions"
 import PropTypes from "prop-types"
+import React from "react"
 
-const Header = ({
-  title,
-  prevAction,
-  nextAction,
-  viewChangeAction,
-  todayAction,
-  views
-}) => {
+const Header = ({ state, dispatch, views }) => {
   return (
     <HeaderBox>
       <Buttons>
-        <button onClick={prevAction}>Prev</button>
-        <button onClick={todayAction}>Today</button>
-        <button onClick={nextAction}>Next</button>
+        <button onClick={() => state.prevAction(dispatch, state)}>Prev</button>
+        <button onClick={() => dispatch(changeViewDate(new Date()))}>
+          Today
+        </button>
+        <button onClick={() => state.nextAction(dispatch, state)}>Next</button>
       </Buttons>
-      <span>{title}</span>
+      <span>{state.title}</span>
       <ViewSelect>
         <label htmlFor="viewsSelect">View Options</label>
         <select
           name="views"
           id="viewsSelect"
-          onChange={e => viewChangeAction(e.target.value)}
+          style={{ cursor: "pointer" }}
+          onChange={e => dispatch(changeView(e.target.value))}
+          value={state.view}
         >
           {views.map(view => (
             <option key={view} value={view}>
@@ -38,11 +35,8 @@ const Header = ({
 }
 
 Header.propTypes = {
-  title: PropTypes.string,
-  prevAction: PropTypes.func,
-  nextAction: PropTypes.func,
-  viewChangeAction: PropTypes.func,
-  todayAction: PropTypes.func,
+  state: PropTypes.object,
+  dispatch: PropTypes.func,
   views: PropTypes.arrayOf(PropTypes.string)
 }
 
@@ -55,7 +49,7 @@ const HeaderBox = styled.div`
   margin: 5px 1rem;
 `
 
-const BUTTONS_STYLE = css`
+const Buttons = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-around;
@@ -65,12 +59,16 @@ const BUTTONS_STYLE = css`
     margin-right: 5px;
   }
 `
-const Buttons = styled.div`
-  ${BUTTONS_STYLE};
-`
 
 const ViewSelect = styled.div`
-  ${BUTTONS_STYLE};
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  & > * {
+    margin-left: 5px;
+    margin-right: 5px;
+  }
 `
 
 export default Header

client/src/components/Calendar/Views/YearlyView.js

@@ -12,7 +12,6 @@ import PropTypes from "prop-types"
 import React, { useMemo } from "react"
 import { getMonthNames, renderMonthNames } from "../utils/helpers"
 
-// FIXME: Add month names
 const YearlyView = ({ events, eventClick, viewYear, weekStartsOn }) => {
   const getDays = useMemo(() => {
     // get 1st of January

client/src/components/Calendar/actions/buttonActions.js

@@ -1,6 +1,7 @@
 import { changeViewDate } from "components/Calendar/actions"
 import VIEWS from "components/Calendar/utils/constants"
 import { addMonths, addYears } from "date-fns"
+
 export function monthNextAction(dispatch, state) {
   dispatch(changeViewDate(addMonths(state.viewDate, 1)))
 }

client/src/components/Calendar/utils/defaults.js

@@ -1,19 +1,15 @@
 import {
-  yearNextAction,
-  yearPrevAction
+  NEXT_ACTIONS,
+  PREV_ACTIONS
 } from "components/Calendar/actions/buttonActions"
 import VIEWS from "components/Calendar/utils/constants"
-import { yearTitleFormat } from "components/Calendar/utils/formats"
+import { TITLE_FORMATS } from "components/Calendar/utils/formats"
 
-export function defaultNextAction(dispatch, state) {
-  yearNextAction(dispatch, state)
-}
-export function defaultPrevAction(dispatch, state) {
-  yearPrevAction(dispatch, state)
-}
+export const defaultView = VIEWS.MONTHLY
 
-export const defaultView = VIEWS.YEARLY
+export const defaultNextAction = NEXT_ACTIONS[defaultView]
+export const defaultPrevAction = PREV_ACTIONS[defaultView]
 
-export const defaultTitleFormatter = yearTitleFormat
+export const defaultTitleFormatter = TITLE_FORMATS[defaultView]
 
 export const defaultTitle = defaultTitleFormatter(new Date())

client/src/components/Calendar/utils/formats.js

@@ -1,5 +1,6 @@
 import VIEWS from "components/Calendar/utils/constants"
 import { format } from "date-fns"
+
 export function yearTitleFormat(date) {
   return format(date, "yyyy")
 }

client/src/components/Calendar/utils/helpers.js

@@ -38,7 +38,9 @@ const MonthNameBox = styled.div`
 `
 
 /**
- * There are 4 levels, [none, low, mid, high], none always 0, high we don't need
+ * There are 4 levels, [none, low, mid, high], none=0 assumed, we need two values: low, mid
+ * Available colors ["red", "blue", "green", "pink", "orange", "brown"]
+ * @param {number} count - number of items to scale
  * @param {object} scale - example object: {low: 3, mid: 6, color: "red"}
  */
 export function countToHeatBgc(count, scale) {