feat: add edit profile page

This commit is contained in:
gosangam
2026-06-15 23:54:34 +05:30
parent 0608e2b6f6
commit 197e13c0ef
4 changed files with 146 additions and 119 deletions
+3 -28
View File
@@ -7,40 +7,19 @@
* /u/me/posts#post-<id> where the Instagram-style scroll feed renders
* the full passages.
*
* `?edit=1` (set by the header's Edit profile button) swaps the grid
* for the inline edit form. Saving returns to /u/me. Keeps the URL
* shareable while avoiding a separate route + layout.
* Editing the profile lives on its own page (/settings/profile), reached
* from the header's "Edit profile" button.
*/
import { Suspense, useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
import { LayoutGrid } from "lucide-react";
import { useAuth } from "@/components/auth/auth-provider";
import { ProfileEditForm } from "@/components/profile/profile-edit-form";
import { PostGridCard } from "@/components/social/post/post-grid-card";
import { ConfirmModal } from "@/components/ui/confirm-modal";
import { posts, SocialError, type Post } from "@/lib/social";
export default function MyProfilePage() {
// useSearchParams() forces a CSR bailout during prerender; the
// Suspense boundary is required by Next.js so the build doesn't fail
// (the same wrapping is in app/u/me/layout.tsx for its own check).
// The fallback matches the page's idle loading state so the brief
// moment before search params resolve doesn't flash an empty section.
return (
<Suspense
fallback={<p className="text-sm text-muted-foreground">Loading…</p>}
>
<MyProfilePageInner />
</Suspense>
);
}
function MyProfilePageInner() {
const { user } = useAuth();
const router = useRouter();
const searchParams = useSearchParams();
const editMode = searchParams.get("edit") === "1";
const [feed, setFeed] = useState<Post[]>([]);
const [loading, setLoading] = useState(true);
@@ -87,10 +66,6 @@ function MyProfilePageInner() {
if (!user) return null;
if (editMode) {
return <ProfileEditForm user={user} onDone={() => router.replace("/u/me")} />;
}
return (
<section>
{error ? (