JWLangford

import { useState } from "react"

import { getUser } from "../api/api"

interface User {
  name: string;
  email: string;
  age: number;
}

JWLangford

import * as React from "react";
import "./styles.css";
import useTest from "./hook";

export default function App() {
  const [getUser, user, errorMessage] = useTest();
  return (
    <div className="App">
      <h1>Simple API Hook Demo</h1>
      <button onClick={() => getUser("123")}>Get User</button>

JWLangford

import { useState } from "react";

import { getResource } from "./api";

export default <T>(): [(url: string) => void, string, T?] => {
  const [response, setResponse] = useState<T>();
  const [errorMsg, setErrorMsg] = useState("");

  const getResponseTest = async (url: string) => {
    try {

JWLangford

import * as React from "react";
import "./styles.css";
import useTest from "./hook";

interface User {
  name: string;
  email: string;
  age: number;
}

JWLangford

import * as React from "react";
import "./styles.css";
import useTest from "./hook";

interface Invoice {
  id: string
  amount: number
  url: string
}

JWLangford

import React from "react"

const MyPage = () => {
  return (
    <div>
      <div>
        <p>Admin text</p>
      </div>
      <div>
        <p>Manager text</p>

JWLangford

import React from "react"
import { useSelector } from "react-redux"


enum Permission {
  PERMISSION_NONE = 0x0,

  PERMISSION_ADMIN = 0x1,

  PERMISSION_MANAGER = 0x2,

JWLangford

interface IProps {
  permission: Permission
}

const PermissionWrapper: React.FC<IProps> = ({ permission, children }) => {
  const status = useSelector((state: IRootState) => state.account.status)

  if (permission & status) {
    return <>{children}</>
  }

JWLangford

const MyPage = () => {
  return (
    <div>
      <PermissionWrapper permission={Permission.PERMISSION_ADMIN}>
        <div>
          <p>Admin text</p>
        </div>
      </PermissionWrapper>

      <PermissionWrapper permission={Permission.PERMISSION_MANAGER}>

JWLangford

import { OutlinedTextFieldProps, TextField } from "@material-ui/core"
import React, { FC, useEffect, useState } from "react"

interface IProps extends OutlinedTextFieldProps {
  waitForInput?: boolean
}

const ExtendedInput: FC<IProps> = (props) => {
  const { waitForInput, ...inputProps } = props
  const [waitEvent, setWaitEvent] = useState<React.ChangeEvent<HTMLInputElement>>(null)