From 26c3def27725731e62bc02582cd184978005168d Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Fri, 22 Nov 2019 09:54:12 -0800
Subject: [PATCH 1/8] Scene remixing page WIP

---
 src/ui/projects/ProjectGridItem.js |   4 +-
 src/ui/projects/TemplatesPage.js   | 112 +++++++++++++++++++++--------
 2 files changed, 84 insertions(+), 32 deletions(-)

diff --git a/src/ui/projects/ProjectGridItem.js b/src/ui/projects/ProjectGridItem.js
index c8d4e883..50c08aa9 100644
--- a/src/ui/projects/ProjectGridItem.js
+++ b/src/ui/projects/ProjectGridItem.js
@@ -16,7 +16,7 @@ const StyledProjectGridItem = styled(Link)`
   flex-direction: column;
   height: 220px;
   border-radius: 6px;
-  background-color: ${props => props.theme.panel2};
+  background-color: ${props => props.theme.toolbar};
   text-decoration: none;
   border: 1px solid transparent;
 
@@ -71,8 +71,6 @@ const Thumbnail = styled.div`
   background-size: cover;
   background-position: 50%;
   background-repeat: no-repeat;
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
   background-image: url(${props => props.src});
 `;
 
diff --git a/src/ui/projects/TemplatesPage.js b/src/ui/projects/TemplatesPage.js
index c2b56b7b..9428d87a 100644
--- a/src/ui/projects/TemplatesPage.js
+++ b/src/ui/projects/TemplatesPage.js
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useCallback } from "react";
 import PropTypes from "prop-types";
 import NavBar from "../navigation/NavBar";
 import ProjectGrid from "./ProjectGrid";
@@ -6,35 +6,89 @@ import Footer from "../navigation/Footer";
 import templates from "./templates";
 import PrimaryLink from "../inputs/PrimaryLink";
 import { ProjectsSection, ProjectsContainer, ProjectsHeader } from "./ProjectsPage";
+import styled from "styled-components";
+import { Row } from "../layout/Flex";
+import { Button } from "../inputs/Button";
+import StringInput from "../inputs/StringInput";
 
-export default class TemplatesPage extends Component {
-  static propTypes = {
-    history: PropTypes.object.isRequired
-  };
+const ProjectGridContainer = styled.div`
+  background-color: ${props => props.theme.panel2};
+  border-radius: 3px;
+`;
 
-  onSelectTemplate = template => {
-    const search = new URLSearchParams();
-    search.set("template", template.url);
-    this.props.history.push(`/projects/new?${search}`);
-  };
+const ProjectGridContent = styled.div`
+  padding: 20px;
+`;
 
-  render() {
-    return (
-      <>
-        <NavBar />
-        <main>
-          <ProjectsSection>
-            <ProjectsContainer>
-              <ProjectsHeader>
-                <h1>Templates</h1>
-                <PrimaryLink to="/projects">Back to projects</PrimaryLink>
-              </ProjectsHeader>
-              <ProjectGrid projects={templates} onSelectProject={this.onSelectTemplate} />
-            </ProjectsContainer>
-          </ProjectsSection>
-        </main>
-        <Footer />
-      </>
-    );
-  }
+const ProjectGridHeader = styled.div`
+  display: flex;
+  background-color: ${props => props.theme.toolbar2};
+  border-radius: 3px 3px 0px 0px;
+  height: 48px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+`;
+
+const Separator = styled.div`
+  height: 48px;
+  width: 1px;
+  background-color: ${props => props.theme.border};
+  margin: 0 20px;
+`;
+
+const ProjectGridHeaderRow = styled(Row)`
+  align-items: center;
+`;
+
+const SearchInput = styled(StringInput)`
+  width: auto;
+  min-width: 180px;
+`;
+
+export default function TemplatesPage({ history }) {
+  const onSelectTemplate = useCallback(
+    template => {
+      const search = new URLSearchParams();
+      search.set("template", template.url);
+      history.push(`/projects/new?${search}`);
+    },
+    [history]
+  );
+
+  return (
+    <>
+      <NavBar />
+      <main>
+        <ProjectsSection>
+          <ProjectsContainer>
+            <ProjectsHeader>
+              <h1>Templates</h1>
+              <PrimaryLink to="/projects">Back to projects</PrimaryLink>
+            </ProjectsHeader>
+            <ProjectGridContainer>
+              <ProjectGridHeader>
+                <ProjectGridHeaderRow>
+                  <PrimaryLink>Featured</PrimaryLink>
+                  <Separator />
+                  <SearchInput placeholder="Search scenes..." />
+                </ProjectGridHeaderRow>
+                <ProjectGridHeaderRow>
+                  <Button>New Empty Scene</Button>
+                </ProjectGridHeaderRow>
+              </ProjectGridHeader>
+              <ProjectGridContent>
+                <ProjectGrid projects={templates} onSelectProject={onSelectTemplate} />
+              </ProjectGridContent>
+            </ProjectGridContainer>
+          </ProjectsContainer>
+        </ProjectsSection>
+      </main>
+      <Footer />
+    </>
+  );
 }
+
+TemplatesPage.propTypes = {
+  history: PropTypes.object.isRequired
+};

From 42392a65eec613259ba610b0b18017d4a6628da5 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Fri, 22 Nov 2019 16:07:09 -0800
Subject: [PATCH 2/8] Add remix project page

---
 src/api/Api.js                       |  12 ++
 src/ui/App.js                        |   5 +-
 src/ui/contexts/ApiContext.js        |   2 +-
 src/ui/projects/CreateProjectPage.js | 200 +++++++++++++++++++++++++++
 src/ui/projects/ProjectsPage.js      |   3 +-
 src/ui/projects/TemplatesPage.js     |  94 -------------
 6 files changed, 218 insertions(+), 98 deletions(-)
 create mode 100644 src/ui/projects/CreateProjectPage.js
 delete mode 100644 src/ui/projects/TemplatesPage.js

diff --git a/src/api/Api.js b/src/api/Api.js
index 71bcc372..e7725646 100644
--- a/src/api/Api.js
+++ b/src/api/Api.js
@@ -353,8 +353,20 @@ export default class Project extends EventEmitter {
 
     const resp = await this.fetch(url, { headers, signal });
 
+    if (signal.aborted) {
+      const error = new Error("Media search aborted");
+      error.aborted = true;
+      throw error;
+    }
+
     const json = await resp.json();
 
+    if (signal.aborted) {
+      const error = new Error("Media search aborted");
+      error.aborted = true;
+      throw error;
+    }
+
     const thumbnailedEntries = json.entries.map(entry => {
       if (entry.images && entry.images.preview && entry.images.preview.url) {
         if (entry.images.preview.type === "mp4") {
diff --git a/src/ui/App.js b/src/ui/App.js
index 91695d9e..78a6cebc 100644
--- a/src/ui/App.js
+++ b/src/ui/App.js
@@ -17,7 +17,7 @@ import WhatsNewPage from "./whats-new/WhatsNewPage";
 import LoginPage from "./auth/LoginPage";
 import LogoutPage from "./auth/LogoutPage";
 import ProjectsPage from "./projects/ProjectsPage";
-import TemplatesPage from "./projects/TemplatesPage";
+import CreateProjectPage from "./projects/CreateProjectPage";
 
 import { ThemeProvider } from "styled-components";
 
@@ -74,7 +74,8 @@ export default class App extends Component {
                   <RedirectRoute path="/new" exact to="/projects" />
                   <Route path="/login" exact component={LoginPage} />
                   <Route path="/logout" exact component={LogoutPage} />
-                  <Route path="/projects/templates" exact component={TemplatesPage} />
+                  <Route path="/projects/create" exact component={CreateProjectPage} />
+                  <RedirectRoute path="/projects/templates" exact to="/projects/create" />
                   <Route path="/projects" exact component={ProjectsPage} />
                   <Route path="/projects/:projectId" component={EditorContainer} />
                   <Route path="/kits/package" component={PackageKitPage} />
diff --git a/src/ui/contexts/ApiContext.js b/src/ui/contexts/ApiContext.js
index fe559cd5..bbe4d681 100644
--- a/src/ui/contexts/ApiContext.js
+++ b/src/ui/contexts/ApiContext.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-const ApiContext = React.createContext();
+export const ApiContext = React.createContext();
 
 export const ApiContextProvider = ApiContext.Provider;
 
diff --git a/src/ui/projects/CreateProjectPage.js b/src/ui/projects/CreateProjectPage.js
new file mode 100644
index 00000000..0ac2590e
--- /dev/null
+++ b/src/ui/projects/CreateProjectPage.js
@@ -0,0 +1,200 @@
+import React, { useCallback, useEffect, useState, useContext, useRef } from "react";
+import PropTypes from "prop-types";
+import NavBar from "../navigation/NavBar";
+import ProjectGrid from "./ProjectGrid";
+import Footer from "../navigation/Footer";
+import PrimaryLink from "../inputs/PrimaryLink";
+import { ProjectsSection, ProjectsContainer, ProjectsHeader } from "./ProjectsPage";
+import styled from "styled-components";
+import { Row } from "../layout/Flex";
+import { Button } from "../inputs/Button";
+import StringInput from "../inputs/StringInput";
+import { ApiContext } from "../contexts/ApiContext";
+import { Link } from "react-router-dom";
+
+const ProjectGridContainer = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  background-color: ${props => props.theme.panel2};
+  border-radius: 3px;
+`;
+
+const ProjectGridContent = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  padding: 20px;
+`;
+
+const ProjectGridHeader = styled.div`
+  display: flex;
+  background-color: ${props => props.theme.toolbar2};
+  border-radius: 3px 3px 0px 0px;
+  height: 48px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+`;
+
+const Filter = styled.a`
+  font-size: 1.25em;
+  cursor: pointer;
+`;
+
+const Separator = styled.div`
+  height: 48px;
+  width: 1px;
+  background-color: ${props => props.theme.border};
+  margin: 0 20px;
+`;
+
+const ProjectGridHeaderRow = styled(Row)`
+  align-items: center;
+`;
+
+const SearchInput = styled(StringInput)`
+  width: auto;
+  min-width: 180px;
+`;
+
+const CenteredMessage = styled.div`
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ErrorMessage = styled(CenteredMessage)`
+  color: ${props => props.theme.red};
+`;
+
+export default function CreateProjectPage({ history, location }) {
+  const queryParams = new URLSearchParams(location.search);
+  const api = useContext(ApiContext);
+  const abortControllerRef = useRef();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState();
+  const [query, setQuery] = useState(queryParams.get("q") || "");
+  const [filter, setFilter] = useState(queryParams.get("filter") || "featured-remixable");
+  const [results, setResults] = useState([]);
+  const [cursor, setCursor] = useState();
+  const [_nextCursor, setNextCursor] = useState();
+
+  const onChangeQuery = useCallback(
+    value => {
+      setFilter("remixable");
+      setQuery(value.trim());
+      setCursor();
+      setNextCursor();
+    },
+    [setFilter, setQuery]
+  );
+
+  const onSetFeaturedRemixable = useCallback(() => {
+    setFilter("featured-remixable");
+    setQuery("");
+    setCursor();
+    setNextCursor();
+  }, [setFilter]);
+
+  useEffect(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+
+    abortControllerRef.current = new AbortController();
+
+    setLoading(true);
+    setError(null);
+
+    const search = new URLSearchParams();
+
+    search.set("filter", filter);
+
+    if (query !== "") {
+      search.set("q", query);
+    }
+
+    history.push(`/projects/create?${search}`);
+
+    api
+      .searchMedia("scene_listings", { filter, query }, cursor, abortControllerRef.current.signal)
+      .then(({ results, nextCursor }) => {
+        setResults(results);
+        setNextCursor(nextCursor);
+        setLoading(false);
+      })
+      .catch(err => {
+        if (err.name === "AbortError") return;
+        setError(err);
+        setResults([]);
+        setNextCursor();
+        setLoading(false);
+      });
+
+    return () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+  }, [api, filter, query, cursor, setResults, setNextCursor, setError, setLoading]);
+
+  // TODO: Add infinite scrolling
+  // const hasMore = !!nextCursor;
+
+  // const loadMore = useCallback(() => {
+  //   setCursor(nextCursor);
+  // }, [nextCursor, setCursor]);
+
+  const onSelectScene = useCallback(
+    scene => {
+      const search = new URLSearchParams();
+      search.set("sceneId", scene.id);
+      history.push(`/projects/new?${search}`);
+    },
+    [history]
+  );
+
+  return (
+    <>
+      <NavBar />
+      <main>
+        <ProjectsSection>
+          <ProjectsContainer>
+            <ProjectsHeader>
+              <h1>New Project</h1>
+              <PrimaryLink to="/projects">Back to projects</PrimaryLink>
+            </ProjectsHeader>
+            <ProjectGridContainer>
+              <ProjectGridHeader>
+                <ProjectGridHeaderRow>
+                  <Filter onClick={onSetFeaturedRemixable}>Featured</Filter>
+                  <Separator />
+                  <SearchInput placeholder="Search scenes..." value={query} onChange={onChangeQuery} />
+                </ProjectGridHeaderRow>
+                <ProjectGridHeaderRow>
+                  <Button as={Link} to="/projects/new">
+                    New Empty Scene
+                  </Button>
+                </ProjectGridHeaderRow>
+              </ProjectGridHeader>
+              <ProjectGridContent>
+                {error && <ErrorMessage>{error.message}</ErrorMessage>}
+                {loading && <CenteredMessage>Searching scenes...</CenteredMessage>}
+                {results.length === 0 && !loading && !error && <CenteredMessage>No Results</CenteredMessage>}
+                <ProjectGrid projects={results} onSelectProject={onSelectScene} />
+              </ProjectGridContent>
+            </ProjectGridContainer>
+          </ProjectsContainer>
+        </ProjectsSection>
+      </main>
+      <Footer />
+    </>
+  );
+}
+
+CreateProjectPage.propTypes = {
+  history: PropTypes.object.isRequired,
+  location: PropTypes.object.isRequired
+};
diff --git a/src/ui/projects/ProjectsPage.js b/src/ui/projects/ProjectsPage.js
index f7e6c03f..9ddd4279 100644
--- a/src/ui/projects/ProjectsPage.js
+++ b/src/ui/projects/ProjectsPage.js
@@ -15,6 +15,7 @@ import styled from "styled-components";
 export const ProjectsSection = styled.section`
   padding-bottom: 100px;
   display: flex;
+  flex: 1;
 
   &:first-child {
     padding-top: 100px;
@@ -184,7 +185,7 @@ class ProjectsPage extends Component {
             <ProjectsContainer>
               <ProjectsHeader>
                 <h1>Projects</h1>
-                <MediumButton as={Link} to="/projects/templates">
+                <MediumButton as={Link} to="/projects/create">
                   New Project
                 </MediumButton>
               </ProjectsHeader>
diff --git a/src/ui/projects/TemplatesPage.js b/src/ui/projects/TemplatesPage.js
deleted file mode 100644
index 9428d87a..00000000
--- a/src/ui/projects/TemplatesPage.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import React, { useCallback } from "react";
-import PropTypes from "prop-types";
-import NavBar from "../navigation/NavBar";
-import ProjectGrid from "./ProjectGrid";
-import Footer from "../navigation/Footer";
-import templates from "./templates";
-import PrimaryLink from "../inputs/PrimaryLink";
-import { ProjectsSection, ProjectsContainer, ProjectsHeader } from "./ProjectsPage";
-import styled from "styled-components";
-import { Row } from "../layout/Flex";
-import { Button } from "../inputs/Button";
-import StringInput from "../inputs/StringInput";
-
-const ProjectGridContainer = styled.div`
-  background-color: ${props => props.theme.panel2};
-  border-radius: 3px;
-`;
-
-const ProjectGridContent = styled.div`
-  padding: 20px;
-`;
-
-const ProjectGridHeader = styled.div`
-  display: flex;
-  background-color: ${props => props.theme.toolbar2};
-  border-radius: 3px 3px 0px 0px;
-  height: 48px;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px;
-`;
-
-const Separator = styled.div`
-  height: 48px;
-  width: 1px;
-  background-color: ${props => props.theme.border};
-  margin: 0 20px;
-`;
-
-const ProjectGridHeaderRow = styled(Row)`
-  align-items: center;
-`;
-
-const SearchInput = styled(StringInput)`
-  width: auto;
-  min-width: 180px;
-`;
-
-export default function TemplatesPage({ history }) {
-  const onSelectTemplate = useCallback(
-    template => {
-      const search = new URLSearchParams();
-      search.set("template", template.url);
-      history.push(`/projects/new?${search}`);
-    },
-    [history]
-  );
-
-  return (
-    <>
-      <NavBar />
-      <main>
-        <ProjectsSection>
-          <ProjectsContainer>
-            <ProjectsHeader>
-              <h1>Templates</h1>
-              <PrimaryLink to="/projects">Back to projects</PrimaryLink>
-            </ProjectsHeader>
-            <ProjectGridContainer>
-              <ProjectGridHeader>
-                <ProjectGridHeaderRow>
-                  <PrimaryLink>Featured</PrimaryLink>
-                  <Separator />
-                  <SearchInput placeholder="Search scenes..." />
-                </ProjectGridHeaderRow>
-                <ProjectGridHeaderRow>
-                  <Button>New Empty Scene</Button>
-                </ProjectGridHeaderRow>
-              </ProjectGridHeader>
-              <ProjectGridContent>
-                <ProjectGrid projects={templates} onSelectProject={onSelectTemplate} />
-              </ProjectGridContent>
-            </ProjectGridContainer>
-          </ProjectsContainer>
-        </ProjectsSection>
-      </main>
-      <Footer />
-    </>
-  );
-}
-
-TemplatesPage.propTypes = {
-  history: PropTypes.object.isRequired
-};

From 0fdc3ec3ba7cf4308c0d436a7fa80862bab3f1c1 Mon Sep 17 00:00:00 2001
From: Robert Long <robertlong@Roberts-MacBook-Pro.local>
Date: Fri, 20 Dec 2019 12:10:19 -0800
Subject: [PATCH 3/8] Remixing WIP

---
 src/ui/projects/CreateProjectPage.js | 11 +++++++++--
 src/ui/projects/ProjectsPage.js      |  3 ++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/ui/projects/CreateProjectPage.js b/src/ui/projects/CreateProjectPage.js
index 0ac2590e..c2525110 100644
--- a/src/ui/projects/CreateProjectPage.js
+++ b/src/ui/projects/CreateProjectPage.js
@@ -121,7 +121,14 @@ export default function CreateProjectPage({ history, location }) {
     api
       .searchMedia("scene_listings", { filter, query }, cursor, abortControllerRef.current.signal)
       .then(({ results, nextCursor }) => {
-        setResults(results);
+        console.log(results);
+        setResults(
+          results.map(result => ({
+            ...result,
+            url: `/projects/new?sceneId=${result.id}`,
+            thumbnailUrl: result && result.images && result.images.preview && result.images.preview.url
+          }))
+        );
         setNextCursor(nextCursor);
         setLoading(false);
       })
@@ -183,7 +190,7 @@ export default function CreateProjectPage({ history, location }) {
                 {error && <ErrorMessage>{error.message}</ErrorMessage>}
                 {loading && <CenteredMessage>Searching scenes...</CenteredMessage>}
                 {results.length === 0 && !loading && !error && <CenteredMessage>No Results</CenteredMessage>}
-                <ProjectGrid projects={results} onSelectProject={onSelectScene} />
+                {!error && !loading && <ProjectGrid projects={results} onSelectProject={onSelectScene} />}
               </ProjectGridContent>
             </ProjectGridContainer>
           </ProjectsContainer>
diff --git a/src/ui/projects/ProjectsPage.js b/src/ui/projects/ProjectsPage.js
index 9ddd4279..76cad8cb 100644
--- a/src/ui/projects/ProjectsPage.js
+++ b/src/ui/projects/ProjectsPage.js
@@ -102,7 +102,8 @@ class ProjectsPage extends Component {
           this.setState({
             projects: projects.map(project => ({
               ...project,
-              url: `/projects/${project.id}`
+              url: `/projects/${project.id}`,
+              thumbnailUrl: project && project.images && project.images.preview && project.images.preview.url
             })),
             loading: false
           });

From a80bba14ef7b0b07e5644ffd3d6ea19211a61f94 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Fri, 20 Dec 2019 17:19:56 -0800
Subject: [PATCH 4/8] Style projects and create project page

---
 src/ui/projects/CreateProjectPage.js  | 103 +++++++++-----------------
 src/ui/projects/NewProjectGridItem.js |  19 +++--
 src/ui/projects/ProjectGrid.js        |  99 ++++++++++++++++++++-----
 src/ui/projects/ProjectsPage.js       |  63 ++++++++--------
 4 files changed, 163 insertions(+), 121 deletions(-)

diff --git a/src/ui/projects/CreateProjectPage.js b/src/ui/projects/CreateProjectPage.js
index c2525110..27d2ffd9 100644
--- a/src/ui/projects/CreateProjectPage.js
+++ b/src/ui/projects/CreateProjectPage.js
@@ -1,74 +1,25 @@
 import React, { useCallback, useEffect, useState, useContext, useRef } from "react";
 import PropTypes from "prop-types";
 import NavBar from "../navigation/NavBar";
-import ProjectGrid from "./ProjectGrid";
+import {
+  ProjectGrid,
+  ProjectGridContainer,
+  ProjectGridHeader,
+  ProjectGridHeaderRow,
+  Filter,
+  Separator,
+  SearchInput,
+  ProjectGridContent,
+  CenteredMessage,
+  ErrorMessage
+} from "./ProjectGrid";
 import Footer from "../navigation/Footer";
 import PrimaryLink from "../inputs/PrimaryLink";
-import { ProjectsSection, ProjectsContainer, ProjectsHeader } from "./ProjectsPage";
-import styled from "styled-components";
-import { Row } from "../layout/Flex";
 import { Button } from "../inputs/Button";
-import StringInput from "../inputs/StringInput";
+import { ProjectsSection, ProjectsContainer, ProjectsHeader } from "./ProjectsPage";
 import { ApiContext } from "../contexts/ApiContext";
 import { Link } from "react-router-dom";
 
-const ProjectGridContainer = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  background-color: ${props => props.theme.panel2};
-  border-radius: 3px;
-`;
-
-const ProjectGridContent = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  padding: 20px;
-`;
-
-const ProjectGridHeader = styled.div`
-  display: flex;
-  background-color: ${props => props.theme.toolbar2};
-  border-radius: 3px 3px 0px 0px;
-  height: 48px;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px;
-`;
-
-const Filter = styled.a`
-  font-size: 1.25em;
-  cursor: pointer;
-`;
-
-const Separator = styled.div`
-  height: 48px;
-  width: 1px;
-  background-color: ${props => props.theme.border};
-  margin: 0 20px;
-`;
-
-const ProjectGridHeaderRow = styled(Row)`
-  align-items: center;
-`;
-
-const SearchInput = styled(StringInput)`
-  width: auto;
-  min-width: 180px;
-`;
-
-const CenteredMessage = styled.div`
-  display: flex;
-  flex: 1;
-  justify-content: center;
-  align-items: center;
-`;
-
-const ErrorMessage = styled(CenteredMessage)`
-  color: ${props => props.theme.red};
-`;
-
 export default function CreateProjectPage({ history, location }) {
   const queryParams = new URLSearchParams(location.search);
   const api = useContext(ApiContext);
@@ -98,6 +49,13 @@ export default function CreateProjectPage({ history, location }) {
     setNextCursor();
   }, [setFilter]);
 
+  const onSetAll = useCallback(() => {
+    setFilter("remixable");
+    setQuery("");
+    setCursor();
+    setNextCursor();
+  }, [setFilter]);
+
   useEffect(() => {
     if (abortControllerRef.current) {
       abortControllerRef.current.abort();
@@ -126,7 +84,7 @@ export default function CreateProjectPage({ history, location }) {
           results.map(result => ({
             ...result,
             url: `/projects/new?sceneId=${result.id}`,
-            thumbnailUrl: result && result.images && result.images.preview && result.images.preview.url
+            thumbnail_url: result && result.images && result.images.preview && result.images.preview.url
           }))
         );
         setNextCursor(nextCursor);
@@ -176,21 +134,32 @@ export default function CreateProjectPage({ history, location }) {
             <ProjectGridContainer>
               <ProjectGridHeader>
                 <ProjectGridHeaderRow>
-                  <Filter onClick={onSetFeaturedRemixable}>Featured</Filter>
+                  <Filter onClick={onSetFeaturedRemixable} active={filter === "featured-remixable"}>
+                    Featured
+                  </Filter>
+                  <Filter onClick={onSetAll} active={filter === "remixable"}>
+                    All
+                  </Filter>
                   <Separator />
                   <SearchInput placeholder="Search scenes..." value={query} onChange={onChangeQuery} />
                 </ProjectGridHeaderRow>
                 <ProjectGridHeaderRow>
                   <Button as={Link} to="/projects/new">
-                    New Empty Scene
+                    New Empty Project
                   </Button>
                 </ProjectGridHeaderRow>
               </ProjectGridHeader>
               <ProjectGridContent>
                 {error && <ErrorMessage>{error.message}</ErrorMessage>}
                 {loading && <CenteredMessage>Searching scenes...</CenteredMessage>}
-                {results.length === 0 && !loading && !error && <CenteredMessage>No Results</CenteredMessage>}
-                {!error && !loading && <ProjectGrid projects={results} onSelectProject={onSelectScene} />}
+                {!error && !loading && (
+                  <ProjectGrid
+                    projects={results}
+                    newProjectPath="/projects/new"
+                    newProjectLabel="New Empty Project"
+                    onSelectProject={onSelectScene}
+                  />
+                )}
               </ProjectGridContent>
             </ProjectGridContainer>
           </ProjectsContainer>
diff --git a/src/ui/projects/NewProjectGridItem.js b/src/ui/projects/NewProjectGridItem.js
index e7832564..2c753f99 100644
--- a/src/ui/projects/NewProjectGridItem.js
+++ b/src/ui/projects/NewProjectGridItem.js
@@ -10,12 +10,14 @@ const StyledNewProjectGridItem = styled(Link)`
   height: 220px;
   border-radius: 6px;
   text-decoration: none;
