I had a terrible time sleeping last night. I was on the couch until 530am, on and off the computer, looking at posts on linkedIn, checking out you tube videos about typescript, react, and random stuff. Honestly, I'm stressing out about my future again (Will I ever get a job doing this stuff, am I good enough, am I too old?....blah blah blah). During my time with Codeimmersives, things were cool because I had a given structure to follow, a certain time to check in and make sure tasks/assignments were completed. Now that I'm on my own, it's a bit strange to not have a list of things to do daily for someone else other than myself. There have been days where I haven't even applied for any jobs and simply focused on data structures or some new algo-challenge on leet code.

Today is a day where most people put things aside to hang out and watch the game (Super bowl). Even though football isn't part of my leisure time normally, I plan on cooking some food with the family and watching the game. But before I do, let's see what changes I can make to my current full-stack (MERN) project, the ticket-tracker.

Change the guest login credentials

I wasn't thrilled with the idea of when guests signed in with the guest login, the name shown on the dashboard was 'Johnny' so I actually changed the name to 'Guest User'. (onClick={handleGuestSignIn}) See below for the function 'handleGuestSignIn' I would think that storing a username and password in the frontend of an application is normally a no-go, however, this is the only option I came up with to add a guest log in feature. (This comes in handy for others to quickly check your app out - with out setting up an account)

  const handleGuestSignIn = (event) => {
    event.preventDefault();

    // eslint-disable-next-line no-console
    const userObj = {
      email: 'guest@gmail.com',
      password: 'Apple251#',
    };

    dispatch(login(userObj));
  };

Clearing input fields after dispatching actions to the backend.

In order to clear the inputs, I had to first set the value of the inputs to the variable I use with reacts hook useState to hold the value with the onChange event. See below for he examples.

      <Grid item sx={{ mb: 2 }}>
        <TextField
          required
          fullWidth
          name='Description'
          label='Description'
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          autoFocus
        />
      </Grid>

After this is set up, I simply call setDescription('') to an empty string after dispatching the upload file action at the end of the function. See Below.

  const handleUpload = async () => {

    if (description === null) {
      dispatch({
        type: SET_ALERT,
        payload: {
          isOpen: true,
          alertMessage: 'Please provide a description',
          typeOfMessage: 'error',
        },
      });
      return;
    }
    if (selectedFile === null) {
      dispatch({
        type: SET_ALERT,
        payload: {
          isOpen: true,
          alertMessage: 'Please select a file to upload',
          typeOfMessage: 'error',
        },
      });
      return;
    }

    for (let attachment of attachments) {
      if (attachment.fileName === selectedFile[0].name) {
        dispatch({
          type: SET_ALERT,
          payload: {
            isOpen: true,
            alertMessage: 'File name already exist',
            typeOfMessage: 'error',
          },
        });
        return;
      }
    }

    if (description === null) {
      dispatch({
        type: SET_ALERT,
        payload: {
          isOpen: true,
          alertMessage: 'Description cannot be empty',
          typeOfMessage: 'error',
        },
      });
      return;
    }

    await dispatch(
      UploadFileAndAttachToTicket(selectedFile[0], description, params.ticketId)
    );
    dispatch(getAllAttachmentsByTicket(params.ticketId));
    setDescription('')
  };

There were two inputs that needed to be cleared, the other I handled with a call back function that was passed to my action dispatched. (Redux)

Pull more information about the ticket to dynamically load on the ticket details page.

First things first, I check my backend express app for the proper route to retrieve all the information I need for a ticket; the title, description, etc.

const getTicket = async (req, res, next) => {
  const ticket_id = req.params.id;
  try {
    let payload = await Ticket.findOne({ _id: ticket_id })
    res.json(payload);
  } catch (e) {
    next(e);
  }
};

The route checks out fine using postman. Using useEffect hook, I am able to dispatch the different actions to call my API and for now I am using a console.log() to ensure I have the data available.

  useEffect(() => {
    dispatch(getTicketByTicketId(params.ticketId));
    dispatch(getAllCommentsByTicket(params.ticketId));
  }, [dispatch, params.ticketId]);

  const { comments } = useSelector((state) => state.tickets);
  const { ticket } = useSelector((state) => state.tickets);

console.log(ticket)

Now, to implement it when component mounts using the useEffect hook. .....second thought I have a few things that don't look right in my state management with redux and chrome dev tools. You find out things that need to be refactored once your deep into it at times :) It's not been a very productive day for me. There's always tomorrow, in this instance I think it would be best to start with a fresh brain and some sleep.