From 63b7f4e7deddbaf16a599e8752197169c28880b6 Mon Sep 17 00:00:00 2001
From: prathamesh0 <42446521+prathamesh0@users.noreply.github.com>
Date: Fri, 19 Jan 2024 12:05:06 +0530
Subject: [PATCH] Display fetched data in environment variables tab panel (#26)

Co-authored-by: neeraj <neeraj.rtly@gmail.com>
---
 .../settings/EnvironmentVariablesTabPanel.tsx     | 15 ++++++++++++---
 packages/frontend/src/types/project.ts            |  1 +
 packages/gql-client/src/gql-queries.ts            |  5 +++++
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx b/packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx
index 5389ba7b..d06d06e0 100644
--- a/packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx
+++ b/packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx
@@ -13,9 +13,9 @@ import {
 
 import AddEnvironmentVariableRow from './AddEnvironmentVariableRow';
 import DisplayEnvironmentVariables from './DisplayEnvironmentVariables';
-import environmentVariablesData from '../../../../assets/environment-variables.json';
 import { EnvironmentVariable, Environments } from '../../../../types/project';
 import HorizontalLine from '../../../HorizontalLine';
+import { useOutletContext, useParams } from 'react-router-dom';
 
 export type EnvironmentVariablesFormValues = {
   variables: {
@@ -30,6 +30,15 @@ export type EnvironmentVariablesFormValues = {
 };
 
 export const EnvironmentVariablesTabPanel = () => {
+  const { id } = useParams();
+
+  // @ts-expect-error create context type for projects
+  const { projects } = useOutletContext();
+
+  const currProject = useMemo(() => {
+    return projects.find((data: any) => Number(data.id) === Number(id));
+  }, [id]);
+
   const {
     handleSubmit,
     register,
@@ -63,8 +72,8 @@ export const EnvironmentVariablesTabPanel = () => {
   }, [isSubmitSuccessful, reset]);
 
   const getEnvironmentVariable = useCallback((environment: Environments) => {
-    return (environmentVariablesData as EnvironmentVariable[]).filter((item) =>
-      item.environments.includes(environment),
+    return (currProject.environmentVariables as EnvironmentVariable[]).filter(
+      (item) => item.environments.includes(environment),
     );
   }, []);
 
diff --git a/packages/frontend/src/types/project.ts b/packages/frontend/src/types/project.ts
index 299ab8cb..62358e02 100644
--- a/packages/frontend/src/types/project.ts
+++ b/packages/frontend/src/types/project.ts
@@ -18,6 +18,7 @@ export interface ProjectDetails {
   repositoryId: number;
   members: MemberPermission[];
   ownerId: number;
+  environmentVariables: EnvironmentVariable[];
 }
 
 export interface MemberPermission {
diff --git a/packages/gql-client/src/gql-queries.ts b/packages/gql-client/src/gql-queries.ts
index 8b7babe8..4e4f7b5c 100644
--- a/packages/gql-client/src/gql-queries.ts
+++ b/packages/gql-client/src/gql-queries.ts
@@ -44,6 +44,11 @@ query {
       }
       environmentVariables {
         id
+        environments
+        key
+        value
+        createdAt
+        updatedAt
       }
       createdAt
       updatedAt