-  border: 5px dashed ${props => props.theme.panel};
+  /*border: 5px dashed ${props => props.theme.text};*/
+  background-color: ${props => props.theme.toolbar};
   justify-content: center;
   align-items: center;
+  border: 1px solid transparent;
 
   &:hover {
-    color: ${props => props.theme.text};
+    color: inherit;
     border-color: ${props => props.theme.selected};
   }
 
@@ -28,14 +30,21 @@ const StyledNewProjectGridItem = styled(Link)`
 
 export default class NewProjectGridItem extends Component {
   static propTypes = {
-    newProjectUrl: PropTypes.string.isRequired
+    path: PropTypes.oneOf([PropTypes.string, PropTypes.object]).isRequired,
+    label: PropTypes.string.isRequired
+  };
+
+  static defaultProps = {
+    label: "New Project"
   };
 
   render() {
+    const { path, label } = this.props;
+
     return (
-      <StyledNewProjectGridItem to={this.props.newProjectUrl}>
+      <StyledNewProjectGridItem to={path}>
         <Plus />
-        <h3>New Project</h3>
+        <h3>{label}</h3>
       </StyledNewProjectGridItem>
     );
   }
diff --git a/src/ui/projects/ProjectGrid.js b/src/ui/projects/ProjectGrid.js
index efcd68de..51d86c77 100644
--- a/src/ui/projects/ProjectGrid.js
+++ b/src/ui/projects/ProjectGrid.js
@@ -1,8 +1,10 @@
-import React, { Component } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import ProjectGridItem from "./ProjectGridItem";
 import NewProjectGridItem from "./NewProjectGridItem";
+import { Row } from "../layout/Flex";
+import StringInput from "../inputs/StringInput";
 
 const StyledProjectGrid = styled.div`
   display: grid;
