Implement functionality to create project using a template (#60)

* Create repository from selected template * Create project based on created repository * Replace dropdown component with component from material tailwind * Remove repository name from query parameters
2024-02-08 09:20:49 +05:30
parent 413ed03eb8
commit e0001466e0
11 changed files with 209 additions and 117 deletions
@@ -5,7 +5,7 @@ import {
 } from 'react-dropdown';
 import 'react-dropdown/style.css';

-interface Option {
+export interface Option {
  value: string;
  label: string;
 }
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';

 import { Button, Typography } from '@material-tailwind/react';

@@ -8,8 +8,12 @@ import { Stopwatch, setStopWatchOffset } from '../../StopWatch';
 import ConfirmDialog from '../../shared/ConfirmDialog';

 const Deploy = () => {
+  const [searchParams] = useSearchParams();
+  const projectId = searchParams.get('projectId');
+
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(!open);
+
  const navigate = useNavigate();
  const { orgSlug } = useParams();

@@ -70,6 +74,14 @@ const Deploy = () => {
        status={DeployStatus.NOT_STARTED}
        step="4"
      />
+
+      <Button
+        onClick={() => {
+          navigate(`/${orgSlug}/projects/create/success/${projectId}`);
+        }}
+      >
+        VIEW DEMO
+      </Button>
    </div>
  );
 };
@@ -1,43 +1,61 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React, { useCallback } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';

 import { Chip, IconButton } from '@material-tailwind/react';

 import { relativeTime } from '../../../utils/time';
 import { GitRepositoryDetails } from '../../../types/project';
+import { useGQLClient } from '../../../context/GQLClientContext';

 interface ProjectRepoCardProps {
  repository: GitRepositoryDetails;
 }

 const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({ repository }) => {
+  const client = useGQLClient();
+  const navigate = useNavigate();
+
+  const { orgSlug } = useParams();
+
+  const createProject = useCallback(async () => {
+    if (!repository) {
+      return;
+    }
+
+    const { addProject } = await client.addProject(orgSlug!, {
+      name: `${repository.owner!.login}-${repository.name}`,
+      // TODO: Get organization id from context or URL
+      prodBranch: repository.default_branch!,
+      repository: repository.full_name,
+    });
+
+    navigate(`import?projectId=${addProject.id}`);
+  }, [client, repository]);
+
  return (
-    <Link
-      to={`import?owner=${repository.owner?.login}&repo=${repository.name}`}
+    <div
+      className="group flex items-center gap-4 text-gray-500 text-xs hover:bg-gray-100 p-2 cursor-pointer"
+      onClick={createProject}
    >
-      <div className="group flex items-center gap-4 text-gray-500 text-xs hover:bg-gray-100 p-2 cursor-pointer">
-        <div>^</div>
-        <div className="grow">
-          <div>
-            <span className="text-black">{repository.full_name}</span>
-            {repository.visibility === 'private' ? (
-              <Chip
-                className="normal-case inline ml-6 bg-[#FED7AA] text-[#EA580C] font-normal"
-                size="sm"
-                value="Private"
-                icon={'^'}
-              />
-            ) : (
-              ''
-            )}
-          </div>
-          <p>{repository.updated_at && relativeTime(repository.updated_at)}</p>
-        </div>
-        <div className="hidden group-hover:block">
-          <IconButton size="sm">{'>'}</IconButton>
+      <div>^</div>
+      <div className="grow">
+        <div>
+          <span className="text-black">{repository.full_name}</span>
+          {repository.visibility === 'private' && (
+            <Chip
+              className="normal-case inline ml-6 font-normal"
+              size="sm"
+              value="Private"
+              icon={'^'}
+            />
+          )}
        </div>
+        <p>{repository.updated_at && relativeTime(repository.updated_at)}</p>
      </div>
-    </Link>
+      <div className="hidden group-hover:block">
+        <IconButton size="sm">{'>'}</IconButton>
+      </div>
+    </div>
  );
 };

@@ -6,19 +6,20 @@ import { IconButton, Typography } from '@material-tailwind/react';
 import { Link } from 'react-router-dom';

 interface TemplateDetails {
-  framework: string;
+  id: string;
+  name: string;
  icon: string;
 }
 interface TemplateCardProps {
-  framework: TemplateDetails;
+  template: TemplateDetails;
  isGitAuth: boolean;
 }

-const CardDetails = ({ framework }: { framework: TemplateDetails }) => {
+const CardDetails = ({ template }: { template: TemplateDetails }) => {
  return (
    <div className="h-14 group bg-gray-200 border-gray-200 rounded-lg shadow p-4 flex items-center justify-between">
      <Typography className="grow">
-        {framework.icon} {framework.framework}
+        {template.icon} {template.name}
      </Typography>
      <div>
        <IconButton size="sm" className="rounded-full hidden group-hover:block">
@@ -29,13 +30,10 @@ const CardDetails = ({ framework }: { framework: TemplateDetails }) => {
  );
 };

-const TemplateCard: React.FC<TemplateCardProps> = ({
-  framework,
-  isGitAuth,
-}) => {
+const TemplateCard: React.FC<TemplateCardProps> = ({ template, isGitAuth }) => {
  return isGitAuth ? (
-    <Link to="template">
-      <CardDetails framework={framework} />
+    <Link to={`template?templateId=${template.id}`}>
+      <CardDetails template={template} />
    </Link>
  ) : (
    <a
@@ -43,7 +41,7 @@ const TemplateCard: React.FC<TemplateCardProps> = ({
        toast.error('Connect Git account to start with a template')
      }
    >
-      <CardDetails framework={framework} />
+      <CardDetails template={template} />
    </a>
  );
 };