graphql#print JavaScript Examples

updateEvent = () => {
    return axios.post("back-end-url", {
        query: print(UPDATE_EVENT),
        variables: {
            id: "eventId",
            input: {
                Date: "September, 4 2020",
                Start_Time: "6:00pm",
                End_Time: "12:00am",
                Title: "updated title",
                Description: "updated description",
                category_id: 2,
                Address: "USA! USA! USA!",
                Latitude: 45.2234,
                Longitude: -2.2324
            }
        }
    })
}

function GenericRedirect(props) {
  const { push } = useHistory();
  const { redirect_path } = useParams();

  const getInitialUserDataAndRedirectOnSuccess = () => {
    const token = ls.get("access_token");
    const decodedToken = jwt(token).sub;
    axiosWithAuth()({
      url: `${process.env.REACT_APP_BASE_URL}/graphql`,
      method: "post",
      data: {
        query: print(USER_BY_EMAIL),
        variables: { input: { email: decodedToken } },
      },
    }).then((res) => {
      sessionStorage.setItem(
        "user",
        JSON.stringify(res.data.data.getUserByEmail)
      );
      push(`/${redirect_path}`);
    });
  };

  if (!ls.get("access_token")) {
    push(`/generic-redirect/${redirect_path}`);
  } else {
    getInitialUserDataAndRedirectOnSuccess();
  }

  return null;
}

FullEvent = ({ match }) => {
  const eventId = parseInt(match.params.id);
  const dispatch = useDispatch();
  const currentEvent = useSelector((state) => state.currentEvent);
  useEffect(() => {
    if (eventId)
      axiosWithAuth()({
        url: `${process.env.REACT_APP_BASE_URL}/graphql`,
        method: "post",
        data: {
          query: print(EVENT_BY_ID),
          variables: { id: eventId },
        },
      }).then((res) => {
        dispatch(getSingleEvent(res.data.data.getEventById));
        dispatch(makeActive(eventId));

        axiosWithAuth()({
          url: `${process.env.REACT_APP_BASE_URL}/graphql`,
          method: "post",
          data: {
            query: print(GET_EVENT_INGREDIENTS_BY_ID),
            variables: { event_id: eventId },
          },
        })
          .then((res) => {
            dispatch(
              setCurrentIngredients(res.data.data.getIngredientsByEventId)
            );
          })
          .catch((err) => {
            console.dir(err);
          })
          .catch((err) => {
            console.log(err.message);
          });
      });
  }, [dispatch, eventId]);

  useEffect(() => {
    return () => dispatch(makeActive(null));
    // eslint-disable-next-line
  }, []);

  return (
    <div className="single-event-container">
      <Grow in style={{ transformOrigin: "200 200 200" }}>
        <div className="single-event-box">
          {currentEvent ? (
            <>
              <EventDetails />
              <div className="single-event-right-column">
                <div className="single-event-top-row">
                  <ParticipantCard />
                  <ShareCard />
                </div>
                <div className="single-event-comment-card">
                  <CommentsCard eventId={eventId} />
                </div>
              </div>
            </>
          ) : (
            ""
          )}
        </div>
      </Grow>
    </div>
  );
}

export function getGetServerSideProps (query, variables = null, notFoundFunc, requireVar) {
  return async function ({ req, query: params }) {
    const client = await getSSRApolloClient(req)
    const vars = { ...params, ...variables }

    if (requireVar && !vars[requireVar]) {
      return {
        notFound: true
      }
    }

    let error = null; let data = null; let props = {}
    if (query) {
      ({ error, data } = await client.query({
        query,
        variables: vars
      }))

      if (error || !data || (notFoundFunc && notFoundFunc(data))) {
        return {
          notFound: true
        }
      }

      props = {
        apollo: {
          query: print(query),
          variables: { ...params, ...variables }
        }
      }
    }

    const { data: { me } } = await client.query({
      query: ME_SSR
    })

    const price = await getPrice()

    return {
      props: {
        ...props,
        me,
        price,
        data
      }
    }
  }
}

function graphqlClientAPI() {
  return {
    graphql: {
      async request(widget, operation, variables = {}, options = {}) {
        const { endpointUrl, entityClasses } = widget.$in.graphqlClient;
        const { headers = {}, body = {}, ...restOptions } = options;

        operation = addTypenameToSelections(operation);

        const { response } = await widget.http.request({
          url: endpointUrl,
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            ...headers,
          },
          body: {
            query: stripIgnoredCharacters(print(operation)),
            variables,
            ...body,
          },
          ...restOptions,
        });

        const { errors, data = {} } = response.body;
        if (errors) {
          if (
            Array.isArray(errors) &&
            errors.some((error) => error.status === 'unauthorized')
          ) {
            return Promise.reject(
              new UnauthorizedError(`Unauthorized Error`, { errors, data })
            );
          }

          return Promise.reject(
            new GraphQLError(`Api Error`, { errors, data })
          );
        }

        return processResponseData(data, entityClasses);
      },
    },
  };
}

fetchWithIdVarible = () => {
    return axios.post("back-end-url", {
        query: print(USER_BY_ID),
        variables: { id: "userId" }
    })
}

fetchWithoutVariables = () => {
    return axios.post("back-end-url", {
        query: print(ALL_EVENTS)
    })
}

function GridStructure(props) {
  const classes = styles();
  const location = useLocation();
  const [urlLocation, setUrlLocation] = useState(
    location.pathname.split("/")[1]
  );
  useEffect(() => {
    setUrlLocation(location.pathname.split("/")[1]);
  }, [location]);

  useEffect(() => {
    if (ls.get("access_token")) {
      const token = ls.get("access_token");
      const decodedToken = jwt(token).sub;
      axiosWithAuth()({
        url: `${process.env.REACT_APP_BASE_URL}/graphql`,
        method: "post",
        data: {
          query: print(USER_BY_EMAIL),
          variables: { input: { email: decodedToken } },
        },
      })
        .then((res) => {
          sessionStorage.setItem(
            "user",
            JSON.stringify(res.data.data.getUserByEmail)
          );
        })
        .catch((err) => console.log(err));
    }
  }, []);

  return (
    <div className={classes["grid-container"]}>
      <div className={classes["Logo"]}>
        <Logo />
      </div>
      <div className={classes["Header"]}>
        <Header />
      </div>
      <div className={classes["Sidebar"]}>
        <Sidebar active={urlLocation} />
      </div>
      <div className={classes["Variable"]}>
        <VariableMainContent {...props} />
      </div>
      <div className={classes["hamburgerMenu"]}>
        <ResponsiveMenu />
      </div>
    </div>
  );
}

StatusButton = ({
  name,
  color,
  eventStatus,
  eventId,
  userId,
  setStatus,
  setParticipants,
}) => {
  const classes = buttonStyles();
  const dispatch = useDispatch();
  let location = useLocation();

  const updateStatus = (newStatus) => {
    axiosWithAuth()
      .post(`${process.env.REACT_APP_BASE_URL}/graphql`, {
        query: print(UPDATE_INVITATION),
        variables: {
          input: {
            event_id: parseInt(eventId),
            user_id: parseInt(userId),
            status: newStatus,
          },
        },
      })
      .then((res) => {
        const newStatus = res.data.data.updateInvitation.users.filter(
          (u) => `${u.id}` === `${userId}`
        )[0].status;
        setStatus(newStatus);
        dispatch(changeStatus(eventId, newStatus));

        if (
          location.pathname === `/events/${eventId}` ||
          location.pathname === "/view-events"
        ) {
          const attendees = res.data.data.updateInvitation.users.filter(
            (user) => user.status === "Going"
          );
          setParticipants(attendees);
        }
      });
  };
  return (
    <button
      className={`${classes.rsvpRoot} ${
        eventStatus === name && classes.rsvpActive
      }`}
      style={{ background: color }}
      name={name}
      onClick={(e) => {
        e.preventDefault();
        updateStatus(e.target.name);
      }}
    >
      {name === "Going" ? "Yes" : name === "Not Going" ? "No" : "Maybe"}
    </button>
  );
}

