Add type for outlet context used for projects data (#28)

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

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<ProjectsOutletContext>();
 
   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;
     })

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<ProjectsOutletContext>();
 
   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),
     );
   }, []);

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<ProjectsOutletContext>();
 
   return (
     <div>

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<ProjectsOutletContext>();
 
   const project = useMemo(
     () => getProject(projects, Number(id)),

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<ProjectsOutletContext>();
 
   return (
     <div>

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[];
+}