implement explore page

SnarpleDev · Jul 28, 2024 · c2e9c07 · c2e9c07
1 parent 3380488
commit c2e9c07
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 29 deletions.
diff --git a/app.py b/app.py
@@ -157,10 +157,19 @@ def trending():
     """
     Explore page.
     """
+    projects = dazzle.get_trending_projects()
     if filter := request.args.get("filter"):
         return render_template("trending.html", filter=filter)
-    return render_template("trending.html")
+    return stream_template("trending.html")
 
+@app.get("/api/trending/")
+def get_trending():
+    """
+    Gets trending projects and returns them as json
+
+    Requires a `page` argument in url
+    """
+    return dazzle.get_trending_projects(40, int(request.args.get("page")))
 
 @app.get("/forums")
 def categories():

diff --git a/dazzle.py b/dazzle.py
@@ -232,24 +232,6 @@ def get_topic_data(topic_id) -> dict:
     except requests.exceptions.JSONDecodeError:
         return {"error": True, "message": "lib_scratchdbdown"}
 
-
-@lru_cache(maxsize=15)
-def get_trending_projects() -> dict:
-    """
-    Gets trending projects from the Scratch API.
-
-    Returns:
-    - dict: Trending projects.
-    """
-    # TODO: implement limits and offsets
-    # language parameter seems to be ineffectual when set to another lang
-    r = requests.get(
-        "https://api.scratch.mit.edu/explore/projects?limit=20&language=en&mode=trending&q=*",
-        timeout=10,
-    )
-    return r.json()
-
-
 def get_topic_posts(topic_id, page=0, order="oldest") -> dict:
     """
     Gets posts for a topic.
@@ -397,6 +379,22 @@ def get_studio_data(id) -> dict:
 def get_studio_comments(id):
     pass
 
+def get_trending_projects(limit: int = 20, page: int = 1):
+    """
+    Gets a list of trending projects for the explore page
+
+    - `page` (int): The page of results
+
+    Returns:
+    - list: Projects
+    """
+    offset = limit * (page - 1)
+    r = requests.get(
+        f"https://api.scratch.mit.edu/search/projects?q=*&mode=trending&language=en&limit={limit}&offset={offset}",
+        timeout=10
+    )
+    return r.json()
+
 # Below this line is all stuff used for the REPL debugging mode
 # Generally, don't touch this, unless there's a severe flaw or something
 

diff --git a/static/master-styles.css b/static/master-styles.css
@@ -479,4 +479,29 @@ textarea {
 
 body {
     margin: 0px;
+}
+
+#load {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 130px;
+    min-height: 70px;
+    max-height: 180px;
+    margin: 13px;
+}
+
+#loadMoreButton {
+    width: 150px;
+    height: 100px;
+    font-size: larger;
+    font-weight: bold;
+}
+
+.title,
+.author {
+    overflow: hidden;
+    display: block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
diff --git a/templates/trending.html b/templates/trending.html
@@ -4,7 +4,8 @@
 <section>
     <h1>Explore</h1>
     <p>Find cool projects</p>
-    <p>This is not functional yet. What you see here is a mockup. We are working on it and will release it as fast as we can</p>
+    <p>Filters are not functional yet. What you see here is a mockup. We are working on it and will release it as fast
+        as we can</p>
 </section>
 <div class="flex-cont">
     <section>
@@ -33,13 +34,41 @@ <h1>Explore</h1>
     </section>
 </div>
 <section class="project-grid">
-    {% for project in range(50) %}
-        <div class="pg-project">
-            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Pizza-3007395.jpg/640px-Pizza-3007395.jpg" alt="pizza"
-            width="130" height="70">
-            <br>pizza recipe by coolgamer69420 <br>
-            <span class="stats">1 view</span>
-        </div>
-    {% endfor %}
+    <div id="load"></div>
 </section>
-{% endblock %}
+
+<script>
+    var page = 0
+    async function loadMore() {
+        var load = document.getElementById("load");
+        load.innerHTML = "LOADING...";
+        var newProjects = "";
+        page++;
+        await fetch(`/api/trending/?page=${page}`)
+            .then(response => response.json()) // This line already parses the response as JSON
+            .then(projects => {
+                console.log(projects)
+                projects.forEach(project => {
+                    newProjects += `
+                    <div class="pg-project">
+                        <img src="${project["image"]}" alt="project image" width="130" height="70">
+                        <br><span class="title">${project["title"]}</span>
+                        <span class="author">${project["author"]["username"]}</span><br>
+                        <span class="stats">${project["stats"]["views"]} views</span>
+                    </div>
+                    `;
+                });
+                newProjects += '<div id="load"><button id="loadMoreButton" onclick="loadMore()">Load More</button></div>';
+                load.outerHTML = newProjects;
+            });
+    };
+    loadMore();
+</script>
+{% endblock %}
+
+
+<!-- <div class="pg-project">
+        <img src="{{ project.image }}" alt="project image" width="130" height="70">
+        <br>{{ project.title }} by {{ project.author.username }}<br>
+        <span class="stats">{{ project.stats.views}} views</span>
+    </div> -->