Comment = (props) => {
  const me = JSON.parse(sessionStorage.getItem("user"));
  const timeObject = parseTime(props.dateCreated);
  const classes = cardStyles();
  const user = props.user;
  const [reactions, setReactions] = useState([]);

  useEffect(() => {
    if (me) {
      axiosWithAuth()({
        url: `${process.env.REACT_APP_BASE_URL}/graphql`,
        method: "post",
        data: {
          query: print(GET_COMMENT_REACTIONS),
          variables: { id: Number(props.id) },
        },
      })
        .then((res) => {
          setReactions(res.data.data.getCommentReactions);
        })
        .catch((err) => {
          console.dir(err.message);
        });
    }

    //eslint-disable-next-line
  }, []);

  const toggleEmoji = (emoji) => {
    axiosWithAuth()({
      url: `${process.env.REACT_APP_BASE_URL}/graphql`,
      method: "post",
      data: {
        query: print(HANDLE_REACTION),
        variables: {
          input: {
            comment_id: Number(props.id),
            user_id: Number(me.id),
            reaction: emoji,
          },
        },
      },
    })
      .then((res) => {
        setReactions(res.data.data.handleReaction);
      })
      .catch((err) => {
        console.dir(err.message);
      });
  };

  const addReply = (message) => {
    const replyObject = {
      user_id: Number(me.id),
      event_id: Number(props.event_id),
      parent_id: Number(props.id),
      root_id: props.root_id === -1 ? Number(props.id) : Number(props.root_id),
      dateCreated: new Date().toISOString(),
      comment: message,
    };
    axiosWithAuth()({
      url: `${process.env.REACT_APP_BASE_URL}/graphql`,
      method: "post",
      data: {
        query: print(ADD_COMMENT),
        variables: { input: replyObject },
      },
    })
      .then((res) => {
        props.setComments([...props.comments, res.data.data.addComment]);
      })
      .catch((err) => {
        console.dir(err.message);
      });
  };

  return (
    <div
      className={classes.singleCommentParent}
      // props.parent_id < 0
      //   ? classes.singleCommentParent
      //   : classes.singleCommentChild
      // }
    >
      <div
        style={{
          display: "flex",
          flexWrap: "wrap",
          alignItems: "center",
        }}
      >
        <Avatar
          key={user.id}
          title={`${user.firstName} ${user.lastName}`}
          aria-label="avatar"
          className={classes.avatar}
          src={user.photo === "null" ? null : user.photo}
          style={{ marginRight: "5px", width: "26px", height: "26px" }}
        >
          {user.photo === "null" && (
            <Typography variant="body2">{makeInitials(user)}</Typography>
          )}
        </Avatar>
        {user && (
          <Typography variant="body1">
            {`${user.firstName} ${user.lastName}`}
          </Typography>
        )}
      </div>
      <Typography variant="caption" style={{ marginLeft: "17px" }}>
        {props.comment}
      </Typography>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <div style={{ display: "flex" }}>
          <ReplyButton
            name={`${user.firstName} ${user.lastName}`}
            description={props.comment}
            addReply={addReply}
          />
          <ReactButton
            name={`${user.firstName} ${user.lastName}`}
            toggleEmoji={toggleEmoji}
          />
          {reactions.map((item, index) => {
            return <ShowEmoji key={index} item={item} />;
          })}
        </div>
        <Typography variant="body2" color="textSecondary">
          {timeObject.commentTime}
        </Typography>
      </div>
    </div>
  );
}

CommentsCard = (props) => {
  const me = JSON.parse(sessionStorage.getItem("user"));
  const classes = cardStyles();
  const buttonClass = buttonStyles();
  const [newCommentWords, setNewCommentWords] = useState("");
  const [organizedComments, setOrganizedComments] = useState([]);
  const [comments, setComments] = useState([]);

  useEffect(() => {
    if (me) {
      axiosWithAuth()
        .post(`${process.env.REACT_APP_BASE_URL}/graphql`, {
          query: print(ALL_EVENT_COMMENTS),
          variables: { id: props.eventId },
        })
        .then((res) => {
          const commentList = res.data.data.getEventComments;
          setComments(commentList);
        })
        .catch((err) => console.dir(err));
    }
    // eslint-disable-next-line
  }, []);

  const handleChange = (e) => {
    setNewCommentWords(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const commentObject = {
      user_id: Number(me.id),
      event_id: Number(props.eventId),
      parent_id: -1,
      root_id: -1,
      dateCreated: new Date().toISOString(),
      comment: newCommentWords,
    };

    axiosWithAuth()({
      url: `${process.env.REACT_APP_BASE_URL}/graphql`,
      method: "post",
      data: {
        query: print(ADD_COMMENT),
        variables: { input: commentObject },
      },
    })
      .then((res) => {
        setComments([...comments, res.data.data.addComment]);
      })
      .catch((err) => {
        console.dir(err.message);
      });

    setNewCommentWords("");
  };

  useEffect(() => {
    if (comments) {
      const sorted = comments.sort((a, b) => {
        return a - b; //sorting not setup yet
      });
      setOrganizedComments(sorted);
    }
  }, [comments]);

  return (
    <div style={{ height: "100%" }}>
      <Card className={`${classes.root} ${classes.comments}`}>
        <Typography variant="h6" align="left">
          Comments
        </Typography>
        <CardContent>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              overflowY: "auto",
              height: "35vh",
              maxHeight: "35vh",
            }}
          >
            {organizedComments &&
              organizedComments.map((comment) => (
                <Comment
                  key={comment.id}
                  setComments={setComments}
                  comments={comments}
                  {...comment}
                />
              ))}
          </div>
        </CardContent>
        <CardContent>
          <form
            noValidate
            autoComplete="off"
            style={{
              display: "flex",
              flexDirection: "row",
              justifyContent: "space-between",
            }}
            onSubmit={handleSubmit}
          >
            <TextField
              name="comment"
              required
              variant="outlined"
              placeholder="Write a comment..."
              style={{ width: "60%" }}
              onChange={handleChange}
              value={newCommentWords}
            />
            <Button
              type="submit"
              disabled={!newCommentWords}
              className={`${buttonClass.root} ${buttonClass.single}`}
            >
              <Typography>Add Comment</Typography>
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}

