A Recipe book

You'll need the following dependencies to work on this project:

• Node 12.x.x
• Yarn 1.x.x
• Typescript 4.x.x
• pm2 4.x.x

To make sure you have them available on your machine, try running the following command:

$ node -v && yarn -v && tsc -v && pm2 -v
v12.18.4
1.22.5
Version 4.0.5
4.5.0

Also this project use a local scripts to automate some tasks, run the following command (assuming that you are in the root of the project) to link the scripts with yarn to use the recipes-project-scripts command line.

$ cd scripts/ && yarn link && cd ..

You always can always remove the command line running unlink in the scripts folder (assuming that you are in the root of the project).

$ cd scripts/ && yarn unlink && cd ..

• 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

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.

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

$ npm start

$ npm test

$ npm run build

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

$ 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.

useBasicFetch((url: string = ""), (delay: number = 0));

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

url

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

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((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>
  );
};

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 😎

TODO: Write credits

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

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

• John Doe - Initial work - JohnDoe

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

MIT License © Andrea SonnY