@@ -11,21 +13,82 @@ const StyledProjectGrid = styled.div`
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
 `;
 
-export default class ProjectGrid extends Component {
-  static propTypes = {
-    contextMenuId: PropTypes.string,
-    projects: PropTypes.arrayOf(PropTypes.object).isRequired,
-    newProjectUrl: PropTypes.string
-  };
-
-  render() {
-    return (
-      <StyledProjectGrid>
-        {this.props.projects.map(project => (
-          <ProjectGridItem key={project.project_id} project={project} contextMenuId={this.props.contextMenuId} />
-        ))}
-        {this.props.newProjectUrl && <NewProjectGridItem newProjectUrl={this.props.newProjectUrl} />}
-      </StyledProjectGrid>
-    );
-  }
+export function ProjectGrid({ newProjectPath, newProjectLabel, projects, contextMenuId }) {
+  return (
+    <StyledProjectGrid>
+      {newProjectPath && <NewProjectGridItem path={newProjectPath} label={newProjectLabel} />}
+      {projects.map(project => (
+        <ProjectGridItem key={project.project_id} project={project} contextMenuId={contextMenuId} />
+      ))}
+    </StyledProjectGrid>
+  );
 }
+
+ProjectGrid.propTypes = {
+  contextMenuId: PropTypes.string,
+  projects: PropTypes.arrayOf(PropTypes.object).isRequired,
+  newProjectPath: PropTypes.oneOf([PropTypes.string, PropTypes.object]),
+  newProjectLabel: PropTypes.string
+};
+
+export const ProjectGridContainer = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  background-color: ${props => props.theme.panel2};
+  border-radius: 3px;
+`;
+
+export const ProjectGridContent = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  padding: 20px;
+`;
+
+export const ProjectGridHeader = styled.div`
+  display: flex;
+  background-color: ${props => props.theme.toolbar2};
+  border-radius: 3px 3px 0px 0px;
+  height: 48px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+`;
+
+export const Filter = styled.a`
+  font-size: 1.25em;
+  cursor: pointer;
+  color: ${props => (props.active ? props.theme.blue : props.theme.text)};
+`;
+
+export const Separator = styled.div`
+  height: 48px;
+  width: 1px;
+  background-color: ${props => props.theme.border};
+`;
+
+export const ProjectGridHeaderRow = styled(Row)`
+  align-items: center;
+
+  & > * {
+    margin: 0 10px;
+  }
+`;
+
+export const SearchInput = styled(StringInput)`
+  width: auto;
+  min-width: 200px;
+  height: 28px;
+`;
+
+export const CenteredMessage = styled.div`
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const ErrorMessage = styled(CenteredMessage)`
+  color: ${props => props.theme.red};
+`;
diff --git a/src/ui/projects/ProjectsPage.js b/src/ui/projects/ProjectsPage.js
index d80462d1..66e0e490 100644
--- a/src/ui/projects/ProjectsPage.js
+++ b/src/ui/projects/ProjectsPage.js
@@ -2,11 +2,19 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { withApi } from "../contexts/ApiContext";
 import NavBar from "../navigation/NavBar";
-import ProjectGrid from "./ProjectGrid";
+import {
+  ProjectGrid,
+  ProjectGridContainer,
+  ProjectGridHeader,
+  ProjectGridHeaderRow,
+  ProjectGridContent,
+  CenteredMessage,
+  ErrorMessage
+} from "./ProjectGrid";
+import { Button } from "../inputs/Button";
 import Footer from "../navigation/Footer";
 import { MediumButton } from "../inputs/Button";
 import { Link } from "react-router-dom";
-import Loading from "../Loading";
 import LatestUpdate from "../whats-new/LatestUpdate";
 import { connectMenu, ContextMenu, MenuItem } from "../layout/ContextMenu";
 import templates from "./templates";
@@ -62,16 +70,6 @@ export const ProjectsHeader = styled.div`
   align-items: center;
 `;
 
-const LoadingContainer = styled.div`
-  display: flex;
-  flex: 1;
-`;
-
-const ErrorMessage = styled.div`
-  margin-bottom: 20px;
-  color: ${props => props.theme.red};
-`;
-
 const contextMenuId = "project-menu";
 
 class ProjectsPage extends Component {
@@ -102,8 +100,7 @@ class ProjectsPage extends Component {
           this.setState({
             projects: projects.map(project => ({
               ...project,
-              url: `/projects/${project.id}`,
-              thumbnailUrl: project && project.images && project.images.preview && project.images.preview.url
+              url: `/projects/${project.id}`
             })),
             loading: false
           });
@@ -142,18 +139,6 @@ class ProjectsPage extends Component {
   render() {
     const { error, loading, projects, isAuthenticated } = this.state;
 
-    let content;
-
-    if (loading) {
-      content = (
-        <LoadingContainer>
-          <Loading message="Loading projects..." />
-        </LoadingContainer>
-      );
-    } else {
-      content = <ProjectGrid projects={projects} newProjectUrl="/projects/templates" contextMenuId={contextMenuId} />;
-    }
-
     const ProjectContextMenu = this.ProjectContextMenu;
 
     const topTemplates = [];
@@ -186,12 +171,28 @@ class ProjectsPage extends Component {
             <ProjectsContainer>
               <ProjectsHeader>
                 <h1>Projects</h1>
-                <MediumButton as={Link} to="/projects/create">
-                  New Project
-                </MediumButton>
               </ProjectsHeader>
-              {error && <ErrorMessage>{error.message || "There was an unknown error."}</ErrorMessage>}
-              {content}
+              <ProjectGridContainer>
+                <ProjectGridHeader>
+                  <ProjectGridHeaderRow></ProjectGridHeaderRow>
+                  <ProjectGridHeaderRow>
+                    <Button as={Link} to="/projects/create">
+                      New Project
+                    </Button>
+                  </ProjectGridHeaderRow>
+                </ProjectGridHeader>
+                <ProjectGridContent>
+                  {error && <ErrorMessage>{error.message}</ErrorMessage>}
+                  {loading && <CenteredMessage>Loading projects...</CenteredMessage>}
+                  {!error && !loading && (
+                    <ProjectGrid
+                      projects={projects}
+                      newProjectPath="/projects/templates"
+                      contextMenuId={contextMenuId}
+                    />
+                  )}
+                </ProjectGridContent>
+              </ProjectGridContainer>
             </ProjectsContainer>
           </ProjectsSection>
           <ProjectContextMenu />

From be82cbc2773863a7f091f408a2a265643a7bde95 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Mon, 23 Dec 2019 13:42:43 -0800
Subject: [PATCH 5/8] Add infinite scroll etc.

---
 src/ui/projects/CreateProjectPage.js  | 33 ++++++++++++++-------------
 src/ui/projects/NewProjectGridItem.js | 10 +++++++-
 src/ui/projects/ProjectGrid.js        | 10 ++++----
 src/ui/projects/ProjectsPage.js       |  7 +++---
 4 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/src/ui/projects/CreateProjectPage.js b/src/ui/projects/CreateProjectPage.js
index 27d2ffd9..c4204a97 100644
--- a/src/ui/projects/CreateProjectPage.js
+++ b/src/ui/projects/CreateProjectPage.js
@@ -10,7 +10,6 @@ import {
   Separator,
   SearchInput,
   ProjectGridContent,
-  CenteredMessage,
   ErrorMessage
 } from "./ProjectGrid";
 import Footer from "../navigation/Footer";
@@ -19,6 +18,7 @@ import { Button } from "../inputs/Button";
 import { ProjectsSection, ProjectsContainer, ProjectsHeader } from "./ProjectsPage";
 import { ApiContext } from "../contexts/ApiContext";
 import { Link } from "react-router-dom";
+import InfiniteScroll from "react-infinite-scroller";
 
 export default function CreateProjectPage({ history, location }) {
   const queryParams = new URLSearchParams(location.search);
@@ -30,7 +30,7 @@ export default function CreateProjectPage({ history, location }) {
   const [filter, setFilter] = useState(queryParams.get("filter") || "featured-remixable");
   const [results, setResults] = useState([]);
   const [cursor, setCursor] = useState();
-  const [_nextCursor, setNextCursor] = useState();
+  const [nextCursor, setNextCursor] = useState();
 
   const onChangeQuery = useCallback(
     value => {
@@ -65,6 +65,7 @@ export default function CreateProjectPage({ history, location }) {
 
     setLoading(true);
     setError(null);
+    setResults([]);
 
     const search = new URLSearchParams();
 
@@ -79,7 +80,6 @@ export default function CreateProjectPage({ history, location }) {
     api
       .searchMedia("scene_listings", { filter, query }, cursor, abortControllerRef.current.signal)
       .then(({ results, nextCursor }) => {
-        console.log(results);
         setResults(
           results.map(result => ({
             ...result,
@@ -105,12 +105,11 @@ export default function CreateProjectPage({ history, location }) {
     };
   }, [api, filter, query, cursor, setResults, setNextCursor, setError, setLoading]);
 
-  // TODO: Add infinite scrolling
-  // const hasMore = !!nextCursor;
+  const hasMore = !!nextCursor;
 
-  // const loadMore = useCallback(() => {
-  //   setCursor(nextCursor);
-  // }, [nextCursor, setCursor]);
+  const loadMore = useCallback(() => {
+    setCursor(nextCursor);
+  }, [nextCursor, setCursor]);
 
   const onSelectScene = useCallback(
     scene => {
@@ -151,14 +150,16 @@ export default function CreateProjectPage({ history, location }) {
               </ProjectGridHeader>
               <ProjectGridContent>
                 {error && <ErrorMessage>{error.message}</ErrorMessage>}
-                {loading && <CenteredMessage>Searching scenes...</CenteredMessage>}
-                {!error && !loading && (
-                  <ProjectGrid
-                    projects={results}
-                    newProjectPath="/projects/new"
-                    newProjectLabel="New Empty Project"
-                    onSelectProject={onSelectScene}
-                  />
+                {!error && (
+                  <InfiniteScroll pageStart={0} loadMore={loadMore} hasMore={hasMore} threshold={100} useWindow={true}>
+                    <ProjectGrid
+                      projects={results}
+                      newProjectPath="/projects/new"
+                      newProjectLabel="New Empty Project"
+                      onSelectProject={onSelectScene}
+                      loading={loading}
+                    />
+                  </InfiniteScroll>
                 )}
               </ProjectGridContent>
             </ProjectGridContainer>
diff --git a/src/ui/projects/NewProjectGridItem.js b/src/ui/projects/NewProjectGridItem.js
index 2c753f99..c303e5b0 100644
--- a/src/ui/projects/NewProjectGridItem.js
+++ b/src/ui/projects/NewProjectGridItem.js
@@ -28,7 +28,7 @@ const StyledNewProjectGridItem = styled(Link)`
   }
 `;
 
-export default class NewProjectGridItem extends Component {
+export class NewProjectGridItem extends Component {
   static propTypes = {
     path: PropTypes.oneOf([PropTypes.string, PropTypes.object]).isRequired,
     label: PropTypes.string.isRequired
@@ -49,3 +49,11 @@ export default class NewProjectGridItem extends Component {
     );
   }
 }
+
+export function LoadingProjectGridItem() {
+  return (
+    <StyledNewProjectGridItem>
+      <h3>Loading...</h3>
+    </StyledNewProjectGridItem>
+  );
+}
diff --git a/src/ui/projects/ProjectGrid.js b/src/ui/projects/ProjectGrid.js
index 51d86c77..acfbb77a 100644
--- a/src/ui/projects/ProjectGrid.js
+++ b/src/ui/projects/ProjectGrid.js
@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import ProjectGridItem from "./ProjectGridItem";
-import NewProjectGridItem from "./NewProjectGridItem";
+import { LoadingProjectGridItem, NewProjectGridItem } from "./NewProjectGridItem";
 import { Row } from "../layout/Flex";
 import StringInput from "../inputs/StringInput";
 
@@ -13,13 +13,14 @@ const StyledProjectGrid = styled.div`
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
 `;
 
-export function ProjectGrid({ newProjectPath, newProjectLabel, projects, contextMenuId }) {
+export function ProjectGrid({ newProjectPath, newProjectLabel, projects, contextMenuId, loading }) {
   return (
     <StyledProjectGrid>
-      {newProjectPath && <NewProjectGridItem path={newProjectPath} label={newProjectLabel} />}
+      {newProjectPath && !loading && <NewProjectGridItem path={newProjectPath} label={newProjectLabel} />}
       {projects.map(project => (
         <ProjectGridItem key={project.project_id} project={project} contextMenuId={contextMenuId} />
       ))}
+      {loading && <LoadingProjectGridItem />}
     </StyledProjectGrid>
   );
 }
@@ -28,7 +29,8 @@ ProjectGrid.propTypes = {
   contextMenuId: PropTypes.string,
   projects: PropTypes.arrayOf(PropTypes.object).isRequired,
   newProjectPath: PropTypes.oneOf([PropTypes.string, PropTypes.object]),
-  newProjectLabel: PropTypes.string
+  newProjectLabel: PropTypes.string,
+  loading: PropTypes.bool
 };
 
 export const ProjectGridContainer = styled.div`
