Implementa tanstack e serviços de consulta

paulhenrique · Oct 6, 2023 · 70ae372 · 70ae372
1 parent 510b5b6
commit 70ae372
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 30 deletions.
diff --git a/src/App/index.jsx b/src/App/index.jsx
@@ -11,34 +11,58 @@ import ClearUserHandler from "../components/ClearUserHandler";
 import ChangeThemeMotor from "../components/ChangeThemeMotor";
 import ChangeThemeHandler from "../components/ChangeThemeHandler";
 import ShareHandler from "../components/ShareHandler";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 const persistor = persistStore(store);
 
+const queryClient = new QueryClient();
+
+import { createServer } from "miragejs";
+
+let server = createServer({
+  namespace: "/api",
+});
+
+server.get("/marvel-heroes-names", () => {
+  return {
+    data: [
+      "Steve Rogers",
+      "Tony Stark",
+      "Natasha Romanova",
+      "Jennifer Walters",
+    ],
+  };
+});
+
 const App = () => {
   return (
     <SnackbarProvider>
       <Provider store={store}>
         <PersistGate persistor={persistor} loading={null}>
-          <ChangeThemeMotor>
-            <CssBaseline />
-            <ClearUserHandler />
-            <ChangeThemeHandler />
-            <ShareHandler />
-            <Box
-              sx={{
-                maxWidth: {
-                  md: "50%",
-                  sm: "70%",
-                  xs: "90%",
-                },
-                pt: "104px",
-                mx: "auto",
-                minHeight: "100vh",
-              }}
-            >
-              <Router excedent={<AppBar />} />
-            </Box>
-          </ChangeThemeMotor>
+          <QueryClientProvider client={queryClient}>
+            <ChangeThemeMotor>
+              <CssBaseline />
+              <ClearUserHandler />
+              <ChangeThemeHandler />
+              <ShareHandler />
+              <Box
+                sx={{
+                  maxWidth: {
+                    md: "50%",
+                    sm: "70%",
+                    xs: "90%",
+                  },
+                  pt: "104px",
+                  mx: "auto",
+                  minHeight: "100vh",
+                }}
+              >
+                <Router excedent={<AppBar />} />
+              </Box>
+            </ChangeThemeMotor>
+            <ReactQueryDevtools />
+          </QueryClientProvider>
         </PersistGate>
       </Provider>
     </SnackbarProvider>

diff --git a/src/main.jsx b/src/main.jsx
@@ -2,4 +2,5 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import "@/assets/css/global.css";
+
 ReactDOM.createRoot(document.getElementById("root")).render(<App />);
diff --git a/src/pages/Home/components/Welcome/index.jsx b/src/pages/Home/components/Welcome/index.jsx
@@ -3,27 +3,27 @@ import React, { useState } from "react";
 import { useDispatch } from "react-redux";
 import { updateUserName } from "../../../../store/features/user";
 import ManualUserNameEnter from "./components/ManualUserNameEnter";
-
-const MarvelHeroesNameList = [
-  "Steve Rogers",
-  "Tony Stark",
-  "Natasha Romanova",
-  "Jennifer Walters",
-];
+import useMarvelHeroesNames from "@/api/hooks/useMarvelHeroesNames";
+import Loading from "@/components/Loading";
 
 const Welcome = () => {
   const [isOtherNameClicked, setIsOtherNameClicked] = useState(false);
   const dispatch = useDispatch();
 
+  const { data: MarvelHeroesNameList, isLoading } = useMarvelHeroesNames();
+
   const handleSelectedUsername = (username) =>
     dispatch(updateUserName(username));
 
   return (
     <>
       <Typography variant="h5">Primeiro, escolha seu nome</Typography>
-      <Collapse in={!isOtherNameClicked}>
+      <Collapse in={isLoading}>
+        <Loading />
+      </Collapse>
+      <Collapse in={!isOtherNameClicked && !isLoading}>
         <Box display="flex" flexDirection="column" gap="12px" mt="12px">
-          {MarvelHeroesNameList.map((name) => (
+          {MarvelHeroesNameList?.map((name) => (
             <Button
               variant="contained"
               key={name}
@@ -37,7 +37,7 @@ const Welcome = () => {
           </Button>
         </Box>
       </Collapse>
-      <Collapse in={isOtherNameClicked}>
+      <Collapse in={isOtherNameClicked && !isLoading}>
         <ManualUserNameEnter onComplete={handleSelectedUsername} />
         <Button fullWidth onClick={() => setIsOtherNameClicked(false)}>
           Voltar às opções