✨ add Fetch (react-query) example

Author: Yago

playground/package.json

@@ -12,10 +12,14 @@
     "storybook:build": "build-storybook"
   },
   "dependencies": {
+    "@tailwindcss/forms": "^0.5.3",
+    "axios": "^0.27.2",
     "clsx": "^1.2.1",
     "next": "12.2.5",
+    "ramda": "^0.28.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-query": "^3.39.2"
   },
   "devDependencies": {
     "@babel/core": "^7.18.13",
@@ -30,6 +34,7 @@
     "@svgr/webpack": "^6.3.1",
     "@types/jest": "^29.0.0",
     "@types/node": "^18.7.14",
+    "@types/ramda": "^0.28.15",
     "@types/react": "^18.0.18",
     "@types/react-dom": "^18.0.6",
     "autoprefixer": "^10.4.8",

playground/src/components/Blank/Blank.tsx

@@ -16,6 +16,4 @@ const Blank = ({ name }: Props): JSX.Element => {
   );
 };
 
-Blank.defaultProps = {};
-
 export default Blank;

playground/src/components/Counter/Counter.tsx

@@ -1,20 +1,22 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import Icon from 'components/Icon';
 import { add, subtract } from 'utils';
 
 export type CounterProps = {
-  count: number;
+  initial: number;
+  onChange: (c: number) => void;
 };
 
-const Counter = ({ count: defaultCount }: CounterProps): JSX.Element => {
-  const [count, setCount] = useState(defaultCount);
+const Counter = ({ initial, onChange }: CounterProps): JSX.Element => {
+  const [count, setCount] = useState(initial);
+
+  useEffect(() => {
+    onChange(count);
+  }, [count, onChange]);
 
   return (
-    <div
-      id="counter"
-      className="flex items-center justify-center w-full h-screen"
-    >
+    <div id="counter">
       <button
         type="button"
         onClick={() => setCount(subtract(count, 1))}
@@ -37,8 +39,4 @@ const Counter = ({ count: defaultCount }: CounterProps): JSX.Element => {
   );
 };
 
-Counter.defaultProps = {
-  count: 0,
-};
-
 export default Counter;

playground/src/components/Fetcher/Fetcher.module.css

@@ -0,0 +1,3 @@
+.blank {
+  @apply text-orange-500;
+}

playground/src/components/Fetcher/Fetcher.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import Fetcher from './Fetcher';
+
+export default {
+  title: 'Demo/Fetcher',
+  component: Fetcher,
+} as ComponentMeta<typeof Fetcher>;
+
+const Template: ComponentStory<typeof Fetcher> = args => <Fetcher {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  name: 'John',
+};

playground/src/components/Fetcher/Fetcher.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { isNil } from 'ramda';
+
+import useAgify from 'hooks/useAgify';
+
+const Fetcher = (): JSX.Element => {
+  const [name, setName] = useState<string | null>(null);
+  const { data, isLoading } = useAgify(name);
+
+  console.log(data);
+
+  return (
+    <div>
+      {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+      <input
+        type="text"
+        name="name"
+        className="block w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+        placeholder="Your name..."
+        onChange={e => setName(e.target.value)}
+        value={name ?? ''}
+      />
+      {!isLoading && !isNil(data) && (
+        <p className="mt-4">
+          {name}, your age is <b>{data.age}</b> 😇
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default Fetcher;

playground/src/components/Fetcher/index.ts

@@ -0,0 +1 @@
+export { default } from './Fetcher';

playground/src/components/Layout/Layout.tsx

@@ -7,13 +7,11 @@ type Props = {
 };
 
 const Layout = ({ children }: Props): JSX.Element => (
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   <div>
     <Icons />
     {children}
   </div>
 );
-Layout.defaultProps = {};
 
 // For Storybook
 export const LayoutDecorator = (Story: FunctionComponent): JSX.Element => (

playground/src/hooks/useAgify.ts

@@ -0,0 +1,22 @@
+import { useQuery, UseQueryResult } from 'react-query';
+import axios from 'axios';
+import { isNil } from 'ramda';
+
+import AgifyResponse from '../types/agify-response';
+
+const getAgify = async (name: string | null): Promise<AgifyResponse> => {
+  // This axios method could be extract in a service to handle cancel tokens
+  const { data } = await axios({
+    url: `https://api.agify.io/?name=${name}`,
+    method: 'GET',
+  });
+
+  return data;
+};
+
+const useAgify = (name: string | null): UseQueryResult<AgifyResponse, Error> =>
+  useQuery(`agify_${name}`, () => getAgify(name), {
+    enabled: !isNil(name),
+  });
+
+export default useAgify;

playground/src/pages/_app.tsx

@@ -1,10 +1,15 @@
 import React from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import type { AppProps } from 'next/app';
 
 import 'styles/globals.css';
 
+const queryClient = new QueryClient();
+
 const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => (
-  <Component {...pageProps} />
+  <QueryClientProvider client={queryClient}>
+    <Component {...pageProps} />
+  </QueryClientProvider>
 );
 
 export default MyApp;

playground/src/pages/index.tsx

@@ -1,13 +1,19 @@
 import React from 'react';
 
-import Blank from 'components/Blank';
 import Counter from 'components/Counter';
+import Fetcher from 'components/Fetcher';
 import Layout from 'components/Layout';
 
 const Home = (): JSX.Element => (
   <Layout>
-    <Counter />
-    <Blank name="john" />
+    <div className="flex flex-col items-center justify-center w-full h-screen">
+      <div>
+        <h2 className="my-4 text-xl font-bold">Counter example:</h2>
+        <Counter initial={0} onChange={c => console.log(c)} />
+        <h2 className="my-4 text-xl font-bold">Fetch example:</h2>
+        <Fetcher />
+      </div>
+    </div>
   </Layout>
 );
 

playground/src/types/agify-response.ts

@@ -0,0 +1,7 @@
+type AgifyResponse = {
+  name: string;
+  age: number;
+  count: number;
+};
+
+export default AgifyResponse;

playground/tailwind.config.js

@@ -6,5 +6,7 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/forms'),
+  ],
 }