import React from "react"
import { FilterState } from "../../FilterState"

import { Radio, RadioGroup } from "@artsy/palette"
import { get } from "Utils/get"

export const TimePeriodFilter: React.SFC<{
  filters: FilterState
  timePeriods?: string[]
}> = ({ filters, timePeriods }) => {
  const periods = (timePeriods || allowedPeriods).filter(timePeriod =>
    allowedPeriods.includes(timePeriod)
  )
  const defaultValue = get(filters.state, x => x.major_periods[0], "")

  const radioButtons = periods.map((timePeriod, index) => {
    return <Radio my={0.3} value={timePeriod} key={index} label={timePeriod} />
  })

  return (
    <RadioGroup
      deselectable
      onSelect={selectedOption => {
        filters.setFilter("major_periods", selectedOption)
      }}
      defaultValue={defaultValue}
    >
      {radioButtons}
    </RadioGroup>
  )
}

const allowedPeriods = [
  "2010",
  "2000",
  "1990",
  "1980",
  "1970",
  "1960",
  "1950",
  "1940",
  "1930",
  "1920",
  "1910",
  "1900",
  "Late 19th Century",
  "Mid 19th Century",
  "Early 19th Century",
]

import React from "react"
import { FilterState } from "../../FilterState"

import { Radio, RadioGroup } from "@artsy/palette"

export const TimePeriodFilter: React.SFC<{
  filters: FilterState
  timePeriods?: string[]
}> = ({ filters, timePeriods }) => {
  const periods = (timePeriods || allowedPeriods).filter(timePeriod =>
    allowedPeriods.includes(timePeriod)
  )

  const radioButtons = periods.map((timePeriod, index) => {
    const isSelected = filters.state.major_periods[0] === timePeriod

    return (
      <Radio
        my={0.3}
        selected={isSelected}
        value={timePeriod}
        key={index}
        label={timePeriod}
      />
    )
  })
  return (
    <RadioGroup
      deselectable
      onSelect={selectedOption => {
        filters.setFilter("major_periods", selectedOption)
      }}
    >
      {radioButtons}
    </RadioGroup>
  )
}

const allowedPeriods = [
  "2010",
  "2000",
  "1990",
  "1980",
  "1970",
  "1960",
  "1950",
  "1940",
  "1930",
  "1920",
  "1910",
  "1900",
  "Late 19th Century",
  "Mid 19th Century",
  "Early 19th Century",
]

--- 
+++ 
@@ -2,6 +2,7 @@
 import { FilterState } from "../../FilterState"
 
 import { Radio, RadioGroup } from "@artsy/palette"
+import { get } from "Utils/get"
 
 export const TimePeriodFilter: React.SFC<{
   filters: FilterState
@@ -10,26 +11,19 @@
   const periods = (timePeriods || allowedPeriods).filter(timePeriod =>
     allowedPeriods.includes(timePeriod)
   )
+  const defaultValue = get(filters.state, x => x.major_periods[0], "")
 
   const radioButtons = periods.map((timePeriod, index) => {
-    const isSelected = filters.state.major_periods[0] === timePeriod
+    return <Radio my={0.3} value={timePeriod} key={index} label={timePeriod} />
+  })
 
-    return (
-      <Radio
-        my={0.3}
-        selected={isSelected}
-        value={timePeriod}
-        key={index}
-        label={timePeriod}
-      />
-    )
-  })
   return (
     <RadioGroup
       deselectable
       onSelect={selectedOption => {
         filters.setFilter("major_periods", selectedOption)
       }}
+      defaultValue={defaultValue}
     >
       {radioButtons}
     </RadioGroup>
Select default time period filter selection via RadioGroup instead of Radio

Radio.selected is overridden by RadioGroup.defaultValue, so we should use that instead.
