From cc09b88e8d535103cd55f5558987b2c9f34004c0 Mon Sep 17 00:00:00 2001
From: felipe torres <felipe.torressepulveda@gmail.com>
Date: Tue, 9 Jul 2024 06:56:24 -0700
Subject: [PATCH] transition and url name change

---
 app/api/gql/gql.ts                            |  8 +--
 app/api/gql/graphql.ts                        | 10 +--
 .../{MyTickets => MyEvents}/MyTicketsList.tsx |  6 +-
 .../MyTicketsLoadingSkeleton.tsx              |  0
 .../graphql/myEvents.generated.tsx}           | 68 +++++++++----------
 .../graphql/myEvents.gql}                     |  2 +-
 app/components/Navbar/index.tsx               |  2 +-
 app/root.tsx                                  | 22 +++++-
 .../{tickets => my-events}/index.tsx          |  4 +-
 app/utils/urls.ts                             |  6 +-
 10 files changed, 72 insertions(+), 56 deletions(-)
 rename app/components/{MyTickets => MyEvents}/MyTicketsList.tsx (90%)
 rename app/components/{MyTickets => MyEvents}/MyTicketsLoadingSkeleton.tsx (100%)
 rename app/components/{MyTickets/graphql/myTickets.generated.tsx => MyEvents/graphql/myEvents.generated.tsx} (64%)
 rename app/components/{MyTickets/graphql/myTickets.gql => MyEvents/graphql/myEvents.gql} (97%)
 rename app/routes/_authenticated/{tickets => my-events}/index.tsx (83%)

