transition and url name change

JSConfCL · Jul 9, 2024 · cc09b88 · cc09b88
1 parent 14e9135
commit cc09b88
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 56 deletions.
diff --git 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
@@ -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 → app/components/MyEvents/MyTicketsList.tsx b/app/components/MyTickets/MyTicketsList.tsx → 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/...ts/MyTickets/MyTicketsLoadingSkeleton.tsx → ...nts/MyEvents/MyTicketsLoadingSkeleton.tsx b/...ts/MyTickets/MyTicketsLoadingSkeleton.tsx → ...nts/MyEvents/MyTicketsLoadingSkeleton.tsx
diff --git a/...MyTickets/graphql/myTickets.generated.tsx → ...s/MyEvents/graphql/myEvents.generated.tsx b/...MyTickets/graphql/myTickets.generated.tsx → ...s/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/...omponents/MyTickets/graphql/myTickets.gql → app/components/MyEvents/graphql/myEvents.gql b/...omponents/MyTickets/graphql/myTickets.gql → 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
@@ -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
@@ -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 → ...routes/_authenticated/my-events/index.tsx b/app/routes/_authenticated/tickets/index.tsx → ...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
@@ -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: {