Develop

app/[locale]/Providers.tsx

@@ -14,7 +14,11 @@ interface Props {
 function Providers({ locale, messages, children }: Props) {
   return (
     <ReactQueryProvider>
-      <NextIntlClientProvider locale={locale} messages={messages}>
+      <NextIntlClientProvider
+        locale={locale}
+        messages={messages}
+        timeZone={"America/Sao_Paulo"}
+      >
         <ThemeProvider attribute="class">{children}</ThemeProvider>
       </NextIntlClientProvider>
     </ReactQueryProvider>

app/[locale]/[id]/page.tsx

@@ -1,9 +1,10 @@
+import { cookies } from "next/headers";
 import { notFound } from "next/navigation";
 
 import HighlineImage from "@/components/HighlineImage";
 import RegistryEntry from "@/components/RegistryEntry";
 import Tabs from "@/components/tabs/Tabs";
-import supabase from "@/utils/supabase";
+import { useSupabaseServer } from "@/utils/supabase/server";
 
 import GoBack from "./_components/GoBack";
 
@@ -14,6 +15,9 @@ export default async function Highline({
 }: {
   params: { id: string };
 }) {
+  const cookieStore = cookies();
+  const supabase = useSupabaseServer(cookieStore);
+
   const { data: highline } = await supabase
     .from("highline")
     .select()

app/[locale]/_components/UsernameDialog.tsx

@@ -1,10 +1,7 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import {
-  createClientComponentClient,
-  User,
-} from "@supabase/auth-helpers-nextjs";
+import type { User } from "@supabase/supabase-js";
 import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -28,8 +25,8 @@ import {
   FormMessage,
 } from "@/components/ui/Form";
 import { Input } from "@/components/ui/Input";
-import { Database } from "@/utils/database.types";
-import { useRouter } from "next/navigation";
+import { useRouter } from "@/navigation";
+import useSupabaseBrowser from "@/utils/supabase/client";
 
 const formSchema = z.object({
   username: z
@@ -44,7 +41,7 @@ const formSchema = z.object({
 type FormSchema = z.infer<typeof formSchema>;
 
 export default function UsernameDialog() {
-  const supabase = createClientComponentClient<Database>();
+  const supabase = useSupabaseBrowser();
 
   const t = useTranslations("usernameDialog");
   const router = useRouter();

app/[locale]/auth/callback/route.ts

@@ -1,11 +1,10 @@
 // Refer to the following documentation for more context
 // https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-sign-in-with-code-exchange
 
-import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";
 import { cookies } from "next/headers";
 import { NextResponse } from "next/server";
 
-import { Database } from "@/utils/database.types";
+import { useSupabaseServer } from "@/utils/supabase/server";
 
 export const dynamic = "force-dynamic";
 
@@ -14,14 +13,15 @@ export async function GET(request: Request) {
   // by the Auth Helpers package. It exchanges an auth code for the user's session.
   const requestUrl = new URL(request.url);
   const code = requestUrl.searchParams.get("code");
+  const redirectTo = requestUrl.searchParams.get("redirect_to");
 
   if (code) {
     const cookieStore = cookies();
-    const supabase = createRouteHandlerClient<Database>({
-      cookies: () => cookieStore,
-    });
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const supabase = useSupabaseServer(cookieStore);
+
     await supabase.auth.exchangeCodeForSession(code);
   }
 
-  return NextResponse.redirect(requestUrl.origin);
+  return NextResponse.redirect(redirectTo || requestUrl.origin);
 }

app/[locale]/layout.tsx

@@ -42,7 +42,7 @@ export default function RootLayout({
         className={`min-h-screen bg-gray-50 dark:bg-gray-900 md:px-0 ${inter.variable} font-sans`}
       >
         <Providers locale={locale} messages={messages}>
-          <div className="flex h-full min-h-screen flex-col">
+          <div className="relative flex h-full min-h-screen flex-col">
             <NavBar />
             <main className="container mx-auto flex-1">
               <UsernameDialog />

app/[locale]/page.tsx

@@ -1,9 +1,7 @@
-import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
 import { cookies } from "next/headers";
-import { unstable_setRequestLocale } from "next-intl/server";
 
 import Highline from "@/components/Highline";
-import { Database } from "@/utils/database.types";
+import { useSupabaseServer } from "@/utils/supabase/server";
 
 import Search from "./_components/search";
 
@@ -17,11 +15,11 @@ export default async function Home({
   searchParams?: { [key: string]: string | string[] | undefined };
 }) {
   const cookieStore = cookies();
-  const supabase = createServerComponentClient<Database>({
-    cookies: () => cookieStore,
-  });
+  const supabase = useSupabaseServer(cookieStore);
 
-  const { q: searchValue } = searchParams as { [key: string]: string };
+  const { q: searchValue } = searchParams as {
+    [key: string]: string;
+  };
   const highlines = searchValue
     ? (
         await supabase

app/[locale]/profile/[username]/_components/LastWalks.tsx

@@ -1,5 +1,4 @@
 import { ChevronRightIcon } from "@radix-ui/react-icons";
-import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
 import { cookies } from "next/headers";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
@@ -10,8 +9,9 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/Popover";
-import { Database } from "@/utils/database.types";
 import { transformSecondsToTimeString } from "@/utils/helperFunctions";
+import type { Database } from "@/utils/supabase/database.types";
+import { useSupabaseServer } from "@/utils/supabase/server";
 
 import FormattedDate from "./FormattedDate";
 
@@ -23,9 +23,7 @@ interface Props {
 
 export default async function LastWalks({ username }: Props) {
   const cookieStore = cookies();
-  const supabase = createServerComponentClient<Database>({
-    cookies: () => cookieStore,
-  });
+  const supabase = useSupabaseServer(cookieStore);
 
   const { data: entries } = await supabase
     .from("entry")
@@ -57,7 +55,10 @@ function LastWalksContent({ entries }: ContentProps) {
       <ul className="mt-4 divide-y divide-gray-200 dark:divide-gray-700">
         {entries.length > 0 ? (
           entries.map((entry) => (
-            <li key={entry.id} className="py-4 first:pt-0 last:pb-0">
+            <li
+              key={entry.id}
+              className="overflow-hidden py-4 first:pt-0 last:pb-0"
+            >
               <Popover>
                 <PopoverTrigger className="mb-0.5 truncate text-base font-semibold leading-none text-blue-500 dark:text-blue-400">
                   {entry.highline?.name}

app/[locale]/profile/[username]/_components/UserHeader.tsx

@@ -1,14 +1,17 @@
+import { User } from "@supabase/supabase-js";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
 
-import { Database } from "@/utils/database.types";
+import UpdateProfile from "@/components/layout/navbar/UpdateProfile";
+import { Database } from "@/utils/supabase/database.types";
 
 interface Props {
+  user: User | null;
   profile: Database["public"]["Tables"]["profiles"]["Row"] | null;
   username: string;
 }
 
-function UserHeader({ profile, username }: Props) {
+function UserHeader({ user, profile, username }: Props) {
   const t = useTranslations("profile.header");
 
   if (!profile) {
@@ -31,8 +34,8 @@ function UserHeader({ profile, username }: Props) {
   }
 
   return (
-    <header className="max-w-screen-md space-y-2 rounded-xl border border-gray-200 bg-white px-2 py-4 shadow dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-800">
-      <div className="h- flex gap-4">
+    <header className="max-w-screen-md space-y-2 overflow-hidden rounded-xl border border-gray-200 bg-white px-2 py-4 shadow dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-800">
+      <div className="flex gap-4">
         <div className="relative h-24 w-24 sm:h-32 sm:w-32">
           <Image
             src={profile.profile_picture || "/default-profile-picture.png"}
@@ -41,8 +44,11 @@ function UserHeader({ profile, username }: Props) {
             className="rounded-full"
           />
         </div>
-        <div className="space-y-3">
-          <h1 className="text-xl font-semibold">@{username}</h1>
+        <div className="flex-1 space-y-3">
+          <h1 className="flex-1 text-xl font-semibold">@{username}</h1>
+          {user && user.id === profile.id ? (
+            <UpdateProfile user={user} profile={profile} />
+          ) : null}
         </div>
       </div>
       <div>

app/[locale]/profile/[username]/page.tsx

@@ -1,9 +1,9 @@
-import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
-import { Metadata } from "next";
+import type { Metadata, ResolvingMetadata } from "next";
 import { cookies } from "next/headers";
+import { getTranslations } from "next-intl/server";
 import { Suspense } from "react";
 
-import { Database } from "@/utils/database.types";
+import { useSupabaseServer } from "@/utils/supabase/server";
 
 import GoBack from "./_components/GoBack";
 import LastWalks, { LastWalksSkeleton } from "./_components/LastWalks";
@@ -13,20 +13,29 @@ import UserNotFound from "./_components/UserNotFound";
 
 export const dynamic = "force-dynamic";
 
-export const metadata: Metadata = {
-  title: "Profile",
-  description: "User profile",
+type Props = {
+  params: { locale: string; username: string };
+  searchParams: { [key: string]: string | string[] | undefined };
 };
 
-export default async function Profile({
-  params: { username },
-}: {
-  params: { username: string };
-}) {
+export async function generateMetadata(
+  { params, searchParams }: Props,
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  const t = await getTranslations("profileMetadata");
+  return {
+    title: t("title", { username: `@${params.username}` }),
+    description: t("description"),
+  };
+}
+
+export default async function Profile({ params: { username } }: Props) {
   const cookieStore = cookies();
-  const supabase = createServerComponentClient<Database>({
-    cookies: () => cookieStore,
-  });
+  const supabase = useSupabaseServer(cookieStore);
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
 
   const { data: profile } = await supabase
     .from("profiles")
@@ -52,9 +61,9 @@ export default async function Profile({
   }
 
   return (
-    <div className="relative mx-auto max-w-screen-md space-y-4 rounded-lg px-2 pb-2 pt-0 md:space-y-6 md:pt-8">
+    <div className="mx-auto max-w-screen-md space-y-4 rounded-lg px-2 pb-2 pt-0 md:space-y-6 md:pt-8">
       <GoBack />
-      <UserHeader profile={profile} username={username} />
+      <UserHeader user={user} profile={profile} username={username} />
       <Stats
         total_cadenas={data?.total_cadenas || 0}
         total_distance_walked={data?.total_distance_walked || 0}

components/CreateHighline.tsx

@@ -10,10 +10,11 @@ import { z } from "zod";
 
 import { PlusSvg } from "@/assets";
 import { Link } from "@/navigation";
-import supabase, {
+import useSupabaseBrowser from "@/utils/supabase/client";
+import {
   ACCEPTED_IMAGE_TYPES,
   MAX_FILE_SIZE,
-} from "@/utils/supabase";
+} from "@/utils/supabase/constants";
 
 import { SuccessAnimation } from "./animations/SuccessAnimation";
 import Button from "./ui/Button";
@@ -66,6 +67,8 @@ const formSchema = z.object({
 type FormSchema = z.infer<typeof formSchema>;
 
 const CreateHighline = () => {
+  const supabase = useSupabaseBrowser();
+
   const t = useTranslations("home.newHighline");
   const [dialogOpen, setDialogOpen] = useState(false);
   const [newHighlineUUID, setNewHighlineUUID] = useState<string | null>(null);

components/Highline.tsx

@@ -2,7 +2,7 @@ import { useTranslations } from "next-intl";
 
 import { ArrowIcon } from "@/assets";
 import { Link } from "@/navigation";
-import type { Tables } from "@/utils/supabase";
+import type { Tables } from "@/utils/supabase/database.types";
 
 import HighlineImage from "./HighlineImage";
 

components/RegistryEntry.tsx

@@ -9,7 +9,7 @@ import { z } from "zod";
 
 import { PlusSvg } from "@/assets";
 import { transformTimeStringToSeconds } from "@/utils/helperFunctions";
-import supabase from "@/utils/supabase";
+import useSupabaseBrowser from "@/utils/supabase/client";
 
 import { SuccessAnimation } from "./animations/SuccessAnimation";
 import Button from "./ui/Button";
@@ -73,8 +73,9 @@ interface Props {
 }
 
 const CreateHighline = ({ highlineId, highlineDistance }: Props) => {
-  const [dialogOpen, setDialogOpen] = useState(false);
+  const supabase = useSupabaseBrowser();
 
+  const [dialogOpen, setDialogOpen] = useState(false);
   const t = useTranslations("highline.registry");
   const queryClient = useQueryClient();