feat: use templates from @dcl/builder-templates and remove ability to…

… create scenes for sdk6

src/components/Modals/CustomLayoutModal/CustomLayoutModal.tsx

@@ -27,9 +27,6 @@ export default class CustomLayoutModal extends React.PureComponent<Props, State>
   handleBack = () => {
     const { step } = this.state
     switch (step) {
-      case SceneCreationStep.SDK:
-        this.setState({ step: SceneCreationStep.SIZE })
-        break
       case SceneCreationStep.SIZE:
         this.setState({ step: SceneCreationStep.INFO })
         break
@@ -45,15 +42,13 @@ export default class CustomLayoutModal extends React.PureComponent<Props, State>
     const { step } = this.state
     if (step === SceneCreationStep.INFO) {
       this.setState({ step: SceneCreationStep.SIZE })
-    } else if (step === SceneCreationStep.SIZE) {
-      this.setState({ step: SceneCreationStep.SDK })
     }
   }
 
-  handleSubmit = (sdk: SDKVersion) => {
+  handleSubmit = () => {
     const { onCreateProject, onClose } = this.props
     const { name, description, rows, cols } = this.state
-    onCreateProject(name, description, fromLayout(rows, cols), sdk)
+    onCreateProject(name, description, fromLayout(rows, cols), SDKVersion.SDK7)
     onClose()
   }
 
@@ -64,8 +59,6 @@ export default class CustomLayoutModal extends React.PureComponent<Props, State>
         return t('create_modal.name_subtitle')
       case SceneCreationStep.SIZE:
         return t('create_modal.size_subtitle')
-      case SceneCreationStep.SDK:
-        return t('create_modal.sdk_subtitle')
     }
   }
 
@@ -121,22 +114,11 @@ export default class CustomLayoutModal extends React.PureComponent<Props, State>
             <Button secondary onClick={this.handleBack}>
               {t('global.back')}
             </Button>
-            <Button primary disabled={hasError || !name} onClick={this.handleNext}>
+            <Button primary disabled={hasError || !name} onClick={this.handleSubmit.bind(this, SDKVersion.SDK7)}>
               {t('global.next')}
             </Button>
           </div>
         )
-      case SceneCreationStep.SDK:
-        return (
-          <div className={styles.sdkActionContainer}>
-            <Button secondary onClick={this.handleSubmit.bind(this, SDKVersion.SDK6)}>
-              {t('create_modal.use_sdk6')}
-            </Button>
-            <Button primary onClick={this.handleSubmit.bind(this, SDKVersion.SDK7)}>
-              {t('create_modal.use_sdk7')}
-            </Button>
-          </div>
-        )
     }
   }
 
