first get allProjectsQuery is working

DataCloud-project · Jul 5, 2023 · 3e5406e · 3e5406e
1 parent bdff4cd
commit 3e5406e
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 41 deletions.
diff --git a/frontend-dev/package-lock.json b/frontend-dev/package-lock.json
diff --git a/frontend-dev/src/lib/keycloak.ts b/frontend-dev/src/lib/keycloak.ts
@@ -1,5 +1,5 @@
-// import { GraphQLClient } from 'graphql-request';
-// import { graphQLClient, username } from '../stores/stores.js';
+import { GraphQLClient } from 'graphql-request';
+import { graphQLClient, username } from '../stores/stores.js';
 import Keycloak from 'keycloak-js';
 import { keycloakHandler } from '../stores/stores.js';
 import { browser } from '$app/environment';
@@ -29,25 +29,26 @@ async function internalInitKeycloak(): Promise<void> {
     if (!get(keycloakHandler).idTokenParsed) {
         throw new Error("Keycloak didn't return a valid idTokenParsed");
     }
-    if (typeof get(keycloakHandler)?.idTokenParsed.preferred_username !== 'string') {
-        throw new TypeError("Keycloak didn't return a valid preferred_username");
-    }
-    // TODO: initialize graphqlclient and save in store
-    //   username.set(keycloak.idTokenParsed.preferred_username);
+    // TODO: Aleena check uncaught (in promise) cannot read properties of endefined (reading 'preferred_username')
+    // if (typeof get(keycloakHandler)?.idTokenParsed.preferred_username !== 'string') {
+    //     throw new TypeError("Keycloak didn't return a valid preferred_username");
+    //}
+    // TODO: Aleena initialize graphqlclient and save in store
+    // username.set((keycloakHandler as unknown as Keycloak).idTokenParsed.preferred_username);
+    username.set("testuser");
+
+    const graphqlUrl = "http://localhost:8087/graphql"; // TODO
 
-    //   let graphqlUrl;
     //   if (config.SIM_PIPE_CONTROLLER_URL) {
     //     graphqlUrl = config.SIM_PIPE_CONTROLLER_URL;
     //   } else if (/^localhost(:\d+)?$/.test(window.location.host)) {
     //     graphqlUrl = 'http://localhost:9000/graphql';
     //   } else {
     //     graphqlUrl = '/graphql';
     //   }
-    //   graphQLClient.set(
-    //     new GraphQLClient(graphqlUrl, {
-    //       headers: requestHeaders,
-    //     }),
-    //   );
+    graphQLClient.set(
+      new GraphQLClient(graphqlUrl, {}),
+      );
 }
 
 export default async function initKeycloak(): Promise<void> {

diff --git a/frontend-dev/src/queries/get_all_projects.ts b/frontend-dev/src/queries/get_all_projects.ts
@@ -2,7 +2,11 @@ import { gql } from 'graphql-request';
 
 const allProjectsQuery = gql`
   query projects {
-    projects
+    projects {
+      name
+      id
+      createdAt
+    }
   }
 `;
 

diff --git a/frontend-dev/src/routes/projects/+page.svelte b/frontend-dev/src/routes/projects/+page.svelte
@@ -6,15 +6,19 @@
 	import { projectsList } from '../../stores/stores.js';
 	import initKeycloak from '../../lib/keycloak.js';
 	import type { Project } from '../../types.js';
+    import { graphQLClient } from '../../stores/stores.js';
+    import allProjectsQuery from '../../queries/get_all_projects.js';
+    import { get } from 'svelte/store';
 
 	const getProjectsList = async (): Promise<Project[]> => {
 		await initKeycloak();
-		// const response = await get(graphQLClient).request<{
-		// All_Projects: {
-		// 	projects: Project[];
-		// };
-		// }>(all_projects_query);
-		// return response.projects;
+		const response = await get(graphQLClient).request<{
+		All_Projects: {
+		 	projects: Project[];
+		};
+		}>(allProjectsQuery);
+        //console.log(response.projects);
+		return response.projects;
         // TODO:replace with graphql call
         return projects;
 	};
@@ -96,9 +100,10 @@
                                 <input type="checkbox" class="checkbox variant-filled"  bind:checked={checkboxes[project.name]} on:click={(event) => handleCheckboxClick(event)} />
                             </td>
                             <td>{project.name}</td>
-                            <td>{project.created}</td>
-                            <td>{project.dry_run_count}</td> 
-                            <td>{project.simulations_count}</td> 
+                            <td>{project.createdAt}</td>
+                            <!-- TODO: Aleena add number of dry runs and number of simulation runs-->
+                            <td>"NaN"</td> 
+                            <td>"NaN"</td> 
                         </tr>
                     {/each}
                 </tbody>

diff --git a/frontend-dev/src/stores/stores.ts b/frontend-dev/src/stores/stores.ts
@@ -3,11 +3,13 @@ import type { GraphQLClient } from 'graphql-request';
 import type Keycloak from 'keycloak-js';
 import type { Project } from '../types.js';
 
-export const graphQlClient = writable<GraphQLClient>();
+export const graphQLClient = writable<GraphQLClient>();
 
 export const keycloakHandler = writable<Keycloak>();;
 export const projectsList = writable<Project[]|undefined>();
 
+export const username = writable<string>("username");
+
 // TODO: remove; temporary list to keep dry runs [samples used in frontend until api is ready]
 export const dry_runs = {
     "name": "TLU",