diff --git a/app/api/gql/gql.ts b/app/api/gql/gql.ts
index 541bf6a..8f691e1 100644
--- a/app/api/gql/gql.ts
+++ b/app/api/gql/gql.ts
@@ -15,8 +15,8 @@ import type { TypedDocumentNode as DocumentNode } from "@graphql-typed-document-
 const documents = {
   "query FetchExampleEvents($input: PaginatedInputEventsSearchInput!) {\n  searchEvents(input: $input) {\n    data {\n      id\n      description\n      community {\n        id\n        name\n      }\n      tags {\n        id\n        name\n        description\n      }\n    }\n  }\n}":
     types.FetchExampleEventsDocument,
-  "query myTickets($input: PaginatedInputEventsSearchInput!, $userTicketSearchInput: EventsTicketsSearchInput) {\n  searchEvents(input: $input) {\n    data {\n      id\n      name\n      description\n      startDateTime\n      community {\n        id\n        name\n      }\n      status\n      usersTickets(input: $userTicketSearchInput) {\n        id\n        approvalStatus\n        paymentStatus\n        redemptionStatus\n        ticketTemplate {\n          description\n          id\n        }\n      }\n    }\n    pagination {\n      currentPage\n      pageSize\n      totalPages\n      totalRecords\n    }\n  }\n}":
-    types.MyTicketsDocument,
+  "query myEvents($input: PaginatedInputEventsSearchInput!, $userTicketSearchInput: EventsTicketsSearchInput) {\n  searchEvents(input: $input) {\n    data {\n      id\n      name\n      description\n      startDateTime\n      community {\n        id\n        name\n      }\n      status\n      usersTickets(input: $userTicketSearchInput) {\n        id\n        approvalStatus\n        paymentStatus\n        redemptionStatus\n        ticketTemplate {\n          description\n          id\n        }\n      }\n    }\n    pagination {\n      currentPage\n      pageSize\n      totalPages\n      totalRecords\n    }\n  }\n}":
+    types.MyEventsDocument,
   "mutation createPurchaseOrder($input: TicketClaimInput!) {\n  claimUserTicket(input: $input) {\n    __typename\n    ... on PurchaseOrder {\n      __typename\n      id\n      currency {\n        id\n      }\n      finalPrice\n      paymentLink\n      status\n      tickets {\n        id\n        approvalStatus\n        redemptionStatus\n        paymentStatus\n      }\n    }\n    ... on RedeemUserTicketError {\n      __typename\n      error\n      errorMessage\n    }\n  }\n}":
     types.CreatePurchaseOrderDocument,
   "fragment EventTicketFragment on Ticket {\n  id\n  name\n  description\n  quantity\n  isFree\n  startDateTime\n  status\n  isUnlimited\n  prices {\n    id\n    amount\n    currency {\n      currency\n      id\n    }\n  }\n}":
@@ -49,8 +49,8 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "query myTickets($input: PaginatedInputEventsSearchInput!, $userTicketSearchInput: EventsTicketsSearchInput) {\n  searchEvents(input: $input) {\n    data {\n      id\n      name\n      description\n      startDateTime\n      community {\n        id\n        name\n      }\n      status\n      usersTickets(input: $userTicketSearchInput) {\n        id\n        approvalStatus\n        paymentStatus\n        redemptionStatus\n        ticketTemplate {\n          description\n          id\n        }\n      }\n    }\n    pagination {\n      currentPage\n      pageSize\n      totalPages\n      totalRecords\n    }\n  }\n}",
-): (typeof documents)["query myTickets($input: PaginatedInputEventsSearchInput!, $userTicketSearchInput: EventsTicketsSearchInput) {\n  searchEvents(input: $input) {\n    data {\n      id\n      name\n      description\n      startDateTime\n      community {\n        id\n        name\n      }\n      status\n      usersTickets(input: $userTicketSearchInput) {\n        id\n        approvalStatus\n        paymentStatus\n        redemptionStatus\n        ticketTemplate {\n          description\n          id\n        }\n      }\n    }\n    pagination {\n      currentPage\n      pageSize\n      totalPages\n      totalRecords\n    }\n  }\n}"];
+  source: "query myEvents($input: PaginatedInputEventsSearchInput!, $userTicketSearchInput: EventsTicketsSearchInput) {\n  searchEvents(input: $input) {\n    data {\n      id\n      name\n      description\n      startDateTime\n      community {\n        id\n        name\n      }\n      status\n      usersTickets(input: $userTicketSearchInput) {\n        id\n        approvalStatus\n        paymentStatus\n        redemptionStatus\n        ticketTemplate {\n          description\n          id\n        }\n      }\n    }\n    pagination {\n      currentPage\n      pageSize\n      totalPages\n      totalRecords\n    }\n  }\n}",
+): (typeof documents)["query myEvents($input: PaginatedInputEventsSearchInput!, $userTicketSearchInput: EventsTicketsSearchInput) {\n  searchEvents(input: $input) {\n    data {\n      id\n      name\n      description\n      startDateTime\n      community {\n        id\n        name\n      }\n      status\n      usersTickets(input: $userTicketSearchInput) {\n        id\n        approvalStatus\n        paymentStatus\n        redemptionStatus\n        ticketTemplate {\n          description\n          id\n        }\n      }\n    }\n    pagination {\n      currentPage\n      pageSize\n      totalPages\n      totalRecords\n    }\n  }\n}"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/app/api/gql/graphql.ts b/app/api/gql/graphql.ts
index 3a6214c..ea766f5 100644
--- a/app/api/gql/graphql.ts
+++ b/app/api/gql/graphql.ts
@@ -873,12 +873,12 @@ export type FetchExampleEventsQuery = {
   };
 };
 
