Visualisation for mock server

plgd-dev · May 15, 2024 · e9dfe0b · e9dfe0b
1 parent e139a8b
commit e9dfe0b
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/src/common/hooks/use-api.js b/src/common/hooks/use-api.js
@@ -39,7 +39,7 @@ export const useStreamApi = (url, options = {}) => {
     const [refreshIndex, setRefreshIndex] = useState(0)
     let apiMethod = get(options, 'streamApi', true) ? streamApi : fetchApi
 
-    const urlBase = url.split('?')[0]?.split('/api/')[1]
+    const urlBase = url.split('/api/')[1]
     const mockKey = urlBase.toUpperCase().replace(/\//g, '_').replace(/-/g, '_')
 
     useEffect(
@@ -51,9 +51,9 @@ export const useStreamApi = (url, options = {}) => {
                         setState({ ...state, loading: true })
                         let data = []
 
-                        if (process.env[`REACT_APP_MOCK_API_${mockKey}`]) {
+                        if (process.env[`REACT_APP_MOCK_API`] || process.env[`REACT_APP_MOCK_API_${mockKey}`]) {
                             const mockUrl = `${process.env.REACT_APP_MOCK_BASE_URL}/api/${urlBase}`
-                            data = await getData(fetchApi, mockUrl, options)
+                            data = await getData(apiMethod, mockUrl, options)
                         } else {
                             data = await getData(apiMethod, url, options)
                         }

diff --git a/src/components/Layout/Layout.styles.ts b/src/components/Layout/Layout.styles.ts
@@ -46,3 +46,16 @@ export const content = css`
     overflow: auto;
     height: 100%;
 `
+
+export const mockApiMode = css`
+    position: fixed;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000;
+    padding: 8px;
+    background: #000;
+    color: #fff;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+`
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
@@ -3,11 +3,12 @@ import { Props } from './Layout.types'
 import * as styles from './Layout.styles'
 
 const Layout: FC<Props> = (props) => {
-    const { leftPanel, header, content, isIframeMode } = props
+    const { leftPanel, header, content, isIframeMode, mockApiMode } = props
 
     return (
         <div css={styles.layout}>
             {!isIframeMode && leftPanel}
+            {mockApiMode && <div css={styles.mockApiMode}>Mock API mode</div>}
 
             <div css={styles.right}>
                 {!isIframeMode && header}

diff --git a/src/components/Layout/Layout.types.ts b/src/components/Layout/Layout.types.ts
@@ -5,4 +5,5 @@ export type Props = {
     header: ReactNode
     isIframeMode?: boolean
     leftPanel?: ReactNode
+    mockApiMode?: boolean
 }