function UserEditModalContent(props) {

    const mapAccess = {
        mapboxApiAccessToken: process.env.REACT_APP_MAPBOX_ACCESS_TOKEN,
    };

    const userInfoFromSessionStorage = JSON.parse(sessionStorage.getItem('user'));

    const classes = styles();
    const textBoxClass = textBoxStyles();

    const addressLabel = useRef();
    const geoInput = useRef();

    const dispatch = useDispatch();
    const userInputInfo = useSelector(state => state.savedUserUpdateInfo);

    const [userInputs, setUserInputs] = useState({
        firstName: userInfoFromSessionStorage.firstName,
        lastName: userInfoFromSessionStorage.lastName,
        gender: userInfoFromSessionStorage.gender,
        address: userInfoFromSessionStorage.address
    });

    const { firstName, lastName, gender, address } = userInputs;

    useEffect(() => {

        console.log("here");

        const geocoder = document.querySelector(".geocoder-container");

        console.log(geocoder);

        geoInput.current = geocoder.children[0].children[0];

        geoInput.current.name = "address";

        geoInput.current.classList.add(textBoxClass.addressInput);
        geoInput.current.style.marginTop = 0;
        geoInput.current.style.paddingBottom = "3%";

        address ? (
            geoInput.current.value = address
        ) : (
                geoInput.current.value = userInputInfo.address
            )

        addressLabel.current = geoInput.current;

    // eslint-disable-next-line
    }, []);


    const handleChange = e => {

        if (e.preventDefault) e.preventDefault();

        setUserInputs({
            ...userInputs,
            [e.target.name]: e.target.value
        });

        dispatch(saveUserUpdateInfo({
            ...userInputInfo,
            [e.target.name]: e.target.value
        }));

    }

    const handleAddressChange = e => {

        setUserInputs({
            ...userInputs,
            latitude: e.latitude,
            longitude: e.longitude
        });

        dispatch(saveUserUpdateInfo({
            ...userInputInfo,
            latitude: e.latitude,
            longitude: e.longitude
        }))

    }

    const handleSubmit = async e => {

        e.preventDefault();

        try {
            const updateResponse = await axiosWithAuth()({
                url: `${process.env.REACT_APP_BASE_URL}/graphql`,
                method: "post",
                data: {
                    query: print(UPDATE_USER),
                    variables: {
                        input: {
                            ...userInputInfo,
                            address: geoInput.current.value
                        },
                        id: userInfoFromSessionStorage.id
                    },
                },
            });

            if (!(updateResponse.status === 200)) throw new Error("Problem with update request");
            else {

                const userInfoFromSessionStorage = JSON.parse(sessionStorage.getItem('user'));
                sessionStorage.setItem('user', JSON.stringify({
                    ...userInfoFromSessionStorage,
                    ...userInputInfo,
                    address: geoInput.current.value
                }));
                props.toggleOpen();
            }

        } catch (err) {
            console.dir(err);
        }
    }

    return (
        <div className={classes.container}>
            <span onClick={props.toggleOpen} className={classes.closeButton}>
                <Icon height="20" icon={closeRectangle} />
            </span>
            <Typography variant="h4">Change User Information</Typography>
            <div className={classes.formContainer}>
                <FormControlLabel
                    className={classes.labels}
                    label="First Name"
                    labelPlacement="top"
                    control={<TextField
                        name="firstName"
                        type="text"
                        onChange={handleChange}
                        value={firstName ? firstName : userInputInfo.firstName}
                    />}
                />
                <FormControlLabel
                    className={classes.labels}
                    label="Last Name"
                    labelPlacement="top"
                    control={<TextField
                        name="lastName"
                        type="text"
                        onChange={handleChange}
                        value={lastName ? lastName : userInputInfo.lastName}
                    />}
                />
                <FormControlLabel
                    className={classes.labels}
                    label="Gender"
                    labelPlacement="top"
                    control={
                        <Select
                            labelId="gender-label"
                            value={gender ? gender : userInputInfo.gender}
                            onChange={handleChange}
                            label="Gender"
                            name="gender"
                        >
                            <MenuItem value={"male"}>Male</MenuItem>
                            <MenuItem value={"female"}>Female</MenuItem>
                            <MenuItem value={"other"}>Other</MenuItem>
                        </Select>
                    }
                />
                <FormControlLabel
                    className={classes.labels}

                    label="Address"
                    labelPlacement="top"
                    control={<div className="geocoder-container">
                        <Geocoder
                            {...mapAccess}
                            name="address"
                            onSelected={handleAddressChange}
                            limit={2}
                            viewport={"viewport"}
                            hideOnSelect={true}
                            queryParams={"queryParams"}
                            updateInputOnSelect={true}
                        />
                    </div>}
                />
                <Button type="submit" onClick={handleSubmit}>Update</Button>

            </div>
        </div>
    )

}

CalendarView = () => {
  const eventList = useSelector((state) => state.eventList);
  const selectedMonth = useSelector((state) => state.selectedMonth);
  const me = JSON.parse(sessionStorage.getItem("user"));
  const update = useSelector((state) => state.update);
  const dispatch = useDispatch();
  const classes = buttonStyles();
  const [isLoading, setIsLoading] = useState(false);
  const eventsInMonth =
    eventList &&
    eventList.filter((ev) => {
      const parsedTime = parseTime(ev.startTime, ev.endTime);
      const eventMonth = parsedTime.monthYear;
      return eventMonth === moment(selectedMonth).format("MMM YYYY");
    });

  useEffect(() => {
    setIsLoading(true);
    axiosWithAuth()({
      url: `${process.env.REACT_APP_BASE_URL}/graphql`,
      method: "post",
      data: {
        query: print(GET_INVITED_EVENTS),
        variables: { id: me.id },
      },
    })
      .then((res) => {
        const sortedByDate = res.data.data.getInvitedEvents.sort(
          (a, b) =>
            parseTime(a.startTime, a.endTime).unixStart -
            parseTime(b.startTime, b.endTime).unixStart
        );
        return sortedByDate;
      })
      .then((res) => {
        const addStatus = res.map((ele) => {
          return {
            ...ele,
            status: ele.users
              ? ele.users.filter((user) => `${user.id}` === `${me.id}`)[0]
                  .status
              : null,
          };
        });
        return addStatus;
      })
      .then((res) => {
        dispatch(getEventsSuccess(res));
      })
      .catch((err) => {
        console.log(err.message);
      })
      .finally(function () {
        setIsLoading(false);
      });
  }, [dispatch, me.id, update]);

  useEffect(() => {
    return () => dispatch(makeActive(null));
  }, [dispatch]);

  return (
    <div
      style={{
        overflowY: "auto",
        overflowX: "hidden",
        width: "100%",
        height: "80vh",
      }}
    >
      <div className="calendar-view-main">
        {!isLoading ? (
          !!eventsInMonth && eventsInMonth.length > 0 ? (
            eventsInMonth.map((event, eventNum) => (
              <CalendarRow {...event} key={event.id} eventNum={eventNum} />
            ))
          ) : (
            <div
              style={{
                textAlign: "center",
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                alignItems: "center",
                height: "20vh",
                marginTop: "10%",
              }}
            >
              <h3>No events for selected month</h3>
              <p>But it doesn't have to stay that way.</p>
              <Link to="/create-event">
                <div className={`${classes.single} ${classes.root}`}>
                  Create New Event
                </div>
              </Link>
            </div>
          )
        ) : (
          <div style={{ textAlign: "center" }}>
            <CircularProgress style={{ color: "#58D573" }} />
          </div>
        )}
      </div>
    </div>
  );
}

