Components

PushForm

Screenshot 2023-10-03 at 8.42.51 PM.png

Props

State Hooks:

notificationTitle: default value "".
notificationBody: default value "".
articleUrl: default value "".
success: default value null.
urlError: default value false.
displayButton: default value true.

Local Variables:

const user from useAuthContext()
const isUserAuthorized form useAuthContext()
const logout from useAuthContext()

Local Functions:

`const sendNotification`

sendNotification is an asynchronous member function of PushForm that processes the input data and tries to make a POST request to the push notification API. It tries to access endpoint /api/push, then sets displayButton and success as true. If there is an error in the process, it will log the error to the console and set success to false, as well as redisplay the button if the error was because of status 400 (indicating article not found).

Source Code:

Purpose:

The PushForm component renders the form where the user can input the push notification title, the body text, and the article URL. It gathers the input and uses sendNotification to call the API. If user is authorized, it displays the form. If user is not authorized, it will not render the form.

Source Code

return (
    <form
      onSubmit={sendNotification}
      style={{
        marginBottom: "25px",
        width: "min(90vw, 675px)",
        margin: "auto",
        padding: "40px",
      }}
    >
      <span
        style={{
          display: "flex",
          flexDirection: "row",
          alignItems: "center",
          width: "100%",
        }}
      >
        <Typography>Logged in as {user}</Typography>
        <Button
          variant="contained"
          color="primary"
          onClick={logout}
          style={{ marginLeft: "auto" }}
        >
          Logout
        </Button>
      </span>
      <br />
      {isUserAuthorized ? (
        <>
          <Typography>Send a notification here!</Typography>
          <FormControl fullWidth margin="normal">
            <br />
            <TextField
              type="text"
              id="title"
              name="title"
              variant="outlined"
              label="Notification Title"
              onChange={(e) => setNotificationTitle(e.target.value)}
              value={notificationTitle}
              inputProps={{ maxLength: 50 }}
              sx={{ margin: "10px 0" }}
              required
            />
            <br />
            <TextField
              type="text"
              id="article url"
              name="Article URL"
              variant="outlined"
              label="Article URL"
              onChange={(e) => setArticleUrl(e.target.value)}
              value={articleUrl}
              inputProps={{ maxLength: 200 }}
            />
            <FormHelperText id="article url">
              Double check to make sure your article URL is correct!
            </FormHelperText>
            <br />
            <TextField
              type="text"
              multiline
              rows={5}
              id="body"
              name="body"
              variant="outlined"
              label="Notification Body"
              onChange={(e) => setNotificationBody(e.target.value)}
              value={notificationBody}
              inputProps={{ maxLength: 500 }}
              sx={{ margin: "10px 0" }}
              required
            />
            <br />
            <div
              style={{
                display: "flex",
                flexDirection: "row-reverse",
              }}
            >
              {displayButton ? (
                <Button
                  type="submit"
                  variant="contained"
                  color="primary"
                  sx={{
                    margin: "15px 5px",
                    borderRadius: "5px",
                  }}
                >
                  Submit
                </Button>
              ) : (
                <CircularProgress />
              )}
            </div>
          </FormControl>
        </>
      ) : (
        <Typography>User not authed</Typography>
      )}
      {success === false && urlError === true && (
        <Alert
          severity="error"
          variant="outlined"
          className="err-msg"
          sx={{ mb: 2 }}
          onClose={() => {
            setSuccess(null);
            setUrlError(false);
          }}
        >
          Could not find a corresponding article. Please double-check your URL!
        </Alert>
      )}
      {success === false && urlError === false && (
        <Alert
          severity="error"
          variant="outlined"
          className="err-msg"
          sx={{ mb: 2 }}
          onClose={() => {
            setSuccess(null);
            setUrlError(false);
          }}
        >
          There was an error sending notifications.
        </Alert>
      )}
      {success === true && (
        <Alert
          severity="success"
          variant="outlined"
          className="err-msg"
          sx={{ mb: 2 }}
          onClose={() => setSuccess(null)}
        >
          Successfully sent push notifications!
        </Alert>
      )}
    </form>
  );
};