kag359six

import React, { useState } from "react";
import { Form } from "semantic-ui-react";

export const TextField = ({
  onSave,
  icon,
  value,
  loading,
  error,
  ...props

kag359six

import React, { useState } from "react";
import { Form } from "semantic-ui-react";

export const TextField = ({
  onSave,
  icon,
  value,
  loading,
  ...props
}) => {

kag359six

import React from "react";
import { render } from "react-dom";
import { Container, Form } from "semantic-ui-react";
import { TextField } from "./TextField";

// resolves to new value in 2 seconds
const mockSave = val =>
  new Promise(resolve => setTimeout(() => resolve(val), 2000));

const App = () => (

kag359six

import React, { useState } from "react";
import { Form } from "semantic-ui-react";

// We use Form.Input because it gives us some 
// nice benefits (like error messages). You will want
// to wrap this around a <Form/> component so it displays properly
export const TextField = ({icon, ...props }) => {
  return (
    <React.Fragment>
      <Form.Input

kag359six

/****** ORIGINAL RESPONSE DEFINITION *******/

type GetUserResponse = {
  name: string
  phone: number
  family: User[]
}

/******** NEW RESPONSE DEFINITION *******/

kag359six

type GetUserRequest = {
  id: string
}

type GetUserResponse = {
  name: string
  phone: number
  family: User[]
}

kag359six

export class NameProvider extends React.Component {
  state = { name: 'Piotr' };

  render() {
    return this.props.children(this.state);
  }
}

kag359six

interface NameProviderProps {
  children: (state: NameProviderState) => React.ReactNode;
}

interface NameProviderState {
  readonly name: string;
}

export class NameProvider extends React.Component<NameProviderProps, NameProviderState> {
  readonly state: NameProviderState = { name: 'Piotr' };

kag359six

/*** FLOW TYPES ***/

type FlexProps = {
  children?: any,
  className?: string,
  container?: boolean,
  /****** Container Props ********/
  flexDirection?: 'row' | 'column',
  justifyContent?:
    | 'flex-start'

kag359six

export const Flex = (props) => (
  <div
    className={props.className}
    style={{
      display: props.container ? 'flex' : 'block',
      justifyContent: props.justifyContent || 'flex-start',
      flexDirection: props.flexDirection || 'row',
      flexGrow: props.flexGrow || 0,
      flexBasis: props.flexBasis || 'auto',
      flexShrink: props.flexShrink || 1,