chore: add react-query in playground

Author: devrnt

playground/modules/wizard/reactQuery/index.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+import { Wizard } from '../../../../dist';
+import { Footer } from '../../../components';
+import Section from '../../common/section';
+import LazyQueryStep from './lazyQuery';
+import QueryStep from './queryStep';
+
+const queryClient = new QueryClient();
+
+const ReactQuerySection: React.FC = () => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Section
+        title="React query"
+        description="integration with react-query"
+        showDivider={false}
+      >
+        <Wizard footer={<Footer />}>
+          <QueryStep number={1} />
+          <LazyQueryStep number={2} />
+          <QueryStep number={3} />
+          <LazyQueryStep number={4} />
+          <QueryStep number={5} />
+        </Wizard>
+      </Section>
+    </QueryClientProvider>
+  );
+};
+
+export default ReactQuerySection;

playground/modules/wizard/reactQuery/lazyQuery.tsx

@@ -0,0 +1,56 @@
+import { styled } from 'goober';
+import * as React from 'react';
+import { useMutation } from 'react-query';
+
+import { useWizard } from '../../../../dist';
+
+const Container = styled('div')`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  min-height: 35vh;
+`;
+
+const P = styled('p')`
+  color: var(--text);
+`;
+
+type Props = {
+  number: number;
+};
+
+const LazyQueryStep: React.FC<Props> = ({ number }) => {
+  const { handleStep, isLoading } = useWizard();
+  const { error, data, mutateAsync } = useMutation('repDataMutation', () =>
+    fetch('https://jsonplaceholder.typicode.com/todos').then((res) =>
+      res.json(),
+    ),
+  );
+
+  handleStep(() => {
+    return mutateAsync();
+  });
+
+  const content = React.useMemo(() => {
+    if (error) return 'An error has occurred: ' + (error as Error).message;
+
+    return data
+      ? data.map((todo) => (
+          <div key={todo.id}>
+            <h1>{data.name}</h1>
+          </div>
+        ))
+      : !isLoading && <p>Click next button to make request</p>;
+  }, [error, data, isLoading]);
+
+  return (
+    <Container>
+      <P>Step {number}</P>
+      {content}
+      {isLoading && <P>Loading...</P>}
+    </Container>
+  );
+};
+
+export default LazyQueryStep;

playground/modules/wizard/reactQuery/queryStep.tsx

@@ -0,0 +1,50 @@
+import { styled } from 'goober';
+import * as React from 'react';
+import { useQuery } from 'react-query';
+
+const Container = styled('div')`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  min-height: 35vh;
+`;
+
+const P = styled('p')`
+  color: var(--text);
+`;
+
+type Props = {
+  number: number;
+};
+
+const QueryStep: React.FC<Props> = ({ number }) => {
+  const { isLoading, error, data } = useQuery('repoData', () =>
+    fetch(`https://jsonplaceholder.typicode.com/todos/${number}`).then((res) =>
+      res.json(),
+    ),
+  );
+
+  const content = React.useMemo(() => {
+    if (isLoading) return 'Loading...';
+
+    if (error) return 'An error has occurred: ' + (error as Error).message;
+
+    return (
+      <div>
+        <h1>
+          todo {data.id}: {data.title}
+        </h1>
+      </div>
+    );
+  }, [isLoading, error, data]);
+
+  return (
+    <Container>
+      <P>Step {number}</P>
+      {content}
+    </Container>
+  );
+};
+
+export default QueryStep;

playground/modules/wizard/section.tsx

@@ -12,7 +12,8 @@
   "dependencies": {
     "framer-motion": "^3.1.1",
     "goober": "^2.0.19-next.1",
-    "react-app-polyfill": "^2.0.0"
+    "react-app-polyfill": "^2.0.0",
+    "react-query": "^3.5.11"
   },
   "alias": {
     "react": "../node_modules/react",

playground/package.json

@@ -807,7 +807,7 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/runtime@^7.4.4", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
   integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
@@ -3199,6 +3199,14 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+match-sorter@^6.0.2:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.1.0.tgz#7fec6808d94311a35fef7fd842a11634f2361bd7"
+  integrity sha512-sKPMf4kbF7Dm5Crx0bbfLpokK68PUJ/0STUIOPa1ZmTZEA3lCaPK3gapQR573oLmvdkTfGojzySkIwuq6Z6xRQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    remove-accents "0.4.2"
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -4259,6 +4267,14 @@ react-app-polyfill@^2.0.0:
     regenerator-runtime "^0.13.7"
     whatwg-fetch "^3.4.1"
 
+react-query@^3.5.11:
+  version "3.5.11"
+  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.5.11.tgz#7dbb21e3783437d612465ab938a854bbdec8d785"
+  integrity sha512-tn4IX68WnZ5bKVcmkltPf8B1ZO2Uh212bldobwSyyHUYTt8Z3cOqldBkigF2OmY8IZI77A9rKe6wV6s1YOk4vg==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    match-sorter "^6.0.2"
+
 readable-stream@^2.0.2, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.3, readable-stream@~2.3.6:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
@@ -4356,6 +4372,11 @@ relateurl@^0.2.7:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
+[email protected]:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
+  integrity sha1-CkPTqq4egNuRngeuJUsoXZ4ce7U=
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"