@@ -147,7 +129,7 @@ export default class CustomLayoutModal extends React.PureComponent<Props, State>
     return (
       <Modal name={modalName}>
         <ModalNavigation
-          title={step !== SceneCreationStep.SDK ? t('create_modal.title') : t('create_modal.sdk_title')}
+          title={t('create_modal.title')}
           subtitle={this.getSubtitle()}
           onBack={step !== SceneCreationStep.INFO ? this.handleBack : undefined}
           onClose={onClose}

src/components/Modals/CustomLayoutModal/CustomLayoutModal.types.ts

@@ -14,8 +14,7 @@ export type Props = ModalProps & {
 
 export enum SceneCreationStep {
   INFO = 'info',
-  SIZE = 'size',
-  SDK = 'sdk'
+  SIZE = 'size'
 }
 
 export type State = {

src/lib/api/builder.ts

@@ -661,23 +661,6 @@ export class BuilderAPI extends BaseAPI {
     return items.map(fromPoolGroup)
   }
 
-  async fetchTemplates() {
-    const { items }: { items: RemoteProject[]; total: number } = await this.request('get', '/templates', {
-      retry: retryParams,
-      params: { sort_by: 'created_at', sort_order: 'asc' }
-    })
-    return items.map(fromRemoteProject).sort((template1, template2) => {
-      if (template1.templateStatus === TemplateStatus.COMING_SOON) {
-        return 1
-      }
-
-      if (template2.templateStatus === TemplateStatus.COMING_SOON) {
-        return -1
-      }
-      return 0
-    })
-  }
-
   async saveProject(project: Project, scene: Scene) {
     const manifest = createManifest(toRemoteProject(project), scene)
     await this.request('put', `/projects/${project.id}/manifest`, { params: { manifest } })

src/modules/project/sagas.ts

@@ -71,14 +71,14 @@ import { Gizmo, PreviewType } from 'modules/editor/types'
 import { Pool } from 'modules/pool/types'
 import { loadProfileRequest } from 'decentraland-dapps/dist/modules/profile/actions'
 import { LOGIN_SUCCESS, LoginSuccessAction } from 'modules/identity/actions'
+import { changeLayout, getParcels } from 'modules/inspector/utils'
+import { setInspectorReloading } from 'modules/inspector/actions'
 import { getName } from 'modules/profile/selectors'
 import { getDefaultGroundAsset } from 'modules/deployment/utils'
 import { locations } from 'routing/locations'
 import { downloadZip } from 'lib/zip'
-import { didUpdateLayout, getImageAsDataUrl } from './utils'
+import { didUpdateLayout, getImageAsDataUrl, getTemplate, getTemplates } from './utils'
 import { createFiles, createSDK7Files } from './export'
-import { changeLayout, getParcels } from 'modules/inspector/utils'
-import { setInspectorReloading } from 'modules/inspector/actions'
 
 export function* projectSaga(builder: BuilderAPI) {
   yield takeLatest(CREATE_PROJECT_FROM_TEMPLATE, handleCreateProjectFromTemplate)
@@ -207,7 +207,7 @@ export function* projectSaga(builder: BuilderAPI) {
 
       if (project.isTemplate) {
         yield take(SAVE_PROJECT_SUCCESS)
-        yield put(push(locations.sceneEditor(newProject.id)))
+        yield put(push(scene.sdk6 ? locations.sceneEditor(newProject.id) : locations.inspector(newProject.id)))
       } else if (shouldRedirect) {
         yield put(push(locations.scenes()))
       }
@@ -358,13 +358,18 @@ export function* projectSaga(builder: BuilderAPI) {
   function* handleLoadProjectSceneRequest(action: LoadProjectSceneRequestAction) {
     const { project, type } = action.payload
     try {
-      const scenes: ReturnType<typeof getScenes> = yield select(getScenes)
-      if (scenes && scenes[project.sceneId]) {
-        yield put(loadProjectSceneSuccess(scenes[project.sceneId]))
-        return
+      if (type === PreviewType.TEMPLATE) {
+        const template = getTemplate(project.id)
+        yield put(loadProjectSceneSuccess(template.scene))
+      } else {
+        const scenes: ReturnType<typeof getScenes> = yield select(getScenes)
+        if (scenes && scenes[project.sceneId]) {
+          yield put(loadProjectSceneSuccess(scenes[project.sceneId]))
+          return
+        }
+        const manifest: Manifest<Project> = yield call([builder, 'fetchManifest'], project.id, type)
+        yield put(loadProjectSceneSuccess(manifest.scene))
       }
-      const manifest: Manifest<Project> = yield call([builder, 'fetchManifest'], project.id, type)
-      yield put(loadProjectSceneSuccess(manifest.scene))
     } catch (e) {
       yield put(loadProjectSceneFailure(e.message))
     }
@@ -373,16 +378,22 @@ export function* projectSaga(builder: BuilderAPI) {
   function* handleLoadManifestRequest(action: LoadManifestRequestAction) {
     const { id, type } = action.payload
     try {
-      const manifest: Manifest<Project> = yield call([builder, 'fetchManifest'], id, type)
-      yield put(loadManifestSuccess(manifest))
+      if (type === PreviewType.TEMPLATE) {
+        const manifest = getTemplate(id)
+        yield put(loadManifestSuccess(manifest))
+      } else {
+        const manifest: Manifest<Project> = yield call([builder, 'fetchManifest'], id, type)
+        yield put(loadManifestSuccess(manifest))
+      }
     } catch (e) {
       yield put(loadManifestFailure(e.message))
     }
   }
 
   function* handleLoadTemplatesRequest() {
     try {
-      const projects: Project[] = yield call([builder, 'fetchTemplates'])
+      const templates = getTemplates()
+      const projects: Project[] = templates.map(template => template.project)
       const record: ModelById<Project> = {}
 
       for (const project of projects) {

src/modules/project/utils.ts

@@ -1,7 +1,10 @@
-import { Project, Layout } from 'modules/project/types'
+import { Project, Layout, Manifest } from 'modules/project/types'
 import { Coordinate, Rotation } from 'modules/deployment/types'
 import { NO_CACHE_HEADERS } from 'lib/headers'
 import { getDimensions } from 'lib/layout'
+import _templateData from '@dcl/builder-templates/templates.json'
+
+const templates = _templateData.templates as unknown as Manifest[]
 
 export function getProjectDimensions(project: Project): string {
   const { rows, cols } = project.layout
@@ -83,3 +86,16 @@ export async function getImageAsDataUrl(url: string): Promise<string> {
 
   return out
 }
+
+export function getTemplates(): Manifest[] {
+  return templates
+}
+
+export function getTemplate(projectId: string) {
+  const templates = getTemplates()
+  const template = templates.find(template => template.project.id === projectId)
+  if (!template) {
+    throw new Error(`Could not find template with projectId="${projectId}"`)
+  }
+  return template
+}