3.19.22

IT-Logger App issue

Author Greg Petropoulos

Problem Statement:

When the authenticated user hovers over the FAB the black edit button appears and is clicked on to show the modal and make a selection of a log to edit.

1. When the log is selected the modal closes and must be reopen manually to see the log selected.

2. If the user decides to choose another log the selected log doesn’t not change.

3. I am unable to deduce if the materialize library is causing the issue or poor usage of useEffect with React.

Device:

macOS Big Sur Version 11.4, MacBook Pro (13-inch, M1, 2020)

Browser:

Google Chrome Version 97.0.4692.99 (Official Build) (arm64)

Creds:

User is smith@gmail.com

Password is password

Expected Outcome:

An authenticated user hovers over the FAB and clicks on the black edit button and a modal opens. The user selects the log they want to edit and if its’s not the desired log then the user can select a different log to edit. Once the log to edit is selected the user can make an edit in the text field and submit the change. The modal will close after submission

Actual Outcome:

An authenticated users hovers over the FAB and clicks on the black edit button, edit modal opens and the user selects a log and the modal closes. The user must open up the modal again to see the selected log and then the modal remains open for editing and submission. If the user changes their mind and wants to select a different log to edit the there is no change to the UI.

Unsuccessful attempts solve the issue

• I tried to move the html order thinking the order mattered

• Applied the onClick handler with e.stopPropogation

• Applied the onClick handler with e.stopImmediatePropogation

• Changed the value

• Changed the useEffect

• Changed the structure of logged to an array and object

Successful Attempts

I was able to hardcode the select tag and option to make it function although no state was applied and this would not be solution with a undetermined array of logs at any given time

Notes:

This application is composite of the it-logger and contact-keeper. I migrated everything to redux and built a backend (no jsonwebserver). I am using local state to handle ui changes and form submissions along with redux when applicable. I am updated to the react router dom v6.

See the links for GitHub repo and deployed website

Github:https: //github.com/GregPetropoulos/IT-Logger-App

Image of homepage

Image of modal with drop down select

Website: https://it-loggerv1.herokuapp.com/

smith@gmail.com

password=password

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from 'react';
import M from 'materialize-css/dist/js/materialize.min.js';
import 'materialize-css/dist/css/materialize.min.css';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { updateLog } from '../../actions/logActions';
import { setCurrent } from '../../actions/logActions';
import Preloader from '../layout/Preloader';
import formatDate from '../../utils/formatDate';
 
const EditTechLogModal = ({
  setCurrent,
  log: { logs, loading, current },
  updateLog,
  auth: { tech }
}) => {
  // LOCAL STATE UPDATES CURRENT
  const [logged, setLogged] = useState('');
  const [message, setMessage] = useState('');
  const [attention, setAttention] = useState(false);
 
  // When click on the log it renders the current info via local state set to backend server info because of connect and mapStateTopProps
  console.log('logged', logged);
  console.log('logged true', logged === true);
  console.log('logged null', logged === null);
  console.log('logged ""', logged === '');
  console.log('logged typeof', typeof logged);
  // console.log('log loading', loading);
  // console.log('tech', tech);
  console.log('logs', logs);
  console.log('current', current);
  console.log('current type of', typeof current);
  console.log('message', message);
  console.log('setCurrent', setCurrent);
 
  console.log(' attention', attention);
  useEffect(() => {
    M.AutoInit();
  }, []);
 
  useEffect(() => {
    console.log('useEffect for setCurrent in edit tech');
 
    setCurrent(logged);
  }, [logged]);
 
  useEffect(() => {
    console.log('useEffect for setMessage and setAttention in edit tech');
    if (current) {
      setMessage(current.message);
      setAttention(current.attention);
    }
  }, [current]);
 
  const onChange = (e) => {
    const idValue = e.target.value;
    console.log('idvalue', idValue);
    if (onChange) {
      let isMatch = logs.filter((log) => log._id === idValue);
      console.log('ismATCH type', typeof isMatch);
      console.log('ismATCH', isMatch);
      setLogged(...isMatch);
    }
    //   if (e.target === e.currentTarget) {
    //     e.stopPropagation();
    // }
  };
 
  const onSubmit = (e) => {
    e.preventDefault();
    // logged===null
    if (message === '') {
      M.toast({ html: 'Please enter a message' });
    } else {
      // * SET UP AN OBJECT
      const updLog = {
        id: current._id,
        message,
        attention,
        tech: current.tech._id,
        date: new Date()
      };
      // * CALL THE updateLog ACTION/PROP AND PASS IN updLog
      updateLog(updLog);
      M.toast({ html: `Log updated by ${tech.firstName}` });
      console.log('updloG', updLog);
    }
 
    // Clear fields
    setMessage('');
    setLogged('');
    setAttention(false);
  };
 
  // if (logs === null) {
  //   console.log('preload');
  //   return <Preloader />;
  // }
  console.log('EDIT-LOG-CHECK');
 
  return (
    <div id='edit-log-modal' className='modal' style={modalStyle}>
      <div className='modal-content'>
        <h4>Edit System Logs</h4>
        {tech !== null && (
          <div className=''>
            {tech.firstName} {tech.lastName}
            <p>Tech ID# {tech._id}</p>
          </div>
        )}
        {logs !== null && (
          <div className='row'>
            <p className='title'>Choose an existing Log</p>
            <div
              // onSelect={(e) => e.stopPropagation()}
 
              className='input-field'>
              <select
                className='browser-default wrapper'
                onChange={onChange}
                value={logged}>
                <option value='' disabled>
                  Select Log
                </option>
 
                {logs.map(
                  (optionLog) =>
                    optionLog.tech._id === tech._id && (
                      <option
                        key={optionLog._id}
                        multiple={true}
                        value={`${optionLog._id}`}>
                        Log ID#: {optionLog._id}
                        Logged Date: {formatDate(optionLog.date)}
                      </option>
                    )
                )}
              </select>
            </div>
          </div>
        )}
        <div className='row'>
          <div className='input-field'>
            Message:
            <textarea
              type='textarea'
              name='message'
              value={message}
              onChange={(e) => setMessage(e.target.value)}
            />
          </div>
        </div>
        <div className='row'>
          <div className='input-field'>
            <p>
              <label>
                <input
                  type='checkbox'
                  className='filled-in'
                  checked={attention}
                  value={attention}
                  onChange={(e) => setAttention(!attention)}></input>
 
                <span>Needs Attention</span>
              </label>
            </p>
          </div>
        </div>
      </div>
      <div className='modal-footer'>
        <a
          href='#!'
          onClick={onSubmit}
          className='modal-close waves-effect blue btn'>
          Enter
        </a>
      </div>
    </div>
  );
};
 
const modalStyle = {
  width: '75%',
  height: '75%'
};
 
EditTechLogModal.propTypes = {
  // current: PropTypes.object.isRequired,
  updateLog: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired
};
 
const mapStateToProps = (state) => ({
  log: state.log,
  auth: state.auth
});
 
export default connect(mapStateToProps, { setCurrent, updateLog })(
  EditTechLogModal
);

This is my first stack overflow post. I appreciate all helpful efforts. Thank you for reading and your time!