feat: add fetcher and hook

.storybook/preview.tsx

@@ -1,5 +1,3 @@
-import { ExampleProvider } from '../src';
-
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
@@ -9,7 +7,3 @@ export const parameters = {
     },
   },
 };
-
-export const decorators = [
-  (Story) => <ExampleProvider>{Story()}</ExampleProvider>,
-];

README.md

@@ -21,57 +21,6 @@
 
 <br />
 
-### <b>Bootstrap</b>
-
-```ts
-npx @ricardo-jrm/empathy
-```
-
-Boilerplate `React` project bootstrapped with all necessary configs and workflows
-
-<br />
-
-### <b>Workflows</b>
-
-Quality Assurance
-
-- Will lint code and run tests
-- Runs on `pull_request` sync and `push` to `main`
-
-Release
-
-- Will create a GitHub release with auto generated versioning and changelog
-- Will publish the package to the public NPM registry
-- Runs on `push` to `main` and after the QA job
-
-Publish to GitHub (Public)
-
-- Will publish the package to the public GitHub registry
-- Runs on `workflow_dispatch`
-
-<br />
-
-### <b>Dev Dependencies</b>
-
-- `React`
-- `Typescript`
-- `Prettier`
-- `ESLint`
-- `Commit Lint`
-- `Lint Staged`
-- `Husky`
-- `Jest`
-- `React Testing Library`
-- `Storybook`
-- `Webpack`
-- `Semantic Release`
-
-<br />
-
----
-
-<br />
-
 ### <b>Install</b>
 
 ```ts
@@ -85,24 +34,9 @@ yarn add @ricardo-jrm/empathy
 ### <b>Usage</b>
 
 ```ts