-export type MyTicketsQueryVariables = Exact<{
+export type MyEventsQueryVariables = Exact<{
   input: PaginatedInputEventsSearchInput;
   userTicketSearchInput?: InputMaybe<EventsTicketsSearchInput>;
 }>;
 
-export type MyTicketsQuery = {
+export type MyEventsQuery = {
   searchEvents: {
     data: Array<{
       id: string;
@@ -1127,13 +1127,13 @@ export const FetchExampleEventsDocument = {
   FetchExampleEventsQuery,
   FetchExampleEventsQueryVariables
 >;
-export const MyTicketsDocument = {
+export const MyEventsDocument = {
   kind: "Document",
   definitions: [
     {
       kind: "OperationDefinition",
       operation: "query",
-      name: { kind: "Name", value: "myTickets" },
+      name: { kind: "Name", value: "myEvents" },
       variableDefinitions: [
         {
           kind: "VariableDefinition",
@@ -1310,7 +1310,7 @@ export const MyTicketsDocument = {
       },
     },
   ],
-} as unknown as DocumentNode<MyTicketsQuery, MyTicketsQueryVariables>;
+} as unknown as DocumentNode<MyEventsQuery, MyEventsQueryVariables>;
 export const CreatePurchaseOrderDocument = {
   kind: "Document",
   definitions: [
diff --git a/app/components/MyTickets/MyTicketsList.tsx b/app/components/MyEvents/MyTicketsList.tsx
similarity index 90%
rename from app/components/MyTickets/MyTicketsList.tsx
rename to app/components/MyEvents/MyTicketsList.tsx
index 5df07bc..d792c40 100644
--- a/app/components/MyTickets/MyTicketsList.tsx
+++ b/app/components/MyEvents/MyTicketsList.tsx
@@ -1,13 +1,13 @@
 import { formatDistanceToNow, subDays, format } from "date-fns";
 import { ArrowRight } from "lucide-react";
 
-import { useMyTicketsSuspenseQuery } from "~/components/MyTickets/graphql/myTickets.generated";
+import { useMyEventsSuspenseQuery } from "~/components/MyEvents/graphql/myEvents.generated";
 import { Button } from "~/components/ui/button";
 import { Card, CardTitle } from "~/components/ui/card";
 import { urls } from "~/utils/urls";
 
 export const MyTicketsList = () => {
-  const { data } = useMyTicketsSuspenseQuery({
+  const { data } = useMyEventsSuspenseQuery({
     variables: {
       input: {
         search: {
@@ -53,7 +53,7 @@ export const MyTicketsList = () => {
             <div>
               <Button asChild variant="secondary">
                 <a
-                  href={urls.events.myTickets(event.id)}
+                  href={urls.myEvents.myTickets(event.id)}
                   className="flex items-center gap-2"
                 >
                   <span>Ver {event.usersTickets.length} tickets</span>
diff --git a/app/components/MyTickets/MyTicketsLoadingSkeleton.tsx b/app/components/MyEvents/MyTicketsLoadingSkeleton.tsx
similarity index 100%
rename from app/components/MyTickets/MyTicketsLoadingSkeleton.tsx
rename to app/components/MyEvents/MyTicketsLoadingSkeleton.tsx
diff --git a/app/components/MyTickets/graphql/myTickets.generated.tsx b/app/components/MyEvents/graphql/myEvents.generated.tsx
similarity index 64%
rename from app/components/MyTickets/graphql/myTickets.generated.tsx
rename to app/components/MyEvents/graphql/myEvents.generated.tsx
index 30af105..c8a7d31 100644
--- a/app/components/MyTickets/graphql/myTickets.generated.tsx
+++ b/app/components/MyEvents/graphql/myEvents.generated.tsx
@@ -8,12 +8,12 @@ import * as Types from '../../../api/gql/graphql';
 import { gql } from "graphql-tag";
 import * as Apollo from "@apollo/client";
 const defaultOptions = {} as const;
-export type MyTicketsQueryVariables = Types.Exact<{
+export type MyEventsQueryVariables = Types.Exact<{
   input: Types.PaginatedInputEventsSearchInput;
   userTicketSearchInput?: Types.InputMaybe<Types.EventsTicketsSearchInput>;
 }>;
 
-export type MyTicketsQuery = {
+export type MyEventsQuery = {
   __typename?: "Query";
   searchEvents: {
     __typename?: "PaginatedEvent";
@@ -52,8 +52,8 @@ export type MyTicketsQuery = {
   };
 };
 
-export const MyTicketsDocument = gql`
-  query myTickets(
+export const MyEventsDocument = gql`
+  query myEvents(
     $input: PaginatedInputEventsSearchInput!
     $userTicketSearchInput: EventsTicketsSearchInput
   ) {
@@ -90,70 +90,64 @@ export const MyTicketsDocument = gql`
 `;
 
 /**
- * __useMyTicketsQuery__
+ * __useMyEventsQuery__
  *
- * To run a query within a React component, call `useMyTicketsQuery` and pass it any options that fit your needs.
- * When your component renders, `useMyTicketsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * To run a query within a React component, call `useMyEventsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useMyEventsQuery` returns an object from Apollo Client that contains loading, error, and data properties
  * you can use to render your UI.
  *
  * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
  *
  * @example
- * const { data, loading, error } = useMyTicketsQuery({
+ * const { data, loading, error } = useMyEventsQuery({
  *   variables: {
  *      input: // value for 'input'
  *      userTicketSearchInput: // value for 'userTicketSearchInput'
  *   },
  * });
  */
-export function useMyTicketsQuery(
-  baseOptions: Apollo.QueryHookOptions<
-    MyTicketsQuery,
-    MyTicketsQueryVariables
-  > &
-    (
-      | { variables: MyTicketsQueryVariables; skip?: boolean }
-      | { skip: boolean }
-    ),
+export function useMyEventsQuery(
+  baseOptions: Apollo.QueryHookOptions<MyEventsQuery, MyEventsQueryVariables> &
+    ({ variables: MyEventsQueryVariables; skip?: boolean } | { skip: boolean }),
 ) {
   const options = { ...defaultOptions, ...baseOptions };
-  return Apollo.useQuery<MyTicketsQuery, MyTicketsQueryVariables>(
-    MyTicketsDocument,
+  return Apollo.useQuery<MyEventsQuery, MyEventsQueryVariables>(
+    MyEventsDocument,
     options,
   );
 }
-export function useMyTicketsLazyQuery(
+export function useMyEventsLazyQuery(
   baseOptions?: Apollo.LazyQueryHookOptions<
-    MyTicketsQuery,
-    MyTicketsQueryVariables
+    MyEventsQuery,
+    MyEventsQueryVariables
   >,
 ) {
   const options = { ...defaultOptions, ...baseOptions };
-  return Apollo.useLazyQuery<MyTicketsQuery, MyTicketsQueryVariables>(
-    MyTicketsDocument,
+  return Apollo.useLazyQuery<MyEventsQuery, MyEventsQueryVariables>(
+    MyEventsDocument,
     options,
   );
 }
-export function useMyTicketsSuspenseQuery(
+export function useMyEventsSuspenseQuery(
   baseOptions?: Apollo.SuspenseQueryHookOptions<
-    MyTicketsQuery,
-    MyTicketsQueryVariables
+    MyEventsQuery,
+    MyEventsQueryVariables
   >,
 ) {
   const options = { ...defaultOptions, ...baseOptions };
-  return Apollo.useSuspenseQuery<MyTicketsQuery, MyTicketsQueryVariables>(
-    MyTicketsDocument,
+  return Apollo.useSuspenseQuery<MyEventsQuery, MyEventsQueryVariables>(
+    MyEventsDocument,
     options,
   );
 }
-export type MyTicketsQueryHookResult = ReturnType<typeof useMyTicketsQuery>;
-export type MyTicketsLazyQueryHookResult = ReturnType<
-  typeof useMyTicketsLazyQuery
+export type MyEventsQueryHookResult = ReturnType<typeof useMyEventsQuery>;
+export type MyEventsLazyQueryHookResult = ReturnType<
+  typeof useMyEventsLazyQuery
 >;
-export type MyTicketsSuspenseQueryHookResult = ReturnType<
-  typeof useMyTicketsSuspenseQuery
+export type MyEventsSuspenseQueryHookResult = ReturnType<
+  typeof useMyEventsSuspenseQuery
 >;
-export type MyTicketsQueryResult = Apollo.QueryResult<
-  MyTicketsQuery,
-  MyTicketsQueryVariables
+export type MyEventsQueryResult = Apollo.QueryResult<
+  MyEventsQuery,
+  MyEventsQueryVariables
 >;
diff --git a/app/components/MyTickets/graphql/myTickets.gql b/app/components/MyEvents/graphql/myEvents.gql
similarity index 97%
rename from app/components/MyTickets/graphql/myTickets.gql
rename to app/components/MyEvents/graphql/myEvents.gql
index e9f8b2e..b27a726 100644
--- a/app/components/MyTickets/graphql/myTickets.gql
+++ b/app/components/MyEvents/graphql/myEvents.gql
@@ -1,4 +1,4 @@
-query myTickets(
+query myEvents(
   $input: PaginatedInputEventsSearchInput!
   $userTicketSearchInput: EventsTicketsSearchInput
 ) {
diff --git a/app/components/Navbar/index.tsx b/app/components/Navbar/index.tsx
index 7a0e837..689bdf7 100644
--- a/app/components/Navbar/index.tsx
+++ b/app/components/Navbar/index.tsx
@@ -43,7 +43,7 @@ export const Navbar = () => {
         {
           content: "Mis Eventos",
           show: true,
-          link: urls.tickets.root,
+          link: urls.myEvents.root,
         },
         {
           content: "Perfil",
diff --git a/app/root.tsx b/app/root.tsx
index 4dc20e5..13f6de4 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -4,11 +4,14 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
+  useLocation,
 } from "@remix-run/react";
 import { setDefaultOptions } from "date-fns";
 import { es } from "date-fns/locale";
 
 import "./tailwind.css";
+import { AnimatePresence, motion } from "framer-motion";
+
 import { ApolloWrapper } from "~/api/ApolloWrapper";
 import { Navbar } from "~/components/Navbar";
 import { Toaster } from "~/components/ui/sonner";
@@ -34,12 +37,29 @@ export function Layout({ children }: { children: React.ReactNode }) {
   );
 }
 
+const variants = {
+  initial: { opacity: 0, scale: 0.99 },
+  animate: { opacity: 1, scale: 1 },
+  exit: { opacity: 0, scale: 0.99 },
+};
+const transition = { duration: 0.3 };
 export default function App() {
   return (
     <AuthProvider>
       <ApolloWrapper>
         <Navbar />
-        <Outlet />
+        <AnimatePresence mode="popLayout">
+          <motion.div
+            key={useLocation().pathname}
+            variants={variants}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            transition={transition}
+          >
+            <Outlet />
+          </motion.div>
+        </AnimatePresence>
         <Toaster />
       </ApolloWrapper>
     </AuthProvider>
diff --git a/app/routes/_authenticated/tickets/index.tsx b/app/routes/_authenticated/my-events/index.tsx
similarity index 83%
rename from app/routes/_authenticated/tickets/index.tsx
rename to app/routes/_authenticated/my-events/index.tsx
index e1d26ef..64ed65d 100644
--- a/app/routes/_authenticated/tickets/index.tsx
+++ b/app/routes/_authenticated/my-events/index.tsx
@@ -1,8 +1,8 @@
 import { cx } from "class-variance-authority";
 import { Suspense } from "react";
 
-import { MyTicketsList } from "~/components/MyTickets/MyTicketsList";
-import { MyTicketsLoadingSkeleton } from "~/components/MyTickets/MyTicketsLoadingSkeleton";
+import { MyTicketsList } from "~/components/MyEvents/MyTicketsList";
+import { MyTicketsLoadingSkeleton } from "~/components/MyEvents/MyTicketsLoadingSkeleton";
 import { sharedLayoutStyle } from "~/components/sharedLayouts";
 import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";
 
diff --git a/app/utils/urls.ts b/app/utils/urls.ts
index 867d0b9..8ad2a60 100644
--- a/app/utils/urls.ts
+++ b/app/utils/urls.ts
@@ -2,9 +2,11 @@ export const urls = {
   home: "/",
   events: {
     root: "/eventos",
-    evento: (id: string) => `/eventos/${id}`,
     tickets: (id: string) => `/eventos/${id}/tickets`,
-    myTickets: (id: string) => `/eventos/${id}/my-tickets`,
+  },
+  myEvents: {
+    root: `/my-events`,
+    myTickets: (id: string) => `/my-events/${id}/my-tickets`,
   },
   comunidades: "/comunidades",
   tickets: {