order My Snippets by last created time (#108)

* order My Snippets by last created time * fix sorting of recent snippets on quickstart page * fix type issues
tscircuit · Oct 21, 2024 · 9ec2efa · 9ec2efa
1 parent 96eaf3a
commit 9ec2efa
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 26 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -106,7 +106,7 @@
     "@babel/standalone": "^7.25.6",
     "@biomejs/biome": "^1.9.2",
     "@playwright/test": "^1.48.0",
-    "@tscircuit/core": "^0.0.120",
+    "@tscircuit/core": "^0.0.126",
     "@tscircuit/prompt-benchmarks": "^0.0.14",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",

diff --git a/src/hooks/use-run-tsx/index.tsx b/src/hooks/use-run-tsx/index.tsx
@@ -159,7 +159,7 @@ export const useRunTsx = ({
             compiledModule: module,
             compiledJs,
             message: "",
-            circuitJson,
+            circuitJson: circuitJson as AnyCircuitElement[],
             isLoading: false,
           })
         } catch (error: any) {

diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
@@ -21,7 +21,11 @@ export const DashboardPage = () => {
     error,
   } = useQuery<Snippet[]>("userSnippets", async () => {
     const response = await axios.get(`/snippets/list?owner_name=${currentUser}`)
-    return response.data.snippets
+    return response.data.snippets.sort(
+      (a: any, b: any) =>
+        new Date(b.updated_at || b.created_at).getTime() -
+        new Date(a.updated_at || a.created_at).getTime(),
+    )
   })
 
   const { data: trendingSnippets } = useQuery<Snippet[]>(

diff --git a/src/pages/quickstart.tsx b/src/pages/quickstart.tsx
@@ -41,32 +41,39 @@ export const QuickstartPage = () => {
     <div>
       <Header />
       <div className="container mx-auto px-4 py-8">
-        <div className="mb-8">
+        <div className="mb-8 hidden md:block">
           <h2 className="text-xl font-semibold mb-4">Recent Snippets</h2>
           {isLoading ? (
             <div>Loading...</div>
           ) : (
             <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-              {mySnippets?.slice(0, 6).map((snippet) => (
-                <Link
-                  key={snippet.snippet_id}
-                  href={`/editor?snippet_id=${snippet.snippet_id}`}
-                >
-                  <Card className="hover:shadow-md transition-shadow rounded-md">
-                    <CardHeader className="pb-0 p-4">
-                      <CardTitle className="text-md">
-                        {snippet.unscoped_name}
-                      </CardTitle>
-                    </CardHeader>
-                    <CardContent className="p-4 pt-0">
-                      <p className="text-sm text-gray-500">
-                        Last edited:{" "}
-                        {new Date(snippet.updated_at).toLocaleDateString()}
-                      </p>
-                    </CardContent>
-                  </Card>
-                </Link>
-              ))}
+              {mySnippets
+                ?.sort(
+                  (a, b) =>
+                    new Date(b.created_at).getTime() -
+                    new Date(a.created_at).getTime(),
+                )
+                .slice(0, 4)
+                .map((snippet) => (
+                  <Link
+                    key={snippet.snippet_id}
+                    href={`/editor?snippet_id=${snippet.snippet_id}`}
+                  >
+                    <Card className="hover:shadow-md transition-shadow rounded-md">
+                      <CardHeader className="pb-0 p-4">
+                        <CardTitle className="text-md">
+                          {snippet.unscoped_name}
+                        </CardTitle>
+                      </CardHeader>
+                      <CardContent className="p-4 pt-0">
+                        <p className="text-sm text-gray-500">
+                          Last edited:{" "}
+                          {new Date(snippet.updated_at).toLocaleDateString()}
+                        </p>
+                      </CardContent>
+                    </Card>
+                  </Link>
+                ))}
             </div>
           )}
         </div>

diff --git a/src/pages/user-profile.tsx b/src/pages/user-profile.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import { useParams } from "wouter"
 import { useQuery } from "react-query"
 import { useAxios } from "@/hooks/use-axios"
@@ -8,10 +8,12 @@ import { Snippet } from "fake-snippets-api/lib/db/schema"
 import { Link } from "wouter"
 import { Button } from "@/components/ui/button"
 import { GitHubLogoIcon } from "@radix-ui/react-icons"
+import { Input } from "@/components/ui/input"
 
 export const UserProfilePage = () => {
   const { username } = useParams()
   const axios = useAxios()
+  const [searchQuery, setSearchQuery] = useState("")
 
   const { data: userSnippets, isLoading } = useQuery<Snippet[]>(
     ["userSnippets", username],
@@ -21,6 +23,10 @@ export const UserProfilePage = () => {
     },
   )
 
+  const filteredSnippets = userSnippets?.filter((snippet) =>
+    snippet.unscoped_name.toLowerCase().includes(searchQuery.toLowerCase()),
+  )
+
   return (
     <div>
       <Header />
@@ -40,11 +46,18 @@ export const UserProfilePage = () => {
           </a>
         </div>
         <h2 className="text-2xl font-semibold mb-4">Snippets</h2>
+        <Input
+          type="text"
+          placeholder="Search snippets..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="mb-4"
+        />
         {isLoading ? (
           <div>Loading snippets...</div>
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {userSnippets?.map((snippet) => (
+            {filteredSnippets?.map((snippet) => (
               <Link
                 key={snippet.snippet_id}
                 href={`/${snippet.owner_name}/${snippet.unscoped_name}`}