Added state to the top level for the real API

Signed-off-by: Karan Shah <karan.shah@simplybusiness.co.uk>

plugins/airbrake/dev/components/ApiBar/ApiBar.tsx

@@ -13,8 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useState } from 'react';
+import React from 'react';
 import { makeStyles, TextField } from '@material-ui/core';
+import { Context } from '../ContextProvider';
 
 const useStyles = makeStyles({
   root: {
@@ -26,21 +27,23 @@ const useStyles = makeStyles({
 
 export const ApiBar = () => {
   const classes = useStyles();
-  const [projectId, setProjectId] = useState<number>();
-  const [apiKey, setApiKey] = useState<string>('');
 
   return (
-    <div className={classes.root}>
-      <TextField
-        label="Project ID"
-        value={projectId}
-        onChange={e => setProjectId(parseInt(e.target.value, 10))}
-      />
-      <TextField
-        label="API Key"
-        value={apiKey}
-        onChange={e => setApiKey(e.target.value)}
-      />
-    </div>
+    <Context.Consumer>
+      {value => (
+        <div className={classes.root}>
+          <TextField
+            label="Project ID"
+            value={value.projectId}
+            onChange={e => value.setProjectId?.(parseInt(e.target.value, 10))}
+          />
+          <TextField
+            label="API Key"
+            value={value.apiKey}
+            onChange={e => value.setApiKey?.(e.target.value)}
+          />
+        </div>
+      )}
+    </Context.Consumer>
   );
 };

plugins/airbrake/dev/components/ContextProvider/ContextProvider.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, {
+  Dispatch,
+  PropsWithChildren,
+  SetStateAction,
+  useState,
+} from 'react';
+
+interface ContextInterface {
+  projectId?: number;
+  setProjectId?: Dispatch<SetStateAction<number | undefined>>;
+  apiKey?: String;
+  setApiKey?: Dispatch<SetStateAction<string>>;
+}
+
+export const Context = React.createContext<ContextInterface>({});
+
+export const ContextProvider = ({ children }: PropsWithChildren<{}>) => {
+  const [projectId, setProjectId] = useState<number>();
+  const [apiKey, setApiKey] = useState<string>('');
+
+  return (
+    <Context.Provider
+      value={{
+        projectId,
+        setProjectId,
+        apiKey,
+        setApiKey,
+      }}
+    >
+      {children}
+    </Context.Provider>
+  );
+};

plugins/airbrake/dev/components/ContextProvider/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { ContextProvider, Context } from './ContextProvider';

plugins/airbrake/dev/index.tsx

@@ -23,6 +23,7 @@ import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { createEntity } from '../src/api/mock/mock-entity';
 import CloudOffIcon from '@material-ui/icons/CloudOff';
 import CloudIcon from '@material-ui/icons/Cloud';
+import { ContextProvider, Context } from './components/ContextProvider';
 
 createDevApp()
   .registerPlugin(airbrakePlugin)
@@ -48,16 +49,24 @@ createDevApp()
   })
   .addPage({
     element: (
-      <Page themeId="tool">
-        <Header title="Airbrake demo application" subtitle="Real API">
-          <ApiBar />
-        </Header>
-        <Content>
-          <EntityProvider entity={createEntity('demo')}>
-            <EntityAirbrakeContent />
-          </EntityProvider>
-        </Content>
-      </Page>
+      <ContextProvider>
+        <Page themeId="tool">
+          <Header title="Airbrake demo application" subtitle="Real API">
+            <ApiBar />
+          </Header>
+          <Content>
+            <Context.Consumer>
+              {value => (
+                <EntityProvider
+                  entity={createEntity(value.projectId?.toString())}
+                >
+                  <EntityAirbrakeContent />
+                </EntityProvider>
+              )}
+            </Context.Consumer>
+          </Content>
+        </Page>
+      </ContextProvider>
     ),
     title: 'Real API',
     path: '/airbrake-real-api',