From 7d54280d5cf580a175196db6e03763eca20b77b3 Mon Sep 17 00:00:00 2001 From: prathamesh0 <42446521+prathamesh0@users.noreply.github.com> Date: Fri, 19 Jan 2024 14:22:02 +0530 Subject: [PATCH] Add type for outlet context used for projects data (#28) Co-authored-by: neeraj --- .../projects/project/settings/Domains.tsx | 11 +++++------ .../settings/EnvironmentVariablesTabPanel.tsx | 15 +++++++++------ packages/frontend/src/pages/index.tsx | 4 ++-- packages/frontend/src/pages/projects/Project.tsx | 4 ++-- packages/frontend/src/pages/projects/index.tsx | 4 ++-- packages/frontend/src/types/project.ts | 5 +++++ 6 files changed, 25 insertions(+), 18 deletions(-) diff --git a/packages/frontend/src/components/projects/project/settings/Domains.tsx b/packages/frontend/src/components/projects/project/settings/Domains.tsx index f6e9159..b36433d 100644 --- a/packages/frontend/src/components/projects/project/settings/Domains.tsx +++ b/packages/frontend/src/components/projects/project/settings/Domains.tsx @@ -4,27 +4,26 @@ import { useParams, Link, useOutletContext } from 'react-router-dom'; import { Button, Typography } from '@material-tailwind/react'; import DomainCard from './DomainCard'; -import { DomainDetails } from '../../../../types/project'; +import { DomainDetails, ProjectsOutletContext } from '../../../../types/project'; const Domains = () => { const { id } = useParams(); - // @ts-expect-error create context type for projects - const { projects } = useOutletContext(); + const { projects } = useOutletContext(); const currProject = useMemo(() => { - return projects.find((data: any) => { + return projects.find((data) => { return Number(data?.id) === Number(id); }); }, [id]); const linkedRepo = useMemo(() => { - return currProject.repositories.find( + return currProject?.repositories.find( (repo: any) => repo.id === Number(currProject?.repositoryId), ); }, [currProject]); - const domains = currProject.deployments + const domains = currProject?.deployments .filter((deployment: any) => { return deployment.domain != null; }) diff --git a/packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx b/packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx index d06d06e..67c2ebf 100644 --- a/packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx +++ b/packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx @@ -1,6 +1,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { useFieldArray, useForm } from 'react-hook-form'; import toast from 'react-hot-toast'; +import { useOutletContext, useParams } from 'react-router-dom'; import { Typography, @@ -13,9 +14,12 @@ import { import AddEnvironmentVariableRow from './AddEnvironmentVariableRow'; import DisplayEnvironmentVariables from './DisplayEnvironmentVariables'; -import { EnvironmentVariable, Environments } from '../../../../types/project'; +import { + EnvironmentVariable, + Environments, + ProjectsOutletContext, +} from '../../../../types/project'; import HorizontalLine from '../../../HorizontalLine'; -import { useOutletContext, useParams } from 'react-router-dom'; export type EnvironmentVariablesFormValues = { variables: { @@ -32,11 +36,10 @@ export type EnvironmentVariablesFormValues = { export const EnvironmentVariablesTabPanel = () => { const { id } = useParams(); - // @ts-expect-error create context type for projects - const { projects } = useOutletContext(); + const { projects } = useOutletContext(); const currProject = useMemo(() => { - return projects.find((data: any) => Number(data.id) === Number(id)); + return projects.find((data) => Number(data.id) === Number(id)); }, [id]); const { @@ -72,7 +75,7 @@ export const EnvironmentVariablesTabPanel = () => { }, [isSubmitSuccessful, reset]); const getEnvironmentVariable = useCallback((environment: Environments) => { - return (currProject.environmentVariables as EnvironmentVariable[]).filter( + return (currProject?.environmentVariables as EnvironmentVariable[]).filter( (item) => item.environments.includes(environment), ); }, []); diff --git a/packages/frontend/src/pages/index.tsx b/packages/frontend/src/pages/index.tsx index aec9075..99dcb7a 100644 --- a/packages/frontend/src/pages/index.tsx +++ b/packages/frontend/src/pages/index.tsx @@ -5,10 +5,10 @@ import { Link } from 'react-router-dom'; import { Button, Typography, Chip } from '@material-tailwind/react'; import ProjectCard from '../components/projects/ProjectCard'; +import { ProjectsOutletContext } from '../types/project'; const Projects = () => { - // @ts-expect-error create context type for projects - const { projects } = useOutletContext(); + const { projects } = useOutletContext(); return (
diff --git a/packages/frontend/src/pages/projects/Project.tsx b/packages/frontend/src/pages/projects/Project.tsx index f4115b1..2e4782f 100644 --- a/packages/frontend/src/pages/projects/Project.tsx +++ b/packages/frontend/src/pages/projects/Project.tsx @@ -5,6 +5,7 @@ import { Button, Typography } from '@material-tailwind/react'; import HorizontalLine from '../../components/HorizontalLine'; import ProjectTabs from '../../components/projects/project/ProjectTabs'; +import { ProjectsOutletContext } from '../../types/project'; const getProject = (projects: any, id: number) => { return projects.find((project: any) => { @@ -16,8 +17,7 @@ const Project = () => { const { id } = useParams(); const navigate = useNavigate(); - // @ts-expect-error create context type for projects - const { projects } = useOutletContext(); + const { projects } = useOutletContext(); const project = useMemo( () => getProject(projects, Number(id)), diff --git a/packages/frontend/src/pages/projects/index.tsx b/packages/frontend/src/pages/projects/index.tsx index 07e9acb..4ecfa6f 100644 --- a/packages/frontend/src/pages/projects/index.tsx +++ b/packages/frontend/src/pages/projects/index.tsx @@ -4,10 +4,10 @@ import { Link, useOutletContext } from 'react-router-dom'; import { Button, Typography, Chip } from '@material-tailwind/react'; import ProjectCard from '../../components/projects/ProjectCard'; +import { ProjectsOutletContext } from '../../types/project'; const Projects = () => { - // @ts-expect-error create context type for projects - const { projects } = useOutletContext(); + const { projects } = useOutletContext(); return (
diff --git a/packages/frontend/src/types/project.ts b/packages/frontend/src/types/project.ts index 30d95df..f8b114e 100644 --- a/packages/frontend/src/types/project.ts +++ b/packages/frontend/src/types/project.ts @@ -16,6 +16,7 @@ export interface ProjectDetails { branch: string; }; repositoryId: number; + repositories: RepositoryDetails[]; members: MemberPermission[]; ownerId: number; environmentVariables: EnvironmentVariable[]; @@ -102,3 +103,7 @@ export interface Member { email: string; id: number; } + +export interface ProjectsOutletContext { + projects: ProjectDetails[]; +}