App.tsx 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. /*!
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. /*
  20. Base setup for anywhere we add react to the UI
  21. */
  22. import React, { PropsWithChildren, useEffect } from "react";
  23. import { BrowserRouter } from "react-router-dom";
  24. import { ChakraProvider } from "@chakra-ui/react";
  25. import { CacheProvider } from "@emotion/react";
  26. import type { EmotionCache } from "@emotion/cache";
  27. import { QueryClient, QueryClientProvider } from "react-query";
  28. import theme from "./theme";
  29. import { ContainerRefProvider, useContainerRef } from "./context/containerRef";
  30. import { TimezoneProvider } from "./context/timezone";
  31. import { AutoRefreshProvider } from "./context/autorefresh";
  32. import { isInputInFocus } from "./utils/useKeysPress";
  33. const queryClient = new QueryClient({
  34. defaultOptions: {
  35. queries: {
  36. notifyOnChangeProps: "tracked",
  37. refetchOnWindowFocus: false,
  38. retry: 1,
  39. retryDelay: 500,
  40. refetchOnMount: true, // Refetches stale queries, not "always"
  41. staleTime: 5 * 60 * 1000, // 5 minutes
  42. initialDataUpdatedAt: new Date().setMinutes(-6), // make sure initial data is already expired
  43. },
  44. mutations: {
  45. retry: 1,
  46. retryDelay: 500,
  47. },
  48. },
  49. });
  50. interface AppProps extends PropsWithChildren {
  51. cache: EmotionCache;
  52. }
  53. // Chakra needs to access the containerRef provider so our tooltips pick up the correct styles
  54. const ChakraApp = ({ children }: PropsWithChildren) => {
  55. const containerRef = useContainerRef();
  56. return (
  57. <ChakraProvider
  58. theme={theme}
  59. toastOptions={{ portalProps: { containerRef } }}
  60. >
  61. <QueryClientProvider client={queryClient}>
  62. <TimezoneProvider>
  63. <AutoRefreshProvider>
  64. <BrowserRouter>{children}</BrowserRouter>
  65. </AutoRefreshProvider>
  66. </TimezoneProvider>
  67. </QueryClientProvider>
  68. </ChakraProvider>
  69. );
  70. };
  71. function App({ children, cache }: AppProps) {
  72. useEffect(() => {
  73. localStorage.setItem(isInputInFocus, "false");
  74. }, []);
  75. return (
  76. <React.StrictMode>
  77. <CacheProvider value={cache}>
  78. <ContainerRefProvider>
  79. <ChakraApp>{children}</ChakraApp>
  80. </ContainerRefProvider>
  81. </CacheProvider>
  82. </React.StrictMode>
  83. );
  84. }
  85. export default App;