EventDetails = () => {
  const location = useLocation();
  const thisURL = location.pathname.split("/");
  const dispatch = useDispatch();
  const classes = cardStyles();
  const idFromStore = useSelector((state) => state.activeEvent);
  const currentEventId = thisURL.length > 2 ? thisURL[2] : idFromStore;
  const me = JSON.parse(sessionStorage.getItem("user"));
  const event = useSelector((state) => state.currentEvent);
  const [creatorName, setCreatorName] = useState("");
  const [currentStatus, setCurrentStatus] = useState("");
  const [participants, setParticipants] = useState([]);

  const photo =
    event.photo !== "null"
      ? event.photo
      : chooseDefaultPicture(event.category_id);

  let timeObject, parsedAddressURL;

  useEffect(() => {
    //get creator name when event loads.  This is a rough and inefficient way to do this, especially if there ends up being protected queries
    if (Object.keys(event).length > 0) {
      axiosWithAuth()({
        url: `${process.env.REACT_APP_BASE_URL}/graphql`,
        method: "post",
        data: {
          query: print(USER_BY_ID),
          variables: { id: event.user_id },
        },
      })
        .then((res) => {
          const data = res.data.data.getUserById;
          setCreatorName(`${data.firstName} ${data.lastName}`);
          setCurrentStatus(
            event.users.filter((ele) => `${ele.id}` === `${me.id}`)[0].status
          );
          setParticipants(
            event.users.filter((user) => user.status === "Going")
          );
          // console.log("event", event);
        })
        .catch((err) => {
          console.log(err.message);
        });
    }

    // eslint-disable-next-line
  }, [event]);

  useEffect(() => {
    if (currentEventId) {
      axiosWithAuth()({
        url: `${process.env.REACT_APP_BASE_URL}/graphql`,
        method: "post",
        data: {
          query: print(EVENT_BY_ID),
          variables: { id: currentEventId },
        },
      })
        .then((res) => {
          dispatch(getSingleEvent(res.data.data.getEventById));
        })
        .catch((err) => {
          console.log(err.message);
        });
    }
  }, [dispatch, currentEventId]);

  useEffect(() => {
    return () => {
      dispatch(makeActive(null));
      dispatch(getSingleEvent({}));
    };
  }, [dispatch]);

  if (Object.keys(event).length > 0) {
    timeObject = parseTime(event.startTime, event.endTime);
    parsedAddressURL = `https://www.google.com/maps/search/${event.address.replace(
      " ",
      "+"
    )}`;
  }

  return (
    <div className="event-details-container">
      {Object.keys(event).length > 0 && (thisURL.length > 2 || idFromStore) ? (
        <Card className={`${classes.root} ${classes.fullEvent}`}>
          <CardHeader
            action={
              <EventButtonModal eventId={event.id} userId={event.user_id} />
            }
            title={<Typography variant="h3">{event.title}</Typography>}
            subheader={
              <Typography variant="caption">
                <span style={{ opacity: ".6" }}>created by </span>
                {creatorName}
              </Typography>
            }
          />
          <CardMedia
            style={{ maxHeight: "40%" }}
            component="img"
            src={photo}
            title="Event Details Photo"
          />
          <p style={{ opacity: ".5" }}> {event.description}</p>
          <div>Confirmed Attending: {participants.length}</div>
          <div>
            <span style={{ marginRight: "5px", verticalAlign: "middle" }}>
              <Icon height="20" icon={calendarIcon} />
            </span>
            {timeObject.formattedDate}
          </div>
          <div>
            <span style={{ marginRight: "5px", verticalAlign: "middle" }}>
              <Icon height="20" icon={clockIcon} />
            </span>
            {`${timeObject.startTime} ${
              timeObject.endTime !== "Invalid date"
                ? "- " + timeObject.endTime
                : ""
            }`}
          </div>
          <div>
            <span style={{ marginRight: "5px", verticalAlign: "middle" }}>
              <Icon height="20" icon={globeIcon} />
            </span>
            <a
              href={parsedAddressURL}
              target="_blank"
              rel="noopener noreferrer"
              style={{ color: "rgb(79, 79, 248)" }}
            >
              {event.address}
            </a>
          </div>
          <div style={{ padding: "20px 0px 10px 0px" }}>
            <Typography variant="h6">
              Will you be attending this event?
            </Typography>
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                paddingTop: "10px",
              }}
            >
              {rsvpButtons.map((ele) => (
                <StatusButton
                  {...ele}
                  eventStatus={currentStatus}
                  eventId={event.id}
                  userId={me.id}
                  setStatus={setCurrentStatus}
                  key={ele.name}
                  setParticipants={setParticipants}
                />
              ))}
            </div>
          </div>
        </Card>
      ) : (
        <Typography variant="h6" style={{ padding: "10px" }}>
          Please select an event to view its details
        </Typography>
      )}
    </div>
  );
}

UninvitedUser = ({ user }) => {
  const buttonClasses = buttonStyles();
  const classes = cardStyles();
  const dispatch = useDispatch();
  const event = useSelector((state) => state.newEvent);
  let users = useSelector((state) => state.userList);

  const inviteUser = (id) => {
    const invite = {
      event_id: Number(event.id),
      inviter_id: Number(event.user_id),
      user_id: Number(id),
      status: "Approved",
    };

    axiosWithAuth()
      .post(`${process.env.REACT_APP_BASE_URL}/graphql`, {
        query: print(INVITE_USER),
        variables: { input: invite },
      })
      .then((res) => {
        dispatch(inviteUserSuccess(res.data.data.inviteUserToEvent.users));
        dispatch(filterUserListSuccess(users.filter((user) => user.id !== id)));
      })
      .catch((err) => console.log(err.message));
  };
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        width: "100%",
        margin: "10px",
      }}
      key={user.id}
    >
      <div style={{ display: "flex", alignItems: "center", width: "80%" }}>
        <Avatar
          aria-label="avatar"
          className={classes.avatar}
          src={user.photo === "null" ? null : user.photo}
        >
          {user.photo === "null" && (
            <Typography>{makeInitials(user)}</Typography>
          )}
        </Avatar>

        <div
          style={{
            display: "flex",
            flexDirection: "column",
            marginLeft: "5%",
            width: "20%",
          }}
        >
          <div
            style={{
              display: "flex",
              textAlign: "left",
              fontSize: "1.4rem",
              color: "#1A0F2C",
              fontWeight: "500",
              lineStyle: "normal",
            }}
          >
            <p>
              {user.firstName}&nbsp;{user.lastName}
            </p>
          </div>
          <p
            style={{
              color: "#000000",
              opacity: "0.3",
            }}
          >
            {user.email.length > 27
              ? user.email.slice(0, 27) + "..."
              : user.email}
          </p>
        </div>
      </div>
      <div style={{ width: "50px" }}>{/* Not Invited */}</div>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "flex-end",
          width: "60px",
        }}
      >
        <IconButton
          className={buttonClasses.icon}
          onClick={() => inviteUser(user.id)}
        >
          <Typography variant="h5">+</Typography>
        </IconButton>
      </div>
    </div>
  );
}

SearchFriends = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const [filteredList, setFilteredList] = useState([]);
  let users = useSelector((state) => state.userList);
  const event = useSelector((state) => state.newEvent);
  const dispatch = useDispatch();
  const { push } = useHistory();

  useEffect(() => {
    axiosWithAuth()
      .post(`${process.env.REACT_APP_BASE_URL}/graphql`, {
        query: print(GET_UNINVITED_USERS),
        variables: { id: event.id },
      })
      .then((res) => {
        dispatch(searchForUsersSuccess(res.data.data.getUninvitedUsers));
      })
      .catch((err) => console.log(err.message));
  }, [dispatch, event]);

  // filtering userList to allow search by first name, last name and email
  useEffect(() => {
    if (searchTerm !== "") {
      if (searchTerm.match(/^[a-zA-Z0-9_-]*@[a-zA-Z0-9_-]*.[a-zA-Z0-9_-]*$/)) {
        setFilteredList(
          users.filter((user) => {
            return user.email.toLowerCase().includes(searchTerm.toLowerCase());
          })
        );
      } else if (
        searchTerm.match(/^\S*\S$/) ||
        searchTerm.match(/(^\w* {1,}$|^\w*. {1,}$)/)
      ) {
        const formattedSearchTerm = searchTerm
          .replace(".", "")
          .replace(" ", "");
        setFilteredList(
          users.filter((user) => {
            return (
              user.firstName
                .toLowerCase()
                .includes(formattedSearchTerm.toLowerCase()) ||
              user.lastName
                .toLowerCase()
                .includes(formattedSearchTerm.toLowerCase()) ||
              user.email
                .toLowerCase()
                .includes(formattedSearchTerm.toLowerCase())
            );
          })
        );
      } else if (searchTerm.match(/(^\w*|^\w*.) {1}\w*\w$/)) {
        const firstName = searchTerm.split(" ")[0];
        const lastName = searchTerm.split(" ")[1];
        const firstNameArray = users.filter((user) =>
          user.firstName.toLowerCase().includes(firstName.toLowerCase())
        );
        const lastNameArray = users.filter((user) =>
          user.lastName.toLowerCase().includes(lastName.toLowerCase())
        );
        setFilteredList(
          firstNameArray.filter((user) => lastNameArray.includes(user))
        );
      } else setFilteredList([]);
    } else setFilteredList([]);
  }, [users, searchTerm]);

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        border: "2px solid #F3F3F3",
        boxShadow: "0px 4px 15px rgba(179, 179, 179, 0.1)",
        borderRadius: "25px",
        marginTop: "15px",
        marginBottom: "120px",
        padding: "30px",
        width: "90%",
      }}
    >
      <div>
        <h3
          style={{
            fontSize: "1.8rem",
            color: "#1A0F2C",
            fontWeight: "normal",
            fontStyle: "normal",
            marginTop: "10px",
            marginBottom: "10px",
          }}
        >
          Invite Neighbors
        </h3>
        <p
          style={{
            color: "#DEDEDE",
            fontSize: "1.6rem",
            fontWeight: "normal",
            fontStyle: "normal",
            marginTop: "10px",
          }}
        >
          Search for neighbors by name or email.
        </p>
      </div>

      <div>
        <div style={{ display: "flex", alignItems: "center" }}>
          <div className="createFormInputDiv" style={{ width: "70%" }}>
            <input
              type="text"
              name="search"
              placeholder="Search"
              onChange={(e) => setSearchTerm(e.target.value)}
              value={searchTerm}
            />
            <SearchIcon color="disabled" style={{ fontSize: "22px" }} />
          </div>
          <button
            onClick={() => push("/view-events")}
            className="searchFriendsBtn"
          >
            Done
          </button>
        </div>
      </div>
      <div style={{ width: "90%" }}>
        <UserList event={event} filteredList={filteredList} />
      </div>
    </div>
  );
}

