ALL STUFF, BRANCH WILL BE DELETED

Dosbodoke · Oct 1, 2023 · 49eec20 · 49eec20
1 parent 18ac960
commit 49eec20
Show file tree

Hide file tree

Showing 27 changed files with 819 additions and 164 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,8 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "plugins": ["simple-import-sort"],
+  "rules": {
+    "simple-import-sort/imports": "warn",
+    "simple-import-sort/exports": "warn"
+  }
 }
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
@@ -1,14 +1,20 @@
 import "./globals.css";
-import { Inter } from "next/font/google";
+
 import { Analytics } from "@vercel/analytics/react";
+import { Inter } from "next/font/google";
 import { notFound } from "next/navigation";
 import { useLocale, useMessages } from "next-intl";
 
-import Providers from "./Providers";
 import Footer from "@/components/Footer";
 import NavBar from "@/components/layout/navbar";
 
-const inter = Inter({ subsets: ["latin"] });
+import Providers from "./Providers";
+
+const inter = Inter({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-inter",
+});
 
 export const metadata = {
   title: "Festival Chooselife",
@@ -35,16 +41,14 @@ export default function RootLayout({
     // refer to https://github.com/pacocoursey/next-themes#with-app
     <html lang={locale} suppressHydrationWarning>
       <body
-        className="min-h-screen bg-gradient-to-b from-white via-transparent to-gray-300 dark:from-gray-900 dark:to-black md:px-0"
-        style={inter.style}
+        className={`min-h-screen bg-gray-50 dark:bg-gray-900 md:px-0 ${inter.variable}`}
       >
         <Providers locale={locale} messages={messages}>
-          <main className="flex flex-col">
-            {/* @ts-expect-error Server Component */}
+          <div className="flex h-full min-h-screen flex-col">
             <NavBar />
             {children}
             <Footer />
-          </main>
+          </div>
         </Providers>
         <Analytics />
       </body>

diff --git a/app/[locale]/profile/[username]/_components/FormattedDate.tsx b/app/[locale]/profile/[username]/_components/FormattedDate.tsx
@@ -0,0 +1,19 @@
+import { useFormatter } from "next-intl";
+
+interface Props {
+  date: Date;
+}
+
+function FormatedDate({ date }: Props) {
+  const format = useFormatter();
+  return (
+    <div className="text-sm text-gray-600 dark:text-gray-400">
+      {format.dateTime(date, {
+        dateStyle: "medium",
+        timeStyle: "short",
+      })}
+    </div>
+  );
+}
+
+export default FormatedDate;
diff --git a/app/[locale]/profile/[username]/_components/LastWalks.tsx b/app/[locale]/profile/[username]/_components/LastWalks.tsx
@@ -0,0 +1,86 @@
+import { ChevronRightIcon } from "@radix-ui/react-icons";
+import Link from "next/link";
+
+import { EnduranceIcon, SpeedlineIcon } from "@/assets";
+import HighlineImage from "@/components/HighlineImage";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/Popover";
+import { transformSecondsToTimeString } from "@/utils/helperFunctions";
+import supabase from "@/utils/supabase-server";
+
+import FormattedDate from "./FormattedDate";
+
+interface Props {
+  username: string;
+}
+
+async function LastWalks({ username }: Props) {
+  const { data: entries } = await supabase
+    .from("entry")
+    .select(
+      `
+      *,
+      highline (*)
+    `
+    )
+    .eq("instagram", `@${username}`)
+    .limit(5)
+    .order("created_at", { ascending: false });
+
+  return (
+    <div className="max-w-screen-md 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">
+      <h3 className="text-xl font-semibold dark:text-white">Last Walks</h3>
+      <ul className="mt-4 divide-y divide-gray-200 dark:divide-gray-700">
+        {entries?.map((entry) => (
+          <li key={entry.id} className="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}
+              </PopoverTrigger>
+              <PopoverContent side="top" className="max-h-96 overflow-auto p-0">
+                <div className="relative h-12 w-full">
+                  <HighlineImage
+                    coverImageId={entry.highline?.cover_image || null}
+                  />
+                </div>
+                <div className="space-y-2 p-4">
+                  <p>{entry.highline?.description}</p>
+                  <Link
+                    href={`/${entry.highline?.id}`}
+                    className="flex items-center font-medium text-blue-600 hover:text-blue-700 hover:underline dark:text-blue-500 dark:hover:text-blue-600"
+                  >
+                    Ver mais{" "}
+                    <ChevronRightIcon
+                      className="ml-1.5 h-3 w-3"
+                      strokeWidth={2}
+                      stroke="currentColor"
+                    />
+                  </Link>
+                </div>
+              </PopoverContent>
+            </Popover>
+            <FormattedDate date={new Date(entry.created_at)} />
+            <div className="text-white-700 mb-1 flex gap-4 truncate text-sm font-normal dark:text-white">
+              {entry.crossing_time && (
+                <div className="flex items-end gap-1">
+                  <SpeedlineIcon className="text-gray-900 dark:text-white" />
+                  <p>{transformSecondsToTimeString(entry.crossing_time)}</p>
+                </div>
+              )}
+              <div className="flex items-end gap-1">
+                <EnduranceIcon className="text-gray-900 dark:text-white" />
+                <p>{entry.distance_walked}m</p>
+              </div>
+            </div>
+            <p>{entry.comment}</p>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default LastWalks;
diff --git a/app/[locale]/profile/[username]/_components/Stats.tsx b/app/[locale]/profile/[username]/_components/Stats.tsx
@@ -0,0 +1,51 @@
+import { cookies } from "next/headers";
+import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
+
+import type { Database } from "@/utils/database.types";
+
+interface Props {
+  total_distance_walked: number;
+  total_cadenas: number;
+  total_full_lines: number;
+}
+async function Stats({
+  total_distance_walked,
+  total_cadenas,
+  total_full_lines,
+}: Props) {
+  const displayDistanceInKM = total_distance_walked > 10000;
+
+  return (
+    <dl className="grid max-w-screen-md grid-cols-3 gap-3 divide-x divide-gray-200 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 sm:mx-auto sm:gap-8">
+      <div className="flex flex-col items-center justify-center">
+        <dt className="mb-2 text-3xl font-extrabold md:text-4xl">
+          {displayDistanceInKM
+            ? total_distance_walked / 1000
+            : total_distance_walked}
+          <span className="text-xl font-extrabold text-gray-500 dark:text-gray-400 md:text-2xl">
+            {displayDistanceInKM ? "km" : "m"}
+          </span>
+        </dt>
+        <dd className="font-light text-gray-500 dark:text-gray-400">
+          caminhados
+        </dd>
+      </div>
+      <div className="flex flex-col items-center justify-center">
+        <dt className="mb-2 text-3xl font-extrabold md:text-4xl">
+          {total_cadenas}
+        </dt>
+        <dd className="font-light text-gray-500 dark:text-gray-400">cadenas</dd>
+      </div>
+      <div className="flex flex-col items-center justify-center">
+        <dt className="mb-2 text-3xl font-extrabold md:text-4xl">
+          {total_full_lines}
+        </dt>
+        <dd className="font-light text-gray-500 dark:text-gray-400">
+          full lines
+        </dd>
+      </div>
+    </dl>
+  );
+}
+
+export default Stats;
diff --git a/app/[locale]/profile/[username]/_components/UserHeader.tsx b/app/[locale]/profile/[username]/_components/UserHeader.tsx
@@ -0,0 +1,26 @@
+import Image from "next/image";
+
+interface Props {
+  username: string;
+}
+
+function UserHeader({ username }: Props) {
+  return (
+    <header className="flex max-w-screen-md gap-4 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">
+      <Image
+        src={"/default-profile-picture.png"}
+        width={128}
+        height={128}
+        alt="Profile picture"
+      />
+      <div className="space-y-3">
+        <h1 className="text-2xl font-semibold">@{username}</h1>
+        <div className="rounded-lg bg-red-50 p-4 text-center text-sm text-red-500 dark:bg-red-100 dark:text-red-700">
+          Este usuário não é verificado
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default UserHeader;
diff --git a/app/[locale]/profile/[username]/_components/UserNotFound.tsx b/app/[locale]/profile/[username]/_components/UserNotFound.tsx
@@ -0,0 +1,33 @@
+import Link from "next/link";
+
+interface Props {
+  username: string;
+}
+
+function UserHeader({ username }: Props) {
+  return (
+    <section className="flex-1">
+      <div className="mx-auto max-w-screen-xl px-4 py-8 lg:px-6 lg:py-16">
+        <div className="mx-auto max-w-screen-sm text-center">
+          <p className="mb-4 text-3xl font-bold tracking-tight text-gray-900 dark:text-white md:text-4xl">
+            Usuário não existe
+          </p>
+          <p className="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">
+            Não conseguimos achar nenhum usuário com o nome{" "}
+            <span className="font-bold">@{username}</span>
+          </p>
+          <div className="my-4 flex justify-center gap-4">
+            <Link
+              href={"/"}
+              className="rounded-lg border border-gray-300 bg-white px-4 py-2 font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-offset-2 dark:border-gray-500 dark:bg-gray-800 dark:fill-gray-400 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+            >
+              Voltar para a página inicial
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default UserHeader;
diff --git a/app/[locale]/profile/[username]/page.tsx b/app/[locale]/profile/[username]/page.tsx
@@ -0,0 +1,44 @@
+import { Metadata } from "next";
+
+import supabase from "@/utils/supabase-server";
+
+import LastWalks from "./_components/LastWalks";
+import Stats from "./_components/Stats";
+import UserHeader from "./_components/UserHeader";
+
+export const metadata: Metadata = {
+  title: "Profile",
+  description: "User profile",
+};
+
+export default async function Profile({
+  params: { username },
+}: {
+  params: { username: string };
+}) {
+  const {
+    data: { session },
+  } = await supabase.auth.getSession();
+
+  const { data, error } = await supabase
+    .rpc("profile_stats", {
+      username: `@${username}`,
+    })
+    .maybeSingle();
+
+  if (!data || Object.values(data).every((value) => value === null)) {
+    return <UserHeader username={username} />;
+  }
+
+  return (
+    <div className="relative mx-auto h-full w-full max-w-screen-md flex-1 space-y-4 rounded-lg px-2 pb-2 pt-0 md:space-y-6 md:pt-8">
+      <UserHeader username={username} />
+      <Stats
+        total_cadenas={data.total_cadenas || 0}
+        total_distance_walked={data.total_distance_walked || 0}
+        total_full_lines={data.total_full_lines || 0}
+      />
+      <LastWalks username={username} />
+    </div>
+  );
+}
diff --git a/app/[locale]/profile/page.tsx b/app/[locale]/profile/page.tsx
diff --git a/assets/index.tsx b/assets/index.tsx
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -6,7 +6,7 @@ import Link from "next/link";
 function Footer() {
   const t = useTranslations("footer");
   return (
-    <footer className="w-full py-8 text-base text-gray-900 opacity-75 transition hover:opacity-100 dark:text-gray-400">
+    <footer className="w-full flex-grow-0 py-8 text-base text-gray-900 opacity-75 transition hover:opacity-100 dark:text-gray-400">
       <div className="flex items-center justify-center">
         <p>Festival Chooselife</p>
         <div className="mx-2 h-4 w-0 border border-gray-700 dark:border-gray-300" />

diff --git a/components/layout/navbar/LocaleSwitcher.tsx b/components/layout/navbar/LocaleSwitcher.tsx
@@ -1,18 +1,18 @@
 "use client";
 
 import { useLocale, useTranslations } from "next-intl";
-import { usePathname, useRouter } from "next-intl/client";
 import { useTransition } from "react";
 
 import {
   Select,
-  SelectTrigger,
-  SelectValue,
   SelectContent,
   SelectGroup,
-  SelectLabel,
   SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
 } from "@/components/ui/Select";
+import { usePathname, useRouter } from "@/navigation";
 
 export default function LocaleSwitcher() {
   const t = useTranslations("LocaleSwitcher");
@@ -29,7 +29,7 @@ export default function LocaleSwitcher() {
 
   return (
     <Select onValueChange={onSelectChange} defaultValue={locale}>
-      <SelectTrigger className="w-[180px]">
+      <SelectTrigger className="w-[142px] bg-white dark:bg-gray-700">
         <SelectValue placeholder="Select a fruit" />
       </SelectTrigger>
       <SelectContent>

diff --git a/components/layout/navbar/index.tsx b/components/layout/navbar/index.tsx
@@ -17,10 +17,12 @@ const NavBar = async () => {
   } = await supabase.auth.getSession();
 
   return (
-    <nav className="flex w-full items-center justify-end gap-4 py-2">
+    <nav className="flex w-full items-center justify-between gap-4 p-2 pb-8">
       <LocaleSwitcher />
-      <ThemeModeToggler />
-      <Profile session={session} />
+      <div>
+        <ThemeModeToggler />
+        <Profile session={session} />
+      </div>
     </nav>
   );
 };