removes FooterProvider in favor of just useQuery (#2125)

* removes FooterProvider in favor of just useQuery

* removes prefetching of footerlayout

Author: cammiida

src/features/footer/Footer.tsx

@@ -1,20 +1,33 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 
+import { useQuery } from '@tanstack/react-query';
 import cn from 'classnames';
 
 import { AltinnLogo, LogoColor } from 'src/components/logo/AltinnLogo';
+import { useAppQueries } from 'src/core/contexts/AppQueriesProvider';
 import { ContextNotProvided } from 'src/core/contexts/context';
+import { DisplayError } from 'src/core/errorHandling/DisplayError';
 import { useLaxApplicationMetadata } from 'src/features/applicationMetadata/ApplicationMetadataProvider';
 import { createFooterComponent } from 'src/features/footer';
 import classes from 'src/features/footer/Footer.module.css';
-import { useFooterLayout } from 'src/features/footer/FooterLayoutProvider';
 
 export const Footer = () => {
-  const footerLayout = useFooterLayout();
+  const { fetchFooterLayout } = useAppQueries();
+  const { data, error: footerLayoutError } = useQuery({
+    queryKey: ['fetchFooterLayout'],
+    queryFn: fetchFooterLayout,
+    staleTime: 1000 * 60 * 60 * 24, // 24 hours
+  });
+
   const application = useLaxApplicationMetadata();
+
+  if (footerLayoutError) {
+    return <DisplayError error={footerLayoutError} />;
+  }
+
   const shouldUseOrgLogo = application !== ContextNotProvided && application.logo != null;
 
-  const components = useMemo(() => footerLayout.map((props) => createFooterComponent(props)), [footerLayout]);
+  const components = data?.footer?.map((props) => createFooterComponent(props)) ?? [];
   if (!components.length && !shouldUseOrgLogo) {
     return null;
   }

src/features/footer/FooterLayoutProvider.tsx

@@ -22,7 +22,6 @@ import { AppQueriesProvider } from 'src/core/contexts/AppQueriesProvider';
 import { WindowTitleProvider } from 'src/core/ui/WindowTitleProvider';
 import { ApplicationMetadataProvider } from 'src/features/applicationMetadata/ApplicationMetadataProvider';
 import { ApplicationSettingsProvider } from 'src/features/applicationSettings/ApplicationSettingsProvider';
-import { FooterLayoutProvider } from 'src/features/footer/FooterLayoutProvider';
 import { UiConfigProvider } from 'src/features/form/layout/UiConfigContext';
 import { LayoutSetsProvider } from 'src/features/form/layoutSets/LayoutSetsProvider';
 import { GlobalFormDataReadersProvider } from 'src/features/formData/FormDataReaders';
@@ -87,22 +86,20 @@ function Root() {
               <TextResourcesProvider>
                 <OrgsProvider>
                   <ApplicationSettingsProvider>
-                    <FooterLayoutProvider>
-                      <PartyProvider>
-                        <KeepAliveProvider>
-                          <WindowTitleProvider>
-                            <App />
-                            <ToastContainer
-                              position='top-center'
-                              theme='colored'
-                              transition={Slide}
-                              draggable={false}
-                            />
-                            <ScrollRestoration />
-                          </WindowTitleProvider>
-                        </KeepAliveProvider>
-                      </PartyProvider>
-                    </FooterLayoutProvider>
+                    <PartyProvider>
+                      <KeepAliveProvider>
+                        <WindowTitleProvider>
+                          <App />
+                          <ToastContainer
+                            position='top-center'
+                            theme='colored'
+                            transition={Slide}
+                            draggable={false}
+                          />
+                          <ScrollRestoration />
+                        </WindowTitleProvider>
+                      </KeepAliveProvider>
+                    </PartyProvider>
                   </ApplicationSettingsProvider>
                 </OrgsProvider>
               </TextResourcesProvider>

src/index.tsx

@@ -3,7 +3,6 @@ import { matchPath } from 'react-router-dom';
 import { usePrefetchQuery } from 'src/core/queries/usePrefetchQuery';
 import { useApplicationMetadataQueryDef } from 'src/features/applicationMetadata/ApplicationMetadataProvider';
 import { useApplicationSettingsQueryDef } from 'src/features/applicationSettings/ApplicationSettingsProvider';
-import { useFooterLayoutQueryDef } from 'src/features/footer/FooterLayoutProvider';
 import { useLayoutSetsQueryDef } from 'src/features/form/layoutSets/LayoutSetsProvider';
 import { useInstanceDataQueryDef } from 'src/features/instance/InstanceContext';
 import { useProcessQueryDef } from 'src/features/instance/ProcessContext';
@@ -26,7 +25,6 @@ export function AppPrefetcher() {
   usePrefetchQuery(useProfileQueryDef(true), Boolean(partyId));
   usePrefetchQuery(useOrgsQueryDef());
   usePrefetchQuery(useApplicationSettingsQueryDef());
-  usePrefetchQuery(useFooterLayoutQueryDef());
   usePrefetchQuery(usePartiesQueryDef(true), Boolean(partyId));
   usePrefetchQuery(useCurrentPartyQueryDef(true), Boolean(partyId));
 

src/queries/appPrefetcher.ts

@@ -25,7 +25,6 @@ import { AppQueriesProvider } from 'src/core/contexts/AppQueriesProvider';
 import { RenderStart } from 'src/core/ui/RenderStart';
 import { ApplicationMetadataProvider } from 'src/features/applicationMetadata/ApplicationMetadataProvider';
 import { ApplicationSettingsProvider } from 'src/features/applicationSettings/ApplicationSettingsProvider';
-import { FooterLayoutProvider } from 'src/features/footer/FooterLayoutProvider';
 import { FormProvider } from 'src/features/form/FormContext';
 import { PageNavigationProvider } from 'src/features/form/layout/PageNavigationContext';
 import { UiConfigProvider } from 'src/features/form/layout/UiConfigContext';
@@ -284,9 +283,7 @@ function DefaultProviders({ children, queries, queryClient, Router = DefaultRout
                             <ProfileProvider>
                               <PartyProvider>
                                 <TextResourcesProvider>
-                                  <FooterLayoutProvider>
-                                    <InstantiationProvider>{children}</InstantiationProvider>
-                                  </FooterLayoutProvider>
+                                  <InstantiationProvider>{children}</InstantiationProvider>
                                 </TextResourcesProvider>
                               </PartyProvider>
                             </ProfileProvider>