refactor styled components

equinor · May 23, 2024 · 7304cd1 · 7304cd1
1 parent e091995
commit 7304cd1
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/packages/power-bi/src/lib/components/PowerBi.tsx b/packages/power-bi/src/lib/components/PowerBi.tsx
@@ -11,6 +11,8 @@ import { Report } from './report/Report';
 
 import React from 'react';
 import { models, factories, service } from 'powerbi-client';
+import styled from 'styled-components';
+import { StyledLoadingWrapper } from './loading/loading.styles';
 
 Icon.add({ chevron_down, chevron_up });
 
@@ -51,16 +53,25 @@ export const PowerBi = (props: PowerBiProps) => {
   );
 };
 
+
+const StyledPowerBiBootstrap = styled.div`
+  visbility: hidden;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 0;
+  height: 0;
+`
+
 /**
  * Initializes preloading of iframe javascript resources
  */
 function PowerBiBootstrap() {
   const isBootstrapped = useRef(false);
 
   return (
-    <div
+    <StyledPowerBiBootstrap
       id="pbi-bootstrap"
-      style={{ visibility: 'hidden', position: 'absolute', top: 0, right: 0, width: 0, height: 0 }}
       ref={(ref) => {
         if (!ref || isBootstrapped.current == true) return;
         new service.Service(factories.hpmFactory, factories.wpmpFactory, factories.routerFactory).bootstrap(ref, {

diff --git a/packages/power-bi/src/lib/components/report/Report.tsx b/packages/power-bi/src/lib/components/report/Report.tsx
@@ -5,6 +5,15 @@ import { IReportEmbedConfiguration, models } from 'powerbi-client';
 import { LoadedReport } from '../loadedReport/LoadedReport';
 import { PowerBiProps } from '../PowerBi';
 import { CircularProgress } from '@equinor/eds-core-react';
+import styled from 'styled-components';
+
+const StyledLoadingWrapper = styled.div`
+  height: 100%;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+`
 
 export function Report({ getEmbedInfo, getToken, reportUri, controller, filters, bookmark }: PowerBiProps) {
   const { data: token, isLoading: isTokenLoading } = useQuery<FusionPowerBiToken>({
@@ -28,9 +37,9 @@ export function Report({ getEmbedInfo, getToken, reportUri, controller, filters,
 
   if (isTokenLoading || isEmbedLoading) {
     return (
-      <div style={{ height: '100%', display: 'flex', width: '100%', alignItems: 'center', justifyContent: 'center' }}>
+      <StyledLoadingWrapper>
         <CircularProgress size={48} />
-      </div>
+      </StyledLoadingWrapper>
     );
   }
 
@@ -44,7 +53,7 @@ export function Report({ getEmbedInfo, getToken, reportUri, controller, filters,
 
   return (
     <LoadedReport
-      config={generateEmbedConfig(embed, token!.token, filters)}
+      config={generateEmbedConfig(embed, token.token, filters)}
       onReportReady={(rep) => {
         if (bookmark) {
           rep.bookmarksManager.applyState(bookmark);