InvitedUser = ({ user }) => {
  const buttonClasses = buttonStyles();
  const classes = cardStyles();
  const dispatch = useDispatch();
  const event = useSelector((state) => state.newEvent);
  let users = useSelector((state) => state.userList);

  const deleteInvitation = (user) => {
    const removeInvite = {
      event_id: Number(event.id),
      user_id: Number(user.id),
    };

    axiosWithAuth()
      .post(`${process.env.REACT_APP_BASE_URL}/graphql`, {
        query: print(REMOVE_INVITATION),
        variables: { input: removeInvite },
      })
      .then((res) => {
        dispatch(deleteInvitationSuccess(res.data.data.removeInvitation.users));
        dispatch(filterUserListSuccess((users = [...users, user])));
      })
      .catch((err) => console.log(err));
  };
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        width: "100%",
        margin: "10px",
        opacity: "0.5",
      }}
      key={user.id}
    >
      <div style={{ display: "flex", alignItems: "center", width: "80%" }}>
        <Avatar
          aria-label="avatar"
          className={classes.avatar}
          src={user.photo === "null" ? null : user.photo}
        >
          {user.photo === "null" && (
            <Typography>{makeInitials(user)}</Typography>
          )}
        </Avatar>

        <div
          style={{
            display: "flex",
            flexDirection: "column",
            marginLeft: "5%",
          }}
        >
          <div
            style={{
              display: "flex",
              textAlign: "left",
              fontSize: "1.4rem",
              fontWeight: "500",
              lineStyle: "normal",
            }}
          >
            <p>
              {user.firstName}&nbsp;{user.lastName}
            </p>
          </div>
          <p
            style={{
              color: "#000000",
              opacity: "0.3",
            }}
          >
            {user.email.length > 21
              ? user.email.slice(0, 21) + "..."
              : user.email}
          </p>
        </div>
      </div>
      <div style={{ width: "50px" }}>Invited</div>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "flex-end",
          width: "60px",
        }}
      >
        <IconButton
          className={buttonClasses.iconGreen}
          onClick={() => deleteInvitation(user)}
        >
          <Icon
            icon={checkmarkIcon}
            style={{
              fontSize: "3.5rem",
              color: "white",
              fontWeight: "bold",
            }}
          />
        </IconButton>
      </div>
    </div>
  );
}

FormContainer = () => {
  const me = JSON.parse(sessionStorage.getItem("user"));
  const page = useSelector((state) => state.page);
  const [hashtags, setHashtags] = useState([]);
  const [modifiers, setModifiers] = useState([]);
  const [photo, setPhoto] = useState(null);
  const [allergenList, setAllergenList] = useState([]);
  const [dietWarnings, setDietWarnings] = useState([]);
  const [ingredientList, setIngredientList] = useState([]);
  const [deletedIngredientsList, setDeletedIngredientsList] = useState([]);
  const eventToEdit = useSelector((state) => state.eventToEdit);
  const ingredientsToEdit = useSelector(
    (state) => state.currentEventIngredients
  );
  const isEditing = useSelector((state) => state.isEditing);
  const dispatch = useDispatch();

  const resetModifiers = () => {
    return modifierData.map((mod) => (mod.active = false));
  };

  const modifiersWithoutIcon = () => {
    return modifiers.map((mod) => {
      return {
        id: mod.id,
        title: mod.title,
        active: mod.active,
      };
    });
  };

  useEffect(() => {
    if (isEditing) {
      const savedHashtags = eventToEdit.hashtags;
      const savedModifiers = eventToEdit.modifiers;
      const savedAllergens = eventToEdit.allergenWarnings;
      const savedDietWarnings = eventToEdit.dietaryWarnings;

      if (savedModifiers && Object.keys(savedModifiers).length !== 0) {
        restoreSavedModifiers(
          modifierData,
          savedModifiers.modifiers,
          setModifiers
        );
      }

      if (savedHashtags && Object.keys(savedHashtags).length !== 0) {
        setHashtags(savedHashtags.hashtags);
      }

      if (savedAllergens && Object.keys(savedAllergens).length !== 0) {
        setAllergenList(savedAllergens.allergenWarnings);
      }

      if (savedDietWarnings && Object.keys(savedDietWarnings).length !== 0) {
        setDietWarnings(savedDietWarnings.dietaryWarnings);
      }

      if (eventToEdit.photo !== "null") {
        setPhoto(eventToEdit.photo);
      }

      if (ingredientsToEdit && ingredientsToEdit.length > 0) {
        setIngredientList(ingredientsToEdit);
      }
    }
    //eslint-disable-next-line
  }, [isEditing, eventToEdit, dispatch]);

  // cleanup
  useEffect(() => {
    return () => {
      resetModifiers();
      dispatch(cancelEdit());
      dispatch(setPage(1));
    };
  }, [dispatch]);

  return (
    <>
      <Formik
        initialValues={isEditing ? eventToEdit : initialState}
        onSubmit={(values, { resetForm }) => {
          let startTime = new Date(`${values.date} ${values.startTime}`);
          let endTime;
          if (values.endTime) {
            endTime = new Date(`${values.date} ${values.endTime}`);
          }
          const event = {
            title: values.title,
            description: values.description,
            category_id: values.category_id,
            address: values.address,
            startTime: startTime.toISOString(),
            endTime: values.endTime ? endTime.toISOString() : null,
            hashtags: JSON.stringify({ hashtags: [...hashtags] }),
            modifiers: JSON.stringify({
              modifiers: [...modifiersWithoutIcon()],
            }),
            longitude: values.longitude,
            latitude: values.latitude,
            photo: photo ? photo : null,
            user_id: parseInt(me.id),
            allergenWarnings: JSON.stringify({
              allergenWarnings: [...allergenList],
            }),
            dietaryWarnings: JSON.stringify({
              dietaryWarnings: [...dietWarnings],
            }),
          };

          if (isEditing) {
            axiosWithAuth()
              .post(`${process.env.REACT_APP_BASE_URL}/graphql`, {
                query: print(UPDATE_EVENT),
                variables: {
                  id: Number(eventToEdit.id),
                  input: event,
                },
              })
              .then((res) => {
                dispatch(updateEventSuccess(res.data.data.updateEvent));

                const addedIngredients = ingredientList.filter((ingredient) => {
                  return ingredient.id === undefined;
                });

                if (
                  addedIngredients.length < 1 &&
                  deletedIngredientsList.length < 1
                ) {
                  setHashtags([]);
                  resetForm(initialState);
                  resetModifiers();
                  setModifiers([]);
                  dispatch(setPage(4));
                } else {
                  if (addedIngredients.length > 0) {
                    const formattedIngredientsList = addedIngredients.map(
                      (ingredient) => {
                        return {
                          ...ingredient,
                          event_id: Number(res.data.data.updateEvent.id),
                        };
                      }
                    );

                    axiosWithAuth()
                      .post(`${process.env.REACT_APP_BASE_URL}/graphql`, {
                        query: print(ADD_EVENT_INGREDIENTS),
                        variables: {
                          input: {
                            ingredients: formattedIngredientsList,
                          },
                        },
                      })
                      .then((res) => {
                        if (deletedIngredientsList.length > 0) {
                          deletedIngredientsList.forEach(async (ingredient) => {
                            try {
                              // const response = 
                              await axiosWithAuth().post(
                                `${process.env.REACT_APP_BASE_URL}/graphql`,
                                {
                                  query: print(DELETE_EVENT_INGREDIENT),
                                  variables: {
                                    id: ingredient.id,
                                  },
                                }
                              );
                              // console.log(response);
                            } catch (err) {
                              console.dir(err);
                            }
                          });
                          setHashtags([]);
                          resetForm(initialState);
                          resetModifiers();
                          setModifiers([]);
                          dispatch(setPage(4));
                        } else {
                          setHashtags([]);
                          resetForm(initialState);
                          resetModifiers();
                          setModifiers([]);
                          dispatch(setPage(4));
                        }
                      })
                      .catch((err) => console.dir(err));
                  } else {
                    deletedIngredientsList.forEach(async (ingredient) => {
                      try {
                        // const response = 
                        await axiosWithAuth().post(
                          `${process.env.REACT_APP_BASE_URL}/graphql`,
                          {
                            query: print(DELETE_EVENT_INGREDIENT),
                            variables: {
                              id: ingredient.id,
                            },
                          }
                        );
                        // console.log(response);
                      } catch (err) {
                        console.dir(err);
                      }
                    });

                    setHashtags([]);
                    resetForm(initialState);
                    resetModifiers();
                    setModifiers([]);
                    dispatch(setPage(4));
                  }
                }
              })
              .catch((err) => console.log(err.message));
          } else {
            event.createDateTime = new Date().toISOString();
            axiosWithAuth()
              .post(`${process.env.REACT_APP_BASE_URL}/graphql`, {
                query: print(ADD_EVENT),
                variables: { input: event },
              })
              .then((res) => {
                dispatch(createEventSuccess(res.data.data.addEvent));

                const formattedIngredientsList = ingredientList.map(
                  (ingredient) => {
                    return {
                      ...ingredient,
                      event_id: Number(res.data.data.addEvent.id),
                    };
                  }
                );

                axiosWithAuth()
                  .post(`${process.env.REACT_APP_BASE_URL}/graphql`, {
                    query: print(ADD_EVENT_INGREDIENTS),
                    variables: {
                      input: {
                        ingredients: formattedIngredientsList,
                      },
                    },
                  })
                  .then((res) => {
                    setHashtags([]);
                    resetForm(initialState);
                    resetModifiers();
                    setModifiers([]);
                    dispatch(setPage(4));
                  })
                  .catch((err) => console.dir(err));
              })
              .catch((err) => console.log(err.message));
          }
        }}
      >
        {({ handleSubmit, handleChange, values, setFieldValue }) => (
          <div className="createEventContainer">
            <Form className="createForm" onSubmit={handleSubmit}>
              {page === 1 && (
                <>
                  <FormPageOne
                    values={values}
                    handleChange={handleChange}
                    setFieldValue={setFieldValue}
                  />
                </>
              )}

              {page === 2 && (
                <>
                  <FormPageTwo
                    values={values}
                    handleChange={handleChange}
                    hashtags={hashtags}
                    setHashtags={setHashtags}
                    modifiers={modifiers}
                    setModifiers={setModifiers}
                    photo={photo}
                    setPhoto={setPhoto}
                    allergenList={allergenList}
                    setAllergenList={setAllergenList}
                    dietWarnings={dietWarnings}
                    setDietWarnings={setDietWarnings}
                    ingredientList={ingredientList}
                    setIngredientList={setIngredientList}
                    deletedIngredientsList={deletedIngredientsList}
                    setDeletedIngredientsList={setDeletedIngredientsList}
                  />
                </>
              )}

              {page === 3 && (
                <>
                  <FormPageThree
                    hashtags={hashtags}
                    setHashtags={setHashtags}
                    values={values}
                    handleSubmit={handleSubmit}
                    modifiers={modifiers}
                    setModifiers={setModifiers}
                    photo={photo}
                    allergenList={allergenList}
                    setAllergenList={setAllergenList}
                    dietWarnings={dietWarnings}
                    setDietWarnings={setDietWarnings}
                    ingredientList={ingredientList}
                    setIngredientList={setIngredientList}
                    deletedIngredientsList={deletedIngredientsList}
                    setDeletedIngredientsList={setDeletedIngredientsList}
                  />
                </>
              )}
            </Form>
            {page === 4 && (
              <>
                <FormPageFour />
              </>
            )}
          </div>
        )}
      </Formik>
    </>
  );
}

