Merge pull request #1 from jeswr/beta

Beta

README.md

@@ -1,13 +1,45 @@
-# template-typescript
-Template repo for my Typescript projects
-[![GitHub license](https://img.shields.io/github/license/jeswr/useState.svg)](https://github.com/jeswr/useState/blob/master/LICENSE)
-[![npm version](https://img.shields.io/npm/v/@jeswr/use-state.svg)](https://www.npmjs.com/package/@jeswr/use-state)
-[![build](https://img.shields.io/github/workflow/status/jeswr/useState/Node.js%20CI)](https://github.com/jeswr/useState/tree/main/)
+# useAsyncEffect
+
+Convenience function for usage of useEffect with async functions in React.
+
+[![GitHub license](https://img.shields.io/github/license/jeswr/useAsyncEffect.svg)](https://github.com/jeswr/useState/blob/master/LICENSE)
+[![npm version](https://img.shields.io/npm/v/@jeswr/use-async-effect.svg)](https://www.npmjs.com/package/@jeswr/use-async-effect)
+[![build](https://img.shields.io/github/workflow/status/jeswr/useAsyncEffect/Node.js%20CI)](https://github.com/jeswr/useAsyncEffect/tree/main/)
 [![Dependabot](https://badgen.net/badge/Dependabot/enabled/green?icon=dependabot)](https://dependabot.com/)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
+## Why
+
+Convenience and makes code cleaner. The following is allowed
+
+```ts
+import { useAsyncEffect } from "@jeswr/use-async-effect";
+
+function MyComponent() {
+  useAsyncEffect(async () => {
+    /* Effect goes here */
+  }, []);
+  return /* JSX Output */
+}
+```
+
+in constrast, async function calls with useEffect in React should be structured as follows:
+
+```ts
+import { useEffect } from "react";
+
+function MyComponent() {
+  useEffect(() => {
+    (async () => {
+      /* Effect goes here */
+    })();
+  }, []);
+  return /* JSX Output */
+}
+```
 
 ## License
+
 ©2021–present
 [Jesse Wright](https://github.com/jeswr),
-[MIT License](https://github.com/jeswr/useState/blob/master/LICENSE).
+[MIT License](https://github.com/jeswr/useAsyncEffect/blob/master/LICENSE).

SECURITY.md

@@ -10,4 +10,4 @@ Versions of the project currently recieving security updates
 
 ## Reporting a Vulnerability
 
-To report a vunerability send an email to [jesse.wright@anu.edu.au](jesse.wright@anu.edu.au) with subject "Vunerability Report: template-typescript"
+To report a vunerability send an email to [jesse.wright@anu.edu.au](jesse.wright@anu.edu.au) with subject "Vunerability Report: use async effect"

__tests__/main-test.ts

@@ -1 +1,33 @@
+import { useState } from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { useAsyncEffect } from '../lib';
+
+function resolutionTestHook() {
+  const [state, setState] = useState('original value');
+  useAsyncEffect(async () => {
+    const value = await Promise.resolve('resolved Value');
+    setState(value);
+  }, []);
+  return state;
+}
+
+describe('Main use async effect hooks', () => {
+  it('Should return default value if there are no calls to dispatch', () => {
+    const { result } = renderHook(() => resolutionTestHook());
+
+    expect(result.current).toBe('original value');
+  });
+  // it('Should return the resolved value after acting', () => {
+  //   const { result } = renderHook(() => resolutionTestHook());
+
+  //   act(async () => {
+  //     resolutionTestHook();
+  //   });
+
+  //   act(() => {
+  //     expect(result.current).toBe('resolved value');
+  //   });
+  // });
+});
+
 it('', () => { expect(true).toEqual(true); });

lib/index.ts

@@ -1 +1,8 @@
-export default {};
+import { useEffect } from 'react';
+
+export function useAsyncEffect(
+  effect: () => Promise<ReturnType<React.EffectCallback>>,
+  deps?: React.DependencyList | undefined,
+) {
+  useEffect(() => { effect(); }, deps);
+}