diff --git a/src/ui/projects/ProjectsPage.js b/src/ui/projects/ProjectsPage.js
index 66e0e490..97c13372 100644
--- a/src/ui/projects/ProjectsPage.js
+++ b/src/ui/projects/ProjectsPage.js
@@ -8,7 +8,6 @@ import {
   ProjectGridHeader,
   ProjectGridHeaderRow,
   ProjectGridContent,
-  CenteredMessage,
   ErrorMessage
 } from "./ProjectGrid";
 import { Button } from "../inputs/Button";
@@ -100,7 +99,7 @@ class ProjectsPage extends Component {
           this.setState({
             projects: projects.map(project => ({
               ...project,
-              url: `/projects/${project.id}`
+              url: `/projects/${project.project_id}`
             })),
             loading: false
           });
@@ -183,9 +182,9 @@ class ProjectsPage extends Component {
                 </ProjectGridHeader>
                 <ProjectGridContent>
                   {error && <ErrorMessage>{error.message}</ErrorMessage>}
-                  {loading && <CenteredMessage>Loading projects...</CenteredMessage>}
-                  {!error && !loading && (
+                  {!error && (
                     <ProjectGrid
+                      loading={loading}
                       projects={projects}
                       newProjectPath="/projects/templates"
                       contextMenuId={contextMenuId}

From 008fb5ca36bf102ea17b09d428e4d7490c61d72d Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Thu, 2 Jan 2020 13:26:17 -0800
Subject: [PATCH 6/8] Fix usePaginated search

---
 package.json                            |   3 +-
 src/api/Api.js                          |   1 +
 src/ui/assets/sources/ProjectsSource.js |   0
 src/ui/assets/useAssetSearch.js         |   2 +-
 src/ui/projects/CreateProjectPage.js    | 148 ++++++++++--------------
 src/ui/projects/NewProjectGridItem.js   |  12 +-
 src/ui/projects/ProjectGrid.js          |   4 +-
 src/ui/projects/ProjectGridItem.js      |  15 ++-
 src/ui/projects/usePaginatedSearch.js   |  66 +++++++++++
 src/ui/router/ScrollToTop.js            |  12 ++
 yarn.lock                               |  30 +++--
 11 files changed, 189 insertions(+), 104 deletions(-)
 create mode 100644 src/ui/assets/sources/ProjectsSource.js
 create mode 100644 src/ui/projects/usePaginatedSearch.js
 create mode 100644 src/ui/router/ScrollToTop.js

diff --git a/package.json b/package.json
index 1c733bf0..425bf2df 100644
--- a/package.json
+++ b/package.json
@@ -88,7 +88,7 @@
     "react-helmet": "^5.2.0",
     "react-infinite-scroller": "^1.2.4",
     "react-modal": "^3.10.1",
-    "react-router-dom": "^5.0.1",
+    "react-router-dom": "^5.1.2",
     "react-select": "^3.0.4",
     "react-toggle": "^4.0.2",
     "react-tooltip": "^3.11.1",
@@ -100,6 +100,7 @@
     "three": "https://github.com/MozillaReality/three.js.git#0f9b0024725f0dd917caa54c2934a4ba1fc12c4f",
     "three-mesh-bvh": "^0.1.4",
     "url-toolkit": "^2.1.6",
+    "use-http": "^0.2.4",
     "uuid": "^3.3.3"
   },
   "devDependencies": {
diff --git a/src/api/Api.js b/src/api/Api.js
index 8def065c..ab506065 100644
--- a/src/api/Api.js
+++ b/src/api/Api.js
@@ -94,6 +94,7 @@ export default class Project extends EventEmitter {
     const { protocol, host } = new URL(window.location.href);
 
     this.serverURL = protocol + "//" + host;
+    this.apiURL = `https://${RETICULUM_SERVER}`;
 
     this.projectDirectoryPath = "/api/files/";
 
diff --git a/src/ui/assets/sources/ProjectsSource.js b/src/ui/assets/sources/ProjectsSource.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/ui/assets/useAssetSearch.js b/src/ui/assets/useAssetSearch.js
index d532b42e..d550df3d 100644
--- a/src/ui/assets/useAssetSearch.js
+++ b/src/ui/assets/useAssetSearch.js
@@ -14,7 +14,7 @@ function useIsMounted() {
   return () => ref.current;
 }
 
-function useLoadAsync(callback, initialResults = [], initialCursor = 0) {
+export function useLoadAsync(callback, initialResults = [], initialCursor = 0) {
   const currentPromise = useRef();
   const abortControllerRef = useRef();
   const getIsMounted = useIsMounted();
diff --git a/src/ui/projects/CreateProjectPage.js b/src/ui/projects/CreateProjectPage.js
index c4204a97..7bc48a5d 100644
--- a/src/ui/projects/CreateProjectPage.js
+++ b/src/ui/projects/CreateProjectPage.js
@@ -1,5 +1,6 @@
-import React, { useCallback, useEffect, useState, useContext, useRef } from "react";
+import React, { useCallback, useState, useContext } from "react";
 import PropTypes from "prop-types";
+import ScrollToTop from "../router/ScrollToTop";
 import NavBar from "../navigation/NavBar";
 import {
   ProjectGrid,
@@ -19,97 +20,64 @@ import { ProjectsSection, ProjectsContainer, ProjectsHeader } from "./ProjectsPa
 import { ApiContext } from "../contexts/ApiContext";
 import { Link } from "react-router-dom";
 import InfiniteScroll from "react-infinite-scroller";
+import usePaginatedSearch from "./usePaginatedSearch";
 
 export default function CreateProjectPage({ history, location }) {
-  const queryParams = new URLSearchParams(location.search);
   const api = useContext(ApiContext);
-  const abortControllerRef = useRef();
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState();
-  const [query, setQuery] = useState(queryParams.get("q") || "");
-  const [filter, setFilter] = useState(queryParams.get("filter") || "featured-remixable");
-  const [results, setResults] = useState([]);
-  const [cursor, setCursor] = useState();
-  const [nextCursor, setNextCursor] = useState();
+
+  const queryParams = new URLSearchParams(location.search);
+
+  const [params, setParams] = useState({
+    source: "scene_listings",
+    filter: queryParams.get("filter") || "featured-remixable",
+    q: queryParams.get("q") || ""
+  });
+
+  const updateParams = useCallback(
+    nextParams => {
+      const search = new URLSearchParams();
+
+      for (const name in nextParams) {
+        if (name === "source" || !nextParams[name]) {
+          continue;
+        }
+
+        search.set(name, nextParams[name]);
+      }
+
+      history.push(`/projects/create?${search}`);
+
+      setParams(nextParams);
+    },
+    [history]
+  );
 
   const onChangeQuery = useCallback(
     value => {
-      setFilter("remixable");
-      setQuery(value.trim());
-      setCursor();
-      setNextCursor();
+      updateParams({
+        source: "scene_listings",
+        filter: "remixable",
+        q: value.trim()
+      });
     },
-    [setFilter, setQuery]
+    [updateParams]
   );
 
   const onSetFeaturedRemixable = useCallback(() => {
-    setFilter("featured-remixable");
-    setQuery("");
-    setCursor();
-    setNextCursor();
-  }, [setFilter]);
+    updateParams({
+      ...params,
+      filter: "featured-remixable",
+      q: ""
+    });
+  }, [updateParams, params]);
 
   const onSetAll = useCallback(() => {
-    setFilter("remixable");
-    setQuery("");
-    setCursor();
-    setNextCursor();
-  }, [setFilter]);
-
-  useEffect(() => {
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-    }
-
-    abortControllerRef.current = new AbortController();
-
-    setLoading(true);
-    setError(null);
-    setResults([]);
-
-    const search = new URLSearchParams();
-
-    search.set("filter", filter);
-
-    if (query !== "") {
-      search.set("q", query);
-    }
-
-    history.push(`/projects/create?${search}`);
-
-    api
-      .searchMedia("scene_listings", { filter, query }, cursor, abortControllerRef.current.signal)
-      .then(({ results, nextCursor }) => {
-        setResults(
-          results.map(result => ({
-            ...result,
-            url: `/projects/new?sceneId=${result.id}`,
-            thumbnail_url: result && result.images && result.images.preview && result.images.preview.url
-          }))
-        );
-        setNextCursor(nextCursor);
-        setLoading(false);
-      })
-      .catch(err => {
-        if (err.name === "AbortError") return;
-        setError(err);
-        setResults([]);
-        setNextCursor();
-        setLoading(false);
-      });
-
-    return () => {
-      if (abortControllerRef.current) {
-        abortControllerRef.current.abort();
-      }
-    };
-  }, [api, filter, query, cursor, setResults, setNextCursor, setError, setLoading]);
-
-  const hasMore = !!nextCursor;
-
-  const loadMore = useCallback(() => {
-    setCursor(nextCursor);
-  }, [nextCursor, setCursor]);
+    updateParams({
+      ...params,
+      filter: "remixable",
+      q: ""
+    });
+  }, [updateParams, params]);
 
   const onSelectScene = useCallback(
     scene => {
@@ -120,6 +88,17 @@ export default function CreateProjectPage({ history, location }) {
     [history]
   );
 
+  const { loading, error, entries, hasMore, loadMore } = usePaginatedSearch(
+    `${api.apiURL}/api/v1/media/search`,
+    params
+  );
+
+  const filteredEntries = entries.map(result => ({
+    ...result,
+    url: `/projects/new?sceneId=${result.id}`,
+    thumbnail_url: result && result.images && result.images.preview && result.images.preview.url
+  }));
+
   return (
     <>
       <NavBar />
@@ -133,14 +112,14 @@ export default function CreateProjectPage({ history, location }) {
             <ProjectGridContainer>
               <ProjectGridHeader>
                 <ProjectGridHeaderRow>
-                  <Filter onClick={onSetFeaturedRemixable} active={filter === "featured-remixable"}>
+                  <Filter onClick={onSetFeaturedRemixable} active={params.filter === "featured-remixable"}>
                     Featured
                   </Filter>
-                  <Filter onClick={onSetAll} active={filter === "remixable"}>
+                  <Filter onClick={onSetAll} active={params.filter === "remixable"}>
                     All
                   </Filter>
                   <Separator />
-                  <SearchInput placeholder="Search scenes..." value={query} onChange={onChangeQuery} />
+                  <SearchInput placeholder="Search scenes..." value={params.q} onChange={onChangeQuery} />
                 </ProjectGridHeaderRow>
                 <ProjectGridHeaderRow>
                   <Button as={Link} to="/projects/new">
@@ -149,11 +128,12 @@ export default function CreateProjectPage({ history, location }) {
                 </ProjectGridHeaderRow>
               </ProjectGridHeader>
               <ProjectGridContent>
+                <ScrollToTop />
                 {error && <ErrorMessage>{error.message}</ErrorMessage>}
                 {!error && (
                   <InfiniteScroll pageStart={0} loadMore={loadMore} hasMore={hasMore} threshold={100} useWindow={true}>
                     <ProjectGrid
-                      projects={results}
+                      projects={filteredEntries}
                       newProjectPath="/projects/new"
                       newProjectLabel="New Empty Project"
                       onSelectProject={onSelectScene}
diff --git a/src/ui/projects/NewProjectGridItem.js b/src/ui/projects/NewProjectGridItem.js
index c303e5b0..73fa5e71 100644
--- a/src/ui/projects/NewProjectGridItem.js
+++ b/src/ui/projects/NewProjectGridItem.js
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 import { Plus } from "styled-icons/fa-solid/Plus";
 
-const StyledNewProjectGridItem = styled(Link)`
+const ProjectGridItemContainer = styled.div`
   display: flex;
   flex-direction: column;
   height: 220px;
@@ -30,7 +30,7 @@ const StyledNewProjectGridItem = styled(Link)`
 
 export class NewProjectGridItem extends Component {
   static propTypes = {
-    path: PropTypes.oneOf([PropTypes.string, PropTypes.object]).isRequired,
+    path: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
     label: PropTypes.string.isRequired
   };
 
@@ -42,18 +42,18 @@ export class NewProjectGridItem extends Component {
     const { path, label } = this.props;
 
     return (
-      <StyledNewProjectGridItem to={path}>
+      <ProjectGridItemContainer as={Link} to={path}>
         <Plus />
         <h3>{label}</h3>
-      </StyledNewProjectGridItem>
+      </ProjectGridItemContainer>
     );
   }
 }
 
 export function LoadingProjectGridItem() {
   return (
-    <StyledNewProjectGridItem>
+    <ProjectGridItemContainer>
       <h3>Loading...</h3>
-    </StyledNewProjectGridItem>
+    </ProjectGridItemContainer>
   );
 }
diff --git a/src/ui/projects/ProjectGrid.js b/src/ui/projects/ProjectGrid.js
index acfbb77a..bef5f96b 100644
--- a/src/ui/projects/ProjectGrid.js
+++ b/src/ui/projects/ProjectGrid.js
@@ -18,7 +18,7 @@ export function ProjectGrid({ newProjectPath, newProjectLabel, projects, context
     <StyledProjectGrid>
       {newProjectPath && !loading && <NewProjectGridItem path={newProjectPath} label={newProjectLabel} />}
       {projects.map(project => (
-        <ProjectGridItem key={project.project_id} project={project} contextMenuId={contextMenuId} />
+        <ProjectGridItem key={project.project_id || project.id} project={project} contextMenuId={contextMenuId} />
       ))}
       {loading && <LoadingProjectGridItem />}
     </StyledProjectGrid>
@@ -28,7 +28,7 @@ export function ProjectGrid({ newProjectPath, newProjectLabel, projects, context
 ProjectGrid.propTypes = {
   contextMenuId: PropTypes.string,
   projects: PropTypes.arrayOf(PropTypes.object).isRequired,
-  newProjectPath: PropTypes.oneOf([PropTypes.string, PropTypes.object]),
+  newProjectPath: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   newProjectLabel: PropTypes.string,
   loading: PropTypes.bool
 };
diff --git a/src/ui/projects/ProjectGridItem.js b/src/ui/projects/ProjectGridItem.js
index 64467c49..67006667 100644
--- a/src/ui/projects/ProjectGridItem.js
+++ b/src/ui/projects/ProjectGridItem.js
@@ -74,6 +74,15 @@ const Thumbnail = styled.div`
   background-image: url(${props => props.src});
 `;
 
+const Col = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  p {
+    color: ${props => props.theme.text2};
+  }
+`;
+
 export default class ProjectGridItem extends Component {
   static propTypes = {
     contextMenuId: PropTypes.string,
@@ -98,12 +107,16 @@ export default class ProjectGridItem extends Component {
 
   render() {
     const { project, contextMenuId } = this.props;
+    const creatorAttribution = project.attributions && project.attributions.creator;
 
     const content = (
       <>
         <ThumbnailContainer>{project.thumbnail_url && <Thumbnail src={project.thumbnail_url} />}</ThumbnailContainer>
         <TitleContainer>
-          <h3>{project.name}</h3>
+          <Col>
+            <h3>{project.name}</h3>
+            {creatorAttribution && <p>{creatorAttribution}</p>}
+          </Col>
           {contextMenuId && (
             <MenuButton onClick={this.onShowMenu}>
               <EllipsisV />
diff --git a/src/ui/projects/usePaginatedSearch.js b/src/ui/projects/usePaginatedSearch.js
new file mode 100644
index 00000000..91494011
--- /dev/null
+++ b/src/ui/projects/usePaginatedSearch.js
@@ -0,0 +1,66 @@
+import { useState, useCallback, useEffect, useRef } from "react";
+import { useFetch } from "use-http";
+
+export default function usePaginatedSearch(path, queryParams, options = {}) {
+  const urlRef = useRef();
+
+  if (!urlRef.current) {
+    urlRef.current = new URL(path, window.location);
+
+    for (const name in queryParams) {
+      urlRef.current.searchParams.set(name, queryParams[name]);
+    }
+  }
+
+  const [href, setHref] = useState(urlRef.current.href);
+
+  useEffect(() => {
+    urlRef.current = new URL(path, window.location);
+
+    for (const name in queryParams) {
+      urlRef.current.searchParams.set(name, queryParams[name]);
+    }
+
+    setHref(urlRef.current.href);
+  }, [path, urlRef, queryParams]);
+
+  const cursor = urlRef.current.searchParams.get("cursor");
+
+  const {
+    loading,
+    error,
+    data: {
+      entries,
+      meta: { next_cursor }
+    }
+  } = useFetch(
+    href,
+    {
+      headers: {
+        "content-type": "application/json",
+        ...options.headers
+      },
+      onNewData: (data, newData) => {
+        if (!cursor) {
+          return newData;
+        } else {
+          return {
+            entries: [...data.entries, ...newData.entries],
+            meta: newData.meta
+          };
+        }
+      },
+      data: { entries: [], meta: { next_cursor: null } }
+    },
+    [href]
+  );
+
+  const loadMore = useCallback(() => {
+    urlRef.current.searchParams.set("cursor", next_cursor);
+    setHref(urlRef.current.href);
+  }, [urlRef, next_cursor]);
+
+  const hasMore = next_cursor && cursor !== next_cursor;
+
+  return { loading, error, entries: !cursor && loading ? [] : entries, loadMore, hasMore };
+}
diff --git a/src/ui/router/ScrollToTop.js b/src/ui/router/ScrollToTop.js
new file mode 100644
index 00000000..d1adaa13
--- /dev/null
+++ b/src/ui/router/ScrollToTop.js
@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export default function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}
diff --git a/yarn.lock b/yarn.lock
index b06f7377..35de89c3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10828,23 +10828,23 @@ react-popper@^1.3.3:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
-react-router-dom@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.1.tgz#ee66f4a5d18b6089c361958e443489d6bab714be"
-  integrity sha512-zaVHSy7NN0G91/Bz9GD4owex5+eop+KvgbxXsP/O+iW1/Ln+BrJ8QiIR5a6xNPtrdTvLkxqlDClx13QO1uB8CA==
+react-router-dom@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.2.tgz#06701b834352f44d37fbb6311f870f84c76b9c18"
+  integrity sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==
   dependencies:
     "@babel/runtime" "^7.1.2"
     history "^4.9.0"
     loose-envify "^1.3.1"
     prop-types "^15.6.2"
-    react-router "5.0.1"
+    react-router "5.1.2"
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-router@5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.0.1.tgz#04ee77df1d1ab6cb8939f9f01ad5702dbadb8b0f"
-  integrity sha512-EM7suCPNKb1NxcTZ2LEOWFtQBQRQXecLxVpdsP4DW4PbbqYWeRiLyV/Tt1SdCrvT2jcyXAXmVTmzvSzrPR63Bg==
+react-router@5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.1.2.tgz#6ea51d789cb36a6be1ba5f7c0d48dd9e817d3418"
+  integrity sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==
   dependencies:
     "@babel/runtime" "^7.1.2"
     history "^4.9.0"
@@ -13409,6 +13409,18 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-http@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/use-http/-/use-http-0.2.4.tgz#d107b5c809d6f9fc4ed44d9a37cf7fa37cb94a6e"
+  integrity sha512-4bkXaZc7Ac44N2VnewYkla1fsy4jX1j2wf2JMUfJD3j/e8W4RHbF6qZOJfbU0keaPTk+aUe8XYYN12IMIFsqEQ==
+  dependencies:
+    use-ssr "^1.0.22"
+
+use-ssr@^1.0.22:
+  version "1.0.22"
+  resolved "https://registry.yarnpkg.com/use-ssr/-/use-ssr-1.0.22.tgz#a43c2587b1907fabda61c6542b80542c619228fe"
+  integrity sha512-0kA0qfI4uw7PeRsz7X0XOdl2CdbgMBSFhj3n5JzMu8ZNlcZ2NrarhGjdmoxW1Q5d3WtNKbCNIjns/CKhpL7z8g==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"

From bf962f443e9e88e03a0c0037a5da767b430ab31a Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Thu, 2 Jan 2020 14:04:29 -0800
Subject: [PATCH 7/8] Don't trim query value or double fetch initial query

---
 src/ui/projects/CreateProjectPage.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/ui/projects/CreateProjectPage.js b/src/ui/projects/CreateProjectPage.js
index 7bc48a5d..d35dca19 100644
--- a/src/ui/projects/CreateProjectPage.js
+++ b/src/ui/projects/CreateProjectPage.js
@@ -57,7 +57,7 @@ export default function CreateProjectPage({ history, location }) {
       updateParams({
         source: "scene_listings",
         filter: "remixable",
-        q: value.trim()
+        q: value
       });
     },
     [updateParams]
@@ -131,7 +131,14 @@ export default function CreateProjectPage({ history, location }) {
                 <ScrollToTop />
                 {error && <ErrorMessage>{error.message}</ErrorMessage>}
                 {!error && (
-                  <InfiniteScroll pageStart={0} loadMore={loadMore} hasMore={hasMore} threshold={100} useWindow={true}>
+                  <InfiniteScroll
+                    initialLoad={false}
+                    pageStart={0}
+                    loadMore={loadMore}
+                    hasMore={hasMore}
+                    threshold={100}
+                    useWindow={true}
+                  >
                     <ProjectGrid
                       projects={filteredEntries}
                       newProjectPath="/projects/new"

From 103b7a87642bf0b433f701c43d7ea228ec2f50a0 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Wed, 8 Jan 2020 14:46:24 -0800
Subject: [PATCH 8/8] Clean up project grid

---
 src/ui/assets/sources/ProjectsSource.js |  0
 src/ui/projects/NewProjectGridItem.js   | 59 -------------------------
 src/ui/projects/ProjectGrid.js          | 52 +++++++++++++++++++++-
 3 files changed, 51 insertions(+), 60 deletions(-)
 delete mode 100644 src/ui/assets/sources/ProjectsSource.js
 delete mode 100644 src/ui/projects/NewProjectGridItem.js

diff --git a/src/ui/assets/sources/ProjectsSource.js b/src/ui/assets/sources/ProjectsSource.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/ui/projects/NewProjectGridItem.js b/src/ui/projects/NewProjectGridItem.js
deleted file mode 100644
index 73fa5e71..00000000
--- a/src/ui/projects/NewProjectGridItem.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { Component } from "react";
-import { Link } from "react-router-dom";
-import PropTypes from "prop-types";
-import styled from "styled-components";
-import { Plus } from "styled-icons/fa-solid/Plus";
-
-const ProjectGridItemContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 220px;
-  border-radius: 6px;
-  text-decoration: none;
-  /*border: 5px dashed ${props => props.theme.text};*/
-  background-color: ${props => props.theme.toolbar};
-  justify-content: center;
-  align-items: center;
-  border: 1px solid transparent;
-
-  &:hover {
-    color: inherit;
-    border-color: ${props => props.theme.selected};
-  }
-
-  svg {
-    width: 3em;
-    height: 3em;
-    margin-bottom: 20px;
-  }
-`;
-
-export class NewProjectGridItem extends Component {
-  static propTypes = {
-    path: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
-    label: PropTypes.string.isRequired
-  };
-
-  static defaultProps = {
-    label: "New Project"
-  };
-
-  render() {
-    const { path, label } = this.props;
-
-    return (
-      <ProjectGridItemContainer as={Link} to={path}>
-        <Plus />
-        <h3>{label}</h3>
-      </ProjectGridItemContainer>
-    );
-  }
-}
-
-export function LoadingProjectGridItem() {
-  return (
-    <ProjectGridItemContainer>
-      <h3>Loading...</h3>
-    </ProjectGridItemContainer>
-  );
-}
diff --git a/src/ui/projects/ProjectGrid.js b/src/ui/projects/ProjectGrid.js
index bef5f96b..a2dda960 100644
--- a/src/ui/projects/ProjectGrid.js
+++ b/src/ui/projects/ProjectGrid.js
@@ -2,9 +2,59 @@ import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import ProjectGridItem from "./ProjectGridItem";
-import { LoadingProjectGridItem, NewProjectGridItem } from "./NewProjectGridItem";
 import { Row } from "../layout/Flex";
 import StringInput from "../inputs/StringInput";
+import { Link } from "react-router-dom";
+import { Plus } from "styled-icons/fa-solid/Plus";
+
+const ProjectGridItemContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 220px;
+  border-radius: 6px;
+  text-decoration: none;
+  background-color: ${props => props.theme.toolbar};
+  justify-content: center;
+  align-items: center;
+  border: 1px solid transparent;
+
+  &:hover {
+    color: inherit;
+    border-color: ${props => props.theme.selected};
+  }
+
+  svg {
+    width: 3em;
+    height: 3em;
+    margin-bottom: 20px;
+  }
+`;
+
+export function NewProjectGridItem({ path, label }) {
+  return (
+    <ProjectGridItemContainer as={Link} to={path}>
+      <Plus />
+      <h3>{label}</h3>
+    </ProjectGridItemContainer>
+  );
+}
+
+NewProjectGridItem.propTypes = {
+  path: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
+  label: PropTypes.string.isRequired
+};
+
+NewProjectGridItem.defaultProps = {
+  label: "New Project"
+};
+
+export function LoadingProjectGridItem() {
+  return (
+    <ProjectGridItemContainer>
+      <h3>Loading...</h3>
+    </ProjectGridItemContainer>
+  );
+}
 
 const StyledProjectGrid = styled.div`
   display: grid;