mirror of
https://github.com/snowball-tools/snowballtools-base.git
synced 2024-11-17 08:09:20 +00:00
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 <neeraj.rtly@gmail.com>
This commit is contained in:
parent
6126c03eee
commit
b48afed24f
@ -187,11 +187,12 @@
|
||||
REACT_APP_GITHUB_CLIENT_ID = <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
|
||||
|
@ -12,7 +12,8 @@ fi
|
||||
cat > $PKG_DIR/.env <<EOF
|
||||
REACT_APP_SERVER_URL = 'LACONIC_HOSTED_CONFIG_app_server_url'
|
||||
REACT_APP_GITHUB_CLIENT_ID = 'LACONIC_HOSTED_CONFIG_app_github_clientid'
|
||||
REACT_APP_GITHUB_TEMPLATE_REPO = 'LACONIC_HOSTED_CONFIG_app_github_templaterepo'
|
||||
REACT_APP_GITHUB_PWA_TEMPLATE_REPO = 'LACONIC_HOSTED_CONFIG_app_github_pwa_templaterepo'
|
||||
REACT_APP_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO = 'LACONIC_HOSTED_CONFIG_app_github_image_upload_templaterepo'
|
||||
REACT_APP_WALLET_CONNECT_ID = 'LACONIC_HOSTED_CONFIG_app_wallet_connect_id'
|
||||
EOF
|
||||
|
||||
|
@ -1,6 +1,7 @@
|
||||
REACT_APP_SERVER_URL = 'http://localhost:8000'
|
||||
|
||||
REACT_APP_GITHUB_CLIENT_ID =
|
||||
REACT_APP_GITHUB_TEMPLATE_REPO =
|
||||
REACT_APP_GITHUB_PWA_TEMPLATE_REPO =
|
||||
REACT_APP_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO =
|
||||
|
||||
REACT_APP_WALLET_CONNECT_ID =
|
||||
|
@ -1,27 +0,0 @@
|
||||
[
|
||||
{
|
||||
"id": "1",
|
||||
"name": "Progressive Web App (PWA)",
|
||||
"icon": "^"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"name": "Kotlin",
|
||||
"icon": "^"
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"name": "React Native",
|
||||
"icon": "^"
|
||||
},
|
||||
{
|
||||
"id": "4",
|
||||
"name": "Swift",
|
||||
"icon": "^"
|
||||
},
|
||||
{
|
||||
"id": "5",
|
||||
"name": "Web app",
|
||||
"icon": "^"
|
||||
}
|
||||
]
|
32
packages/frontend/src/assets/templates.ts
Normal file
32
packages/frontend/src/assets/templates.ts
Normal file
@ -0,0 +1,32 @@
|
||||
export default [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Progressive Web App (PWA)',
|
||||
icon: '^',
|
||||
repoFullName: `${process.env.REACT_APP_GITHUB_PWA_TEMPLATE_REPO}`,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Image Upload PWA',
|
||||
icon: '^',
|
||||
repoFullName: `${process.env.REACT_APP_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO}`,
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Kotlin',
|
||||
icon: '^',
|
||||
repoFullName: '',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'React Native',
|
||||
icon: '^',
|
||||
repoFullName: '',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'Swift',
|
||||
icon: '^',
|
||||
repoFullName: '',
|
||||
},
|
||||
];
|
@ -7,7 +7,7 @@ import { DeployStep, DeployStatus } from './DeployStep';
|
||||
import { Stopwatch, setStopWatchOffset } from '../../StopWatch';
|
||||
import ConfirmDialog from '../../shared/ConfirmDialog';
|
||||
|
||||
const INTERVAL_DURATION = 5000;
|
||||
const TIMEOUT_DURATION = 5000;
|
||||
const Deploy = () => {
|
||||
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);
|
||||
}, []);
|
||||
|
@ -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';
|
||||
|
@ -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 = () => {
|
||||
<Avatar variant="rounded" src="/gray.png" />
|
||||
<div className="grow px-2">{template?.name}</div>
|
||||
<div>
|
||||
<a href={GIT_TEMPLATE_LINK} target="_blank" rel="noreferrer">
|
||||
^ {process.env.REACT_APP_GITHUB_TEMPLATE_REPO}
|
||||
<a
|
||||
href={`https://github.com/${template?.repoFullName}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
^{' '}
|
||||
{Boolean(template?.repoFullName)
|
||||
? template?.repoFullName
|
||||
: 'Template not supported'}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -59,7 +65,7 @@ const CreateWithTemplate = () => {
|
||||
<Stepper activeStep={activeStep} stepperValues={stepperValues} />
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<Outlet />
|
||||
<Outlet context={{ template }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -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 = () => {
|
||||
<>
|
||||
<h5 className="mt-4 ml-4">Start with template</h5>
|
||||
<div className="grid grid-cols-3 p-4 gap-4">
|
||||
{templateDetails.map((template) => {
|
||||
{templates.map((template) => {
|
||||
return (
|
||||
<TemplateCard
|
||||
isGitAuth={Boolean(octokit)}
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { useForm, Controller, SubmitHandler } from 'react-hook-form';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { useNavigate, useOutletContext, useParams } from 'react-router-dom';
|
||||
import toast from 'react-hot-toast';
|
||||
import assert from 'assert';
|
||||
|
||||
@ -9,6 +9,7 @@ import { Button, Option, Typography } from '@material-tailwind/react';
|
||||
import { useOctokit } from '../../../../../context/OctokitContext';
|
||||
import { useGQLClient } from '../../../../../context/GQLClientContext';
|
||||
import AsyncSelect from '../../../../../components/shared/AsyncSelect';
|
||||
import { Template } from '../../../../../types';
|
||||
|
||||
type SubmitRepoValues = {
|
||||
framework: string;
|
||||
@ -19,7 +20,7 @@ type SubmitRepoValues = {
|
||||
|
||||
const CreateRepo = () => {
|
||||
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 = () => {
|
||||
<Button
|
||||
className="bg-blue-500 rounded-xl p-2"
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
disabled={!Boolean(template.repoFullName) || isLoading}
|
||||
loading={isLoading}
|
||||
>
|
||||
Deploy ^
|
||||
|
@ -57,3 +57,10 @@ export type EnvironmentVariablesFormValues = {
|
||||
production: boolean;
|
||||
};
|
||||
};
|
||||
|
||||
export type Template = {
|
||||
id: string;
|
||||
name: string;
|
||||
icon: string;
|
||||
repoFullName: string;
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user