Recurrence picker frequency

packages/qpa-components/Select.tsx

@@ -1 +1,8 @@
-import * as React from 'react'
+import * as React from "react"
+import MUISelect, { SelectProps } from "@material-ui/core/Select"
+
+interface Props extends SelectProps {}
+
+const Select = (props: Props) => <MUISelect {...props} />
+
+export default Select

packages/qpa-components/index.ts

@@ -7,6 +7,7 @@ import { IconButton, Menu, MenuItem } from "@material-ui/core"
 import TagIcon from "@material-ui/icons/LocalOffer"
 import DatePicker, { DatePickerProps } from "./DatePicker"
 import TimePicker, { TimePickerProps } from "./TimePicker"
+import Select from "./Select"
 import PickersProvider from "./PickersProvider"
 import MessageBar from "./MessageBar"
 import Fab from "./Fab"
@@ -14,20 +15,21 @@ import Fab from "./Fab"
 export {
   Avatar,
   Button,
-  MessageBar,
   ButtonProps,
   IconButton,
   DatePicker,
   DatePickerProps,
-  TimePicker,
-  TimePickerProps,
-  TextField,
-  TextFieldProps,
-  Spinner,
   Fab,
   Icon,
-  TagIcon,
   Menu,
   MenuItem,
+  MessageBar,
   PickersProvider,
+  Select,
+  Spinner,
+  TagIcon,
+  TextField,
+  TextFieldProps,
+  TimePicker,
+  TimePickerProps,
 }

packages/qpa/Event/EventForm.tsx

@@ -14,6 +14,7 @@ import { EventStatus } from "../../../@types"
 import * as intl from "react-intl-universal"
 import TagSelector from "../EventTags/TagsSelector"
 import messages from "./EventForm.msg.json"
+import RecurrencePicker from "./Recurrence/RecurrencePicker"
 
 interface Props {
   values?: EventFormData
@@ -107,6 +108,9 @@ const EventForm = (props: Props) => {
       {({ isValid, setFieldValue, values }) => {
         return (
           <StyledForm>
+            <RecurrencePicker firstOccurrence={values.time} onChange={rrule => {
+              console.log('set rrule to event', rrule)
+            }}/>
             <TagSelector
               language="en"
               onChange={tagNames => setFieldValue("tagNames", tagNames)}

packages/qpa/Event/Recurrence/RecurrencePicker.tsx

@@ -1,20 +1,51 @@
+import { Select } from "qpa-components"
 import * as React from "react"
+import RRule, { Frequency } from "rrule"
 import rrule from "rrule"
 import styled from "@emotion/styled"
+import messages from "./RecurrencePicker.msg.json"
+import intl from "react-intl-universal"
 
 interface Props {
   firstOccurrence: {
-    startDate: string
-    endDate: string
+    start: string
+    end: string
   }
-  rrule: string
+  rrule?: string
   onChange: (rrule: string) => void
 }
 
 const RecurrencePicker = (props: Props) => {
-  return <Root>
+  const [freq, setFreq] = React.useState(RRule.WEEKLY)
 
-  </Root>
+  intl.load({
+    "en-GB": messages.en,
+    "es-ES": messages.es,
+  })
+
+  const recurrence = new RRule({
+    freq,
+    dtstart: new Date(props.firstOccurrence.start),
+  })
+
+  return (
+    <Root>
+      <Select
+        native
+        value={freq}
+        onChange={e => {
+          setFreq(e.currentTarget.value as Frequency)
+        }}
+      >
+        <option value={RRule.DAILY}>Daily</option>
+        <option value={RRule.WEEKLY}>Weekly</option>
+        <option value={RRule.MONTHLY}>Monthly</option>
+      </Select>
+      <p>{recurrence.toString()}</p>
+    </Root>
+  )
 }
 
 const Root = styled.div``
+
+export default RecurrencePicker