mohsentaleb

import { Box } from "@material-ui/core"
import { useTheme } from "@material-ui/styles"

function myComponent() {
  const theme = useTheme()
  return <Box padding={theme.spacing(4)} />
}

mohsentaleb

import { Box, Theme } from "@material-ui/core"
import { useTheme } from "@material-ui/styles"

function myComponent() {
  const theme = useTheme<Theme>()
  return <Box padding={theme.spacing(4)} />
}

mohsentaleb

import { Avatar, makeStyles } from "@material-ui/core"

const useAvatarStyles = makeStyles(
  theme => {
    colorDefault: {
      // overriding `colorDefault` according to the Avatar API
      backgroundColor: theme.palette.secondary
    }
  },
  { name: "MuiAvatar" } 

mohsentaleb

import { Avatar, makeStyles, Theme, createStyles } from "@material-ui/core"

const useAvatarStyles = makeStyles(
  (theme: Theme) =>
    createStyles({
      colorDefault: {
        // overriding `colorDefault` according to the Avatar API
        backgroundColor: theme.palette.secondary
      }
    }),

mohsentaleb

import { makeStyles } from "@material-ui/core"

const useStyles = makeStyles(theme => ({
  myCustomClass: {
    color: theme.palette.text.primary
  }
}))

function myComponent() {
  const classes = useStyles()

mohsentaleb

import { makeStyles, createStyles, Theme } from "@material-ui/core"

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    myCustomClass: {
      color: theme.palette.text.primary
    }
  })
)

mohsentaleb

const hero = {
  superman: {
    name: "Superman",
    alias: "Clark Kent"
  },
  batman: {
    name: "Batman",
    alias: "Bruce Wayne"
  },
  flash: {

mohsentaleb

const sleep = (ms: number, dev: number = 1) => {
  const msWithDev = (Math.random() * dev + 1) * ms
  console.log('Sleeping', msWithDev / 1000, 'sec')
  return new Promise(resolve => setTimeout(resolve, msWithDev))
}

async function fetch() {
  await sleep(1000)
}

mohsentaleb

import React, { Component } from "react"
import _ from 'lodash'
import hash from 'object-hash'

class Listings extends Component {
  sortByIndex = (a, b, index, ascending) => (ascending ? a[index] - b[index] : b[index] - a[index])

  sortListings = _.memoize((listings, index, ascending) =>
    listings.sort((a,b) => this.sortByIndex(a, b, index, ascending)),
    (...args) => `${hash(listings)}_${args[1]}_${args[2]}`) // Makes a hash in format: "objectHashId_beds_true"

mohsentaleb

import React, { Component } from "react";
import _ from 'lodash'

class Listings extends Component {
  sortByIndex = (a, b, index, ascending) => (ascending ? a[index] - b[index] : b[index] - a[index])

  sortListings = _.memoize((listings, index, ascending) =>
    listings.sort((a,b) => this.sortByIndex(a, b, index, ascending)))

  render() {