add user profile page

tscircuit · Oct 7, 2024 · 449ebd7 · 449ebd7
1 parent 3ee1685
commit 449ebd7
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 25 deletions.
diff --git a/fake-snippets-api/routes/api/snippets/create.ts b/fake-snippets-api/routes/api/snippets/create.ts
@@ -1,6 +1,6 @@
 import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
 import { z } from "zod"
-import { snippetSchema } from "fake-snippets-api/lib/db/schema"
+import { Snippet, snippetSchema } from "fake-snippets-api/lib/db/schema"
 
 export default withRouteSpec({
   methods: ["POST"],
@@ -25,7 +25,7 @@ export default withRouteSpec({
   if (!unscoped_name) {
     unscoped_name = `untitled-${snippet_type}-${ctx.db.idCounter + 1}`
   }
-  const newSnippet = {
+  const newSnippet: Snippet = {
     snippet_id: `snippet_${ctx.db.idCounter + 1}`,
     name: `${ctx.auth.github_username}/${unscoped_name}`,
     unscoped_name,

diff --git a/fake-snippets-api/routes/api/snippets/list.ts b/fake-snippets-api/routes/api/snippets/list.ts
@@ -17,6 +17,7 @@ export default withRouteSpec({
 })(async (req, ctx) => {
   const { owner_name, unscoped_name } = req.commonParams
 
+  console.log(ctx.db.snippets)
   const snippets = ctx.db
     .getSnippetsByAuthor(owner_name)
     .filter((s) => !unscoped_name || s.unscoped_name === unscoped_name)

diff --git a/src/App.tsx b/src/App.tsx
@@ -10,13 +10,13 @@ import { ViewSnippetPage } from "./pages/view-snippet"
 import { LandingPage } from "./pages/landing"
 import { Route, Switch } from "wouter"
 import { AiPage } from "./pages/ai"
-import { ProfilePage } from "./pages/profile"
 import { NewestPage } from "./pages/newest"
 import { SettingsPage } from "./pages/settings"
 import { SearchPage } from "./pages/search"
 import { QuickstartPage } from "./pages/quickstart"
 import { Toaster } from "@/components/ui/toaster"
 import AuthenticatePage from "./pages/authorize"
+import { UserProfilePage } from "./pages/user-profile"
 
 function App() {
   return (
@@ -27,11 +27,11 @@ function App() {
         <Route path="/quickstart" component={QuickstartPage} />
         <Route path="/dashboard" component={DashboardPage} />
         <Route path="/ai" component={AiPage} />
-        <Route path="/profile" component={ProfilePage} />
         <Route path="/newest" component={NewestPage} />
         <Route path="/settings" component={SettingsPage} />
         <Route path="/search" component={SearchPage} />
         <Route path="/authorize" component={AuthenticatePage} />
+        <Route path="/:username" component={UserProfilePage} />
         <Route path="/:author/:snippetName" component={ViewSnippetPage} />
       </Switch>
       <Toaster />

diff --git a/src/components/HeaderLogin.tsx b/src/components/HeaderLogin.tsx
@@ -14,7 +14,9 @@ import { useGlobalStore } from "@/hooks/use-global-store"
 import { useAccountBalance } from "@/hooks/use-account-balance"
 import { useIsUsingFakeApi } from "@/hooks/use-is-using-fake-api"
 
-export const HeaderLogin: React.FC = () => {
+interface HeaderLoginProps {}
+
+export const HeaderLogin: React.FC<HeaderLoginProps> = () => {
   const [, setLocation] = useLocation()
   const session = useGlobalStore((s) => s.session)
   const isLoggedIn = Boolean(session)
@@ -32,10 +34,10 @@ export const HeaderLogin: React.FC = () => {
               window.location.href = `${snippetsBaseApiUrl}/internal/oauth/github/authorize?next=${window.location.origin}/authorize`
             } else {
               setSession({
-                account_id: "account_1234",
-                github_username: "shadcn",
+                account_id: "account-1234",
+                github_username: "testuser",
                 token: "1234",
-                session_id: "session_1234",
+                session_id: "session-1234",
               })
             }
           }}
@@ -51,10 +53,10 @@ export const HeaderLogin: React.FC = () => {
               window.location.href = `${snippetsBaseApiUrl}/internal/oauth/github/authorize?next=${window.location.origin}/authorize`
             } else {
               setSession({
-                account_id: "account_1234",
-                github_username: "shadcn",
+                account_id: "account-1234",
+                github_username: "testuser",
                 token: "1234",
-                session_id: "session_1234",
+                session_id: "session-1234",
               })
             }
           }}
@@ -84,6 +86,11 @@ export const HeaderLogin: React.FC = () => {
             {accountBalance?.monthly_ai_budget_used_usd.toFixed(2) ?? "0.00"} /
             $5.00
           </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() => setLocation(`/${session?.github_username}`)}
+          >
+            My Profile
+          </DropdownMenuItem>
           <DropdownMenuItem onClick={() => setLocation("/dashboard")}>
             Dashboard
           </DropdownMenuItem>

diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx
diff --git a/src/pages/user-profile.tsx b/src/pages/user-profile.tsx
@@ -0,0 +1,68 @@
+import React from "react"
+import { useParams } from "wouter"
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import Header from "@/components/Header"
+import Footer from "@/components/Footer"
+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"
+
+export const UserProfilePage = () => {
+  const { username } = useParams()
+  const axios = useAxios()
+
+  const { data: userSnippets, isLoading } = useQuery<Snippet[]>(
+    ["userSnippets", username],
+    async () => {
+      const response = await axios.get(`/snippets/list?owner_name=${username}`)
+      return response.data.snippets
+    },
+  )
+
+  return (
+    <div>
+      <Header />
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-3xl font-bold mb-6">{username}'s Profile</h1>
+        <div className="mb-6">
+          <a
+            href={`https://github.com/${username}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center"
+          >
+            <Button variant="outline">
+              <GitHubLogoIcon className="mr-2" />
+              View GitHub Profile
+            </Button>
+          </a>
+        </div>
+        <h2 className="text-2xl font-semibold mb-4">Snippets</h2>
+        {isLoading ? (
+          <div>Loading snippets...</div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {userSnippets?.map((snippet) => (
+              <Link
+                key={snippet.snippet_id}
+                href={`/${snippet.owner_name}/${snippet.unscoped_name}`}
+              >
+                <div className="border p-4 rounded-md hover:shadow-md transition-shadow">
+                  <h3 className="text-lg font-semibold">
+                    {snippet.unscoped_name}
+                  </h3>
+                  <p className="text-sm text-gray-500">
+                    Created: {new Date(snippet.created_at).toLocaleString()}
+                  </p>
+                </div>
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+      <Footer />
+    </div>
+  )
+}