RecentEvents = () => {
  const me = JSON.parse(sessionStorage.getItem("user"));
  const update = useSelector((state) => state.update);
  const eventList = useSelector((state) => state.eventList);
  const dispatch = useDispatch();
  const [isFetching, setIsFetching] = useState(true);

  useEffect(() => {
    if (me) {
      setIsFetching(true);
      axiosWithAuth()({
        url: `${process.env.REACT_APP_BASE_URL}/graphql`,
        method: "post",
        data: {
          query: print(GET_INVITED_EVENTS),
          variables: { id: me.id },
        },
      })
        .then((res) => {
          const sorted = res.data.data.getInvitedEvents.sort(
            (a, b) => b.createDateTime - a.createDateTime
          );
          const limitSet = sorted.slice(
            0,
            process.env.REACT_APP_DASHBOARD_EVENT_LIMIT
          );
          dispatch(getEventsSuccess(limitSet));
        })
        .catch((err) => {
          console.log(err.message);
        })
        .finally((res) => {
          setIsFetching(false);
        });
    }
    // eslint-disable-next-line
  }, [update]);

  useEffect(() => {
    if (me) {
      axiosWithAuth()({
        url: `${process.env.REACT_APP_BASE_URL}/graphql`,
        method: "post",
        data: {
          query: print(GET_FAVORITE_EVENTS),
          variables: { id: me.id },
        },
      })
        .then((res) => {
          dispatch(getFavoriteEventsSuccess(res.data.data.getFavoriteEvents));
        })
        .catch((err) => {
          console.log(err.message);
        });
    }
    // eslint-disable-next-line
  }, []);

  return (
    <div>
      <Typography
        variant="h4"
        //with minimal elements on dashboard, moving this to center for better styling. to be moved back once feed and other components are added back
        style={
          { textAlign: "center", marginBottom: "10px" } // {{ marginLeft: "12px", marginBottom: "5px" }}
        }
      >
        Newest Events
      </Typography>
      <div
        style={{
          overflow: "auto",
          height: "80vh",
          display: "flex",
          justifyContent: "space-between",
        }}
      >
        <div className="recent-events-container">
          {isFetching ? (
            <div style={{ textAlign: "center" }}>
              <CircularProgress style={{ color: "#58D573" }} />
            </div>
          ) : eventList.length > 0 ? (
            eventList.map((ele) => (
              <RecentCard
                {...ele}
                key={ele.id}
                currentStatus={
                  ele.users.filter((u) => `${u.id}` === `${me.id}`)[0].status
                }
              />
            ))
          ) : (
            <Typography style={{ marginTop: "20px" }}>
              No recently created events.
            </Typography>
          )}
        </div>
      </div>
    </div>
  );
}

