Add autofetching

.nvmrc

@@ -0,0 +1 @@
+v16.13.2

package.json

@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@16bits/nes.css": "^2.3.2",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@fontsource/press-start-2p": "^4.5.1",
@@ -13,6 +12,7 @@
     "@types/react-dom": "^17.0.9",
     "clsx": "^1.1.1",
     "modern-normalize": "^1.1.0",
+    "nes.css": "^2.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",

src/components/Button.tsx

@@ -1,5 +1,22 @@
 import clsx from "clsx";
 
-export const Button: React.FC<React.ComponentPropsWithRef<"button">> = (
-  props
-) => <button {...props} className={clsx(props.className, "nes-btn")} />;
+const variants = {
+  primary: "is-primary",
+  success: "is-success",
+  warning: "is-warning",
+  error: "is-error",
+} as const;
+
+export const Button: React.FC<
+  React.ComponentPropsWithRef<"button"> & { variant?: keyof typeof variants }
+> = ({ variant, ...props }) => (
+  <button
+    {...props}
+    className={clsx(
+      props.className,
+      "nes-btn",
+      props.disabled && "is-disabled",
+      variant && variants[variant]
+    )}
+  />
+);

src/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import "modern-normalize/modern-normalize.css";
 import "@fontsource/press-start-2p";
-import "@16bits/nes.css/css/nes.min.css";
+import "nes.css/css/nes.min.css";
 
 import { App } from "app";
 

src/pages/Main.tsx

@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
 import { Button } from "components/Button";
+import { useState } from "react";
 import { useGetRandomJokeQuery } from "services/api";
 
 const Container = styled.div`
@@ -10,22 +11,36 @@ const Container = styled.div`
   max-width: 30rem;
 `;
 
-const Column = styled.div`
+const Column = styled.div<{ gap?: number | string }>`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 2rem;
+  gap: ${({ gap = "2rem" }) => gap};
   text-align: center;
+  margin: 0 1rem;
 `;
 
 export const Main: React.VFC = () => {
-  const { data: joke, isLoading, refetch } = useGetRandomJokeQuery();
+  const [auto, setAuto] = useState<Boolean>(false);
+  const {
+    data: joke,
+    isLoading,
+    isFetching,
+    refetch,
+  } = useGetRandomJokeQuery(undefined, { pollingInterval: auto ? 3000 : 0 });
   return (
     <Container>
       <Column>
         {isLoading && "Loading..."}
         {joke?.value}
-        <Button onClick={refetch}>Next cite</Button>
+        <Column gap="0.5rem">
+          <Button onClick={refetch} disabled={isFetching} variant="primary">
+            Next joke
+          </Button>
+          <Button onClick={() => setAuto((e) => !e)}>
+            {auto ? "Disable" : "Enable"} auto next
+          </Button>
+        </Column>
       </Column>
     </Container>
   );

yarn.lock

@@ -2,11 +2,6 @@
 # yarn lockfile v1
 
 
-"@16bits/nes.css@^2.3.2":
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/@16bits/nes.css/-/nes.css-2.3.2.tgz#e69db834119b33ae8d3cb044f106a07a17cadd6f"
-  integrity sha512-nEM5PIth+Bab5JSOa4uUR+PMNUsNTYxA55oVlG3gXI/4LoYtWS767Uv9Pu/KCbHXVvnIjt4ZXt13kZw3083qTw==
-
 "@ampproject/remapping@^2.0.0":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.0.4.tgz#ab4b6d858526ebee0d6c3aa5c3fb56a941c0d7be"
@@ -5944,6 +5939,11 @@ neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
+nes.css@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/nes.css/-/nes.css-2.3.0.tgz#112c834dd8a18cda570ab76d66b26b078a94c919"
+  integrity sha512-lCFZs9vj3f5RVdbvTL/kSxiYsOARwSeAdJaMNo+bCgmWOO9x8ay7QpT4yQVKHy3r5Dttzd0uqVdpt3fvvx6EpQ==
+
 no-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"