-// hook
-import { useExampleHook, ExampleHookType } from '@ricardo-jrm/empathy';
-
-// context
-import {
-  ExampleContext,
-  useExampleContext,
-  ExampleContextType,
-} from '@ricardo-jrm/empathy';
-
-// component
-import {
-  ExampleComponent,
-  ExampleComponentProps,
-} from '@ricardo-jrm/empathy';
-
-// provider
-import { ExampleProvider, ExampleProviderProps } from '@ricardo-jrm/empathy';
+import { useEmpathy } from '@ricardo-jrm/empathy';
+
+const { data, error, isLoading } = useEmpathy(endpoint);
 ```
 
 <br />

package.json

@@ -94,8 +94,10 @@
     "webpack-cli": "^4.9.1"
   },
   "dependencies": {
+    "axios": "^0.24.0",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "swr": "^1.1.1"
   },
   "peerDependencies": {
     "react": "^17.0.2",

src/components/example/index.tsx

@@ -1,4 +1,9 @@
-import React from 'react';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-console */
+import React, { useState, useEffect, useCallback } from 'react';
+import { fetcher, useEmpathy } from '../../hooks/useEmpathy';
+
+const exampleEndpoint = 'https://jsonplaceholder.typicode.com/users/1';
 
 /**
  * ExampleComponent props
@@ -13,6 +18,68 @@ export interface ExampleComponentProps {
 /**
  * ExampleComponent
  */
-export const ExampleComponent = ({ text }: ExampleComponentProps) => (
-  <span data-testid="test-component">{text}</span>
-);
+export const ExampleComponent = ({ text }: ExampleComponentProps) => {
+  const [fetchedData, fetchedDataSet] = useState<any>(undefined);
+
+  const fetchJson = useCallback(() => {
+    fetchedDataSet(undefined);
+    setTimeout(async () => {
+      try {
+        fetchedDataSet(await fetcher(exampleEndpoint));
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.warn(`Error fetching with fetcher "${exampleEndpoint}": `, err);
+        // eslint-disable-next-line no-console
+        console.error(err);
+      }
+    }, 3000);
+  }, []);
+
+  useEffect(() => {
+    fetchJson();
+  }, [fetchJson]);
+
+  const {
+    data: empathyData,
+    error: empathyError,
+    isLoading: isLoadingEmpathy,
+  } = useEmpathy<any>(exampleEndpoint);
+
+  useEffect(() => {
+    console.log({ fetchedData });
+  }, [fetchedData]);
+
+  useEffect(() => {
+    console.log({ empathyData });
+  }, [empathyData]);
+
+  useEffect(() => {
+    console.log({ empathyError });
+  }, [empathyError]);
+
+  return (
+    <div>
+      <span data-testid="test-component">{text}</span>
+      <div>
+        <b>Fetch: </b> {fetchedData ? fetchedData?.name : 'Loading...'}
+      </div>
+      <div>
+        <b>Empathy: </b> {!isLoadingEmpathy ? empathyData?.name : 'Loading...'}
+      </div>
+      <div
+        style={{
+          paddingTop: '30px',
+        }}
+      >
+        <button
+          type="button"
+          onClick={() => {
+            fetchJson();
+          }}
+        >
+          Submit
+        </button>
+      </div>
+    </div>
+  );
+};

src/hooks/useEmpathy/index.ts

@@ -0,0 +1,42 @@
+/* eslint-disable no-console */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import axios, { AxiosResponse, AxiosError } from 'axios';
+import useSWR from 'swr';
+
+/**
+ * Fetcher function
+ */
+export const fetcher = <T>(endpoint: string) =>
+  axios.get(endpoint).then((res: AxiosResponse<T>) => res.data);
+
+/**
+ * useEmpathy props
+ */
+export type UseEmpathyProps = string;
+
+/**
+ * useEmpathy return type
+ */
+export type UseEmpathyType<T> = {
+  data: T | undefined;
+  error: any | undefined;
+  isLoading: boolean;
+};
+
+/**
+ * useEmpathy hook
+ */
+export const useEmpathy = <T>(endpoint: UseEmpathyProps): UseEmpathyType<T> => {
+  const { data, error } = useSWR<T, AxiosError>(endpoint, fetcher);
+
+  if (error) {
+    console.warn(`Error fetching "${endpoint}": `, { error });
+    console.error(error);
+  }
+
+  return {
+    data,
+    error,
+    isLoading: !error && !data,
+  };
+};

src/index.ts

@@ -1,11 +1,2 @@
-export { ExampleComponent } from './components/example';
-export type { ExampleComponentProps } from './components/example';
-
-export { useExampleHook } from './hooks/example';
-export type { ExampleHookType } from './hooks/example';
-
-export { ExampleContext, useExampleContext } from './contexts/example';
-export type { ExampleContextType } from './contexts/example';
-
-export { ExampleProvider } from './providers/example';
-export type { ExampleProviderProps } from './providers/example';
+export { fetcher, useEmpathy } from './hooks/useEmpathy';
+export type { UseEmpathyProps, UseEmpathyType } from './hooks/useEmpathy';

yarn.lock

@@ -4325,6 +4325,13 @@ axe-core@^4.3.5:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.3.5.tgz#78d6911ba317a8262bfee292aeafcc1e04b49cc5"
   integrity sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA==
 
+axios@^0.24.0:
+  version "0.24.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
+  integrity sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==
+  dependencies:
+    follow-redirects "^1.14.4"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -7135,6 +7142,11 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+follow-redirects@^1.14.4:
+  version "1.14.6"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.6.tgz#8cfb281bbc035b3c067d6cd975b0f6ade6e855cd"
+  integrity sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -13367,6 +13379,11 @@ supports-hyperlinks@^2.0.0, supports-hyperlinks@^2.1.0:
     has-flag "^4.0.0"
     supports-color "^7.0.0"
 
+swr@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-1.1.1.tgz#f13346cc830d7950183af57b341bfabb4cc90d43"
+  integrity sha512-ZpUHyU3N3snj2QGFeE2Fd3BXl1CVS6YQIQGb1ttPAkTmvwZqDyV3GRMNPsaeAYCBM74tfn4XbKx28FVQR0mS7Q==
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"