forked from cerc-io/snowballtools-base
af021d3357
* Refactor to fetch organization details in the parent component * Fetch and use deployment details for a project * Remove deployment field from ProjectDetails type --------- Co-authored-by: neeraj <neeraj.rtly@gmail.com>
80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Outlet } from 'react-router-dom';
|
|
|
|
import HorizontalLine from '../components/HorizontalLine';
|
|
import { IconButton, Typography } from '@material-tailwind/react';
|
|
import ProjectSearchBar from '../components/projects/ProjectSearchBar';
|
|
import { useGQLClient } from '../context/GQLClientContext';
|
|
import { ProjectDetails } from '../types/project';
|
|
|
|
const ProjectSearch = () => {
|
|
const client = useGQLClient();
|
|
const [projects, setProjects] = useState<ProjectDetails[]>([]);
|
|
|
|
useEffect(() => {
|
|
const fetch = async () => {
|
|
const res = await client.getOrganizations();
|
|
|
|
// Note: select first organization as organization switching not yet implemented
|
|
const projects = res.organizations[0].projects;
|
|
const orgName = res.organizations[0].name;
|
|
|
|
const updatedProjectsPromises = projects.map(async (project: any) => {
|
|
const { deployments } = await client.getDeployments(String(project.id));
|
|
|
|
return {
|
|
...project,
|
|
// TODO: populate empty fields
|
|
icon: '',
|
|
title: project.name,
|
|
organization: orgName,
|
|
deployments,
|
|
url: '',
|
|
domain: null,
|
|
createdBy: project.owner.name,
|
|
source: '',
|
|
repositoryId: project.repository,
|
|
// TODO: populate from github API
|
|
latestCommit: {
|
|
message: '',
|
|
createdAt: '',
|
|
branch: '',
|
|
},
|
|
};
|
|
});
|
|
|
|
const updatedProjects = await Promise.all(updatedProjectsPromises);
|
|
setProjects(updatedProjects);
|
|
};
|
|
|
|
fetch();
|
|
}, [client]);
|
|
|
|
return (
|
|
<div>
|
|
<div className="sticky top-0 bg-white z-30">
|
|
<div className="flex p-5">
|
|
<div className="grow mr-2">
|
|
<ProjectSearchBar onChange={() => {}} projects={projects} />
|
|
</div>
|
|
<IconButton color="blue" className="rounded-full mr-2">
|
|
<Typography variant="h5">+</Typography>
|
|
</IconButton>
|
|
<div className="mr-2 flex items-center">
|
|
<Typography>^</Typography>
|
|
</div>
|
|
<div className="px-2 py-1 bg-blue-gray-50 rounded-lg">
|
|
<Typography variant="lead">SY</Typography>
|
|
</div>
|
|
</div>
|
|
<HorizontalLine />
|
|
</div>
|
|
<div className="z-0">
|
|
<Outlet context={{ projects }} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProjectSearch;
|