Skip to content

fix: resolve GitHub profile pictures and recent projects refresh issues #2773

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

fix: resolve GitHub profile pictures and recent projects refresh issues #2773

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6348df2
fix: GitHub profile pictures not loading - use correct avatar_url pro…
binu-baiju Aug 29, 2025
1189d05
fix: recent projects list now refreshes when accessed
binu-baiju Aug 29, 2025
ffd79bc
security: add authorization check to trackAccess mutation
binu-baiju Aug 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/backend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "@onlook/backend",
"private": true,
"scripts": {
"start": "supabase start",
"start": "supabase start --exclude mailpit,logflare,vector",
"stop": "supabase stop",
"push": "supabase db push",
"reset": "supabase db reset",
Expand Down
10 changes: 5 additions & 5 deletions apps/backend/supabase/config.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ project_id = "onlook-web"

[api]
enabled = true
port = 54321
port = 55321
schemas = ["public", "storage"]
extra_search_path = ["public"]
max_rows = 100
Expand All @@ -16,22 +16,22 @@ additional_redirect_urls = [
jwt_expiry = 36000

[db]
port = 54322
port = 55432

[studio]
port = 54323
port = 55323

[auth.external.github]
enabled = true
client_id = "env(GITHUB_CLIENT_ID)"
secret = "env(GITHUB_SECRET)"
redirect_uri = "http://127.0.0.1:54321/auth/v1/callback"
redirect_uri = "http://127.0.0.1:55321/auth/v1/callback"

[auth.external.google]
enabled = true
client_id = "env(GOOGLE_CLIENT_ID)"
secret = "env(GOOGLE_SECRET)"
redirect_uri = "http://127.0.0.1:54321/auth/v1/callback"
redirect_uri = "http://127.0.0.1:55321/auth/v1/callback"

[analytics]
enabled = true
Expand Down
11 changes: 10 additions & 1 deletion apps/web/client/src/app/project/[id]/_hooks/use-start-project.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,22 @@ export const useStartProject = () => {
await apiUtils.project.createRequest.getPendingRequest.invalidate({ projectId: editorEngine.projectId });
},
});
const { mutateAsync: trackProjectAccess } = api.project.trackAccess.useMutation({
onSuccess: () => {
// Invalidate project list to refresh recent projects
apiUtils.project.list.invalidate();
},
});


useEffect(() => {
if (project) {
startSandbox(project);
editorEngine.screenshot.lastScreenshotAt = project.metadata.updatedPreviewImgAt;
// Track project access to update "recent projects" list
trackProjectAccess({ projectId: project.id }).catch(console.error);
}
}, [project]);
}, [project, trackProjectAccess]);
Comment on lines +51 to +54
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Guard against duplicate tracking on re-renders

Depending on the identity stability of trackProjectAccess, the effect can fire more than once per project. Guard with a ref keyed by project.id and narrow the dependency to the project id.

Apply this diff in the nearest appropriate scopes:

+import { useEffect, useRef, useState } from 'react';
-    useEffect(() => {
-        if (project) {
-            startSandbox(project);
-            editorEngine.screenshot.lastScreenshotAt = project.metadata.updatedPreviewImgAt;
-            // Track project access to update "recent projects" list
-            trackProjectAccess({ projectId: project.id }).catch(console.error);
-        }
-    }, [project, trackProjectAccess]);
+    const lastTrackedProjectIdRef = useRef<string | null>(null);
+    useEffect(() => {
+        if (project) {
+            startSandbox(project);
+            editorEngine.screenshot.lastScreenshotAt = project.metadata.updatedPreviewImgAt;
+            // Track project access to update "recent projects" list (once per project id)
+            if (lastTrackedProjectIdRef.current !== project.id) {
+                lastTrackedProjectIdRef.current = project.id;
+                void trackProjectAccess({ projectId: project.id }).catch(console.error);
+            }
+        }
+    }, [project?.id]);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// Track project access to update "recent projects" list
trackProjectAccess({ projectId: project.id }).catch(console.error);
}
}, [project]);
}, [project, trackProjectAccess]);
// At the top of the file, ensure you have React hooks imported:
import React, { useEffect, useRef, useState } from 'react';
// …inside your component…
- useEffect(() => {
- if (project) {
- startSandbox(project);
- editorEngine.screenshot.lastScreenshotAt = project.metadata.updatedPreviewImgAt;
- // Track project access to update "recent projects" list
- trackProjectAccess({ projectId: project.id }).catch(console.error);
- }
// Ref to remember which project ID we've already tracked
const lastTrackedProjectIdRef = useRef<string | null>(null);
useEffect(() => {
if (project) {
startSandbox(project);
editorEngine.screenshot.lastScreenshotAt = project.metadata.updatedPreviewImgAt;
// Track project access to update "recent projects" list (once per project id)
if (lastTrackedProjectIdRef.current !== project.id) {
lastTrackedProjectIdRef.current = project.id;
void trackProjectAccess({ projectId: project.id }).catch(console.error);
}
}
}, [project?.id]);


const startSandbox = async (project: Project) => {
try {
Expand Down
7 changes: 7 additions & 0 deletions apps/web/client/src/server/api/routers/project/project.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -403,4 +403,11 @@ export const projectRouter = createTRPCRouter({

return { success: true, tags: newTags };
}),
trackAccess: protectedProcedure
.input(z.object({ projectId: z.string() }))
.mutation(async ({ ctx, input }) => {
await ctx.db.update(projects).set({
updatedAt: new Date(),
}).where(eq(projects.id, input.projectId));
}),
});
4 changes: 2 additions & 2 deletions apps/web/client/src/server/api/routers/user/user.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const userRouter = createTRPCRouter({
lastName: user.lastName ?? lastName,
displayName: user.displayName ?? displayName,
email: user.email ?? authUser.email,
avatarUrl: user.avatarUrl ?? authUser.user_metadata.avatarUrl,
avatarUrl: user.avatarUrl ?? authUser.user_metadata.avatar_url,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@binu-baiju Thanks for the PR! There seems to be a lot of your personal config changes. I think this is the only thing we need. Could you remove the rest? Thanks

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Kitenite Sure

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Kitenite New PR :#2778

}) : null;
return userData;
}),
Expand Down Expand Up @@ -56,7 +56,7 @@ export const userRouter = createTRPCRouter({
lastName: input.lastName ?? lastName,
displayName: input.displayName ?? displayName,
email: input.email ?? authUser.email,
avatarUrl: input.avatarUrl ?? authUser.user_metadata.avatarUrl,
avatarUrl: input.avatarUrl ?? authUser.user_metadata.avatar_url,
};

const [user] = await ctx.db
Expand Down
Loading