RecentCard = (props) => {
  // console.log(`RecentCard -> props`, props);
  const me = JSON.parse(sessionStorage.getItem("user"));
  const classes = cardStyles();
  const dispatch = useDispatch();
  const [expanded, setExpanded] = useState(false);
  const [currentStatus, setCurrentStatus] = useState(props.currentStatus);
  const [creatorData, setCreatorData] = useState({});
  const [creatorName, setCreatorName] = useState("");
  const favoriteEvents = useSelector((state) => state.favoriteEvents);
  const isFavorite = isEventFavorite(favoriteEvents, props.id);
  // const [liked, setLiked] = useState(false);

  const handleExpandClick = () => {
    setExpanded(!expanded);
  };

  const timeObject = parseTime(props.startTime, props.endTime);
  const shownTime = timeAgo(props.createDateTime);

  // const toggleLike = () => {
  //   setLiked(!liked);
  // };
  const addFavoriteEvent = () => {
    const addFavorite = {
      event_id: Number(props.id),
      user_id: Number(me.id),
    };

    axiosWithAuth()
      .post(`${process.env.REACT_APP_BASE_URL}/graphql`, {
        query: print(ADD_FAVORITE_EVENT),
        variables: { input: addFavorite },
      })
      .then((res) => {
        dispatch(addFavoriteEventSuccess(res.data.data.addFavoriteEvent));
      })
      .catch((err) => console.log(err));
  };

  const removeFavoriteEvent = () => {
    const removeFavorite = {
      event_id: Number(props.id),
      user_id: Number(me.id),
    };

    axiosWithAuth()
      .post(`${process.env.REACT_APP_BASE_URL}/graphql`, {
        query: print(REMOVE_FAVORITE_EVENT),
        variables: { input: removeFavorite },
      })
      .then((res) => {
        dispatch(removeFavoriteEventSuccess(res.data.data.removeFavoriteEvent));
      })
      .catch((err) => console.log(err));
  };

  useEffect(() => {
    //get creator name & photo when event loads.
    //This is a rough and inefficient way to do this, especially if there ends up being protected queries
    props.user_id &&
      axiosWithAuth()({
        url: `${process.env.REACT_APP_BASE_URL}/graphql`,
        method: "post",
        data: {
          query: print(USER_BY_ID),
          variables: { id: props.user_id },
        },
      })
        .then((res) => {
          const data = res.data.data.getUserById;
          setCreatorData(data);
          setCreatorName(`${data.firstName} ${data.lastName}`);
        })
        .catch((err) => {
          console.log(err.message);
        });
    // eslint-disable-next-line
  }, []);

  return (
    <Card className={`${classes.root} ${classes.dashboard}`}>
      <CardHeader
        avatar={
          <Avatar
            key={creatorData.id}
            title={creatorName}
            aria-label="avatar"
            className={classes.avatar}
            src={creatorData.photo === "null" ? null : creatorData.photo}
          >
            {creatorData.photo === "null" && (
              <Typography>{makeInitials(creatorData)}</Typography>
            )}
          </Avatar>
        }
        action={<EventButtonModal eventId={props.id} userId={props.user_id} />}
        title={
          <Typography variant="h6">
            {creatorName}
            <span style={{ opacity: ".6" }}> created an event</span>
          </Typography>
        }
        subheader={
          <Typography variant="caption">
            <span style={{ opacity: ".6" }}>{shownTime}</span>
          </Typography>
        }
      />

      <Link to={"/events/" + props.id}>
        {/* If you need to disable functionality of events showing custom uploaded images on 
        dashboard, change REACT_APP_ALLOW_USER_IMG variable within .env file to 0 (zero) */}
        {props.photo !== "null" &&
        process.env.REACT_APP_ALLOW_USER_IMG === "1" ? (
          <CardMedia
            style={{ maxHeight: "40%" }}
            component="img"
            src={props.photo}
            title="Recent Card Event Photo"
          />
        ) : (
          <CardMedia
            className={classes.media}
            image={chooseDefaultPicture(props.category_id)}
            title="Recent Card Event Photo"
          />
        )}
        <div className="date-box">
          <Typography variant="h5">{timeObject.day}</Typography>
          <Typography variant="h5" color="secondary">
            {timeObject.monthShort}
          </Typography>
        </div>
        <Typography variant="body1" align="center">
          {`@ ${timeObject.startTime}`}
        </Typography>
        <CardContent style={{ padding: "5px" }}>
          <Typography variant="h4" align="center">
            {props.title}
          </Typography>
          <Typography variant="body1" align="center">
            <span
              style={
                currentStatus === "Not Going"
                  ? { color: "rgba(232, 64, 64, .75)" }
                  : currentStatus === "Maybe"
                  ? { color: "rgba(255, 169, 40, .75)" }
                  : currentStatus === "Going"
                  ? { color: "rgba(33, 186, 66, .75)" }
                  : { color: "rgba(0,0,0, .3)" }
              }
            >
              {currentStatus || "undecided"}
            </span>
          </Typography>
        </CardContent>
      </Link>
      <CardActions disableSpacing>
        {!isFavorite ? (
          <div
            style={{ fontSize: "2.5rem", cursor: "pointer" }}
            onClick={() => addFavoriteEvent()}
          >
            <Emoji label="star" symbol="☆" />
          </div>
        ) : (
          <div
            style={{ fontSize: "2.5rem", cursor: "pointer" }}
            onClick={() => removeFavoriteEvent()}
          >
            <Emoji label="star" symbol="⭐" />
          </div>
        )}
        <IconButton
          className={clsx(classes.expand, {
            [classes.expandOpen]: expanded,
          })}
          onClick={handleExpandClick}
          aria-expanded={expanded}
          aria-label="show more"
        >
          <div>
            <ExpandMoreIcon />
          </div>
        </IconButton>
      </CardActions>
      <Collapse in={expanded} timeout="auto" unmountOnExit>
        <CardContent>
          <Typography variant="h6">Are you attending this event?</Typography>
          <div style={{ display: "flex", marginTop: "10px" }}>
            {rsvpButtons.map((ele) => (
              <StatusButton
                {...ele}
                key={ele.name}
                eventStatus={currentStatus}
                eventId={props.id}
                userId={me.id}
                setStatus={setCurrentStatus}
              />
            ))}
          </div>
        </CardContent>
      </Collapse>
    </Card>
  );
}

EventButtonModal = ({ eventId, userId }) => {
  const location = useLocation();
  const thisURL = location.pathname.split("/");
  const dispatch = useDispatch();
  const history = useHistory();
  const me = JSON.parse(sessionStorage.getItem("user"));
  const currentEvent = useSelector((state) => state.currentEvent);
  const modalClasses = modalStyles();
  const isOwner = Number(me.id) === Number(userId);
  const [open, setOpen] = useState(false);
  const anchorRef = useRef(null);
  const timeObject = parseTime(currentEvent.startTime, currentEvent.endTime);

  const handleToggle = () => {
    setOpen((prevOpen) => !prevOpen);
  };

  const handleClose = (event) => {
    if (anchorRef.current && anchorRef.current.contains(event.target)) {
      return;
    }

    setOpen(false);
  };

  const handleListKeyDown = (event) => {
    if (event.key === "Tab") {
      event.preventDefault();
      setOpen(false);
    }
  };

  const deleteEvent = () => {
    axiosWithAuth()
      .post(`${process.env.REACT_APP_BASE_URL}/graphql`, {
        query: print(DELETE_EVENT),
        variables: { id: eventId },
      })
      .then((res) => {
        dispatch(forceUpdate());
      })
      .catch((err) => console.log(err));
  };
  const removeInvitation = () => {
    const removeInvite = {
      event_id: Number(eventId),
      user_id: Number(me.id),
    };

    axiosWithAuth()
      .post(`${process.env.REACT_APP_BASE_URL}/graphql`, {
        query: print(REMOVE_INVITATION),
        variables: { input: removeInvite },
      })
      .then((res) => {
        dispatch(deleteInvitationSuccess(res.data.data.removeInvitation.users));
        dispatch(forceUpdate());
      })
      .catch((err) => console.log(err));
  };

  // return focus to the button when we transitioned from !open -> open
  const prevOpen = useRef(open);
  useEffect(() => {
    if (prevOpen.current === true && open === false) {
      anchorRef.current.focus();
    }

    prevOpen.current = open;
  }, [open]);

  return (
    <>
      <div className={modalClasses.root}>
        <div>
          <IconButton
            ref={anchorRef}
            aria-controls={open ? "menu-list-grow" : undefined}
            aria-haspopup="true"
            onClick={handleToggle}
          >
            <MoreVertIcon />
          </IconButton>
          <Popper
            placement="bottom-start"
            open={open}
            anchorEl={anchorRef.current}
            role={undefined}
            transition
            disablePortal
          >
            {({ TransitionProps, placement }) => (
              <Grow
                {...TransitionProps}
                style={{
                  transformOrigin:
                    placement === "bottom" ? "center top" : "center bottom",
                }}
              >
                <Paper>
                  <ClickAwayListener onClickAway={handleClose}>
                    <MenuList
                      autoFocusItem={open}
                      id="menu-list-grow"
                      onKeyDown={handleListKeyDown}
                    >
                      {thisURL.length > 2 ? (
                        `${me.id}` === `${currentEvent.user_id}` && (
                          <MenuItem
                            onClick={() => {
                              /* had to add date to eventToEdit object and convert start/end times here for editing 
                                mode to allow moment functions to finish converting before the form rendered */
                              currentEvent.date = timeObject.formDate;
                              currentEvent.startTime = timeObject.formStartTime;
                              currentEvent.endTime = timeObject.formEndTime;
                              dispatch(startEventEdit(currentEvent));
                              history.push("/create-event");
                            }}
                          >
                            Edit Event
                          </MenuItem>
                        )
                      ) : (
                        <MenuItem
                          onClick={() => {
                            dispatch(makeActive(eventId));
                            history.push(`/events/${eventId}`);
                          }}
                        >
                          Open Event
                        </MenuItem>
                      )}
                      <MenuItem>
                        <WarnRemoveModal
                          isOwner={isOwner}
                          deleteEvent={deleteEvent}
                          removeInvitation={removeInvitation}
                        />
                      </MenuItem>
                    </MenuList>
                  </ClickAwayListener>
                </Paper>
              </Grow>
            )}
          </Popper>
        </div>
      </div>
    </>
  );
}

