Upcoming RSVPs

In the pages/my-rsvps folder, we have two pages where we want to show the user's upcoming and past events that they RSVPed to.

You can open this page at http://localhost:3000/my-rsvps/upcoming, or you can navigate there from the homepage by connecting your wallet and clicking on your wallet address in the upper right corner to open a dropdown menu.

In the upcoming.js file, we can import useState, useAccount and ConnectButton so the user can connect their wallet. We can also import gql and useQuery so we can get details about the event from our subgraph. Finally we can import the EventCard component.

import { useState } from "react";
import { gql, useQuery } from "@apollo/client";
import { ConnectButton } from "@rainbow-me/rainbowkit";
import { useAccount } from "wagmi";
import EventCard from "../../components/EventCard";

Before our MyUpcomingRSVPs function, we can define our gql query which will fetch all of the rsvps for the user's account.

const MY_UPCOMING_RSVPS = gql`
  query Account($id: String) {
    account(id: $id) {
      id
      rsvps {
        event {
          id
          name
          eventTimestamp
          imageURL
        }
      }
    }
  }
`;

To only show the rsvps for upcoming events, we can filter the events returned from the query by the eventTimestamp.

We also want to let the user connect their wallet just as we did on our other pages with the ConnectButton and useAccount hook.

We can get the user's wallet address from the useAccount hook and pass it into our query. To make sure that our subgraph is able to match the address correctly, we need to transform the address to all lower case.

Once we have our query results, we can pass those into our EventCard component.

export default function MyUpcomingRSVPs() {
  const { data: account } = useAccount();

  const id = account ? account.address.toLowerCase() : "";
  const [currentTimestamp, setEventTimestamp] = useState(new Date().getTime());
  const { loading, error, data } = useQuery(MY_UPCOMING_RSVPS, {
    variables: { id },
  });

  if (loading)
    return (
      <Dashboard page="rsvps" isUpcoming={true}>
        <p>Loading...</p>
      </Dashboard>
    );
  if (error)
    return (
      <Dashboard page="rsvps" isUpcoming={true}>
        <p>`Error! ${error.message}`</p>
      </Dashboard>
    );

  return (
    <Dashboard page="rsvps" isUpcoming={true}>
      {account ? (
        <div>
          {data && !data.account && <p>No upcoming RSVPs found</p>}
          {data && data.account && (
            <ul
              role="list"
              className="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8"
            >
              {data.account.rsvps.map(function (rsvp) {
                if (rsvp.event.eventTimestamp > currentTimestamp) {
                  return (
                    <li key={rsvp.event.id}>
                      <EventCard
                        id={rsvp.event.id}
                        name={rsvp.event.name}
                        eventTimestamp={rsvp.event.eventTimestamp}
                        imageURL={rsvp.event.imageURL}
                      />
                    </li>
                  );
                }
              })}
            </ul>
          )}
        </div>
      ) : (
        <div className="flex flex-col items-center py-8">
          <p className="mb-4">Please connect your wallet to view your rsvps</p>
          <ConnectButton />
        </div>
      )}
    </Dashboard>
  );
}

✋ Need Help?

If you need help, check to see if your question has already been asked in #section-8-help. If you don't see it in there, post a question with any details that would make it easy for a team member to help you. We'll answer most frequently asked questions in live office hours, so keep an eye out in #announcements for those!

---

Writers: Sarah Schwartz