Festival

components/tabs/Comments.tsx → app/[locale]/[id]/_components/Comments.tsx

@@ -5,12 +5,11 @@ import { useFormatter } from "next-intl";
 import React from "react";
 
 import type { Highline } from "@/app/actions/getHighline";
+import LoadingSkeleton from "@/components/Ranking/LoadingSkeleton";
+import { UsernameLink } from "@/components/Ranking/UsernameLink";
+import SeeMore from "@/components/SeeMore";
 import useSupabaseBrowser from "@/utils/supabase/client";
 
-import LoadingSkeleton from "./Ranking/LoadingSkeleton";
-import { UsernameLink } from "./Ranking/UsernameLink";
-import SeeMore from "./SeeMore";
-
 interface Props {
   highline: Highline;
 }
@@ -52,8 +51,20 @@ function Comments({ highline }: Props) {
   });
 
   if (isLoading) {
-    // TODO: Create a different loading skeleton for comment section
-    return <LoadingSkeleton />;
+    return (
+      <div className="mt-2 animate-pulse space-y-6">
+        {[...Array(5)].map((_, index) => (
+          <div key={index} className="flex flex-col space-y-2">
+            <div className="flex items-start space-x-2">
+              <div className="h-4 w-32 rounded-md bg-gray-200 dark:bg-gray-700"></div>
+              <div className="h-2 w-16 rounded-sm bg-gray-200 dark:bg-gray-700"></div>
+            </div>
+            <div className="h-4 w-full max-w-xs rounded-md bg-gray-200 dark:bg-gray-700"></div>
+            <div className="h-4 w-full max-w-sm rounded-md bg-gray-200 dark:bg-gray-700"></div>
+          </div>
+        ))}
+      </div>
+    );
   }
 
   if (isError) {
@@ -79,7 +90,6 @@ function Comments({ highline }: Props) {
             <div className="space-y-1">
               <div className="flex items-center space-x-2">
                 <UsernameLink username={comment.instagram} />
-                {/* <h4 className="text-sm font-semibold">{comment.instagram}</h4> */}
                 <span className="text-xs text-muted-foreground">
                   {format.relativeTime(new Date(comment.created_at))}
                 </span>

app/[locale]/[id]/_components/HighlineCard.tsx

@@ -1,9 +1,9 @@
 import { Highline } from "@/app/actions/getHighline";
 import HighlineImage from "@/components/HighlineImage";
-import Tabs from "@/components/tabs/Tabs";
 import { Card, CardContent } from "@/components/ui/card";
 
 import { FavoriteHighline } from "../../_components/FavoriteHighline";
+import { HighlineTabs } from "./highline-tabs";
 import { HighlineHeader } from "./HighlineHeader";
 
 function HighlineCard({ highline }: { highline: Highline }) {
@@ -15,7 +15,7 @@ function HighlineCard({ highline }: { highline: Highline }) {
       </div>
       <HighlineHeader highline={highline} />
       <CardContent>
-        <Tabs highline={highline} />
+        <HighlineTabs highline={highline} />
       </CardContent>
     </Card>
   );

app/[locale]/[id]/_components/HighlineHeader.tsx

@@ -4,8 +4,8 @@ import { MapPinIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useEffect, useRef, useState } from "react";
 
+import { RegistryEntry } from "@/app/[locale]/[id]/_components/RegistryEntry";
 import type { Highline } from "@/app/actions/getHighline";
-import { RegistryEntry } from "@/components/RegistryEntry";
 import { Button } from "@/components/ui/button";
 import { CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { cn } from "@/lib/utils";

components/RegistryEntry.tsx → app/[locale]/[id]/_components/RegistryEntry.tsx

@@ -8,6 +8,7 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { PlusSvg } from "@/assets";
+import { SuccessAnimation } from "@/components/animations/SuccessAnimation";
 import { Button, ButtonLoading } from "@/components/ui/button";
 import {
   Drawer,
@@ -19,25 +20,27 @@ import {
   DrawerTitle,
   DrawerTrigger,
 } from "@/components/ui/drawer";
-import { transformTimeStringToSeconds } from "@/utils/helperFunctions";
-import useSupabaseBrowser from "@/utils/supabase/client";
-
-import { SuccessAnimation } from "./animations/SuccessAnimation";
 import {
   Form,
   FormControl,
   FormDescription,
   FormField,
   FormItem,
   FormLabel,
-} from "./ui/form";
-import { Input } from "./ui/Input";
-import NumberPicker from "./ui/NumberPicker";
-import { TextArea } from "./ui/TextArea";
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import NumberPicker from "@/components/ui/NumberPicker";
+import { Textarea } from "@/components/ui/textarea";
+import { transformTimeStringToSeconds } from "@/utils/helperFunctions";
+import useSupabaseBrowser from "@/utils/supabase/client";
+
+import MultiSelectFormField from "./witness-select";
 
 const formSchema = z.object({
   instagram: z
     .string()
+    .trim()
     .startsWith("@", "O usuário deve começar com @")
     .min(3, "Deve conter ao menos 3 caracteres"),
   cadenas: z.number().nonnegative(),
@@ -58,12 +61,7 @@ const formSchema = z.object({
         /^([0-9]|[0-5][0-9]):[0-5][0-9]$/.test(value),
       "Inválido, use o formato mm:ss"
     ),
-  witness: z
-    .string()
-    .refine(
-      (w) => /^(?=.*@[^,\s]+,.*@[^,\s]+).*$/.test(w),
-      "Inválido, coloque o instagram de duas pessoas, separado por vírgula."
-    ),
+  witness: z.string().min(2).array().length(2),
   comment: z.string(),
 });
 
@@ -90,11 +88,24 @@ export const RegistryEntry = ({ highlineId, highlineDistance }: Props) => {
       full_lines: 0,
       distance: 0,
       time: "",
-      witness: "",
+      witness: [],
       comment: "",
     },
   });
 
+  useEffect(() => {
+    async function setUsername() {
+      const {
+        data: { session },
+      } = await supabase.auth.getSession();
+      entryForm.setValue(
+        "instagram",
+        session?.user.user_metadata["username"] || ""
+      );
+    }
+    setUsername();
+  }, [supabase.auth, entryForm]);
+
   const watchCadenas = entryForm.watch("cadenas");
   const watchFullLines = entryForm.watch("full_lines");
 
@@ -104,32 +115,30 @@ export const RegistryEntry = ({ highlineId, highlineDistance }: Props) => {
     if (totalDistance) entryForm.setValue("distance", totalDistance);
   }, [watchCadenas, watchFullLines, highlineDistance, entryForm]);
 
-  const createRecord = async (formData: FormSchema) => {
-    const response = await supabase.from("entry").insert([
-      {
-        highline_id: highlineId,
-        instagram: formData.instagram.toLowerCase(),
-        cadenas: formData.cadenas,
-        full_lines: formData.full_lines,
-        distance_walked: formData.distance,
-        crossing_time: formData.time
-          ? transformTimeStringToSeconds(formData.time)
-          : null,
-        comment: formData.comment,
-        witness: formData.witness?.replace(" ", "").split(","),
-        is_highliner: true, // TODO: Remove this field from database
-      },
-    ]);
-
-    if (response.error) {
-      throw new Error(response.error.message);
-    }
+  const formMutation = useMutation({
+    mutationFn: async (formData: FormSchema) => {
+      const response = await supabase.from("entry").insert([
+        {
+          highline_id: highlineId,
+          instagram: formData.instagram.toLowerCase(),
+          cadenas: formData.cadenas,
+          full_lines: formData.full_lines,
+          distance_walked: formData.distance,
+          crossing_time: formData.time
+            ? transformTimeStringToSeconds(formData.time)
+            : null,
+          comment: formData.comment,
+          witness: formData.witness,
+          is_highliner: true, // TODO: Remove this field from database
+        },
+      ]);
 
-    return response.data;
-  };
+      if (response.error) {
+        throw new Error(response.error.message);
+      }
 
-  const formMutation = useMutation({
-    mutationFn: createRecord,
+      return response.data;
+    },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["entry"] });
     },
@@ -157,7 +166,7 @@ export const RegistryEntry = ({ highlineId, highlineDistance }: Props) => {
         <Button variant="default">{t("trigger")}</Button>
       </DrawerTrigger>
 
-      <DrawerContent>
+      <DrawerContent onPointerDownOutside={(e) => true && e.preventDefault()}>
         <div className="scrollbar mx-auto flex w-full max-w-md flex-col overflow-auto rounded-t-[10px] p-4">
           {formMutation.isSuccess ? (
             <>
@@ -189,7 +198,10 @@ export const RegistryEntry = ({ highlineId, highlineDistance }: Props) => {
                     name="instagram"
                     render={({ field }) => (
                       <FormItem>
-                        <FormLabel>Instagram</FormLabel>
+                        <FormLabel>Highliner</FormLabel>
+                        <FormDescription>
+                          {t("instagram.description")}
+                        </FormDescription>
                         <FormControl>
                           <Input
                             placeholder={t("instagram.placeholder")}
@@ -301,11 +313,14 @@ export const RegistryEntry = ({ highlineId, highlineDistance }: Props) => {
                         </div>
 
                         <FormControl>
-                          <Input
+                          <MultiSelectFormField
+                            defaultValue={field.value}
+                            onValueChange={field.onChange}
                             placeholder={t("witness.placeholder")}
-                            {...field}
+                            variant="secondary"
                           />
                         </FormControl>
+                        <FormMessage />
                       </FormItem>
                     )}
                   />
@@ -316,7 +331,7 @@ export const RegistryEntry = ({ highlineId, highlineDistance }: Props) => {
                       <FormItem>
                         <FormLabel optional>{t("comment.label")}</FormLabel>
                         <FormControl>
-                          <TextArea
+                          <Textarea
                             {...field}
                             placeholder={t("comment.placeholder")}
                             rows={3}

components/tabs/Tabs.tsx → app/[locale]/[id]/_components/highline-tabs.tsx

@@ -6,18 +6,18 @@ import { useTranslations } from "next-intl";
 import { useMemo } from "react";
 
 import type { Highline } from "@/app/actions/getHighline";
+import { Ranking } from "@/components/Ranking";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useQueryString } from "@/hooks/useQueryString";
 
 import Comments from "./Comments";
 import Info from "./Info";
-import Ranking from "./Ranking";
 
 interface Props {
   highline: Highline;
 }
 
-function HighlineTabs({ highline }: Props) {
+export const HighlineTabs = ({ highline }: Props) => {
   const t = useTranslations("highline.tabs");
   const searchParams = useSearchParams();
   const { replaceQueryParam } = useQueryString();
@@ -39,7 +39,7 @@ function HighlineTabs({ highline }: Props) {
       {
         id: "ranking",
         label: "Ranking",
-        content: <Ranking highline={highline} />,
+        content: <Ranking highlines_ids={[highline.id]} />,
       },
     ],
     [t, highline]
@@ -82,6 +82,4 @@ function HighlineTabs({ highline }: Props) {
       </Tabs>
     </>
   );
-}
-
-export default HighlineTabs;
+};