hckhanh

import React, { Component } from "react";
import DataSource from "../DataSource";
import withSubscription from "./withSubscription";

const Comment = ({ comment }) => <>{comment}</>;

class CommentList extends Component {
  render() {
    return (
      <>

hckhanh

import React, { Component } from "react";
import DataSource from "../DataSource";

const TextBlock = ({ text }) => <>{text}</>;

export class BlogPost extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: DataSource.getBlogPost(props.id)

hckhanh

import PropTypes from 'prop-types';
import React, { Component, Fragment } from 'react';
import EditModeItem from './EditModeItem';
import './style.scss';
import ViewModeItem from './ViewModeItem';

export default class EditableItem extends Component {
  constructor(props) {
    super(props);
    this.state = { editMode: false };

hckhanh

import React, { useState } from "react";
import DataSource from "../DataSource";

const TextBlock = ({ text }) => <>{text}</>;

export function BlogPost({ id }) {
  // State is declared in pair: state value and setState function
  const [data, setData] = useState(DataSource.getBlogPost(id));
  
  return <TextBlock text={data} />;

hckhanh

import PropTypes from 'prop-types';
import React, { Fragment, useState } from 'react';
import EditModeItem from './EditModeItem';
import './style.scss';
import ViewModeItem from './ViewModeItem';

export default function EditableItem({ data }) {
  const [editMode, setEditMode] = useState(false);
  return (
    <Fragment>

hckhanh

import React, { useEffect, useState } from "react";
import DataSource from "../DataSource";

const TextBlock = ({ text }) => <>{text}</>;

export function BlogPost({ id }) {
  // State is declared in pair: state value and setState function
  const [data, setData] = useState(DataSource.getBlogPost(id));

  // Similar to componentDidMount and componentDidUpdate:

hckhanh

import React, { useEffect, useState } from "react";
import DataSource from "../DataSource";

const TextBlock = ({ text }) => <>{text}</>;

export function BlogPost({ id }) {
  // State is declared in pair: state value and setState function
  const [data, setData] = useState(DataSource.getBlogPost(id));

  // Similar to componentDidMount and componentDidUpdate:

hckhanh

import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import { checkAuthentication } from '../../store/selectors/user';

function withAuthRoute(checkAuth, pathname) {
  return function AuthRoute({ component: Component, ...rest }) {
    return (
      <Route
        {...rest}
        render={props => {

hckhanh

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

hckhanh

import {
  assign,
  EventObject,
  Machine,
  send,
  StateMachine,
  StateSchema
} from "xstate";
import { getToken } from "../apis";
import LoginMachine from "./LoginMachine";