AccountDrawer = (props) => {
  const styleClasses = styles();
  const me = JSON.parse(sessionStorage.getItem("user"));
  const cardClasses = cardStyles();
  const classes = useStyles();
  const [open, setOpen] = useState(false);
  const [showAll, setShowAll] = useState(false);
  const [myList, setMyList] = useState(me.eventsOwned);
  const update = useSelector((state) => state.update);

  useEffect(() => {
    if (me) {
      axiosWithAuth()({
        url: `${process.env.REACT_APP_BASE_URL}/graphql`,
        method: "post",
        data: {
          query: print(GET_AUTHORED_EVENTS),
          variables: { id: me.id },
        },
      })
        .then((res) => {
          setMyList(sortList(res.data.data.getAuthoredEvents));
        })
        .catch((err) => {
          console.log(err.message);
        });
    }
    // eslint-disable-next-line
  }, [update]);

  const [modalIsOpen, setModelIsOpen] = useState(false);

  const ReffedModalContent = React.forwardRef((props, ref) => (
    <UserEditModalContent {...props} ref={ref} />
  ));

  const toggleModalOpen = (e) => {
    setModelIsOpen(!modalIsOpen);
  };

  const handleDrawerOpen = () => {
    setOpen(true);
  };

  const handleDrawerClose = () => {
    setOpen(false);
  };

  const sortList = (list) => {
    return list.sort((a, b) => a.startTime - b.startTime);
  };

  const toggleShowAll = () => {
    setShowAll(!showAll);
  };

  const startEditAvatar = () => {
    //Todo
  };

  const logout = async (e) => {
    e.preventDefault();

    try {
      const idToken = ls.get("id_token");
      const url = `https://dev-599411.okta.com/oauth2/default/v1/logout`;

      const body = {
        id_token_hint: idToken,
        post_logout_redirect_uri: process.env.REACT_APP_FRONT_END_BASE_URL,
      };

      localStorage.clear();
      sessionStorage.clear();

      window.location.replace(`${url}?${qs.stringify(body)}`);
    } catch (err) {
      console.dir(err);
    }
  };

  return (
    <div className={classes.root}>
      <Modal open={modalIsOpen} onClose={toggleModalOpen}>
        <ReffedModalContent toggleOpen={toggleModalOpen} />
      </Modal>

      <Avatar
        onClick={handleDrawerOpen}
        className={`${cardClasses.avatar} 
        ${clsx(open && classes.hide)}`}
        style={{
          border: "2px solid rgba(88, 212, 115, 0.3)",
          cursor: "pointer",
          alignSelf: "center",
          display: "flex",
          alignItems: "center",
        }}
        alt="Picture User Avatar"
        src={me.photo !== "null" ? me.photo : null}
      >
        {me.photo === "null" && <Typography>{makeInitials(me)}</Typography>}
      </Avatar>
      <main
        className={clsx(classes.content, {
          [classes.contentShift]: open,
        })}
      ></main>
      <Drawer
        className={classes.drawer}
        variant="persistent"
        anchor="right"
        open={open}
        classes={{
          paper: classes.drawerPaper,
        }}
      >
        <section className={styleClasses.container}>
          <div
            style={{
              display: "flex",
              flexDirection: "row",
              justifyContent: "space-between",
              width: "100%",
            }}
          >
            <Button
              className={`${styleClasses.root} ${styleClasses.notActive}`}
              onClick={logout}
            >
              <span style={{ marginRight: "5px" }}>
                <Icon height="20" icon={logoutIcon} />
              </span>
              <Typography variant="caption">Logout</Typography>
            </Button>
            <Button
              className={`${styleClasses.root} ${styleClasses.notActive}`}
              onClick={handleDrawerClose}
            >
              <span style={{ marginRight: "5px" }}>
                <Icon height="20" icon={closeRectangle} />
              </span>
              <Typography variant="caption">Close</Typography>
            </Button>
          </div>

          <div className={styleClasses["avatar-container"]}>
            <Avatar
              onClick={startEditAvatar}
              aria-label="avatar"
              className={styleClasses.avatar}
              src={me.photo !== "null" ? me.photo : null}
              alt="Profile Avatar"
            >
              {me.photo === "null" && (
                <Typography>{makeInitials(me)}</Typography>
              )}
            </Avatar>
            <Typography variant="h5">
              {me.firstName} {me.lastName}
            </Typography>
          </div>
          <div className={styleClasses["middle-content-container"]}>
            <div style={{ display: "flex", justifyContent: "space-between" }}>
              <Typography variant="h6">Details</Typography>
              <Button onClick={toggleModalOpen}>Edit Profile</Button>
            </div>

            <div>
              {"Pets: "}
              {me.pets ? (
                me.pets.map((pet, ind) => (
                  <Typography component="span" key={ind}>
                    {ind < me.pets.length - 1 ? `${pet}, ` : `${pet}.`}
                  </Typography>
                ))
              ) : (
                <Typography component="span">No pets</Typography>
              )}
            </div>
            <div>
              {"Children: "}
              {me.children ? (
                me.children.map((kid, ind) => (
                  <Typography component="span" key={ind}>
                    {ind < me.children.length - 1 ? `${kid}, ` : `${kid}.`}
                  </Typography>
                ))
              ) : (
                <Typography component="span">No children</Typography>
              )}
            </div>
            <Typography>Address: {me.address} </Typography>
            <Typography>Gender: {me.gender}</Typography>
            <Typography variant="h6">Dietary Preferences</Typography>
            <div>
              {me.dietaryPreferences ? (
                me.dietaryPreferences.map((pref, ind) => (
                  <Typography key={ind}>
                    {ind < me.dietaryPreferences.length - 1
                      ? `${pref}, `
                      : `${pref}.`}
                  </Typography>
                ))
              ) : (
                <Typography> No dietary preferences</Typography>
              )}
            </div>
          </div>
          <div>
            <div className={styleClasses["bottom-header-container"]}>
              <Typography variant="h6">My Events</Typography>

              <Button onClick={toggleShowAll}>
                {showAll ? "Show less" : "Show all"}
              </Button>
            </div>
            {myList ? (
              sortList(myList).map(
                (event, ind) =>
                  (showAll || ind < 3) && (
                    <AccountEventCard event={event} key={ind} />
                  )
              )
            ) : (
              <Typography>No created events</Typography>
            )}
          </div>
        </section>
      </Drawer>
    </div>
  );
}