koss-lebedev

const TextMessage = ({ message }) => {
  // ...
  
  return <div>{message.text}</div>
}

messageFactory.registerType('text', TextMessage)

koss-lebedev

const knownTypes = {}

export const messageFactory = {
  registerType: (type, Component) => knownTypes[type] = Component,
  
  render: (message) => {
    const Component = knownTypes[message.type]
    
    if (!Component) {
      throw new Error('Unknown message type')

koss-lebedev

export const Chat = (messages, props) => {
  // ...

  return (
    <ul>
      {messages.map(message => {
        switch (message.type) {
          case 'text': return <TextMessage message={message} />
          case 'image': return <ImageMessage message={message} />
          case 'audio': return <AudioMessage message={message} />

koss-lebedev

const Header = ({ children }) => (
  <header>
    <Logo />
    <Actions>
      {children}
    </Actions>
  </header>
)

const HomePage = () => (

koss-lebedev

const Header = () => {
  const { pathname } = useRouter()
  
  return (
    <header>
      <Logo />
      <Actions>
        {pathname === '/dashboard' && <Link to="/events/new">Create event</Link>}
        {pathname === '/' && <Link to="/dashboard">Go to dashboard</Link>}
      </Actions>

koss-lebedev

const useActiveUsers = () => {
  const { users } = useUsers()

  const activeUsers = useMemo(() => {
    return getOnlyActive(users)
  }, [users])

  return { activeUsers }
}

koss-lebedev

const getOnlyActive = (users) => {
  const weekAgo = new Date()
  weekAgo.setDate(weekAgo.getDate() - 7)
  
  return users.filter(user => !user.isBanned && user.lastActivityAt >= weekAgo)
}

const ActiveUsersList = () => {
  const { users } = useUsers()

koss-lebedev

const UserItem = ({ user }) => {
  return (
    <li>
      <img src={user.avatarUrl} />
      <p>{user.fullName}</p>
      <small>{user.role}</small>
    </li>
  )
}

koss-lebedev

const useUsers = () => {
  const [users, setUsers] = useState([])
  
  useEffect(() => {
    const loadUsers = async () => {  
      const response = await fetch('/some-api')
      const data = await response.json()
      setUsers(data)
    }

koss-lebedev

const ActiveUsersList = () => {
  const [users, setUsers] = useState([])
  
  useEffect(() => {
    const loadUsers = async () => {  
      const response = await fetch('/some-api')
      const data = await response.json()
      setUsers(data)
    }