mohsentaleb

import type { Store } from "./context/reducer";
import type { Action } from "./context/actions";

function App() {
  const [state, dispatch] = useReducer<React.Reducer<Store, Action>>(
    reducer,
    initialState
  );

  return (

mohsentaleb

import type { Action } from "./actions";

export const initialState = {
  content: "Hello World",
  background: "#ffcc00"
};

export type Store = typeof initialState;

export const reducer = (state: Store, action: Action) => {

mohsentaleb

export const reducer = (state, action) => {
  switch (action.type) {
    case "SET_BACKGROUND_COLOR":
      const background = action.payload.background

      return { ...state, background };
    case "SET_CONTENT":
      const content = action.payload.content;

      return { ...state, content };

mohsentaleb

export const setBackground = (
  background: string
): {
  type: "SET_BACKGROUND_COLOR";
  payload: {
    background: string;
  };
} => ({
  type: "SET_BACKGROUND_COLOR",
  payload: {

mohsentaleb

if (action.type === 'SET_BACKGROUND_COLOR') {
    // typescript would know we're in "SET_BACKGROUND_COLOR" context
}

mohsentaleb

function App() {
  // initialState = { background: "#ccc", content: "Hello World!"}
  const [state, dispatch] = useReducer(reducer, initialState); 

  return (
    <AppContext.Provider value={{ state, dispatch }}>
      <div className="rect" style={{ backgroundColor: state.background }}>
        <span>{state.content}</span>
      </div>
      <BackgroundControl />

mohsentaleb

import { MuiAvatar } from "@material-ui/core"
import { withStyles, Theme, createStyles } from '@material-ui/core/styles'

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

mohsentaleb

import { MuiAvatar } from "@material-ui/core"
import { withStyles } from '@material-ui/core/styles'

const Avatar = withStyles(
  theme => ({
    colorDefault: {
      // overriding `colorDefault` according to the Avatar API
      backgroundColor: theme.palette.secondary
    }
  }))(MuiAvatar) // Passing the original Avatar component to this HOC

mohsentaleb

const bcrypt = require("bcryptjs");

bcrypt.hash("password", 8, function(error, hash) {
  console.log(hash);
});

mohsentaleb

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

const styles = theme => ({
  myCustomClass: {
    color: theme.palette.tertiary.dark
  }
})

class myComponent extends Component {