Template explanation

This repository is a template that can be used through github to start your projects with typescript faster, offering basic and useful things in advance, it includes dependencies for test systems, lint for the quality of the code, a clean folder structure, everything needed to get started with Typescript

Note: This first section of the readme can be removed, it is only an explanation, the template this file begins below

Project Name

Write a project description

Prerequisites

This project requires NodeJS (version 8 or later) and NPM. Node and NPM are really easy to install. To make sure you have them available on your machine, try running the following command.

$ npm -v && node -v
6.4.1
v8.16.0

Table of contents

• Project Name
  • Prerequisites
  • Table of contents
  • Getting Started
  • Installation
  • Usage
    • Serving the app
    • Running the tests
    • Building a distribution version
    • Serving the distribution version
  • API
    • useBasicFetch
      • Options
    • fetchData
  • Contributing
  • Credits
  • Built With
  • Versioning
  • Authors
  • License

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Installation

BEFORE YOU INSTALL: please read the prerequisites

Start with cloning this repo on your local machine:

$ git clone https://github.com/ORG/PROJECT.git
$ cd PROJECT

To install and set up the library, run:

$ npm install -S myLib

Or if you prefer using Yarn:

$ yarn add --dev myLib

Usage

Serving the app

$ npm start

Running the tests

$ npm test

Building a distribution version

$ npm run build

This task will create a distribution version of the project inside your local dist/ folder

Serving the distribution version

$ npm run serve:dist

This will use lite-server for servign your already generated distribution version of the project.

Note this requires Building a distribution version first.

API

useBasicFetch

useBasicFetch(url: string = '', delay: number = 0)

Supported options and result fields for the useBasicFetch hook are listed below.

Options

url

Type	Default value
string	''

If present, the request will be performed as soon as the component is mounted

Example:

const MyComponent: React.FC = () => {
  const { data, error, loading } = useBasicFetch('https://api.icndb.com/jokes/random');

  if (error) {
    return <p>Error</p>;
  }

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div className="App">
      <h2>Chuck Norris Joke of the day</h2>
      {data && data.value && <p>{data.value.joke}</p>}
    </div>
  );
};

delay

Type	Default value	Description
number	0	Time in milliseconds

If present, the request will be delayed by the given amount of time

Example:

type Joke = {
  value: {
    id: number;
    joke: string;
  };
};

const MyComponent: React.FC = () => {
  const { data, error, loading } = useBasicFetch<Joke>('https://api.icndb.com/jokes/random', 2000);

  if (error) {
    return <p>Error</p>;
  }

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div className="App">
      <h2>Chuck Norris Joke of the day</h2>
      {data && data.value && <p>{data.value.joke}</p>}
    </div>
  );
};

fetchData

fetchData(url: string)

Perform an asynchronous http request against a given url

type Joke = {
  value: {
    id: number;
    joke: string;
  };
};

const ChuckNorrisJokes: React.FC = () => {
  const { data, fetchData, error, loading } = useBasicFetch<Joke>();
  const [jokeId, setJokeId] = useState(1);

  useEffect(() => {
    fetchData(`https://api.icndb.com/jokes/${jokeId}`);
  }, [jokeId, fetchData]);

  const handleNext = () => setJokeId(jokeId + 1);

  if (error) {
    return <p>Error</p>;
  }

  const jokeData = data && data.value;

  return (
    <div className="Comments">
      {loading && <p>Loading...</p>}
      {!loading && jokeData && (
        <div>
          <p>Joke ID: {jokeData.id}</p>
          <p>{jokeData.joke}</p>
        </div>
      )}
      {!loading && jokeData && !jokeData.joke && <p>{jokeData}</p>}
      <button disabled={loading} onClick={handleNext}>
        Next Joke
      </button>
    </div>
  );
};

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Add your changes: git add .
4. Commit your changes: git commit -am 'Add some feature'
5. Push to the branch: git push origin my-new-feature
6. Submit a pull request 😎

Credits

TODO: Write credits

Built With

• Dropwizard - Bla bla bla
• Maven - Maybe
• Atom - ergaerga
• Love

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• John Doe - Initial work - JohnDoe

See also the list of contributors who participated in this project.

License

MIT License © Andrea SonnY