From b48afed24ff7779e825201e7bdfe248030615173 Mon Sep 17 00:00:00 2001 From: Nabarun Gogoi Date: Mon, 26 Feb 2024 17:54:35 +0530 Subject: [PATCH] Add project create template for image upload PWA (#109) * Use image upload PWA template * Set template URL from env * Handle review changes * Update readme and build app script --------- Co-authored-by: neeraj --- README.md | 5 +-- build-webapp.sh | 3 +- packages/frontend/.env | 3 +- packages/frontend/src/assets/templates.json | 27 ---------------- packages/frontend/src/assets/templates.ts | 32 +++++++++++++++++++ .../src/components/projects/create/Deploy.tsx | 4 +-- packages/frontend/src/constants.ts | 2 -- .../org-slug/projects/create/Template.tsx | 18 +++++++---- .../pages/org-slug/projects/create/index.tsx | 4 +-- .../projects/create/template/index.tsx | 17 ++++------ packages/frontend/src/types.ts | 7 ++++ 11 files changed, 69 insertions(+), 53 deletions(-) delete mode 100644 packages/frontend/src/assets/templates.json create mode 100644 packages/frontend/src/assets/templates.ts diff --git a/README.md b/README.md index b6292209..f37a2ae8 100644 --- a/README.md +++ b/README.md @@ -187,11 +187,12 @@ REACT_APP_GITHUB_CLIENT_ID = ``` -- Set `REACT_APP_GITHUB_TEMPLATE_REPO` in [.env](packages/frontend/.env) file +- Set `REACT_APP_GITHUB_PWA_TEMPLATE_REPO` and `REACT_APP_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO` in [.env](packages/frontend/.env) file ```env # Set actual owner/name of the template repo that will be used for creating new repo - REACT_APP_GITHUB_TEMPLATE_REPO = cerc-io/test-progressive-web-app + REACT_APP_GITHUB_PWA_TEMPLATE_REPO = cerc-io/test-progressive-web-app + REACT_APP_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO = cerc-io/image-upload-pwa-example ``` ### Frontend Production diff --git a/build-webapp.sh b/build-webapp.sh index a3727d85..a77ec641 100755 --- a/build-webapp.sh +++ b/build-webapp.sh @@ -12,7 +12,8 @@ fi cat > $PKG_DIR/.env < { const [searchParams] = useSearchParams(); const projectId = searchParams.get('projectId'); @@ -25,7 +25,7 @@ const Deploy = () => { useEffect(() => { const timerID = setTimeout(() => { navigate(`/${orgSlug}/projects/create/success/${projectId}`); - }, INTERVAL_DURATION); + }, TIMEOUT_DURATION); return () => clearInterval(timerID); }, []); diff --git a/packages/frontend/src/constants.ts b/packages/frontend/src/constants.ts index bc461d43..bff69470 100644 --- a/packages/frontend/src/constants.ts +++ b/packages/frontend/src/constants.ts @@ -1,5 +1,3 @@ -export const GIT_TEMPLATE_LINK = `https://github.com/${process.env.REACT_APP_GITHUB_TEMPLATE_REPO}`; - export const SHORT_COMMIT_HASH_LENGTH = 8; export const SERVER_GQL_PATH = 'graphql'; diff --git a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx index 5d37004d..702d5e44 100644 --- a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx +++ b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx @@ -9,8 +9,7 @@ import { import { Avatar } from '@material-tailwind/react'; import Stepper from '../../../../components/Stepper'; -import templateDetails from '../../../../assets/templates.json'; -import { GIT_TEMPLATE_LINK } from '../../../../constants'; +import templates from '../../../../assets/templates'; // TODO: Set dynamic route for template and load details from DB const CreateWithTemplate = () => { @@ -33,7 +32,7 @@ const CreateWithTemplate = () => { const [searchParams] = useSearchParams(); - const template = templateDetails.find( + const template = templates.find( (template) => template.id === searchParams.get('templateId'), ); @@ -49,8 +48,15 @@ const CreateWithTemplate = () => {
{template?.name}
@@ -59,7 +65,7 @@ const CreateWithTemplate = () => {
- +
diff --git a/packages/frontend/src/pages/org-slug/projects/create/index.tsx b/packages/frontend/src/pages/org-slug/projects/create/index.tsx index a48f4dd4..6d2598f4 100644 --- a/packages/frontend/src/pages/org-slug/projects/create/index.tsx +++ b/packages/frontend/src/pages/org-slug/projects/create/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import templateDetails from '../../../../assets/templates.json'; +import templates from '../../../../assets/templates'; import TemplateCard from '../../../../components/projects/create/TemplateCard'; import RepositoryList from '../../../../components/projects/create/RepositoryList'; import ConnectAccount from '../../../../components/projects/create/ConnectAccount'; @@ -13,7 +13,7 @@ const NewProject = () => { <>
Start with template
- {templateDetails.map((template) => { + {templates.map((template) => { return ( { const { octokit } = useOctokit(); - + const { template } = useOutletContext<{ template: Template }>(); const client = useGQLClient(); const { orgSlug } = useParams(); @@ -35,12 +36,8 @@ const CreateRepo = () => { setIsLoading(true); try { - assert( - process.env.REACT_APP_GITHUB_TEMPLATE_REPO, - 'Config REACT_APP_GITHUB_TEMPLATE_REPO is not set in .env', - ); - const [owner, repo] = - process.env.REACT_APP_GITHUB_TEMPLATE_REPO.split('/'); + assert(template.repoFullName, 'Template URL not provided'); + const [owner, repo] = template.repoFullName.split('/'); // TODO: Handle this functionality in backend const gitRepo = await octokit?.rest.repos.createUsingTemplate({ @@ -67,7 +64,7 @@ const CreateRepo = () => { if (Boolean(addProject)) { setIsLoading(true); navigate( - `/${orgSlug}/projects/create/template/deploy?projectId=${addProject.id}`, + `deploy?projectId=${addProject.id}&templateId=${template.id}`, ); } else { setIsLoading(false); @@ -185,7 +182,7 @@ const CreateRepo = () => {