Request scenes directly vs creating dummy project

src/api/Api.js

@@ -228,6 +228,25 @@ export default class Project extends EventEmitter {
     return json;
   }
 
+  async getProjectlessScenes() {
+    const token = this.getToken();
+
+    const headers = {
+      "content-type": "application/json",
+      authorization: `Bearer ${token}`
+    };
+
+    const response = await this.fetch(`https://${RETICULUM_SERVER}/api/v1/scenes/projectless`, { headers });
+
+    const json = await response.json();
+
+    if (!Array.isArray(json.scenes)) {
+      throw new Error(`Error fetching scenes: ${json.error || "Unknown error."}`);
+    }
+
+    return json.scenes;
+  }
+
   async resolveUrl(url, index) {
     if (!shouldCorsProxy(url)) {
       return { origin: url };
@@ -981,22 +1000,6 @@ export default class Project extends EventEmitter {
       authorization: `Bearer ${this.getToken()}`
     };
 
-    // HACK: Create a dummy project to add this to project listings
-    let project_id;
-    if (!sceneId) {
-      const body = JSON.stringify({
-        project: { name: "GLB Only Project" }
-      });
-      const resp = await this.fetch(`https://${RETICULUM_SERVER}/api/v1/projects`, {
-        method: "POST",
-        headers,
-        body,
-        signal
-      });
-      const project = await resp.json();
-      project_id = project.project_id;
-    }
-
     const sceneParams = {
       screenshot_file_id: screenshotId,
       screenshot_file_token: screenshotToken,
@@ -1005,7 +1008,6 @@ export default class Project extends EventEmitter {
       allow_remixing: params.allowRemixing,
       allow_promotion: params.allowPromotion,
       name: params.name,
-      project_id,
       attributions: {
         creator: params.creatorAttribution,
         content: []

src/ui/projects/ProjectGrid.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import ProjectGridItem from "./ProjectGridItem";
+import { ProjectGridItem, ProjectGridSceneItem } from "./ProjectGridItem";
 import { Row } from "../layout/Flex";
 import StringInput from "../inputs/StringInput";
 import { Link } from "react-router-dom";
@@ -63,10 +63,14 @@ const StyledProjectGrid = styled.div`
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
 `;
 
-export function ProjectGrid({ newProjectPath, newProjectLabel, projects, contextMenuId, loading }) {
+export function ProjectGrid({ newProjectPath, newProjectLabel, projects, scenes, contextMenuId, loading }) {
   return (
     <StyledProjectGrid>
       {newProjectPath && !loading && <NewProjectGridItem path={newProjectPath} label={newProjectLabel} />}
+      {scenes &&
+        scenes.map(scene => (
+          <ProjectGridSceneItem key={scene.scene_id || scene.id} scene={scene} contextMenuId={contextMenuId} />
+        ))}
       {projects.map(project => (
         <ProjectGridItem key={project.project_id || project.id} project={project} contextMenuId={contextMenuId} />
       ))}
@@ -78,6 +82,7 @@ export function ProjectGrid({ newProjectPath, newProjectLabel, projects, context
 ProjectGrid.propTypes = {
   contextMenuId: PropTypes.string,
   projects: PropTypes.arrayOf(PropTypes.object).isRequired,
+  scenes: PropTypes.arrayOf(PropTypes.object),
   newProjectPath: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   newProjectLabel: PropTypes.string,
   loading: PropTypes.bool

src/ui/projects/ProjectGridItem.js

@@ -95,7 +95,7 @@ const Col = styled.div`
   }
 `;
 
-export default class ProjectGridItem extends Component {
+export class ProjectGridItem extends Component {
   static propTypes = {
     contextMenuId: PropTypes.string,
     project: PropTypes.object.isRequired
@@ -121,21 +121,7 @@ export default class ProjectGridItem extends Component {
     const { project, contextMenuId } = this.props;
     const creatorAttribution = project.attributions && project.attributions.creator;
 
-    const isGLBOnlyProject = !project.project_url && project.scene;
-    const content = isGLBOnlyProject ? (
-      <>
-        <ThumbnailContainer>
-          {project.scene.screenshot_url && <Thumbnail src={project.scene.screenshot_url} />}
-        </ThumbnailContainer>
-        <TitleContainer>
-          <Col>
-            <h3>{project.scene.name}</h3>
-            {creatorAttribution && <p>{creatorAttribution}</p>}
-          </Col>
-          <Pill>GLB</Pill>
-        </TitleContainer>
-      </>
-    ) : (
+    const content = (
       <>
         <ThumbnailContainer>{project.thumbnail_url && <Thumbnail src={project.thumbnail_url} />}</ThumbnailContainer>
         <TitleContainer>
@@ -165,3 +151,23 @@ export default class ProjectGridItem extends Component {
     }
   }
 }
+
+export function ProjectGridSceneItem({ scene }) {
+  const creatorAttribution = scene.attributions && scene.attributions.creator;
+  return (
+    <StyledProjectGridItem to={scene.url}>
+      <ThumbnailContainer>{scene.screenshot_url && <Thumbnail src={scene.screenshot_url} />}</ThumbnailContainer>
+      <TitleContainer>
+        <Col>
+          <h3>{scene.name}</h3>
+          {creatorAttribution && <p>{creatorAttribution}</p>}
+        </Col>
+        <Pill>GLB</Pill>
+      </TitleContainer>
+    </StyledProjectGridItem>
+  );
+}
+
+ProjectGridSceneItem.propTypes = {
+  scene: PropTypes.object.isRequired
+};

src/ui/projects/ProjectsPage.js

@@ -85,6 +85,7 @@ class ProjectsPage extends Component {
 
     this.state = {
       projects: [],
+      scenes: [],
       loading: isAuthenticated,
       isAuthenticated,
       error: null
@@ -94,16 +95,16 @@ class ProjectsPage extends Component {
   componentDidMount() {
     // We dont need to load projects if the user isn't logged in
     if (this.state.isAuthenticated) {
-      this.props.api
-        .getProjects()
-        .then(projects => {
+      Promise.all([this.props.api.getProjects(), this.props.api.getProjectlessScenes()])
+        .then(([projects, scenes]) => {
           this.setState({
+            scenes: scenes.map(scene => ({
+              ...scene,
+              url: `/scenes/${scene.scene_id}`
+            })),
             projects: projects.map(project => ({
               ...project,
-              url:
-                !project.project_url && project.scene
-                  ? `/scenes/${project.scene.scene_id}`
-                  : `/projects/${project.project_id}`
+              url: `/projects/${project.project_id}`
             })),
             loading: false
           });
@@ -140,7 +141,7 @@ class ProjectsPage extends Component {
   ProjectContextMenu = connectMenu(contextMenuId)(this.renderContextMenu);
 
   render() {
-    const { error, loading, projects, isAuthenticated } = this.state;
+    const { error, loading, projects, scenes, isAuthenticated } = this.state;
 
     const ProjectContextMenu = this.ProjectContextMenu;
 
@@ -190,6 +191,7 @@ class ProjectsPage extends Component {
                     <ProjectGrid
                       loading={loading}
                       projects={projects}
+                      scenes={scenes}
                       newProjectPath="/projects/templates"
                       contextMenuId={contextMenuId}
                     />