import React from 'react'

import CourseDetails from './CourseDetails'
import CourseHeader from './CourseHeader'
import Instructors from './Instructors'
import Meetings from './Meetings'
import PropTypes from 'prop-types'

import Card from '@material-ui/core/Card'
import CardActions from '@material-ui/core/CardActions'
import CardContent from '@material-ui/core/CardContent'
import { withStyles } from '@material-ui/core/styles'

const styles = theme => ({
  courseContainer: {
    flex: '1 1 auto',
    padding: '1em'
  },

  card: {
    backgroundColor: '#fafafa'
  },

  content: {
    paddingTop: 0,
    display: 'flex',
    justifyContent: 'center'
  }
})

class ExpandableCourse extends React.Component {
  render() {
    const { classes, course, mobile } = this.props
    return (
      <div className={classes.courseContainer}>
        <div style={{ marginTop: '1em' }}>
          <Card className={classes.card}>
            <CourseHeader mobile={mobile} course={course} />
            <CardContent className={classes.content}>
              <div>
                <div style={{ marginTop: '1em' }}>
                  <Meetings meetings={course.meetings} />
                </div>
              </div>
            </CardContent>
            <CardActions style={{ justifyContent: 'center', flexWrap: 'wrap' }}>
              <CourseDetails course={course} />
              <Instructors teachers={course.instructors} />
            </CardActions>
          </Card>
        </div>
      </div>
    )
  }
}

ExpandableCourse.propTypes = {
  classes: PropTypes.object.isRequired
}

export default withStyles(styles, { name: 'ExpandableCourse' })(
  ExpandableCourse
)

@@ -184,44 +184,8 @@
 gs'%0A
-import PropTypes from 'prop-types'%0A%0A
 impo
@@ -343,20 +343,20 @@
 mport %7B 
-with
+make
 Styles %7D
@@ -375,21 +375,16 @@
 rial-ui/
-core/
 styles'%0A
@@ -394,17 +394,20 @@
 nst 
-s
+useS
 tyles = 
 them
@@ -406,13 +406,21 @@
 s = 
-theme
+makeStyles(()
  =%3E 
@@ -629,15 +629,16 @@
 %7D%0A%7D)
+)
 %0A%0Ac
-lass
+onst
  Exp
@@ -655,49 +655,51 @@
 rse 
-extends React.Component %7B%0A  render() %7B%0A  
+= props =%3E %7B%0A  const classes = useStyles()%0A
   co
@@ -707,17 +707,8 @@
 st %7B
- classes,
  cou
@@ -727,21 +727,15 @@
 %7D = 
-this.
 props%0A
-  
+%0A
   re
@@ -741,26 +741,24 @@
 eturn (%0A    
-  
 %3Cdiv classNa
@@ -787,20 +787,16 @@
 ainer%7D%3E%0A
-    
     %3Cdiv
@@ -828,28 +828,24 @@
 ' %7D%7D%3E%0A      
-   
- 
 %3CCard classN
@@ -864,20 +864,16 @@
 .card%7D%3E%0A
-    
         
@@ -913,36 +913,32 @@
 rse=%7Bcourse%7D /%3E%0A
-    
         %3CCardCon
@@ -985,22 +985,14 @@
     
-    
 %3Cdiv%3E%0A
-    
     
@@ -1048,20 +1048,16 @@
         
- 
-   
 %3CMeeting
@@ -1092,36 +1092,32 @@
  /%3E%0A            
-    
 %3C/div%3E%0A         
@@ -1113,39 +1113,31 @@
 %3E%0A          
-  
-  
 %3C/div%3E%0A
-    
         %3C/Ca
@@ -1151,28 +1151,24 @@
 nt%3E%0A        
-   
- 
 %3CCardActions
@@ -1230,28 +1230,24 @@
 %3E%0A          
-    
 %3CCourseDetai
@@ -1264,28 +1264,24 @@
 %7Bcourse%7D /%3E%0A
-    
           %3CI
@@ -1328,28 +1328,24 @@
  /%3E%0A        
-    
 %3C/CardAction
@@ -1347,20 +1347,16 @@
 ctions%3E%0A
-    
       %3C/
@@ -1361,20 +1361,16 @@
 %3C/Card%3E%0A
-    
     %3C/di
@@ -1372,28 +1372,24 @@
  %3C/div%3E%0A
-    
   %3C/div%3E
 %0A    )%0A 
@@ -1384,177 +1384,45 @@
 div%3E
-%0A
   
-  )%0A  %7D%0A%7D%0A%0AExpandableCourse.propTypes = %7B%0A  classes: PropTypes.object.isRequired%0A%7D%0A%0Aexport default withStyles(styles, %7B name: 'ExpandableCourse' %7D)(%0A  ExpandableCourse%0A)%0A
+%0A  )%0A%7D%0A%0Aexport default ExpandableCourse

Migrate ExpandableCourse to function, add usage of styles hook. Remove unused imports