Working API Call

Applied appropriate headers to achieve the required Post API calls
DiamondLightSource · Apr 12, 2024 · cd4b2d7 · cd4b2d7
1 parent 48a81c3
commit cd4b2d7
Show file tree

Hide file tree

Showing 3 changed files with 924 additions and 39 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,22 +1,67 @@
-// import { LogComponent } from './components/Card';
-import LogTable from './components/Table';
-import './App.css'
-import {theme} from "./theme";
 import { ThemeProvider } from '@emotion/react';
+import { useEffect, useRef} from 'react'
+import { theme } from './theme';
+// import LogTable from './components/Table';
+// import './App.css'
+// import {theme} from "./theme";
+// import { ThemeProvider } from '@emotion/react';
+
 function App() {
 
-  const data = "Garry"
+  const data = useRef();
+  useEffect(() => {
+    async function fetchData(url: string, username: string, password: string): Promise<undefined> {
+      try {
+          // Creating a basic authentication header
+          const headers = new Headers();
+          headers.append('Authorization',"Basic " + btoa(`${username}:${password}`));
+
+          // Making the fetch request
+          const response = await fetch(url, {
+              method: 'GET',
+              headers: headers
+          });
+
+          // Checking if the response is OK
+          if (!response.ok) {
+              throw new Error('Failed to fetch data');
+          }
+
+          // Parsing the response as JSON
+          const data1 = await response.json();
+          return data1;
+      } catch (error) {
+          console.error('Error fetching data:', error);
+          throw error;
+      }
+  }
+
+    const apiURL = "/api/system/journal";
+    const password = "token";
+
+    (async () => {
+        try {
+            data.current = await fetchData(apiURL, username, password);
+            console.log(data.current)
+        } catch (error) {
+            console.error('Error:', error);
+        }
+    })();
+    },[])
+
+    // return (
+    //   <h3> {data.current}</h3>
+    // )
+
 
     return (
       <ThemeProvider theme={theme}>
-      <h1 className='Athena Logpanel'>
-        <p>Hello World</p>
+      <h1>Athena Logpanel Single Call</h1>
+      <h2 className='Athena Logpanel'>
         <button className='square'>1</button>
         <label htmlFor='Log1'></label>
-        {/* <LogComponent></LogComponent> */}
-        <p> {data} </p>
-        <LogTable></LogTable>
-      </h1>
+      </h2>
+      <p> {JSON.stringify(data.current)} </p>
       </ThemeProvider>
       )
   }

diff --git a/vite.config.ts b/vite.config.ts
@@ -4,15 +4,10 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-
-  // server: {
-  //   configureServer: ({ middlewares }) => {
-  //     middlewares.use((req, res, next) => {
-  //       // Set CORS headers
-  //       res.setHeader('Access-Control-Allow-Origin', '*');
-  //       res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
-  //       res.setHeader('Access-Control-Allow-Headers', '*');
-  //       next();
-  // });
-  //   }}
+  server:{
+    // proxying any /api calls proxies the call to graylog. Unsure how this would work when deployed
+    proxy:{
+      "/api": "https://graylog.diamond.ac.uk"
+    }
+  },
 })