tmp-react1

tmp-react1.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';
import useSWR from 'swr'
import { useState, useEffect } from 'react';
import JSONPretty from 'react-json-pretty';
import 'react-json-pretty/themes/monikai.css';

async function fetcher(url: string) {
  const resp = await fetch(url);
  return resp.text();
}


function RawApiData({path}: {path: string}) {
  const { data, error, isLoading } = useSWR(path, fetcher,  { refreshInterval: 1000 })

  if (error) return <div>failed to load</div>
  if (isLoading) return <div>loading...</div>
  return <div>hello {data}!</div>
}

function JSONApiData({path}: {path: string}) {
  const { data, error, isLoading } = useSWR(path, fetcher,  { refreshInterval: 1000 })

  if (error) return <div>failed to load</div>
  if (isLoading) return <div>loading...</div>
  return <JSONPretty id="json-pretty" data={data}></JSONPretty>
}

function GetRequestHooks() {
  const [totalReactPackages, setTotalReactPackages] = useState(null);

  useEffect(() => {
    // GET request using fetch inside useEffect React hook
    fetch('https://api.npms.io/v2/search?q=react')
            .then(response => response.json())
            .then(data => setTotalReactPackages(data.total));

    // empty dependency array means this effect will only run once (like componentDidMount in classes)
  }, []);

  return (
    <div className="card text-center m-3">
      <h5 className="card-header">GET Request with React Hooks</h5>
      <div className="card-body">
        Total react packages: {totalReactPackages}
      </div>
    </div>
    );
}

export { GetRequestHooks };


function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
    );
}


const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

function Profile() {
  return (
    <>
    <h1>{user.name}</h1>
    <img
      className="avatar"
      src={user.imageUrl}
      alt={'Photo of ' + user.name}
      style={{
      width: user.imageSize,
        height: user.imageSize
    }}
    />
    </>
    );
}

function createConnection(serverUrl:string, roomId:string) {
  // A real implementation would actually connect to the server
  return {
    connect() {
      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
      },
    disconnect() {
      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
    }
  };
}

function ChatRoom({ roomId }: {roomId: string} ) {
  const [serverUrl, setServerUrl] = useState('https://localhost:8080/api');

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
    }, [roomId, serverUrl]);

  return (
    <>
    <label>
      Server URL:{' '}
      <input
        value={serverUrl}
        onChange={e => setServerUrl(e.target.value)}
      />
    </label>
    <h1>Welcome to the {roomId} room!</h1>
    </>
    );
}

function MyApp() {
  const [roomId, setRoomId] = useState('general');
  const [show, setShow] = useState(false);
  return (
    <>
    <label>
      Choose the chat room:{' '}
      <select
        value={roomId}
        onChange={e => setRoomId(e.target.value)}
        >
        <option value="general">general</option>
        <option value="travel">travel</option>
        <option value="music">music</option>
      </select>
    </label>
    <button onClick={() => setShow(!show)}>
      {show ? 'Close chat' : 'Open chat'}
    </button>
    {show && <hr />}
    {show && <ChatRoom roomId={roomId} />}
    <JSONApiData path='/api/json' />
    </>
    );
}


export default MyApp;